// Quiz interaction variants function QuizFrame({ subject, title, eyebrow, progress, current, total, children, footer, onExit }) { const s = subjectBy(subject); return (
{s.short.toUpperCase()} · {eyebrow}
{current} / {total} {onExit && }
{Array.from({ length: total }).map((_, i) => (
))}
{title}
{children}
{footer}
); } // ── Deck resolver ───────────────────────────────────────────────────────────── function resolveDeck(deckId) { // Subject-based study set built from notes if (deckId && deckId.startsWith("subject-")) { const subjectId = deckId.slice(8); const notes = [...(notesForSubject ? notesForSubject(subjectId) : []), ...(nbGetNotes ? nbGetNotes(subjectId) : [])]; const cards = notes.map(n => { const body = n.excerpt || (n.blocks && n.blocks.map(b => b.text).filter(t => t && t.trim()).join(" ")) || ""; return { front: n.title || "Untitled", back: body.slice(0, 300) || n.title || "Untitled" }; }).filter(c => c.front && c.front.trim()); return { id: deckId, subject: subjectId, title: (subjectBy(subjectId).name || "Notes") + " — Topics", cards: cards.length > 0 ? cards : [{ front: "No notes yet", back: "Add notes to this subject first, then come back to study." }], }; } // Flashcard deck lookup let deck = deckBy(deckId); if (!deck) { const custom = nbGetCustomDecks().find(d => d.id === deckId); if (custom) { deck = { ...custom, cards: custom.cards.map(c => ({ front: c.front || c.q || "?", back: c.back || c.a || "?" })) }; } } if (!deck) deck = deckBy("bio-respiration") || Object.values(DECKS)[0]; return deck; } // ── Flashcard flip ──────────────────────────────────────────────────────────── function FlashcardQuiz({ deckId = "bio-respiration", onExit }) { const deck = resolveDeck(deckId); const cards = deck.cards; const [idx, setIdx] = React.useState(0); const [flipped, setFlipped] = React.useState(false); const card = cards[idx]; React.useEffect(() => { const onKey = (e) => { if (e.code === "Space") { e.preventDefault(); setFlipped(f => !f); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); const next = () => { setFlipped(false); setTimeout(() => setIdx(i => (i + 1) % cards.length), 200); }; return ( {["Again","Hard","Good","Easy"].map((lbl, i) => ( ))} ) : ( )} >
setFlipped(f => !f)} style={{ perspective: 1400, cursor: "pointer", height: 260 }}>
Term
{card.front}
Definition
{card.back}
 ); } // ── MCQ — auto-generated from any deck ─────────────────────────────────────── function MCQQuiz({ deckId = "alg2-trig", onExit }) { const deck = resolveDeck(deckId); const questions = React.useMemo(() => { const cards = [...deck.cards]; return cards.map((card, i) => { const pool = cards.filter((_, j) => j !== i); const wrongs = pool.sort(() => 0.5 - Math.random()).slice(0, 3).map(c => c.back); const choices = [...wrongs, card.back].sort(() => 0.5 - Math.random()); return { q: card.front, choices, correct: choices.indexOf(card.back), explain: card.back }; }); }, [deckId]); const [idx, setIdx] = React.useState(0); const [picked, setPicked] = React.useState(null); const q = questions[idx]; const submitted = picked !== null; React.useEffect(() => { const onKey = (e) => { const i = ["a","b","c","d"].indexOf(e.key.toLowerCase()); if (i >= 0 && !submitted) setPicked(i); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [submitted]); const next = () => { setPicked(null); setIdx(i => (i + 1) % questions.length); }; return ( {submitted ? : Press A · B · C · D} } >
{q.choices.map((c, i) => { const isCorrect = submitted && i === q.correct; const isWrong = submitted && i === picked && i !== q.correct; return ( ); })}
{submitted && (
{picked === q.correct ? "✓ Correct" : "✕ Not quite"} · answer
{q.explain}
)} ); } // ── Type the answer — dynamic from any deck ─────────────────────────────────── function TypeAnswerQuiz({ deckId = "esp-u6", onExit }) { const deck = resolveDeck(deckId); const cards = deck.cards; const [idx, setIdx] = React.useState(0); const [value, setValue] = React.useState(""); const [state, setState] = React.useState("idle"); const card = cards[idx]; const submit = () => { const correct = card.back.toLowerCase().trim(); const answer = value.toLowerCase().trim(); setState(answer === correct || correct.split("/").map(s => s.trim()).includes(answer) ? "correct" : "wrong"); }; const next = () => { setIdx(i => (i + 1) % cards.length); setValue(""); setState("idle"); }; return ( {state === "idle" ? : } } >
{card.front}
{subjectBy(deck.subject).short}
{ setValue(e.target.value); if (state !== "idle") setState("idle"); }} onKeyDown={e => { if (e.key === "Enter") state === "idle" ? submit() : next(); }} placeholder="type here…" style={{ width: "100%", border: 0, borderBottom: "2px solid " + (state === "correct" ? "var(--done)" : state === "wrong" ? "var(--accent)" : "var(--ink)"), background: "transparent", outline: "none", padding: "12px 4px", fontFamily: "var(--f-display)", fontSize: 36, color: "var(--ink)", textAlign: "center" }} /> {state === "correct" &&
✓ correct
} {state === "wrong" && (
Answer
{card.back}
)}
); } // ── True / False ────────────────────────────────────────────────────────────── function TrueFalseQuiz({ deckId = "bio-respiration", onExit }) { const deck = resolveDeck(deckId); const questions = React.useMemo(() => { const cards = [...deck.cards]; return cards.map((card, i) => { const isTrue = i % 2 === 0; const wrongCard = cards[(i + 1) % cards.length]; return { term: card.front, definition: isTrue ? card.back : wrongCard.back, correct: isTrue, correctDef: card.back }; }); }, [deckId]); const [idx, setIdx] = React.useState(0); const [picked, setPicked] = React.useState(null); const q = questions[idx]; const submitted = picked !== null; const isRight = submitted && (picked === "true") === q.correct; React.useEffect(() => { const onKey = (e) => { if (submitted) return; if (e.key === "t" || e.key === "ArrowRight") setPicked("true"); if (e.key === "f" || e.key === "ArrowLeft") setPicked("false"); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [submitted]); const next = () => { setPicked(null); setIdx(i => (i + 1) % questions.length); }; return ( Next → :
Press T = True · F = False
} >
{q.term}
{q.definition}
{!submitted ? (
) : (
{isRight ? "✓ Correct" : "✕ Wrong"} · the real definition
{q.correctDef}
)} ); } // ── Key Concepts — study reference sheet ───────────────────────────────────── function KeyConceptsStudy({ deckId = "bio-respiration", onExit }) { const deck = resolveDeck(deckId); const [revealed, setRevealed] = React.useState(new Set()); const toggleAll = () => { if (revealed.size === deck.cards.length) setRevealed(new Set()); else setRevealed(new Set(deck.cards.map((_, i) => i))); }; return (
{subjectBy(deck.subject).short} · Key Concepts
{deck.title}
{onExit && }
{deck.cards.map((card, i) => (
setRevealed(r => { const n = new Set(r); r.has(i) ? n.delete(i) : n.add(i); return n; })} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, padding: "14px 16px", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 6, cursor: "pointer", transition: "border-color 0.15s" }}>
{card.front}
{card.back}
))}
Click any row to reveal · {revealed.size} / {deck.cards.length} revealed
); } // ── Written recall — see term, write what you know freely ───────────────────── function WrittenRecallQuiz({ deckId = "bio-respiration", onExit }) { const deck = resolveDeck(deckId); const [idx, setIdx] = React.useState(0); const [value, setValue] = React.useState(""); const [revealed, setRevealed] = React.useState(false); const card = deck.cards[idx]; const next = () => { setIdx(i => (i + 1) % deck.cards.length); setValue(""); setRevealed(false); }; return ( setRevealed(true)} style={{ width: "100%", justifyContent: "center", padding: "12px 0" }}>Reveal answer : (
) } >
{card.front}