@khorsheed/dsh-library 0.0.0-stage → 0.1.1

package/lib/types/client/views/quiz.js

@@ -0,0 +1,366 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The chapter quiz in the sidebar, its result, and the daily review.
+ *
+ * A quiz is answered here: choice and fill questions are judged on the spot
+ * against the answer key; open questions are collected and handed to the
+ * coach, who judges them and ledgers the whole sitting (one attempt per
+ * sitting). A sitting with no open question is ledgered from here directly.
+ * 「这题有问题」 voids a question — it counts for nothing.
+ *
+ * Review is flashcards over the due cards: front, flip, self-rate. It moves
+ * only the schedule — never a node, never weakness.
+ *
+ * @module @khorsheed/dsh-library/client/views/quiz
+ */
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { PanelHeader } from '@khorsheed/dsh-client-ui-panel-kit/src/client/index.ts';
+import { LEITNER_INTERVAL_DAYS } from "../../types.js";
+import { choiceIndex, choiceOptions, clozeOf, judgeFill, letterMarks, pickMode, spellMatches } from "../judge.js";
+import { profileOf } from "../../profiles.js";
+import { clearQuizDraft, loadQuizDraft, saveQuizDraft } from "../quiz-drafts.js";
+import { MathText, Tex } from "../math.js";
+import { Highlight, outcome, shortGloss, StateLine, useLoad, value } from "../ui.js";
+import { IconCheckOutlineMedium } from "../icons.js";
+import { IconChatOutlineMedium, IconFlagOutlineMedium } from "../icons-local.js";
+import css from '../LibraryPane.module.css';
+/** Judge a fill: a match is right; a miss is wrong only where the spelling is the point, otherwise the coach confirms. */
+function judgeFillAnswer(profile, given, key) {
+    if (judgeFill(profile.fill, given, key))
+        return { given, pass: true };
+    return profile.fill === 'spelling' ? { given, pass: false } : { given, unsure: true };
+}
+/** The quiz screen: the whole paper on one scroll — every question numbered, judged on the spot, 交卷 once all are answered. The in-progress sitting persists locally (quiz-drafts) — leaving the paper never loses an answer. */
+export function QuizView({ p, projectId, resourceId, quizId }) {
+    const { t, actions } = p;
+    const loaded = useLoad(async () => {
+        const result = await outcome(p.getAssessment(projectId, quizId));
+        return result.assessment;
+    }, [projectId, quizId]);
+    const [initialDraft] = useState(() => loadQuizDraft(quizId));
+    const [answers, setAnswers] = useState(() => ({ ...(initialDraft?.answers ?? {}) }));
+    const [drafts, setDrafts] = useState(() => ({ ...(initialDraft?.drafts ?? {}) }));
+    const [notice, setNotice] = useState();
+    const [busy, setBusy] = useState(false);
+    // Open answers go to the coach through the conversation: once handed over, 交卷 is done — not clickable again.
+    const [handedOver, setHandedOver] = useState(false);
+    const assessment = loaded.data;
+    // The project's profile decides how a fill is judged and whether answers preview math.
+    const project = useLoad(() => outcome(p.getProject(projectId)).then(detail => detail.project), [projectId]);
+    const profile = profileOf(project.data?.template);
+    const isRetake = assessment?.type === 'retake';
+    const quiz = assessment !== undefined && (assessment.type === 'quiz' || assessment.type === 'retake') && assessment.questions !== undefined
+        ? { ...assessment, questions: assessment.questions }
+        : undefined;
+    const total = quiz?.questions.length ?? 0;
+    const done = quiz === undefined ? 0 : quiz.questions.filter(item => answers[item.id] !== undefined).length;
+    const allAnswered = quiz !== undefined && done === total;
+    const record = (id, entry) => {
+        setAnswers(previous => {
+            const next = { ...previous, [id]: entry };
+            saveQuizDraft(quizId, { answers: next, drafts, at: new Date().toISOString() });
+            return next;
+        });
+    };
+    const recordDraft = (id, text) => {
+        setDrafts(previous => {
+            const next = { ...previous, [id]: text };
+            saveQuizDraft(quizId, { answers, drafts: next, at: new Date().toISOString() });
+            return next;
+        });
+    };
+    // 讲讲这题: a draft in the conversation input naming the question — before
+    // answering it asks for the approach (not the answer), after it asks why.
+    const explain = (question, number) => {
+        if (quiz === undefined)
+            return false;
+        void p.bindTarget(resourceId === undefined ? { projectId } : { projectId, resourceId });
+        const entry = answers[question.id];
+        const key = question.kind === 'choice'
+            ? (question.options ?? []).map((option, at) => `${String.fromCharCode(65 + at)}. ${option}`).join('  ')
+            : '';
+        const text = entry === undefined || entry.void === true
+            ? t('prime.explainHint', { quiz: quiz.id, number: String(number), prompt: question.prompt, options: key })
+            : t('prime.explainAfter', {
+                quiz: quiz.id,
+                number: String(number),
+                prompt: question.prompt,
+                options: key,
+                given: entry.given === '' ? t('quiz.explainBlank') : entry.given,
+                answer: question.answer,
+                verdict: entry.pass === true ? t('quiz.explainRight') : entry.pass === false ? t('quiz.explainWrong') : t('quiz.explainOpen'),
+            });
+        return p.primeConversation(text.replace(/\n\n+/g, '\n'));
+    };
+    const finish = async () => {
+        if (quiz === undefined)
+            return;
+        const open = quiz.questions.filter(item => answers[item.id]?.void !== true && answers[item.id]?.pass === undefined);
+        if (open.length > 0) {
+            // Open answers need the coach: hand over the whole sitting.
+            const lines = quiz.questions.map(item => {
+                const entry = answers[item.id];
+                const mark = entry?.void === true ? t('quiz.handVoid') : entry?.pass === true ? '✓' : entry?.pass === false ? '✗' : entry?.unsure === true ? t('quiz.handUnsure', { key: item.answer }) : t('quiz.handOpen');
+                return `- ${item.id}：${entry?.given ?? ''}（${mark}）`;
+            });
+            const primed = p.primeConversation(t('prime.grade', { quiz: quiz.id, answers: lines.join('\n') }));
+            setNotice(primed ? t('quiz.handedOver') : t('notice.noConversation'));
+            if (primed)
+                setHandedOver(true);
+            return;
+        }
+        const verdicts = quiz.questions.map(item => {
+            const entry = answers[item.id];
+            return {
+                task: item.id,
+                criterion: entry?.overruled === true ? `${item.prompt.slice(0, 100)}（学员改判：与答案等价）` : item.prompt.slice(0, 120),
+                pass: entry?.pass === true,
+                evidence: item.evidence.quote ?? item.answer,
+                by: 'self',
+                ...(entry?.void === true ? { void: true } : {}),
+            };
+        });
+        setBusy(true);
+        try {
+            const result = await outcome(p.putAttempt(projectId, quiz.id, verdicts));
+            clearQuizDraft(quiz.id);
+            actions.replace({ view: 'result', projectId, ...(resourceId === undefined ? {} : { resourceId }), result });
+        }
+        catch (failure) {
+            setNotice(failure instanceof Error ? failure.message : String(failure));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { title: quiz === undefined ? t('node.quiz') : t(isRetake ? 'quiz.retakeProgress' : 'quiz.progress', { at: String(done), total: String(total) }), onBack: () => { actions.pop(); }, backLabel: t('action.back'), moreLabel: t('action.more') }), _jsxs("div", { className: css.body, children: [_jsx(StateLine, { loaded: loaded, t: t }), quiz !== undefined && (_jsx("div", { className: css.progress, "aria-hidden": "true", children: _jsx("i", { style: { width: `${total === 0 ? 0 : Math.round((done / total) * 100)}%` } }) })), quiz?.questions.map((question, at) => (_jsx(QuestionCard, { profile: profile, p: p, number: at + 1, question: question, answered: answers[question.id], draft: drafts[question.id] ?? '', onDraft: text => { recordDraft(question.id, text); }, onAnswer: entry => { record(question.id, entry); }, onExplain: () => explain(question, at + 1) }, question.id))), notice !== undefined && _jsx("div", { className: css.notice, children: notice }), quiz !== undefined && (_jsx("div", { className: css.actions, children: _jsx("button", { type: "button", className: css.primary, disabled: busy || handedOver || !allAnswered, onClick: () => { void finish(); }, children: handedOver ? t('quiz.handedOverButton') : busy ? t('quiz.finishing') : allAnswered ? t('quiz.finish') : t('quiz.remaining', { count: String(total - done) }) }) }))] })] }));
+}
+/** One question on the paper: its number, two tags, the answer control, the feedback. The evidence quote shows only after answering — quoted up front, it often IS the answer. */
+function QuestionCard({ p, profile, question, number, answered, draft, onDraft, onAnswer, onExplain }) {
+    const { t } = p;
+    const [explained, setExplained] = useState();
+    const correct = question.kind === 'choice' ? choiceIndex(question.options ?? [], question.answer) : -1;
+    const evidenceTone = question.evidence.kind === 'photo' ? 'photo' : question.evidence.kind === 'web' ? 'web' : 'know';
+    // A choice or fill quote often IS the answer, so it waits for the feedback.
+    // An open question's quote frames the discussion but can hand the answer
+    // over just the same — it stays folded behind 参考原文 until peeked or answered.
+    const quoteUpfront = question.kind === 'free';
+    const [peek, setPeek] = useState(false);
+    // The answer box grows with what you type (up to a cap, then it scrolls).
+    const answerRef = useRef(null);
+    useLayoutEffect(() => {
+        const el = answerRef.current;
+        if (el === null)
+            return;
+        el.style.height = 'auto';
+        el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
+    }, [draft, answered]);
+    return (_jsxs("section", { className: css.question, children: [_jsxs("div", { className: css.chips, children: [_jsx("span", { className: css.optionKey, "aria-hidden": "true", children: number }), _jsx("span", { className: css.chip, "data-tone": question.target.kind === 'asked' || question.target.kind === 'missed' ? 'weak' : undefined, children: t(`target.${question.target.kind}`) }), _jsx("span", { className: css.chip, "data-tone": evidenceTone, children: t(`evidence.${question.evidence.kind}`) })] }), _jsx("div", { className: css.prompt, children: _jsx(MathText, { text: question.prompt }) }), quoteUpfront && question.evidence.quote !== undefined && answered === undefined && (_jsx("div", { className: css.row, children: _jsx("button", { type: "button", className: css.textButton, "aria-expanded": peek, onClick: () => { setPeek(!peek); }, children: t(peek ? 'quiz.hideQuote' : 'quiz.showQuote') }) })), quoteUpfront && question.evidence.quote !== undefined && (peek || answered !== undefined) && (_jsx("blockquote", { className: css.quote, children: question.evidence.quote })), question.kind === 'choice' && (_jsx("div", { className: css.options, children: (question.options ?? []).map((option, at) => {
+                    const chosen = answered?.given === option;
+                    const state = answered === undefined || answered.void === true ? undefined : at === correct ? 'ok' : chosen ? 'bad' : undefined;
+                    return (_jsxs("button", { type: "button", className: css.option, "data-state": state, disabled: answered !== undefined, onClick: () => { onAnswer({ given: option, pass: at === correct }); }, children: [_jsx("span", { className: css.optionKey, children: String.fromCharCode(65 + at) }), _jsx("span", { children: _jsx(MathText, { text: option }) })] }, option));
+                }) })), question.kind !== 'choice' && (_jsxs(_Fragment, { children: [_jsx("textarea", { ref: answerRef, className: css.answer, rows: question.kind === 'free' ? 4 : 1, value: answered?.given ?? draft, disabled: answered !== undefined, placeholder: t(question.kind === 'free' ? 'quiz.freePlaceholder' : /\$|\\[a-zA-Z]|[√∫∑∏∂∞±]/.test(question.prompt) ? 'quiz.fillMathPlaceholder' : 'quiz.fillPlaceholder'), onChange: event => { onDraft(event.target.value); } }), profile.math && _jsx(AnswerPreview, { text: answered?.given ?? draft, t: t })] })), answered !== undefined && answered.void !== true && (_jsxs("div", { className: css.feedback, children: [answered.pass === true && _jsx("strong", { className: css.ok, children: answered.overruled === true ? t('quiz.overruled') : t('quiz.right') }), answered.pass === false && _jsx("strong", { className: css.bad, children: _jsx(MathText, { text: t('quiz.wrong', { answer: correct >= 0 && question.options?.[correct] !== undefined ? `${String.fromCharCode(65 + correct)}. ${question.options[correct]}` : question.answer }) }) }), answered.pass === undefined && answered.unsure === true && (_jsxs(_Fragment, { children: [_jsx("strong", { children: t('quiz.unsure') }), _jsx("div", { className: css.muted, children: _jsx(MathText, { text: t('quiz.unsureKey', { answer: question.answer }) }) })] })), answered.pass === undefined && answered.unsure !== true && _jsx("strong", { children: t('quiz.coachJudges') }), question.explanation !== undefined && _jsx("div", { children: _jsx(MathText, { text: question.explanation }) }), !quoteUpfront && question.evidence.quote !== undefined && _jsx("blockquote", { className: css.quote, children: question.evidence.quote }), question.evidence.url !== undefined && _jsx("a", { className: css.link, href: question.evidence.url, target: "_blank", rel: "noreferrer", children: t('quiz.source') }), question.kind === 'fill' && (answered.pass === false || answered.unsure === true || answered.overruled === true) && (_jsx("div", { children: _jsx("button", { type: "button", className: css.textButton, onClick: () => { onAnswer(answered.overruled === true ? (profile.fill === 'spelling' ? { given: answered.given, pass: false } : { given: answered.given, unsure: true }) : { given: answered.given, pass: true, overruled: true }); }, children: answered.overruled === true ? t('quiz.overruleUndo') : t('quiz.overrule') }) }))] })), _jsxs("div", { className: css.questionTools, children: [question.kind !== 'choice' && answered === undefined && (_jsx("button", { type: "button", className: css.secondary, disabled: draft.trim() === '', onClick: () => { onAnswer(question.kind === 'fill' ? judgeFillAnswer(profile, draft, question.answer) : { given: draft }); }, children: t('quiz.submit') })), _jsx("span", { className: css.spacer }), _jsxs("button", { type: "button", className: css.toolChip, "data-done": explained === 'primed', title: t(answered === undefined || answered.void === true ? 'quiz.explainBeforeHint' : 'quiz.explainHint'), onClick: () => { setExplained(onExplain() ? 'primed' : 'failed'); }, children: [explained === 'primed' ? _jsx(IconCheckOutlineMedium, { size: 14 }) : _jsx(IconChatOutlineMedium, { size: 14 }), explained === 'primed' ? t('quiz.explainPrimed') : answered === undefined || answered.void === true ? t('quiz.explainBefore') : t('quiz.explain')] }), _jsxs("button", { type: "button", className: css.toolChip, "data-on": answered?.void === true, "aria-pressed": answered?.void === true, title: t('quiz.voidHint'), onClick: () => { onAnswer({ given: answered?.given ?? '', void: answered?.void !== true }); }, children: [_jsx(IconFlagOutlineMedium, { size: 14 }), answered?.void === true ? t('quiz.unvoid') : t('quiz.void')] })] }), explained === 'failed' && _jsx("div", { className: css.muted, children: t('notice.noConversation') })] }));
+}
+/** The answer box's live math preview: appears once the draft smells like math ($…$, a \command, or a plain ^ / _ like (x-2)^2); bare math previews as one inline formula. */
+function AnswerPreview({ text, t }) {
+    if (!/\$|\\[a-zA-Z]|[\w)\]}][\^_]\{?[\w-]/.test(text))
+        return null;
+    return (_jsxs("div", { className: css.answerPreview, children: [_jsx("span", { className: css.muted, children: t('quiz.preview') }), _jsx("span", { className: css.answerPreviewBody, children: text.includes('$') ? _jsx(MathText, { text: text }) : _jsx(Tex, { tex: text }) })] }));
+}
+/** The sitting's result: the score, what unlocked, how the cards moved — and the loop's next step, which rides the conversation from here (a retake of the misses or a fresh set), so the flow never dead-ends on the score. */
+export function ResultView({ p, projectId, resourceId, result }) {
+    const { t, actions } = p;
+    const [notice, setNotice] = useState();
+    const percent = Math.round(result.attempt.ratio * 100);
+    const passed = result.completed !== undefined;
+    // Flagged questions counted for nothing — say so once, right under the score.
+    const voidedCount = result.attempt.verdicts.filter(verdict => verdict.void === true).length;
+    const assessmentId = result.attempt.assessmentId;
+    // The paper itself, for the retake's question list; a gone one hides the asks.
+    const assessment = useLoad(() => assessmentId === undefined
+        ? Promise.resolve(undefined)
+        : outcome(p.getAssessment(projectId, assessmentId)).then(answer => answer.assessment, () => undefined), [projectId, assessmentId]);
+    const isRetake = assessment.data?.type === 'retake';
+    const questions = assessment.data?.type === 'quiz' || isRetake ? (assessment.data?.questions ?? []) : [];
+    const missedVerdicts = result.attempt.verdicts.filter(verdict => !verdict.pass && verdict.void !== true);
+    // What is still open from this sitting, as retake keys (a retake's question points back at its origin).
+    const missedKeys = missedVerdicts.flatMap(verdict => {
+        const question = questions.find(candidate => candidate.id === verdict.task);
+        if (question === undefined || assessmentId === undefined)
+            return [];
+        return [question.origin === undefined ? `${assessmentId}:${question.id}` : `${question.origin.assessmentId}:${question.origin.questionId}`];
+    });
+    const counted = result.attempt.verdicts.filter(verdict => verdict.void !== true);
+    const right = counted.filter(verdict => verdict.pass).length;
+    const stationId = assessment.data?.scope.nodeId;
+    const [retaking, setRetaking] = useState(false);
+    const prime = (text) => {
+        void p.bindTarget(resourceId === undefined ? { projectId } : { projectId, resourceId });
+        setNotice(p.primeConversation(text) ? t('notice.primed') : t('notice.noConversation'));
+    };
+    // 订正 in the sidebar: a retake paper over this sitting's misses (no coach needed).
+    const retake = () => {
+        if (missedKeys.length === 0 || retaking)
+            return;
+        setRetaking(true);
+        // A station's paper retakes on its station; a project-wide retake retakes across the project.
+        void outcome(p.createRetake(projectId, stationId === undefined ? undefined : resourceId, stationId, missedKeys)).then(created => {
+            actions.replace({ view: 'quiz', projectId, ...(resourceId === undefined ? {} : { resourceId }), quizId: created.assessment.id });
+        }, (failure) => { setNotice(failure instanceof Error ? failure.message : String(failure)); setRetaking(false); });
+    };
+    const again = () => {
+        if (assessmentId === undefined)
+            return;
+        prime(t('prime.result.again', { quiz: assessmentId, percent: String(percent) }));
+    };
+    const nextId = result.unlocked[0];
+    const canRetake = missedKeys.length > 0 && (isRetake || (stationId !== undefined && resourceId !== undefined));
+    const retakePrimary = (isRetake || !passed) && canRetake;
+    const nextPrimary = passed && nextId !== undefined;
+    const againPrimary = !retakePrimary && !nextPrimary;
+    return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { title: t('result.title'), onBack: () => { actions.pop(); }, backLabel: t('action.back'), moreLabel: t('action.more') }), _jsxs("div", { className: css.body, children: [isRetake ? (_jsx("section", { className: css.hero, children: _jsxs("div", { className: css.heroText, children: [_jsx("span", { className: css.big, children: t('result.retakeScore', { right: String(right), total: String(counted.length) }) }), _jsx("span", { className: css.muted, children: t('result.retakeNote') })] }) })) : (_jsxs("section", { className: css.hero, children: [_jsxs("div", { className: css.heroText, children: [_jsxs("span", { className: css.big, children: [percent, "%"] }), _jsx("span", { className: css.muted, children: t('result.line', { pass: String(Math.round(result.passRatio * 100)) }) })] }), _jsx("strong", { className: passed ? css.ok : css.bad, children: passed ? t('result.passed') : t('result.notYet') })] })), (result.pointChanges?.length ?? 0) > 0 && (_jsxs("section", { className: css.section, children: [_jsx("h3", { className: css.sectionTitle, children: t('result.points') }), result.pointChanges.map(change => (_jsxs("div", { className: css.moveRow, children: [_jsx("span", { children: t('result.pointTo', { title: change.title, state: t(`point.${change.to}`) }) }), _jsxs("span", { className: change.to === 'mastered' ? css.ok : change.to === 'weak' ? css.bad : css.muted, children: [t(`point.${change.from}`), " \u2192 ", t(`point.${change.to}`)] })] }, change.pointId)))] })), voidedCount > 0 && _jsx("div", { className: css.muted, children: t('result.voided', { count: String(voidedCount) }) }), result.cardUpdates.length > 0 && (_jsxs("section", { className: css.section, children: [_jsx("h3", { className: css.sectionTitle, children: t('result.cards') }), result.cardUpdates.map(update => (_jsxs("div", { className: css.moveRow, children: [_jsx("span", { children: update.term }), _jsx("span", { className: update.created === true ? css.bad : update.mastery.box > 0 ? css.ok : css.bad, children: update.created === true ? t('result.cardNew') : update.mastery.box > 0 ? t('result.cardUp') : t('result.cardBack') })] }, update.id)))] })), notice !== undefined && _jsx("div", { className: css.notice, children: notice }), _jsxs("div", { className: css.actions, children: [nextId !== undefined && resourceId !== undefined && (_jsx("button", { type: "button", className: nextPrimary ? css.primary : css.secondary, onClick: () => { actions.replace({ view: 'node', projectId, resourceId, nodeId: nextId, tab: 'guide' }); }, children: t('result.next') })), canRetake && (_jsx("button", { type: "button", className: retakePrimary ? css.primary : css.secondary, disabled: retaking, onClick: retake, children: t(isRetake ? 'result.retakeRest' : 'result.retake', { count: String(missedKeys.length) }) })), assessmentId !== undefined && !isRetake && (_jsx("button", { type: "button", className: againPrimary ? css.primary : css.secondary, onClick: again, children: t('result.again') })), isRetake && stationId !== undefined && resourceId !== undefined && (_jsx("button", { type: "button", className: retakePrimary ? css.secondary : css.primary, onClick: () => { actions.replace({ view: 'node', projectId, resourceId, nodeId: stationId, tab: 'quiz' }); }, children: t('result.toStation') })), resourceId !== undefined && (_jsx("button", { type: "button", className: css.ghost, onClick: () => { actions.replace({ view: 'resource', projectId, resourceId }); }, children: t('result.toPath') })), resourceId === undefined && (_jsx("button", { type: "button", className: css.ghost, onClick: () => { actions.replace({ view: 'project', projectId }); }, children: t('result.toPath') }))] })] })] }));
+}
+/** Days until the next review for a rating. */
+function nextDays(card, rating) {
+    const box = rating === 'forgot' ? 0 : rating === 'fuzzy' ? card.mastery.box : Math.min(card.mastery.box + 1, 5);
+    return LEITNER_INTERVAL_DAYS[Math.min(box, LEITNER_INTERVAL_DAYS.length - 1)];
+}
+/**
+ * Daily review as answering, not looking (M4): each due card is asked the
+ * way that fits it — a word as a cloze over its own sentence or a choice of
+ * its meaning against the learner's other glosses, a well-known word as a
+ * spelling, a concept as a one-line explanation checked against the answer.
+ * The pane judges what it can and maps it to the schedule (first try →
+ * recalled, after a hint → fuzzy, missed → forgot); concepts are self-rated.
+ * 「翻卡」 in the header falls back to the plain flashcard.
+ */
+export function ReviewView({ p, projectId }) {
+    const { t, actions } = p;
+    const loaded = useLoad(() => value(p.dueCards(projectId)), [projectId]);
+    const [queue, setQueue] = useState();
+    const [practice, setPractice] = useState(false);
+    const [at, setAt] = useState(0);
+    const [flip, setFlip] = useState(false);
+    const [combo, setCombo] = useState(0);
+    const [best, setBest] = useState(0);
+    const [outcomes, setOutcomes] = useState([]);
+    const [error, setError] = useState();
+    const due = loaded.data?.cards;
+    const cards = queue ?? due ?? [];
+    const card = cards[at];
+    // Distractors come from the same kind of card — a word's meaning against the
+    // other words' meanings — across the projects in this round, due or not.
+    const projectIds = useMemo(() => [...new Set((due ?? []).map(entry => entry.projectId))].slice(0, 3), [due]);
+    const words = useLoad(async () => {
+        const lists = await Promise.all(projectIds.map(id => value(p.listCards({ projectId: id, kind: 'word', limit: 60 }))));
+        return lists.flatMap(list => list.cards);
+    }, [projectIds.join(',')]);
+    const glossPool = useMemo(() => [...new Set([...(due ?? []), ...(words.data ?? [])].filter(entry => entry.kind === 'word').map(entry => shortGloss(entry.gloss)))], [due, words.data]);
+    // One rating per card: a double tap must not rate (and advance) twice.
+    const settling = useRef();
+    const settle = (rating) => {
+        // Keyed by the queue position: a stale second tap still carries the old position.
+        if (card === undefined || settling.current === at)
+            return;
+        settling.current = at;
+        const advance = () => {
+            const right = rating !== 'forgot';
+            const nextCombo = right ? combo + 1 : 0;
+            setCombo(nextCombo);
+            setBest(Math.max(best, nextCombo));
+            setOutcomes(previous => [...previous, { card, rating }]);
+            setAt(at + 1);
+        };
+        // A practice round (「再练错的」) never moves the schedule.
+        if (practice) {
+            advance();
+            return;
+        }
+        void outcome(p.reviewCard(card.projectId, card.id, rating)).then(advance, (failure) => { settling.current = undefined; setError(String(failure)); });
+    };
+    const again = () => {
+        settling.current = undefined;
+        const missed = outcomes.filter(entry => entry.rating === 'forgot').map(entry => entry.card);
+        setQueue(missed);
+        setPractice(true);
+        setAt(0);
+        setCombo(0);
+        setOutcomes([]);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { title: cards.length === 0 ? t('review.title') : card === undefined ? t('review.summaryTitle') : t(practice ? 'review.practiceProgress' : 'review.progress', { at: String(at + 1), total: String(cards.length) }), onBack: () => { actions.pop(); }, backLabel: t('action.back'), actions: [{ id: 'flip', label: t('review.flipMode'), icon: _jsx("span", { "aria-hidden": "true", children: "\u21C4" }), pressed: flip, onSelect: () => { setFlip(!flip); } }], moreLabel: t('action.more') }), _jsxs("div", { className: css.body, children: [_jsx(StateLine, { loaded: loaded, t: t }), card !== undefined && (_jsxs("div", { className: css.reviewHead, children: [_jsx("div", { className: css.progress, "aria-hidden": "true", children: _jsx("i", { style: { width: `${Math.round((at / cards.length) * 100)}%` } }) }), _jsx("span", { className: css.combo, "data-hot": combo >= 3 ? 'true' : 'false', children: t('review.combo', { count: String(combo) }) })] })), loaded.data !== undefined && cards.length === 0 && (_jsxs("div", { className: css.empty, children: [_jsx("div", { className: css.emptyTitle, children: t('review.nothing') }), _jsx("button", { type: "button", className: css.secondary, onClick: () => { actions.pop(); }, children: t('action.back') })] })), card !== undefined && (flip
+                        ? _jsx(FlipCard, { p: p, card: card, onRate: settle }, card.id)
+                        : _jsx(AskCard, { p: p, card: card, glossPool: glossPool, onRate: settle }, `${card.id}-${at}`)), loaded.data !== undefined && cards.length > 0 && card === undefined && (_jsx(Summary, { p: p, outcomes: outcomes, best: best, practice: practice, onAgain: again, onDone: () => { actions.pop(); } })), error !== undefined && _jsx("div", { className: css.error, children: error })] })] }));
+}
+/** Ask one card in the mode that fits it. */
+function AskCard({ p, card, glossPool, onRate }) {
+    const { t } = p;
+    const others = glossPool.filter(gloss => gloss !== shortGloss(card.gloss));
+    const mode = pickMode(card, others.length);
+    const where = card.sources.find(source => source.type === 'photo')?.note;
+    const label = t(`review.mode.${mode}`) + (where === undefined ? '' : ` · ${where}`);
+    if (mode === 'choice')
+        return _jsx(ChoiceAsk, { p: p, card: card, others: others, label: label, onRate: onRate });
+    if (mode === 'explain')
+        return _jsx(ExplainAsk, { p: p, card: card, label: label, onRate: onRate });
+    return _jsx(TypeAsk, { p: p, card: card, mode: mode, label: label, onRate: onRate });
+}
+/** Cloze or spelling: type the word; one miss reveals more letters, a second shows it. */
+function TypeAsk({ p, card, mode, label, onRate }) {
+    const { t } = p;
+    const blank = card.contexts.map(context => clozeOf(context.sentence, card.term, card.aliases)).find(found => found !== undefined);
+    const answer = blank?.answer ?? card.term;
+    const [input, setInput] = useState('');
+    const [misses, setMisses] = useState(0);
+    const [result, setResult] = useState();
+    const accepted = [answer, card.term, ...card.aliases];
+    const submit = () => {
+        if (spellMatches(input, accepted)) {
+            setResult('right');
+            return;
+        }
+        if (misses === 0) {
+            setMisses(1);
+            return;
+        }
+        setResult('wrong');
+    };
+    const rating = result === 'right' ? (misses === 0 ? 'recalled' : 'fuzzy') : 'forgot';
+    const variant = result === 'right' && input.trim().toLowerCase() !== answer.toLowerCase() && !accepted.some(word => word.toLowerCase() === input.trim().toLowerCase());
+    return (_jsxs("section", { className: css.qcard, children: [_jsx("span", { className: css.muted, children: label }), mode === 'spell' && _jsx("div", { className: css.askBig, children: card.gloss }), blank !== undefined && (_jsxs("div", { className: css.flashSentence, children: [blank.before, _jsx("span", { className: css.blank, "data-state": result, children: result === undefined ? '\u00a0' : answer }), blank.after] })), mode === 'cloze' && result === undefined && (_jsx("div", { className: css.muted, children: t('review.hint', { gloss: shortGloss(card.gloss), letters: answer.slice(0, misses + 1) }) })), mode === 'spell' && misses > 0 && result === undefined && _jsx("div", { className: css.muted, children: t('review.hintLetters', { letters: answer.slice(0, 2) }) }), result === undefined && (_jsxs("form", { className: css.row, onSubmit: event => { event.preventDefault(); submit(); }, children: [_jsx("input", { className: css.input, autoFocus: true, value: input, "aria-label": t('review.typeHere'), placeholder: t('review.typeHere'), onChange: event => { setInput(event.target.value); } }), _jsx("button", { type: "submit", className: css.secondary, disabled: input.trim() === '', children: t('quiz.submit') })] })), misses > 0 && result === undefined && _jsx("div", { className: css.letters, children: letterMarks(input, answer).map((ok, index) => _jsx("span", { "data-ok": ok ? 'true' : 'false', children: input[index] }, index)) }), result !== undefined && (_jsxs("div", { className: css.feedback, "data-state": result, children: [_jsx("strong", { className: result === 'right' ? css.ok : css.bad, children: result === 'right' ? t('review.right') : t('review.answerWas', { answer }) }), variant && _jsx("span", { className: css.muted, children: t('review.variant', { answer }) }), _jsx("span", { className: css.muted, children: t('review.nextIn', { days: String(nextDays(card, rating)) }) })] })), result !== undefined && _jsx("button", { type: "button", className: css.primary, onClick: () => { onRate(rating); }, children: t('quiz.next') })] }));
+}
+/** Which meaning in this sentence: the right gloss against three of the learner's own. */
+function ChoiceAsk({ p, card, others, label, onRate }) {
+    const { t } = p;
+    const [{ options, correct }] = useState(() => choiceOptions(shortGloss(card.gloss), others));
+    const [picked, setPicked] = useState();
+    const sentence = card.contexts[card.mastery.streak % Math.max(card.contexts.length, 1)]?.sentence;
+    const right = picked === correct;
+    return (_jsxs("section", { className: css.qcard, children: [_jsx("span", { className: css.muted, children: label }), _jsx("div", { className: css.flashSentence, children: sentence === undefined ? card.term : _jsx(Highlight, { sentence: sentence, term: card.term }) }), _jsx("div", { className: css.muted, children: t('review.whichMeaning', { term: card.term }) }), _jsx("div", { className: css.options, children: options.map((option, index) => (_jsxs("button", { type: "button", className: css.option, disabled: picked !== undefined, "data-state": picked === undefined ? undefined : index === correct ? 'ok' : index === picked ? 'bad' : undefined, onClick: () => { setPicked(index); }, children: [_jsx("span", { className: css.optionKey, children: String.fromCharCode(65 + index) }), _jsx("span", { children: option })] }, option))) }), picked !== undefined && (_jsxs("div", { className: css.feedback, children: [_jsx("strong", { className: right ? css.ok : css.bad, children: right ? t('review.right') : t('review.meaningWas', { gloss: card.gloss }) }), _jsx("span", { className: css.muted, children: t('review.nextIn', { days: String(nextDays(card, right ? 'recalled' : 'forgot')) }) })] })), picked !== undefined && _jsx("button", { type: "button", className: css.primary, onClick: () => { onRate(right ? 'recalled' : 'forgot'); }, children: t('quiz.next') })] }));
+}
+/** A concept: say it in a sentence, then check against the answer (or hand it to the coach). */
+function ExplainAsk({ p, card, label, onRate }) {
+    const { t } = p;
+    const [text, setText] = useState('');
+    const [shown, setShown] = useState(false);
+    const [sent, setSent] = useState(false);
+    const stuck = card.sources.slice().reverse().find(source => (source.type === 'chat' || source.type === 'quiz') && source.note !== undefined);
+    return (_jsxs("section", { className: css.qcard, children: [_jsxs("span", { className: css.muted, children: [label, stuck?.note === undefined ? '' : ` · ${t(stuck.type === 'quiz' ? 'review.youMissed' : 'review.youAsked', { note: stuck.note })}`] }), _jsx("div", { className: css.askBig, children: t('review.askConcept', { term: card.term }) }), _jsx("textarea", { className: css.answer, rows: 3, value: text, disabled: shown, "aria-label": t('review.typeHere'), placeholder: t('review.explainHere'), onChange: event => { setText(event.target.value); } }), !shown && _jsx("button", { type: "button", className: css.secondary, onClick: () => { setShown(true); }, children: t('review.check') }), shown && (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.feedback, children: [_jsx("strong", { children: t('review.reference') }), _jsx("span", { children: card.gloss })] }), _jsx("div", { className: css.rate, children: ['forgot', 'fuzzy', 'recalled'].map(rating => (_jsxs("button", { type: "button", className: css.rateButton, onClick: () => { onRate(rating); }, children: [_jsx("span", { children: t(`review.self.${rating}`) }), _jsx("span", { className: css.muted, children: t('review.inDays', { days: String(nextDays(card, rating)) }) })] }, rating))) }), text.trim() !== '' && !sent && (_jsx("button", { type: "button", className: css.textButton, onClick: () => { setSent(p.sendMessage(t('prime.judgeExplain', { term: card.term, answer: text.trim() }))); }, children: t('review.askCoachJudge') })), sent && _jsx("div", { className: css.muted, children: t('node.fixSent') })] }))] }));
+}
+/** The plain flashcard (「翻卡」): front, flip, self-rate. */
+function FlipCard({ p, card, onRate }) {
+    const { t } = p;
+    const [flipped, setFlipped] = useState(false);
+    const sentence = card.contexts.length === 0 ? undefined : card.contexts[card.mastery.streak % card.contexts.length].sentence;
+    return (_jsxs("section", { className: css.flash, children: [_jsxs("div", { className: css.flashFront, children: [_jsx("div", { className: css.flashSentence, children: sentence === undefined ? card.term : _jsx(Highlight, { sentence: sentence, term: card.term }) }), _jsx("div", { className: css.muted, children: card.kind === 'word' ? t('review.askWord', { term: card.term }) : t('review.askConcept', { term: card.term }) })] }), flipped && _jsxs("div", { className: css.flashBack, children: [_jsx("strong", { children: card.gloss }), card.userGloss !== undefined && _jsx("div", { className: css.muted, children: t('cards.userGloss', { gloss: card.userGloss }) })] }), !flipped
+                ? _jsx("button", { type: "button", className: css.secondary, onClick: () => { setFlipped(true); }, children: t('review.flip') })
+                : (_jsx("div", { className: css.rate, children: ['forgot', 'fuzzy', 'recalled'].map(rating => (_jsxs("button", { type: "button", className: css.rateButton, onClick: () => { onRate(rating); }, children: [_jsx("span", { children: t(`review.${rating}`) }), _jsx("span", { className: css.muted, children: t('review.inDays', { days: String(nextDays(card, rating)) }) })] }, rating))) }))] }));
+}
+/** The round's summary: facts only — no score, no XP. */
+function Summary({ p, outcomes, best, practice, onAgain, onDone }) {
+    const { t } = p;
+    const right = outcomes.filter(entry => entry.rating !== 'forgot');
+    const up = outcomes.filter(entry => entry.rating === 'recalled');
+    const steady = outcomes.filter(entry => entry.rating === 'fuzzy');
+    const missed = outcomes.filter(entry => entry.rating === 'forgot');
+    return (_jsxs("section", { className: css.summary, children: [_jsxs("div", { className: css.row, children: [_jsxs("span", { className: css.big, children: [right.length, "/", outcomes.length] }), _jsx("span", { className: css.muted, children: t('review.summaryLine', { best: String(best) }) })] }), practice && _jsx("div", { className: css.muted, children: t('review.practiceNote') }), missed.length > 0 && (_jsxs("div", { className: css.section, children: [_jsx("h3", { className: css.sectionTitle, children: t(practice ? 'review.stillMissed' : 'review.backTomorrow', { count: String(missed.length) }) }), _jsx("div", { className: css.chips, children: missed.map(entry => _jsx("span", { className: css.chip, "data-tone": "weak", children: entry.card.term }, entry.card.id)) })] })), !practice && up.length > 0 && (_jsxs("div", { className: css.section, children: [_jsx("h3", { className: css.sectionTitle, children: t('review.movedUp', { count: String(up.length) }) }), _jsx("div", { className: css.chips, children: up.slice(0, 12).map(entry => _jsx("span", { className: css.chip, "data-tone": "photo", children: entry.card.term }, entry.card.id)) })] })), !practice && steady.length > 0 && (_jsxs("div", { className: css.section, children: [_jsx("h3", { className: css.sectionTitle, children: t('review.steady', { count: String(steady.length) }) }), _jsx("div", { className: css.chips, children: steady.slice(0, 12).map(entry => _jsx("span", { className: css.chip, children: entry.card.term }, entry.card.id)) })] })), _jsxs("div", { className: css.actions, children: [missed.length > 0 && _jsx("button", { type: "button", className: css.primary, onClick: onAgain, children: t('review.again', { count: String(missed.length) }) }), _jsx("button", { type: "button", className: css.secondary, onClick: onDone, children: t('review.done.back') })] })] }));
+}

package/lib/types/client/views/station-quiz.d.ts

@@ -0,0 +1,43 @@
+/**
+ * A station's gate tab: 章节考 on a quiz / read station (the paper card, the
+ * points, the ask settings with the pending ask kept per station, the
+ * station's own mistakes folded into one card, earlier papers), and the
+ * acceptance sheet on an acceptance station.
+ *
+ * @module @khorsheed/dsh-library/client/views/station-quiz
+ */
+import { type ReactNode } from 'react';
+import { type LibraryQuizFocus, type LibraryQuizQuestion, type RoadmapNode } from '../../types.ts';
+import { type ViewProps } from '../ui.tsx';
+/**
+ * 章节考 on a quiz / read station, one line of travel (proposal
+ * 2026-10-19-library-point-mastery): the pass line, the points map (tap a
+ * point for why and what to do), then ONE primary action by state — an
+ * untaken paper → 开始作答; open misses → 开始订正 (a retake paper, judged
+ * here, never counted toward passing); else → 出题, its settings folded into
+ * a one-line summary beside the button. Earlier papers fold at the bottom.
+ * The settings and the pending ask live in the pane store per station.
+ */
+export declare function QuizTab({ p, projectId, resourceId, node, passRatio, onPrime, onReplace }: {
+    p: ViewProps['p'];
+    projectId: string;
+    resourceId: string | undefined;
+    node: RoadmapNode;
+    passRatio: number;
+    onPrime: (focus: LibraryQuizFocus, context?: {
+        weak?: readonly string[];
+        points?: readonly string[];
+        kinds?: readonly LibraryQuizQuestion['kind'][];
+        count?: number | undefined;
+    }) => void;
+    onReplace: (prompts: string[]) => void;
+}): ReactNode;
+/** An acceptance station's gate tab: the rubric, the submit gesture, the history. */
+export declare function AcceptanceTab({ p, projectId, node, passRatio, onPrime }: {
+    p: ViewProps['p'];
+    projectId: string;
+    node: RoadmapNode;
+    passRatio: number;
+    onPrime: () => void;
+}): ReactNode;
+//# sourceMappingURL=station-quiz.d.ts.map