@octolearn/training-ui 0.0.0-stage → 0.2.0

package/dist/types/base-element.d.ts

@@ -0,0 +1,35 @@
+import { LitElement, type CSSResultGroup } from 'lit';
+import { type TrainingLanguage, type TrainingStrings } from './i18n/strings';
+/**
+ * Base of every training element.
+ *
+ * - `lang` (attribute): the language of the texts, de or en. Without it the element uses the nearest `lang` above it
+ *   (also across shadow roots and up to <html lang>), else German. Only the element's own attribute is watched for
+ *   changes; to switch the language at runtime, set it on the element.
+ * - `strings` (property): replaces single texts, e.g. `{ check: 'Prüfen' }`.
+ * - `theme` (attribute): `dark` for dark surfaces.
+ * - `short` (reflected attribute, set by the element itself): the visible area is short, e.g. a phone's on-screen keyboard
+ *   covers half of it. The elements then use a compact layout (`:host([short])` in their styles).
+ *
+ * Templates start with `<div class="root" lang=…>` (see baseStyles), which also tells screen readers the language.
+ */
+export declare class OctolearnElement extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: CSSResultGroup;
+    /** Mapped to the `lang` attribute without replacing HTMLElement's own `lang` property. */
+    language?: string;
+    strings?: Partial<TrainingStrings>;
+    theme?: 'light' | 'dark';
+    /** The visible area is short (on-screen keyboard open): compact layout. Follows `window.visualViewport`. */
+    short: boolean;
+    private endViewportWatch?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected get resolvedLanguage(): TrainingLanguage;
+    /** The texts in the element's language, with the page's overrides. */
+    protected get t(): TrainingStrings;
+    /** Dispatches an event that crosses shadow roots, so the page can listen on any ancestor. */
+    protected emit(type: string, detail: unknown, options?: {
+        cancelable?: boolean;
+    }): boolean;
+}

package/dist/types/content.d.ts

@@ -0,0 +1,51 @@
+/** How a learning content is trained. Same values as octolearn's API. */
+export type LearningMode = 'Dictation' | 'Arithmetic' | 'QuestionAnswer' | 'Class' | 'Picture' | 'Vocabulary';
+/**
+ * How the learner answers. Same values as octolearn's API. Games get only MultipleChoice and TextInput unless they name more
+ * in `filterQueryFormat` (OC-120); Flashcard exists only in the octolearn web app.
+ */
+export type QueryFormat = 'MultipleChoice' | 'TextInput' | 'LetterTiles' | 'WordTiles' | 'Fragment' | 'TrueFalse' | 'Flashcard';
+/**
+ * One question as octolearn's API sends it (`FrontendContent`, e.g. from GET /api/third-party/next-relevant-questions).
+ * The answer is never part of it: the server decides whether an answer is correct.
+ */
+export interface FrontendContent {
+    id?: number;
+    /** The word, the question, the arithmetic task ("12+5") or, for a picture riddle, the picture's URL. */
+    question?: string | null;
+    learningMode?: LearningMode | null;
+    queryFormat?: QueryFormat | null;
+    /** Multiple-choice options, already shuffled by the server; which one is correct is not marked. */
+    options?: string[] | null;
+    /** LetterTiles / WordTiles: the shuffled letters or words of the answer, never in its order. */
+    tiles?: string[] | null;
+    /** Fragment: first and last letter of the answer, "_" for each letter between ("S____e"). */
+    hint?: string | null;
+    /** TrueFalse: the answer or another answer of the same folder; which one is not sent. */
+    statement?: string | null;
+    /** False for supplementary practice that changes no learning level. */
+    learningLevelShallBeChanged?: boolean | null;
+    learningContentFolderName?: string | null;
+    isItVocabulary?: boolean | null;
+    sourceLanguage?: string | null;
+    targetLanguage?: string | null;
+    learningLevel?: number | null;
+    examPreparationModeActive?: boolean | null;
+}
+/** One question of a "Paare verbinden" round (OC-125); its answer is among the round's answers, unassigned. */
+export interface MatchingRoundItem {
+    id: number;
+    /** The question, or for a picture riddle the picture's URL. */
+    question: string;
+    learningMode?: LearningMode | null;
+    learningLevelShallBeChanged?: boolean | null;
+}
+/**
+ * A round of "Paare verbinden" (OC-125, octolearn web app only): a few questions of one folder and their answers,
+ * shuffled. Which answer belongs to which question is not sent; every pair is checked like an answer. No items: no round.
+ */
+export interface MatchingRound {
+    folderName?: string | null;
+    items: MatchingRoundItem[];
+    answers: string[];
+}

package/dist/types/core.d.ts

@@ -0,0 +1,13 @@
+/**
+ * `@octolearn/training-ui/core`: the parts without Lit and without custom elements: TrainingSession, the transports, the
+ * SpeechController and the types. For code that drives the elements (or replaces them) and for test runners that should
+ * not load Lit.
+ */
+export type { FrontendContent, LearningMode, MatchingRound, MatchingRoundItem, QueryFormat } from './content';
+export type { FeedbackMessage, FeedbackResult, QuestionResult } from './feedback-message';
+export { DONT_KNOW_ANSWER } from './events';
+export type { AnswerEventDetail, PairCheckedDetail, SpeakEventDetail } from './events';
+export { createThirdPartyTransport, type ThirdPartyTransportOptions } from './session/third-party-transport';
+export { TrainingSession, type AnswerOutcome, type PairOutcome, type RoundProgress, type SessionState, type TrainingSessionOptions, } from './session/training-session';
+export { TransportError, type AnswerEvaluation, type TodaysStatistic, type Transport } from './session/transport';
+export { getSpeechController, MAX_RATE, MIN_RATE, SpeechController, type SpeakOptions, type SpeakResult, type SpeechControllerOptions, } from './speech';

package/dist/types/d-icons.d.ts

@@ -0,0 +1,10 @@
+import { type TemplateResult } from 'lit';
+/**
+ * The stroke icons of design D, drawn on the canvas as inline SVG (not Font Awesome). Decorative: hidden from screen
+ * readers; the button around them carries the name.
+ */
+export type DIconName = 'speaker' | 'speaker-quiet' | 'check' | 'cross' | 'arrow' | 'zoom';
+/** A D icon of the given size in px; strokes in currentColor. */
+export declare function dIcon(name: DIconName, size: number, strokeWidth?: number): TemplateResult;
+/** D's five-point star (24×24 box). */
+export declare const STAR_PATH = "M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z";

package/dist/types/define-elements.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Every element of the package with its tag name. Importing an element module registers nothing by itself; that keeps
+ * the modules free of side effects, so bundlers can tree-shake what a page doesn't use.
+ */
+export declare const trainingElements: readonly (readonly [string, CustomElementConstructor])[];
+export interface DefineTrainingElementsOptions {
+    /**
+     * Load the octolearn fonts into the page (default true). Font faces declared inside a shadow root are ignored by the
+     * browsers, so they have to live in the document. Pass false when the page already loads Montserrat itself.
+     */
+    fonts?: boolean;
+}
+/**
+ * Registers all training elements with the page's custom element registry. Names that are already taken are skipped,
+ * so a page that ends up with two copies of the package (say a game bundle and the CDN bundle) keeps working instead of
+ * throwing.
+ */
+export declare function defineTrainingElements(options?: DefineTrainingElementsOptions): void;

package/dist/types/define.d.ts

@@ -0,0 +1 @@
+export * from './index';

package/dist/types/diff.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Letter-by-letter comparison of a wrong answer with the solution, only for showing the difference (design D: "So ist es
+ * richtig: Kartof|f|el", "Du hast geschrieben: Kartof_el"). Never used to decide whether an answer is right: the server
+ * does that.
+ */
+export type DiffOp = 
+/** in both */
+{
+    kind: 'same';
+    solution: string;
+    answer: string;
+}
+/** in the solution, missing from the answer */
+ | {
+    kind: 'missing';
+    solution: string;
+}
+/** in the answer, not in the solution */
+ | {
+    kind: 'extra';
+    answer: string;
+};
+export interface LetterDiff {
+    ops: DiffOp[];
+    missing: number;
+    extra: number;
+}
+/** Longer texts are not compared: a sentence full of marks helps nobody. */
+export declare const MAX_DIFF_LENGTH = 40;
+/**
+ * Aligns answer and solution along their longest common subsequence (case-insensitive, so "haus" vs "Haus" only marks the
+ * letters that really differ). Returns null when either text is empty or too long.
+ */
+export declare function letterDiff(answer: string, solution: string): LetterDiff | null;

package/dist/types/elements/arithmetic-question.d.ts

@@ -0,0 +1,31 @@
+import { nothing, type TemplateResult } from 'lit';
+import { QuestionElement } from './question-parts';
+type Operator = '+' | '-' | '*' | '/';
+export interface ArithmeticTask {
+    first: string;
+    operator: Operator;
+    second: string;
+}
+/**
+ * Splits "12+5" like octolearn's arithmetic-question: the first of + - * found after the first character (so a leading
+ * minus belongs to the number), else /. Unlike octolearn, which looked only at the first "-", "-3-5" works too.
+ */
+export declare function parseArithmeticTask(task: string): ArithmeticTask;
+/**
+ * `<octolearn-arithmetic-question>`: design D's "Rechnen": "Rechne aus!" with "Vorlesen" beside it, then the task big
+ * ("7 · 8 =") with the answer box right after it. With multiple choice the task ends in "= ?" and the tiles follow.
+ * Screen readers hear "7 mal 8 gleich: Was ist das Ergebnis?".
+ *
+ * @fires octolearn-answer - `{ answer, dontKnow? }`
+ * @fires octolearn-speak - cancelable, `{ text, reason: 'read' }`
+ */
+export declare class OctolearnArithmeticQuestion extends QuestionElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
+    render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-arithmetic-question': OctolearnArithmeticQuestion;
+    }
+}
+export {};

package/dist/types/elements/card.d.ts

@@ -0,0 +1,43 @@
+import { type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+import type { QuestionResult } from './progress';
+export type CardState = 'question' | 'right' | 'wrong';
+/**
+ * `<octolearn-card>`: design D's question card. Lined paper, a coloured band on top (orange while asking, green after a
+ * right answer, red after a wrong one), a header with the octolearn logo, the format label ("DIKTAT"), an optional chip
+ * ("Deutsch → Englisch") and the progress stars, and Inkie peeking over the top edge while a question is open. The
+ * question goes into the default slot. While the visible area is short (`short`: a phone's keyboard is open) the header
+ * and Inkie step aside and the card gets tighter.
+ *
+ * ```html
+ * <octolearn-card label="Diktat" current="3" total="5">
+ *   <octolearn-question …></octolearn-question>
+ * </octolearn-card>
+ * ```
+ *
+ * @slot - the question (and, after an answer, the feedback)
+ */
+export declare class OctolearnCard extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    state: CardState;
+    /** The format label in the header, e.g. "Diktat". */
+    label: string;
+    /** A small note next to the label, e.g. "Deutsch → Englisch". */
+    chip?: string;
+    /** 1-based number of the current question; with `total` the header shows the stars. */
+    current?: number;
+    total?: number;
+    results: readonly QuestionResult[];
+    /** No Inkie over the top edge (e.g. in a narrow side panel). */
+    noInkie: boolean;
+    /** A lighter shadow, for a card that sits on the page instead of over a game. */
+    flat: boolean;
+    /** No header row (logo, label, stars), e.g. in the side panel, which shows them itself. The label still names the card. */
+    noHeader: boolean;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-card': OctolearnCard;
+    }
+}

package/dist/types/elements/choice-pair.d.ts

@@ -0,0 +1,21 @@
+import { type TemplateResult } from 'lit';
+/** One of the two big answer buttons ("Stimmt" / "Stimmt nicht", "Gewusst" / "Nicht gewusst"). */
+export interface PairChoice {
+    /** What is sent as the answer. */
+    value: string;
+    text: string;
+    icon: 'check' | 'cross';
+}
+export interface ChoicePairOptions {
+    /** Accessible name of the group. */
+    label: string;
+    choices: readonly [PairChoice, PairChoice];
+    /** The value already chosen; both buttons lock then. */
+    chosen: string | null;
+    onChoose: (value: string) => void;
+}
+/** Design D's two big buttons with a round icon each ("Stimmt das?"); ← picks the first, → the second. */
+export declare function choicePair(options: ChoicePairOptions): TemplateResult;
+/** The arrow key's choice: ArrowLeft the first, ArrowRight the second, anything else none. */
+export declare function arrowChoice(key: string, choices: readonly [PairChoice, PairChoice]): string | null;
+export declare const choicePairStyles: import("lit").CSSResult;

package/dist/types/elements/dictation-question.d.ts

@@ -0,0 +1,51 @@
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import type { SpeakEventDetail } from '../events';
+import { QuestionElement } from './question-parts';
+/** Speed of "Langsam anhören". */
+export declare const SLOW_RATE = 0.7;
+/**
+ * `<octolearn-dictation-question>`: design D's "Diktat". The big orange listen button, "Hör zu und schreib das Wort.",
+ * "Langsam anhören", then the answer.
+ *
+ * The element reads the word aloud itself when the question arrives and on the buttons, using the browser's speech
+ * synthesis. A page with its own speech output calls `preventDefault()` on `octolearn-speak` / `octolearn-stop`. If the
+ * browser blocks speech until the first tap, a "Abspielen" hint appears. The word is read in its language (the content's
+ * `sourceLanguage`, else German); if the device has no voice for it, a note says so instead of letting another
+ * language's voice mispronounce it.
+ *
+ * @fires octolearn-speak - cancelable, `{ text, reason: 'auto' | 'repeat' | 'slow', lang, rate? }`
+ * @fires octolearn-stop - cancelable
+ * @fires octolearn-settings - "Einstellungen" pressed (the button shows only with the `settings` attribute)
+ * @fires octolearn-answer - `{ answer, dontKnow? }`
+ */
+export declare class OctolearnDictationQuestion extends QuestionElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
+    /** Shows an "Einstellungen" button, which fires `octolearn-settings` (the page opens its own voice settings). */
+    settings: boolean;
+    /** Don't read a new word aloud by itself; only the buttons do. */
+    noAutospeak: boolean;
+    private settingsButton?;
+    /** Where the keyboard focus belongs when the page's voice settings close. */
+    focusSettings(): void;
+    /** Reads the word aloud, as the listen button does. */
+    speak(reason?: SpeakEventDetail['reason']): void;
+    stop(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    render(): TemplateResult | typeof nothing;
+    /** The word's language: the content's, else German (octolearn's dictations are German). */
+    private get wordLanguage();
+    /** Shown once the browser's voice list is known and has no voice for the word's language. */
+    private noVoiceHint;
+    private readonly handleVoicesChanged;
+    private controls;
+    private repeat;
+    private slow;
+    private openSettings;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-dictation-question': OctolearnDictationQuestion;
+    }
+}

package/dist/types/elements/feedback-toast.d.ts

@@ -0,0 +1,29 @@
+import { type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+import type { FeedbackMessage } from './feedback';
+export type { FeedbackMessage } from './feedback';
+/**
+ * `<octolearn-feedback-toast>`: shows compact `<octolearn-feedback>` cards (design D colours) at the bottom centre of the
+ * screen, for games that want a short notice instead of the feedback inside the card. Stays 5 s after a right answer,
+ * 10 s after a wrong one (`life` overrides). Clicks pass through the cards (they never block the next question's answers), and screen readers hear
+ * each new card. Call `show({ result, answer, correctAnswer })` after each evaluated answer.
+ */
+export declare class OctolearnFeedbackToast extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** At most this many cards at once; the oldest goes first. */
+    static readonly MAX_MESSAGES = 3;
+    private messages;
+    private nextId;
+    private readonly timers;
+    show(message: FeedbackMessage): void;
+    clear(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+    private dismiss;
+    private forget;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-feedback-toast': OctolearnFeedbackToast;
+    }
+}

package/dist/types/elements/feedback.d.ts

@@ -0,0 +1,87 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+import type { QueryFormat } from '../content';
+import type { FeedbackMessage, FeedbackResult } from '../feedback-message';
+export type { FeedbackMessage, FeedbackResult } from '../feedback-message';
+/** How long a right answer stays before the next question comes by itself (user decision, OC-256). */
+export declare const AUTO_CONTINUE_MS = 3000;
+/**
+ * `<octolearn-feedback>`: design D's feedback inside the card after an answer.
+ *
+ * - Right: green panel "Richtig!" with praise, happy Inkie and stars; for multiple choice the tiles with the right one
+ *   marked; "+2 Lernpunkte" and "3 richtig hintereinander"; "Weiter" fills a ring and moves on by itself after 3 s
+ *   (not while the pointer rests on the card; never with `no-auto`).
+ * - Wrong: red panel "Nicht ganz." with the reason ("Da fehlt ein Buchstabe."), "So ist es richtig:" with the letters
+ *   that differ marked, "Du hast geschrieben:" with the gaps marked, "Kein Problem – das Wort kommt bald wieder!" and
+ *   "Weiter", which waits for the learner.
+ * - `compact`: a small card for `<octolearn-feedback-toast>`.
+ *
+ * The marks only show the difference; whether an answer is right is decided by the server.
+ *
+ * @fires octolearn-continue - "Weiter" pressed, or a right answer's 3 s are over
+ * @fires octolearn-speak - cancelable, "Wort noch einmal anhören"
+ */
+export declare class OctolearnFeedback extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    result: FeedbackResult;
+    answer: string;
+    correctAnswer?: string | null;
+    typo: boolean;
+    note?: string | null;
+    dontKnow: boolean;
+    unchecked: boolean;
+    points?: number;
+    streak?: number;
+    options?: readonly string[] | null;
+    /** The question was a word (dictation, vocabulary). */
+    word: boolean;
+    /** Offer "Wort noch einmal anhören" for the solution (dictation). */
+    listenable: boolean;
+    /** TrueFalse / Flashcard: the answer is a token ("true", "known"), shown as what the learner tapped. */
+    queryFormat?: QueryFormat | null;
+    /** Never move on by itself. */
+    noAuto: boolean;
+    /** Time until a right answer moves on, in ms. */
+    delay: number;
+    /** The small toast card. */
+    compact: boolean;
+    private nextButton?;
+    private timer?;
+    private remaining;
+    private startedAt;
+    private continued;
+    /** Sets everything from one message (what TrainingSession hands out). */
+    set message(message: FeedbackMessage);
+    /** Puts the focus on "Weiter", so Enter moves on. */
+    focusContinue(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    render(): TemplateResult;
+    private get autoContinues();
+    private renderFull;
+    private renderRightPanel;
+    private renderWrongPanel;
+    private reason;
+    private get diff();
+    /** The answer was a button with a token (Richtig/Falsch, Karteikarte), not typed text. */
+    private get tapped();
+    /** What the learner answered, as they saw it: "Stimmt" for "true", "Gewusst" for "known". */
+    private shownAnswer;
+    private renderTiles;
+    private renderSolution;
+    private renderPoints;
+    private renderStreak;
+    private renderRing;
+    private renderCompact;
+    private continue;
+    private listenAgain;
+    private startTimer;
+    private stopTimer;
+    private pause;
+    private resume;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-feedback': OctolearnFeedback;
+    }
+}

package/dist/types/elements/flashcard.d.ts

@@ -0,0 +1,46 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+import type { FrontendContent } from '../content';
+/** What the server takes as the self-rating of a Karteikarte (OC-128). */
+export declare const KNOWN_ANSWER = "known";
+export declare const NOT_KNOWN_ANSWER = "unknown";
+/** Fetches the answer of a Karteikarte, e.g. `content => session.revealFlashcard(content)`. */
+export type FlashcardRevealer = (content: FrontendContent) => Promise<string>;
+/**
+ * `<octolearn-flashcard>`: the Karteikarte (OC-128, octolearn's web app only), for long answers that are hardly ever typed
+ * letter for letter. The learner thinks of the answer and turns the card with "Antwort zeigen": `reveal` fetches the
+ * answer (the server hands it out only while the content is a Karteikarte). Then "Gewusst" sends "known" (counts like a
+ * right answer) and "Nicht gewusst" "unknown" (like a wrong one); ← and → choose too. Without `reveal` the card can't be
+ * turned.
+ *
+ * @fires octolearn-answer - `{ answer: 'known' | 'unknown' }`
+ */
+export declare class OctolearnFlashcard extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The question; a new one turns the card back. */
+    content?: FrontendContent;
+    /** Fetches the answer when the learner turns the card. */
+    reveal?: FlashcardRevealer;
+    /** Don't react to ← and →. */
+    noKeys: boolean;
+    private answer;
+    private loading;
+    private failed;
+    private chosen;
+    private firstChoice?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The answer shown, null while the card is not turned. */
+    get revealedAnswer(): string | null;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    private get choices();
+    render(): TemplateResult;
+    private turn;
+    private rate;
+    private readonly onKeyDown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-flashcard': OctolearnFlashcard;
+    }
+}

package/dist/types/elements/matching-round.d.ts

@@ -0,0 +1,61 @@
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+import type { MatchingRound, MatchingRoundItem } from '../content';
+import type { AnswerEvaluation } from '../session/transport';
+/** Checks one pair with the server, e.g. `(item, answer) => session.checkPair(item, answer)`; null leaves it open. */
+export type PairChecker = (item: MatchingRoundItem, answer: string) => Promise<AnswerEvaluation | null>;
+/**
+ * `<octolearn-matching-round>`: design D's "Paare finden" (OC-125, octolearn's web app only). Questions on the left,
+ * their answers shuffled on the right; tap a question, then its answer (or the other way round). Each pair is checked
+ * on its own through `checkPair` and decided after one try, so every question is graded exactly once:
+ * - right: both turn green and stay;
+ * - wrong: the question turns red with the right answer under it, that answer leaves the game (red), the one tapped by
+ *   mistake shakes and stays open, as it belongs to another question.
+ * A pair the server could not check stays open. Everything is a native button: touch, mouse and keyboard, no dragging
+ * (WCAG 2.5.7). When all pairs are decided, "Weiter" fires `octolearn-round-done`.
+ *
+ * @fires octolearn-pair - `{ item, answer, correct, correctAnswer }` after each checked pair
+ * @fires octolearn-round-done - "Weiter" after the last pair
+ */
+export declare class OctolearnMatchingRound extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The round from the server; a new one starts over. */
+    round: MatchingRound | null;
+    /** Checks one pair. */
+    checkPair?: PairChecker;
+    private questions;
+    private answers;
+    private selectedQuestion;
+    private selectedAnswer;
+    private busy;
+    private failed;
+    private announcement;
+    private shaking;
+    private links;
+    private resizeObserver?;
+    /** Every pair is decided. */
+    get done(): boolean;
+    get correctCount(): number;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /** Where the connectors of the decided pairs run; set only when they moved, so it settles after one more update. */
+    private measureLinks;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    render(): TemplateResult | typeof nothing;
+    private renderQuestion;
+    private renderAnswer;
+    private stateIcon;
+    private isPicture;
+    private selectQuestion;
+    private selectAnswer;
+    private tryPair;
+    private decide;
+    /** The buttons just decided are disabled: the focus goes to the next open question, or to "Weiter" at the end. */
+    private focusNext;
+    private finish;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-matching-round': OctolearnMatchingRound;
+    }
+}

package/dist/types/elements/multiple-choice.d.ts

@@ -0,0 +1,33 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+/**
+ * `<octolearn-multiple-choice>`: design D's answer tiles, two columns with number badges. Tap a tile or press its number
+ * key; the choice is sent at once and the tiles lock until new options arrive (no double answers). The options are
+ * shown in the order given: the server shuffles them and never says which one is correct.
+ *
+ * Number keys work while nothing else takes them: not while typing in a field, not when another handler already used the
+ * key, and not with `no-keys` (for a game that needs 1–4 itself).
+ *
+ * @fires octolearn-answer - `{ answer }` with the chosen option
+ */
+export declare class OctolearnMultipleChoice extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The options in the order the server sent them. */
+    options: readonly string[];
+    /** Accessible name of the group, e.g. "Richtige Antwort auf „Haus“ auswählen". */
+    label?: string;
+    /** Don't react to the number keys. */
+    noKeys: boolean;
+    private chosen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    render(): TemplateResult;
+    private choose;
+    private readonly onKeyDown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-multiple-choice': OctolearnMultipleChoice;
+    }
+}

package/dist/types/elements/picture-question.d.ts

@@ -0,0 +1,30 @@
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import { QuestionElement } from './question-parts';
+/**
+ * `<octolearn-picture-question>`: design D's "Bilderrätsel": "Was siehst du auf dem Bild?", the picture in a cream frame
+ * left of "Schreib das Wort" and the field (above it on narrow screens), or above the answer tiles. `content.question` is
+ * the picture's URL. Tapping the picture shows it large in a modal dialog (closed by a tap anywhere, the close button or
+ * Escape); while it is open, the keys don't reach the answer (no number key picks a choice behind it).
+ *
+ * @fires octolearn-answer - `{ answer, dontKnow? }`
+ */
+export declare class OctolearnPictureQuestion extends QuestionElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
+    /** The large picture is showing. */
+    private zoomed;
+    private zoomDialog?;
+    /** Shows the picture large (same as tapping it). */
+    enlargePicture(): void;
+    /** Closes the large picture. */
+    closePicture(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    render(): TemplateResult | typeof nothing;
+    private onZoomKeydown;
+    private onZoomClosed;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-picture-question': OctolearnPictureQuestion;
+    }
+}

package/dist/types/elements/progress.d.ts

@@ -0,0 +1,24 @@
+import { type TemplateResult } from 'lit';
+import { OctolearnElement } from '../base-element';
+import type { QuestionResult } from '../feedback-message';
+export type { QuestionResult } from '../feedback-message';
+/**
+ * `<octolearn-progress current="3" total="5">`: design D's row of stars, "Frage 3 von 5". Answered questions are filled
+ * orange, the current one is bigger (cream while open, green when right, red outline when wrong), the rest are outlines.
+ * `results` holds the result of each question answered so far; the current question's result, once known, colours its
+ * star and is added to the announcement ("Frage 3 von 5, richtig").
+ */
+export declare class OctolearnProgress extends OctolearnElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** 1-based number of the current question. */
+    current: number;
+    total: number;
+    /** Results of the questions so far, index 0 = question 1. */
+    results: readonly QuestionResult[];
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'octolearn-progress': OctolearnProgress;
+    }
+}