Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jonathino2590/mi-app-numeros/llms.txt

Use this file to discover all available pages before exploring further.

Learn Mode is the core exploration screen of Mi App Números. When a child starts a session from the main menu, they are taken into Learn Mode where each number is presented as a large, bold numeral paired with its Spanish name and a lively grid of animated emoji objects — one emoji for every unit of the number. This screen is designed to build a concrete understanding of quantity before any quiz or tracing exercise begins.

​
Session Types

From the main menu, learners can choose between two session styles that control how Learn Mode advances through the numbers:
  • Paso a Paso — walks through the numbers in strict order from 1 to 11. When the last number is reached and the learner taps Siguiente, the app returns to the main menu.
  • Modo Aleatorio — picks the next number at random from the full dataset of 11 entries. This keeps more advanced learners on their toes and prevents memorisation by position.
Both options call the same startLearning function, passing the chosen mode as an argument: 
const startLearning = (mode) => {
  setGameMode(mode);   // 'linear' or 'random'
  setCurrentIndex(0);
  setView('learn');
};

​
What the Screen Shows

Every Learn Mode card contains three visual layers stacked vertically:
  1. The numeral — rendered at text-9xl font-black in dark gray, making the digit large enough for small children to read at a glance.
  2. The Spanish word — rendered at text-4xl font-bold in blue, displayed in uppercase with wide letter spacing (tracking-widest) to improve legibility.
  3. The animated emoji grid — a row of emoji objects, one per unit, that pop onto the screen with a Framer Motion spring animation. Each emoji animates in individually with a staggered delay of i * 0.1 seconds, giving the grid a playful cascading entrance:
{Array.from({ length: data.val }).map((_, i) => (
  <motion.div
    key={i}
    initial={{ scale: 0 }}
    animate={{ scale: 1 }}
    transition={{ delay: i * 0.1, type: 'spring' }}
    className="text-6xl"
  >
    {data.emoji}
  </motion.div>
))}
The combination of a large numeral, its spoken name, and a countable set of objects gives children three simultaneous representations of the same quantity. Three action buttons sit at the bottom of the Learn Mode screen, giving children immediate paths forward:
ButtonDestinationPurpose
Escribir (PenTool icon)Writing ModeTrace the numeral on the canvas
Practicar (Hash icon)Practice ModeTake a multiple-choice counting quiz
Siguiente (ArrowRight icon)Next numberAdvance without completing an activity
Tapping Siguiente calls nextNumber(), which either picks a random index (Modo Aleatorio) or increments currentIndex by one (Paso a Paso). Tapping Escribir or Practicar simply sets the view state to 'write' or 'practice' respectively, keeping the same currentIndex so both sub-modes operate on the number currently being studied.

​
Number Data Reference

The full dataset used by Learn Mode is defined in NUMBERS_DATA. Each entry carries a numeric value, Spanish word, representative emoji, and a Tailwind color class used for UI accents.
NumberSpanish WordEmoji
1Uno🍎
2Dos🚲
3Tres⭐
4Cuatro🐶
5Cinco🎈
6Seis🍦
7Siete🌈
8Ocho🚀
9Nueve🐱
10Diez⚽
11Once🦆
Start every new learner with Paso a Paso so they build familiarity with all 11 numbers in sequence. Once they can recognise each number confidently, switch to Modo Aleatorio to reinforce recall without relying on the predictable 1-to-11 order.

Build docs developers (and LLMs) love

Get started for freeTalk to us