// exercises.jsx — exercise body renderers. // Each receives { theme, mascotOn, ex, picked, setPicked, feedback, setExternal }. // `setExternal({ pickedValue, answerValue })` lets exercises with free input feed the grader. // Pretty pinyin "audio" button — triggers TTS for the underlying CN/pinyin string. function PlayPinyin({ theme, text, size = 88, label = 'TAP TO HEAR' }) { const [playing, setPlaying] = React.useState(false); const onTap = () => { primeSpeech(); speakZh(text, { onend: () => setPlaying(false), onerror: () => setPlaying(false) }); setPlaying(true); }; return (
{label}
); } // ─── Exercise: intro ──────────────────────────────────────── function ExIntro({ theme, mascotOn, ex }) { return (
{mascotOn && } {ex.title}
{ex.body}
{ex.tones && (
{ex.tones.map((t, i) => ( ))}
)} {ex.cards && (
{ex.cards.map((card, i) => ( ))}
)}
); } // ─── Exercise: tone ───────────────────────────────────────── function ExTone({ theme, ex, picked, setPicked, feedback }) { return (
{ex.prompt} {ex.audio && (
)}
{ex.options.map((opt, i) => { const isPicked = picked === i; const right = feedback === 'right' && isPicked; const wrong = feedback === 'wrong' && isPicked; return ( ); })}
); } // ─── Exercise: pick-listen ────────────────────────────────── function ExPickListen({ theme, ex, picked, setPicked, feedback }) { // Auto-play once on mount, then user can tap to replay. React.useEffect(() => { const t = setTimeout(() => { primeSpeech(); speakZh(ex.heard); }, 250); return () => clearTimeout(t); // eslint-disable-next-line }, [ex.heard]); return (
{ex.prompt}
{ex.options.map((opt, i) => { const isPicked = picked === i; const right = feedback === 'right' && isPicked; const wrong = feedback === 'wrong' && isPicked; return ( ); })}
); } // ─── Exercise: pick-initial / pick-final ──────────────────── function ExPickPart({ theme, ex, picked, setPicked, feedback }) { const highlight = ex.initial || ex.final; return (
{ex.prompt}
{highlight}
{ex.options.map((opt, i) => { const isPicked = picked === i; const right = feedback === 'right' && isPicked; const wrong = feedback === 'wrong' && isPicked; return ( ); })}
); } // ─── Exercise: match-tone (display only) ──────────────────── function ExMatchTone({ theme, ex }) { return (
{ex.prompt}
{ex.pairs.map((p, i) => (
{p.meaning}
))}
); } // ─── Exercise: match-meaning (CN/pinyin → English) ────────── function ExMatchMeaning({ theme, ex, picked, setPicked, feedback }) { return (
{ex.prompt}
{ex.options.map((opt, i) => { const isPicked = picked === i; const right = feedback === 'right' && isPicked; const wrong = feedback === 'wrong' && isPicked; return ( ); })}
); } // ─── Exercise: pick-cn (English → CN) ─────────────────────── // If `ex.context` is provided (an array of {cn, py, en, speaker}), renders it // as a multi-line dialogue card above the prompt — this powers `dialogue-complete`. function ExPickCN({ theme, ex, picked, setPicked, feedback }) { return (
{ex.prompt} {ex.context && ( {ex.context.map((line, i) => (
{line.speaker && (
{line.speaker}
)}
))} )}
“{ex.en}”
{ex.options.map((opt, i) => { const isPicked = picked === i; const right = feedback === 'right' && isPicked; const wrong = feedback === 'wrong' && isPicked; return ( ); })}
); } // ─── Exercise: type-pinyin ────────────────────────────────── function ExTypePinyin({ theme, ex, picked, setPicked, feedback }) { // We use the 'picked' slot to hold the typed string. Grader normalizes both. React.useEffect(() => { if (picked == null) setPicked(''); // eslint-disable-next-line }, []); return (
{ex.prompt} setPicked(e.target.value)} placeholder="type pinyin… (e.g. nihao)" style={{ fontFamily: theme.fontPinyin, fontSize: 22, fontWeight: 700, padding: '14px 16px', background: theme.surface, color: theme.fg, border: `2.5px solid ${feedback === 'right' ? theme.green : feedback === 'wrong' ? theme.red : theme.fg}`, borderRadius: theme.radius, outline: 'none', boxShadow: `0 3px 0 0 ${theme.fg}`, letterSpacing: 0, }} /> {feedback === 'wrong' && (
Correct: {ex.alts?.[0] || ex.answer}
)}
); } // ─── Exercise: speak ──────────────────────────────────────── function ExSpeak({ theme, ex }) { const [recording, setRecording] = React.useState(false); const tone = ex.tone ?? inferTone(ex.py || ex.word); return (
{ex.prompt}
{recording ? 'LISTENING…' : 'HOLD TO SPEAK · BETA'}
); } // ─── Exercise: arrange (word-order drill) ────────────────── // Show scrambled word chips. Learner taps them in order to build the sentence. // `ex.words` = ['我', '叫', '明文'] (correct order) // `ex.scrambled` (optional) — fixed scramble order for stable rendering. If // omitted, the lesson data should list them in the order to display. // `ex.translation` = English meaning shown above the chips. function ExArrange({ theme, ex, picked, setPicked, feedback }) { // picked is the array of indexes (into ex.scrambled || ex.words) the learner has tapped. const display = ex.scrambled || ex.words; const chosen = Array.isArray(picked) ? picked : []; // Build the current sentence from chosen indexes. const currentWords = chosen.map((i) => display[i]); // Available = those not yet picked. const available = display .map((w, i) => ({ word: w, idx: i })) .filter(({ idx }) => !chosen.includes(idx)); const tap = (idx) => { if (feedback) return; setPicked([...chosen, idx]); }; const undo = (i) => { if (feedback) return; const next = [...chosen]; next.splice(i, 1); setPicked(next); }; const clear = () => { if (!feedback) setPicked([]); }; return (
{ex.prompt || 'Put the words in order'} {ex.translation && (
“{ex.translation}”
)} {/* Drop zone — what the learner has built so far */}
{chosen.length === 0 && (
tap chips below to build the sentence…
)} {chosen.map((idx, i) => ( ))}
{/* Source chips */}
{available.map(({ word, idx }) => ( ))} {available.length === 0 && chosen.length > 0 && !feedback && (
(tap a chip above to put it back)
)}
{chosen.length > 0 && !feedback && ( )} {feedback === 'wrong' && (
Correct: {ex.words.join('')}
)}
); } // ─── Exercise: true-false ─────────────────────────────────── function ExTrueFalse({ theme, ex, picked, setPicked, feedback }) { const ans = ex.same ? 0 : 1; // Inject hidden answer on first render. React.useEffect(() => { if (ex.answer == null) ex.answer = ans; }, [ans, ex]); return (
{ex.prompt} {[ex.a, ex.b].map((w, i) => (
{w}
))}
VS
{[{ label: 'SAME', val: 0 }, { label: 'DIFFERENT', val: 1 }].map((b) => { const isPicked = picked === b.val; const right = feedback === 'right' && isPicked; const wrong = feedback === 'wrong' && isPicked; return ( ); })}
); } // ─── Exercise: ai-translate ───────────────────────────────── // AI grades the translation. Stores result in `picked`: // null = not graded yet // true = correct (sets feedback='right') // false = wrong (sets feedback='wrong') // The grader is invoked by clicking the CHECK button (see player wiring). function ExAITranslate({ theme, ex, picked, setPicked, feedback, externalState, setExternal }) { const [text, setText] = React.useState(externalState?.text || ''); const grading = externalState?.grading; const result = externalState?.result; React.useEffect(() => { setExternal?.({ ...externalState, text }); if (text.trim()) setPicked(text); else setPicked(null); // eslint-disable-next-line }, [text]); return (
{ex.prompt}
“{ex.en}”
AI-GRADED · OPENROUTER