Martin Dvorak
796e2e9fe9
From your notes: the generator now stores a verbatim source quote with every activity (schema + prompt + a server-side clamp so a chatty model cannot drop a card), and the feedback panel shows the sentence that carries it with the quote highlighted green. Decks made before the change, and quotes the model trimmed, fall back to a local IDF-weighted match over the saved notes text (lib/notes-source.ts): nothing is shown unless at least two distinct terms land. The passage hides in exam mode with the other reveals. Read aloud: a Web Speech API speaker control on the text a learner reads (flashcard faces, questions, statements, sentences, instructions) via lib/speech.ts and components/SpeakButton.tsx — one utterance app-wide, a voice matched to the deck's language, and no button at all where the browser has no speech synthesis. It used to sit inside the flashcard's flip button (nested buttons, tapping it flipped the card); it now lives next to the hint row. Timed runs: the feed chrome carries a timer chip (off by default) that gives each card 30 seconds; a card that runs out is recorded as a miss through the same path as a wrong answer (history + SRS agree), shows a toast, and the feed moves straight on with a fresh budget. handleAnswered ignores a second result per card, so a timeout plus a manual answer cannot record twice. The generator's type spec now names what each type suits (language decks lean on flashcards/matching/fill blank, ordering needs a real sequence, short answer reasoning), so the deck-aware guidance covers all seven types. New activities-test suite (24 checks: quote path, local path, the green mark, the speech stub, the timed run on Playwright's fake clock), registered in run-all; phase2 pins that the notes passage stays hidden in exam mode; en+cs keys for every new string; no new dependencies. Version 0.6.1, SW v83.
110 lines
3.1 KiB
TypeScript
110 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { useI18n } from "@/lib/i18n";
|
|
import type { Activity } from "@/lib/schemas";
|
|
import { SpeakButton } from "@/components/SpeakButton";
|
|
|
|
import {
|
|
ActivityHeader,
|
|
FeedbackPanel,
|
|
Hint,
|
|
OptionTile,
|
|
PromptCard,
|
|
QuestionText,
|
|
type ActivityComponentProps,
|
|
} from "./shared";
|
|
|
|
type MultipleChoiceActivity = Extract<Activity, { type: "multiple_choice" }>;
|
|
|
|
export function MultipleChoice({
|
|
activity,
|
|
active,
|
|
language,
|
|
onAnswered,
|
|
onNext,
|
|
isLast,
|
|
nextLabel,
|
|
}: ActivityComponentProps<MultipleChoiceActivity>) {
|
|
const { t } = useI18n();
|
|
const [selected, setSelected] = useState<number | null>(null);
|
|
const answered = selected !== null;
|
|
|
|
const choose = (index: number) => {
|
|
if (answered) return;
|
|
setSelected(index);
|
|
onAnswered(index === activity.correctIndex);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!active || answered) return;
|
|
const onKey = (event: KeyboardEvent) => {
|
|
const target = event.target as HTMLElement | null;
|
|
if (target && /^(INPUT|TEXTAREA)$/.test(target.tagName)) return;
|
|
const index = Number.parseInt(event.key, 10) - 1;
|
|
if (index >= 0 && index < activity.options.length) {
|
|
event.preventDefault();
|
|
choose(index);
|
|
}
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [active, answered, activity.options.length]);
|
|
|
|
const stateFor = (index: number): "idle" | "correct" | "wrong" | "dim" => {
|
|
if (!answered) return "idle";
|
|
if (index === activity.correctIndex) return "correct";
|
|
if (index === selected) return "wrong";
|
|
return "dim";
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ActivityHeader type="multiple_choice" topic={activity.topic} />
|
|
<PromptCard>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<QuestionText>{activity.question}</QuestionText>
|
|
<SpeakButton text={activity.question} language={language} />
|
|
</div>
|
|
</PromptCard>
|
|
|
|
<div className="flex flex-col gap-2.5" role="group" aria-label={t("activity.answerOptions")}>
|
|
{activity.options.map((option, index) => (
|
|
<OptionTile
|
|
key={option + index}
|
|
state={stateFor(index)}
|
|
disabled={answered}
|
|
onClick={() => choose(index)}
|
|
shortcut={String(index + 1)}
|
|
>
|
|
{option}
|
|
</OptionTile>
|
|
))}
|
|
</div>
|
|
|
|
{!answered ? <Hint>{t("mc.tipKeys")}</Hint> : null}
|
|
|
|
{answered ? (
|
|
<FeedbackPanel
|
|
activity={activity}
|
|
correct={selected === activity.correctIndex}
|
|
explanation={activity.explanation}
|
|
xp={activity.xp}
|
|
isLast={isLast}
|
|
nextLabel={nextLabel}
|
|
onNext={onNext}
|
|
detail={
|
|
selected === activity.correctIndex ? null : (
|
|
<>
|
|
{t("activity.correctAnswer")}{" "}
|
|
<span className="font-bold">{activity.options[activity.correctIndex]}</span>
|
|
</>
|
|
)
|
|
}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|