{flipped ? 'BACK' : 'FRONT'} · CLICK CARD OR PRESS{' '} SPACE {' '}TO FLIP

{flipped ? (

{card.back}

) : (

{card.front}

)}

{/* Bar zone — empty for Classic, reserved for layout consistency */}

{flipped ? (

{RATING_BTNS.map((b) => (

{b.label} {b.kbd}

{b.hint}

))}

) : (

Show answer

)}

); }; /* ============================================================ Typed Quiz ============================================================ */ const TYPED_FRONT = 'What is the powerhouse of the cell?'; const TYPED_ANSWER = 'Mitochondria'; const TypedMode = ({ onDone }) => { const [typed, setTyped] = useSMSt(''); const [phase, setPhase] = useSMSt('idle'); useSMEf(() => { // Phase 1: idle 1s, Phase 2: type chars over 1s, Phase 3: correct 1s const perChar = Math.floor(1000 / TYPED_ANSWER.length); const timers = []; TYPED_ANSWER.split('').forEach((_, i) => { timers.push(setTimeout(() => { setTyped(TYPED_ANSWER.slice(0, i + 1)); if (i === 0) setPhase('typing'); }, 1000 + i * perChar)); }); timers.push(setTimeout(() => setPhase('correct'), 2000)); timers.push(setTimeout(onDone, 4000)); return () => timers.forEach(clearTimeout); }, []); return (

Type Your Answer

{TYPED_FRONT}

{typed} {phase === 'typing' && ( )}

{phase === 'correct' && (

Correct

)} {phase !== 'correct' && (

Press Enter to check

)} {/* Bar zone — empty for Type, reserved for layout consistency */}

); }; /* ============================================================ Speed Round ============================================================ */ const SPEED_CARDS = ['What is the powerhouse of the cell?', 'What planet is closest to the sun?', 'What is H2O commonly known as?']; const SPEED_ANSWERS = ['Mitochondria', 'Mercury', 'Water']; const SpeedMode = ({ onDone }) => { const [timer, setTimer] = useSMSt(4); const [bouncing, setBouncing] = useSMSt(false); const [revealed, setRevealed] = useSMSt(false); useSMEf(() => { // Phase 1: count 4→0 (4s), Phase 2: bounce 300ms, Phase 3: fadeIn reveal + hold 2s const t1 = setTimeout(() => setTimer(3), 1000); const t2 = setTimeout(() => setTimer(2), 2000); const t3 = setTimeout(() => setTimer(1), 3000); const t4 = setTimeout(() => { setTimer(0); setBouncing(true); }, 4000); const t5 = setTimeout(() => { setBouncing(false); setRevealed(true); }, 4300); const t6 = setTimeout(onDone, 6300); return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); clearTimeout(t4); clearTimeout(t5); clearTimeout(t6); }; }, []); return (

0:{String(timer).padStart(2, '0')}

{SPEED_CARDS[0]}

{revealed ? (

-> {SPEED_ANSWERS[0]}

) : (

press any key to reveal

)}

{/* Bar zone — countdown bar for Speed, consistent position with other modes */}

{!revealed && (

)}

{revealed ? (

Forgot ←

Got it →

) : null}

); }; /* ============================================================ StudyModes container - fade transition between modes ============================================================ */ const StudyModes = () => { const [active, setActive] = useSMSt('classic'); const [visible, setVisible] = useSMSt(true); const pausedUntil = useSMRef(0); const switchTo = (id) => { if (id === active) return; pausedUntil.current = Date.now() + 20000; setVisible(false); setTimeout(() => { setActive(id); setVisible(true); }, 300); }; const goNext = () => { if (Date.now() < pausedUntil.current) return; setVisible(false); setTimeout(() => { setActive((a) => { const idx = STUDY_MODES.findIndex((m) => m.id === a); return STUDY_MODES[(idx + 1) % STUDY_MODES.length].id; }); setVisible(true); }, 300); }; const mode = STUDY_MODES.find((m) => m.id === active); return (

Study modes

Three ways to lock it in.

Different cards reward different techniques. Recall ships every mode worth using and gets out of the way.

{STUDY_MODES.map((m) => { const isActive = m.id === active; return ( ); })}

{/* Preview pane - fades between modes */}

{active === 'classic' && } {active === 'typed' && } {active === 'speed' && }

{/* Description pane */}

Auto-cycling demo

{mode.label}

{active === 'classic' ? 'The fastest path to recall. See the front, reveal the answer, grade honestly. The algorithm schedules each card at exactly the right interval.' : active === 'typed' ? 'Typing forces commitment. The app matches your answer generously so a missing accent or typo will not mark you wrong. Best for languages and specific terminology.' : 'Four seconds per card. A countdown timer drives urgency. When time runs out, grade yourself: Got it or Forgot. Best for high-frequency vocab and quick drills.'}

); }; Object.assign(window, { StudyModes });