Skip to main content

​
Welcome to Your Learning Journey

This guide will walk you through accessing Sociales, selecting your grade level, and completing your first interactive lesson with a quiz.
1

Access the Platform

Navigate to the Sociales platform in your web browser. The application is deployed on GitHub Pages and accessible at:
https://didiercolo.github.io/sociales/
The landing page displays all available subjects, with Estudios Sociales currently active.
2

Select Social Studies

From the subject selection page, click on the Estudios Sociales card. You’ll see:
  • Subject name and icon (🌍)
  • Description: “Descubre la geografía, historia y cultura de Costa Rica”
  • Status badge showing “Disponible”
Other subjects (Ciencias, Matemáticas, Español) are coming soon and display “Próximamente” status.
3

Choose Your Grade Level

After selecting Social Studies, you’ll see four options:4to Grado (🗺️)
  • Focus: Geography and deep history of Costa Rica
  • Topics: Imaginary lines, coasts, mountain systems
5to Grado (🌿)
  • Focus: Modern society and environment
  • Topics: Democratic values, environmental protection
6to Grado (📜)
  • Focus: Key historical events and reforms
  • Topics: Constitutional history, social reforms
Resumen General (🎓)
  • Comprehensive MEP 2026 exam preparation
  • Integrated review of all grade levels
Click on your grade level card to continue.
4

Browse Available Lessons

Each grade level contains multiple themed lessons. For example, Grade 4 includes:
  • Lección 1: Costa Rica y su Geografía
  • Additional lessons on specific topics
Each lesson card displays:
  • Lesson title and description
  • Visual thumbnail
  • “Disponible” status badge
  • Navigation arrow
5

Start Your First Lesson

Click on any available lesson to begin. The lesson view includes:Structured Sections: Each lesson is divided into clear sections with titles like:
  • “Líneas Imaginarias”
  • “Ubicación de Costa Rica”
  • “Océanos y Continentes”
Rich Content:
  • Formatted text with headings and lists
  • Embedded YouTube videos for visual learning
  • Review questions at the end of each section
Example Section Structure:
{
  title: "1. Líneas Imaginarias",
  content: [
    "Las líneas imaginarias nos ayudan a ubicar lugares en la Tierra.",
    "<h3>Paralelos</h3><ul><li>Van de este a oeste...</li></ul>"
  ],
  videoId: "r6Mg005jCds"
}
6

Complete the Interactive Quiz

At the end of each lesson, test your knowledge with a 5-question randomized quiz.Quiz Flow:
  1. Start Screen: Click “Comenzar” to begin
  2. Question Display: Read the question and 3 multiple-choice options
  3. Answer Selection: Click your answer choice
  4. Instant Feedback:
    • ✅ Correct answers show “¡Correcto! 🎉”
    • ❌ Incorrect answers show “Incorrecto 😔”
  5. Progress Through: Click “Siguiente” to move to the next question
  6. View Results: See your score out of 5 at the end
Questions are randomly selected from a larger pool, so you can retake quizzes for additional practice.
7

Review Your Results

After completing all 5 questions, you’ll see:
  • Your final score (e.g., “3/5”)
  • Performance feedback
  • Option to restart the quiz with new randomized questions
The quiz component handles scoring automatically:
const handleOptionClick = (index) => {
  const currentQ = activeQuestions[currentQuestionIndex];
  
  if (index === currentQ.correct) {
    setScore(prev => prev + 1);
    setFeedback({ type: 'correct', text: '¡Correcto! 🎉' });
  } else {
    setFeedback({ type: 'incorrect', text: 'Incorrecto 😔' });
  }
};

​
Understanding the Quiz System

The quiz system is designed to reinforce learning through repetition and variation:

​
Randomization Algorithm

const initializeQuiz = useCallback(() => {
  if (questions && questions.length > 0) {
    const shuffled = [...questions].sort(() => 0.5 - Math.random());
    setActiveQuestions(shuffled.slice(0, 5));
  }
}, [questions]);
This ensures:
  • Each quiz attempt has different questions
  • Questions appear in random order
  • Students can practice multiple times without memorizing sequence

​
Quiz States

The quiz progresses through three distinct states:
  1. START: Initial screen with instructions
  2. ACTIVE: Question display and answer selection
  3. RESULTS: Final score and retry option

​
Header Navigation

The application header (present on all pages) provides quick access:
  • EduPortal CR logo: Returns to subject selection
  • Materias: Browse all available subjects
  • Sociales: Jump to social studies grade selection
  • Grados: Scroll to grade level cards (when applicable)
Each page includes contextual back links: 
<Link to="/" style={{...}}>
  ← Volver a Materias
</Link>

<Link to={`/grade/${gradeId}`}>
  ← Volver a Lecciones
</Link>

​
Performance Features

Sociales uses several optimization techniques for smooth performance:

​
Lazy Loading

Pages load only when needed: 
const PageLoader = () => (
  <div style={{...}}>
    <h2>Cargando... 📚</h2>
  </div>
);

<Suspense fallback={<PageLoader />}>
  <Routes>...</Routes>
</Suspense>

​
Smooth Animations

Content sections fade in progressively: 
<section 
  style={{ 
    animation: `fadeIn 0.5s ease-out ${index * 0.1}s both` 
  }}
>

​
Next Steps

Now that you’ve completed your first lesson:

Explore More Lessons

Browse additional lessons in your grade level to build comprehensive knowledge

Try Other Grades

Review content from different grade levels to strengthen understanding

Practice Quizzes

Retake quizzes multiple times to master the material

Track Progress

Monitor your quiz scores to identify areas for improvement
The platform is mobile-responsive, so you can learn on any device - desktop, tablet, or phone.

Build docs developers (and LLMs) love

Get started for freeTalk to us