@lernapps/app-templates 0.0.1 → 0.1.0

package/runtime/explainer/messages/en.json

@@ -0,0 +1,200 @@
+{
+  "language": "English",
+  "languages": "Language",
+  "start": "Start",
+  "breadcrumbs": "You are here",
+  "contents": "Contents",
+  "onThisPage": "On this page",
+  "pages": "Pages",
+  "chapters": "Chapters",
+  "pager": "Page through",
+  "previous": "Back: {title}",
+  "next": "Next: {title}",
+  "glossary": "Glossary",
+  "glossaryIntro": "The terms of this app, from A to Z, each with the page that explains it.",
+  "inGlossary": "in the glossary",
+  "explainedOn": "Explained on the page {page}",
+  "sources": "Sources",
+  "sourcesIntro": "The facts in this app come from these sources:",
+  "beforeChrist": "{year} BC",
+  "code": "Code in {language}",
+  "footer": "An explainer on lernapps.net",
+  "imprint": "Imprint",
+  "privacy": "Privacy",
+  "workedTasks": "Three worked tasks, each with its solution:",
+  "practice": "Practise yourself, with new tasks each time:",
+  "newTask": "New task",
+  "hint": "Hint",
+  "textDescription": "Text description",
+  "taskNumber": "Task no. {n}",
+  "backToTutor": "Back to the tutor",
+  "backToTutorOpen": "Switch back to the chat with {name}.",
+  "backToTutorCopied": "Switch back to {name} and paste it there. You may leave this tab open.",
+  "backToTutorFailed": "Copying did not work. Copy the selected lines, switch back to {name} and paste them there.",
+  "resultLabel": "Result line for your tutor",
+  "resultLine": "{page}, {exercise}{number}: {status}.",
+  "resultNumber": ", no. {n}",
+  "resultRight": "right on try {n}",
+  "resultSolution": "solution viewed",
+  "resultOpen": "not solved yet",
+  "resultTry": "1 try",
+  "resultTries": "{n} tries",
+  "resultInput": "input {input}",
+  "resultSession": "Session: {right} of {total} right.",
+  "resultTutor": "Tutor page:",
+  "resultTrue": "true",
+  "resultFalse": "false",
+  "stuckAsk": "Load {url} and help me with exercise {exercise}{number}. I am stuck.",
+  "stuckTask": "Exercise {exercise}{number}:",
+  "stuckInput": "I entered {input} ({tries}).",
+  "stuckTries": "So far {tries}.",
+  "stuckRight": "I solved it on try {n}.",
+  "stuckMessage": "The app says: “{message}”",
+  "stuckHint": "I opened the hint.",
+  "stuckSolution": "I viewed the solution.",
+  "stuckPrivacy": "With your click, “Why?” gives {name} the task, your input and the app's message.",
+  "stuckPrivacyCopy": "Your click copies the task, your input and the app's message for the chat with your tutor; the app sends nothing anywhere.",
+  "stuckCopied": "Switch back to {name} and paste the lines there.",
+  "stuckFailed": "Copying did not work. Copy the selected lines, switch back to {name} and paste them there.",
+  "stuckLabel": "Lines for your tutor",
+  "tutorTitle": "Learn with an AI tutor",
+  "tutorAbout": "An AI tutor is an AI assistant of your choice that accompanies you while you learn with this app. It explains the topic with the examples of the pages, gives you tasks from the app and helps you when you are stuck. You solve the tasks in the app: it checks your answers.",
+  "tutorAboutStart": "Choose your assistant here. It is then ready under the title of every page, and every exercise has the button “Help”. You can also switch it on under the title of a page.",
+  "tutorAboutPrivacy": "Your choice stays on this device; only your click opens the assistant. Ask your parents or teacher whether you may use it.",
+  "tutorAccount": "You use your own account with the provider. The assistant is not offered by lernapps.net: lernapps only provides the content and the exercises.",
+  "tutorScope": "The choice holds for all pages, on this device only.",
+  "tutorChoose": "Your AI assistant",
+  "tutorNone": "None",
+  "needsTitle": "What helps you learn",
+  "needsOpen": "Settings",
+  "needsDone": "Done",
+  "needsAbout": "Here you can tell your tutor how it should talk to you. Tick what helps you; you can choose several.",
+  "needKurzeSchritte": "Short steps",
+  "needKurzeSchritteAbout": "The tutor explains in small steps, only one thing at a time. You always know how far there is still to go.",
+  "needWenigLesen": "Little to read",
+  "needWenigLesenAbout": "The tutor writes very briefly and simply and explains every technical term. Tip: let it read its answers out to you and speak your answer.",
+  "needMehrTiefe": "More depth",
+  "needMehrTiefeAbout": "The tutor skips what you already know and asks you tricky why and what-if questions.",
+  "needAndereMuttersprache": "Another first language",
+  "needAndereMutterspracheAbout": "The tutor explains in simple sentences in the language of the app and translates new technical terms into your language. You may also write in your language.",
+  "needKlarUndWoertlich": "Clear and literal",
+  "needKlarUndWoertlichAbout": "The tutor writes exactly what it means: no jokes, hidden meanings or idioms. It always tells you where you are.",
+  "needRechnenAnschaulich": "Numbers you can see",
+  "needRechnenAnschaulichAbout": "The tutor shows you how much a number is and explains in small steps. You work things out yourself and take as much time as you need.",
+  "needsLanguage": "Your first language",
+  "needsLanguageNone": "Please choose",
+  "needsScopeTitle": "This holds",
+  "needsScopeAll": "for every explainer app on lernapps.net",
+  "needsScopeApp": "for this app only",
+  "needsPrivacy": "Your choice stays on this device. The tutor gets only the names of the settings you tick, and only when you open it.",
+  "tutorOther": "Another one: copy the text",
+  "tutorOn": "Switch on",
+  "tutorSomeone": "your AI tutor",
+  "help": "Help",
+  "helpWhy": "Why?",
+  "helpBack": "Back",
+  "helpLabel": "Ask {name} for help",
+  "helpWhyLabel": "Ask {name} why",
+  "helpBackLabel": "Back to {name}",
+  "tutorCopy": "Copy the text",
+  "tutorOpenWith": "Open with {name}",
+  "tutorGo": "Learn with {name}",
+  "tutorWay": "Assistant",
+  "tutorPageIntro": "An AI tutor explains this page to you and helps you with the exercises. Choose your assistant:",
+  "tutorPageLink": "See what your tutor gets for this page",
+  "tutorPasteHint": "{name} does not load web pages when the link comes from a button. So we copy the sentence with the link for you. A click on “Learn with {name}” opens {name} with a short message. Then paste the copied sentence (Ctrl+V, ⌘+V on a Mac) and send it.",
+  "tutorDone": "✓ Copied – now paste it into {name}",
+  "tutorCopied": "The prompt is copied. Paste it into the chat of your AI assistant.",
+  "tutorCopyFailed": "Copying did not work. Try again.",
+  "exerciseLabel": "Exercise",
+  "videoChannel": "{channel} · YouTube",
+  "videoNote": "Playing it sends data to YouTube/Google, among them your IP address.",
+  "videoPlay": "Play video",
+  "videoAlways": "Always load videos directly",
+  "assessmentTitle": "Self-assessment",
+  "assessmentOfferTitle": "What do you know already?",
+  "assessmentOfferApp": "Optional: before you start, you can solve {count} tasks from this app. At the end you see for each page whether you should look at it more closely.",
+  "assessmentOfferChapter": "Optional: before you start, you can solve {count} tasks from this chapter. At the end you see for each page whether you should look at it more closely.",
+  "assessmentOfferStart": "Start the self-assessment",
+  "assessmentOfferLast": "See your last result",
+  "assessmentIntro": "With this self-assessment, {count} tasks give you an overview of what you know already.",
+  "assessmentAllAsked": "It asks about every page.",
+  "assessmentLeftOut": "It does not ask about {n} pages. So they are worth a look:",
+  "assessmentLeftOutOne": "It does not ask about one page. So it is worth a look:",
+  "assessmentHow": "The app does not tell you for each task whether it is right. Only at the end do you see for each page asked whether you know it already. What you leave empty counts as not known.",
+  "assessmentPrivacy": "Your result stays on this device only. A new start replaces it.",
+  "assessmentBegin": "Let's go",
+  "assessmentStep": "Page {n} of {count}",
+  "assessmentTask": "Task {n}",
+  "assessmentBack": "Back",
+  "assessmentNext": "Next",
+  "assessmentFinish": "Evaluate",
+  "assessmentResultTitle": "Your result",
+  "assessmentScore": "You solved {right} of {total} tasks right.",
+  "assessmentScorePartly": "You solved {right} of {total} tasks right and {partly} partly.",
+  "assessmentAdvice": "Start with the pages you should read closely.",
+  "assessmentAllKnown": "You probably know the pages asked already. Practise on the pages anyway, so that it sticks.",
+  "assessmentKnown": "You probably know it already",
+  "assessmentPartly": "Look at it again",
+  "assessmentRead": "Read it closely",
+  "assessmentUnasked": "Not asked",
+  "assessmentPageScore": "{right} of {total} right",
+  "assessmentPageScorePartly": "{right} of {total} right, {partly} partly",
+  "assessmentRestart": "Start again",
+  "assessmentDelete": "Delete the result",
+  "assessmentDeleted": "The result is deleted.",
+  "assessmentTutorTitle": "Go on learning with an AI tutor",
+  "assessmentTutorIntro": "With your result, an AI tutor can go through the pages with you that do not stick yet. Your click gives it the result and your inputs; apart from that the app sends nothing.",
+  "assessmentTutorGo": "Talk it over with {name}",
+  "assessmentTutorPage": "See what your tutor gets",
+  "assessmentNojs": "The self-assessment needs JavaScript.",
+  "assessmentAsk": "Load {url} and be my tutor. I did the self-assessment. My result per page:",
+  "assessmentLine": "{key} ({page}, exercise {exercise}{number}): {state}.",
+  "assessmentRight": "right",
+  "assessmentPartlyRight": "partly right",
+  "assessmentWrong": "wrong",
+  "assessmentOpen": "not answered",
+  "assessmentInput": "Input: {input}",
+  "assessmentMissed": "Not reached: {points}.",
+  "assessmentPageLine": "“{page}”: {band} ({right} of {total} right).",
+  "assessmentPageLinePartly": "“{page}”: {band} ({right} of {total} right, {partly} partly).",
+  "assessmentPageUnasked": "“{page}”: not asked.",
+  "assessmentTasks": "My tasks:",
+  "assessmentBackIntro": "Press “Back to the tutor”. It copies your result. Paste it into the chat with your tutor.",
+  "assessmentBackLine": "I did the self-assessment. My result per page:",
+  "assessmentTutorRun": "This round is for your tutor: the app keeps nothing of it.",
+  "sessionIntro": "I practised on {url}:",
+  "sessionNone": "I have not solved a task on {url} yet.",
+  "sessionTask": "{exercise}{number}: {status}.",
+  "assessmentNextRound": "Link for a new round: {url}",
+  "assessmentLinks": "Links for my tutor, take exactly these:",
+  "assessmentLinkChapter": "Chapter “{chapter}”, self-assessment: {url}",
+  "assessmentLinkChapterNone": "Chapter “{chapter}” (no self-assessment):",
+  "assessmentLinkPage": "“{page}”: {url}",
+  "assessmentLinkWhole": "Self-assessment of the whole app: {url}",
+  "backToTutorDone": "✓ Copied",
+  "tutorSomeoneTo": "your AI tutor",
+  "openTaskLabel": "Open task",
+  "openTaskPoints": "A good answer has:",
+  "openTaskForm": "form",
+  "openTaskSource": "Read up",
+  "openTaskChoice": "Your answer",
+  "openTaskType": "Type it here",
+  "openTaskPaper": "On paper, then a photo",
+  "openTaskAnswer": "Your answer",
+  "openTaskPaperHow": "Write your answer on a sheet of paper. Then take a photo of it.",
+  "openTaskPhoto": "Take a photo of the sheet",
+  "openTaskPhotoAgain": "New photo",
+  "openTaskPhotoAlt": "Photo of your sheet",
+  "openTaskPhotoLocal": "The photo stays on this device: the app neither keeps nor sends it.",
+  "openTaskCompare": "Compare",
+  "openTaskWriteFirst": "Write your answer first. Then you can compare.",
+  "openTaskPhotoFirst": "Take a photo of your sheet first. Then you can compare.",
+  "openTaskCheck": "What is in your answer?",
+  "openTaskCheckHow": "Tick what you really wrote.",
+  "openTaskChange": "Change the answer",
+  "openTaskLocked": "The solution opens after your answer.",
+  "resultPartly": "partly right ({n} of {total} points, missing {missed})",
+  "resultPhoto": "answer as a photo",
+  "resultAnswer": "answer “{input}”"
+}

package/runtime/explainer/messages.ts

@@ -0,0 +1,13 @@
+// The explainer's own texts for learners, in each language it has them: an app may declare only these languages.
+import de from "./messages/de.json" with { type: "json" };
+import en from "./messages/en.json" with { type: "json" };
+import { textsIn, type Language } from "../shared/languages.ts";
+
+export type Messages = typeof de;
+export const MESSAGES: Readonly<Record<Language, Messages>> = { de, en };
+
+/** The text of `key` in `lang`, with its placeholders filled. */
+export function message(lang: string, key: keyof Messages, params: Readonly<Record<string, string>> = {}): string {
+  const text = textsIn(MESSAGES, lang)[key];
+  return text.replace(/\{(\w+)\}/g, (placeholder, name: string) => params[name] ?? placeholder);
+}

package/runtime/explainer/needs.ts

@@ -0,0 +1,122 @@
+// The needs a learner can choose for the tutor (dec-tutor-needs): ways the tutor talks that help some learners, named
+// by what helps, never by a diagnosis. The learner chooses none, one or several on the start page, and with
+// `andere-muttersprache` their first language; the choice is kept on the device as a setting for every explainer or
+// for this app only (@lernapps/tooling/storage, createSettings). The ways to the tutor that start a chat name the needs
+// in the query of the tutor page (position.ts, `bedarf=`), and the start prompt adds the first language in the
+// learner's voice; the tutor page holds a short section for each need (tutorpage.ts). Pure and without Node: the
+// client module and the build call it.
+
+/** The needs, in the order the start page shows them; their ids are a contract with every tutor. */
+export const NEEDS = [
+  "kurze-schritte",
+  "wenig-lesen",
+  "mehr-tiefe",
+  "andere-muttersprache",
+  "klar-und-woertlich",
+  "rechnen-anschaulich",
+] as const;
+
+export type Need = (typeof NEEDS)[number];
+
+/** The need whose choice also asks for the learner's first language. */
+export const OTHER_LANGUAGE: Need = "andere-muttersprache";
+
+/** The key of the choice among the learner's settings, for every explainer or for one app. */
+export const NEEDS_KEY = "tutor-bedarf";
+
+/** What the learner chose: the needs, and their first language (a language tag) with `andere-muttersprache`. */
+export interface NeedsChoice {
+  needs: Need[];
+  language?: string;
+}
+
+const isNeed = (value: unknown): value is Need => NEEDS.some((need) => need === value);
+
+/** Whether a stored value is a choice of needs. */
+export function isNeedsChoice(value: unknown): value is NeedsChoice {
+  if (typeof value !== "object" || value === null) return false;
+  const { needs, language } = value as Record<string, unknown>;
+  return Array.isArray(needs) && needs.every(isNeed) && (language === undefined || typeof language === "string");
+}
+
+/**
+ * The first languages the start page offers, as language tags: the most common first languages of children in
+ * German schools besides German, and German Sign Language (`gsg`).
+ */
+export const LANGUAGES: readonly string[] = [
+  "ar",
+  "bg",
+  "bs",
+  "en",
+  "fa",
+  "fr",
+  "gsg",
+  "el",
+  "it",
+  "hr",
+  "ku",
+  "pl",
+  "ps",
+  "pt",
+  "ro",
+  "ru",
+  "so",
+  "sq",
+  "sr",
+  "es",
+  "ti",
+  "tr",
+  "uk",
+  "vi",
+  "zh",
+];
+
+/** The names of the languages Intl does not know, in each language of the explainer. */
+const OWN_NAMES: Readonly<Record<string, Readonly<Record<string, string>>>> = {
+  de: { gsg: "Deutsche Gebärdensprache" },
+  en: { gsg: "German Sign Language" },
+};
+
+/** The name of the language `tag` in `lang`, "Türkisch" for `tr` in German; the tag itself if none is known. */
+export function languageName(tag: string, lang: string): string {
+  const own = OWN_NAMES[lang]?.[tag] ?? OWN_NAMES["de"]?.[tag];
+  if (own !== undefined) return own;
+  try {
+    const name = new Intl.DisplayNames([lang], { type: "language", fallback: "none" }).of(tag);
+    return name === undefined ? tag : name.charAt(0).toLocaleUpperCase(lang) + name.slice(1);
+  } catch {
+    return tag;
+  }
+}
+
+/** The query parameter of the needs, `bedarf=kurze-schritte,mehr-tiefe` in the order of NEEDS; "" for none. */
+export function needsParameter(choice: NeedsChoice | undefined): string {
+  const needs = NEEDS.filter((need) => choice?.needs.includes(need));
+  return needs.length === 0 ? "" : `bedarf=${needs.join(",")}`;
+}
+
+/** The query `query` (with its "?" or "") with the needs of `choice` added. */
+export function withNeeds(query: string, choice: NeedsChoice | undefined): string {
+  const needs = needsParameter(choice);
+  if (needs === "") return query;
+  return query === "" ? `?${needs}` : `${query}&${needs}`;
+}
+
+const FIRST_LANGUAGE: Readonly<Record<string, string>> = {
+  de: "Meine Muttersprache ist {language}.",
+  en: "My first language is {language}.",
+};
+
+/**
+ * The sentence the start prompt adds in the learner's voice when they chose `andere-muttersprache` with a language,
+ * in `lang`: "Meine Muttersprache ist Türkisch."; "" otherwise.
+ */
+export function languageSentence(choice: NeedsChoice | undefined, lang: string): string {
+  if (choice?.language === undefined || !choice.needs.includes(OTHER_LANGUAGE)) return "";
+  const text = FIRST_LANGUAGE[lang] ?? FIRST_LANGUAGE["de"] ?? "";
+  return text.replace("{language}", languageName(choice.language, lang));
+}
+
+/** A prompt that starts a chat, with the sentence of the learner's first language after it when they chose one. */
+export const withLanguage = (prompt: string, choice: NeedsChoice | undefined, lang: string): string =>
+  [prompt, languageSentence(choice, lang)].filter((part) => part !== "").join("\n");

package/runtime/explainer/open-task.ts

@@ -0,0 +1,235 @@
+// An open task in the browser (explainer.ts, assessment-client.ts): the learner answers first, then compares. "Deine
+// Lösung" offers the ways the task allows: typing into a text field, or writing on paper and taking a photo of the
+// sheet. "Vergleichen" opens once there is text or a photo; it shows the points of a good answer as tick boxes ("Was
+// steht in deiner Antwort?"), each point of the content with its link to read up, and on a content page it opens the
+// model answer ("Lösung"), which stays shut before the learner's own answer. Ticking makes the learner read each point;
+// the ticks give right (all), partly right (some) or wrong (none) for the result line, at once, without a step of
+// their own. In a self-assessment there is no model answer: the ticks are the
+// answer, read at "Auswerten" of the whole run. The photo is shown from memory (an object URL), never stored or sent.
+// On a content page the text, the way chosen and the ticks are kept while the tab is open (sessionStorage through
+// @lernapps/tooling/storage, under the app's prefix), so that a reload loses no answer and a new day starts afresh; a
+// self-assessment keeps nothing of its own (each run starts empty).
+import { moveFocus } from "@lernapps/tooling/a11y";
+import { createStorage } from "@lernapps/tooling/storage";
+import { escape } from "../shared/html.ts";
+import type { OpenTaskData } from "./exercises.ts";
+import { message } from "./messages.ts";
+import { SHOWN_EVENT } from "./tasks.ts";
+
+/** What became of an open task: the points ticked and missed (each from 0), the text, whether there is a photo. */
+export interface OpenTaskResult {
+  state: "richtig" | "teilweise" | "falsch" | "offen";
+  ticked: number[];
+  missed: number[];
+  text?: string;
+  photo: boolean;
+}
+
+/** What a content page keeps of an open task while the tab is open. */
+interface Kept {
+  way: "text" | "photo";
+  text: string;
+  ticked: number[];
+  compared: boolean;
+}
+
+const isKept = (value: unknown): value is Kept => {
+  if (typeof value !== "object" || value === null) return false;
+  const kept = value as Partial<Kept>;
+  return (
+    (kept.way === "text" || kept.way === "photo") &&
+    typeof kept.text === "string" &&
+    Array.isArray(kept.ticked) &&
+    kept.ticked.every((index) => Number.isInteger(index)) &&
+    typeof kept.compared === "boolean"
+  );
+};
+
+export interface OpenTaskOptions {
+  /** In a self-assessment: no model answer. */
+  assessment?: boolean;
+  /** The learner compared (`attempt`: a new try) or changed a tick (the same try). */
+  onResult?: (result: OpenTaskResult, attempt: boolean) => void;
+}
+
+/** The state of an open task as `ticked` of `total` points give it, and the points missed. */
+export function openTaskState(ticked: readonly number[], total: number): Pick<OpenTaskResult, "state" | "missed"> {
+  const missed = Array.from({ length: total }, (_point, index) => index).filter((index) => !ticked.includes(index));
+  const state = ticked.length === total ? "richtig" : ticked.length === 0 ? "falsch" : "teilweise";
+  return { state, missed };
+}
+
+/** Makes the open task in `element` live; returns what became of it so far. */
+export function startOpenTask(
+  element: HTMLElement,
+  data: OpenTaskData,
+  options: OpenTaskOptions = {},
+): { result: () => OpenTaskResult } {
+  const { lang, id, points } = data;
+  const t = (key: Parameters<typeof message>[1], params?: Record<string, string>) => escape(message(lang, key, params));
+  const live = element.querySelector<HTMLElement>(".explainer-open-live");
+  const listed = element.querySelector<HTMLElement>(".explainer-open-points");
+  const solution = element.querySelector<HTMLDetailsElement>(":scope > details.explainer-solution");
+  const empty = (): OpenTaskResult => ({ state: "offen", ticked: [], missed: [], photo: false });
+  if (!live) return { result: empty };
+  // with JavaScript the learner answers before seeing the points and the model answer
+  if (listed) listed.hidden = true;
+  if (solution) solution.hidden = true;
+
+  const both = data.answer.includes("text") && data.answer.includes("photo");
+  let way: "text" | "photo" = data.answer.includes("text") ? "text" : "photo";
+  let text = "";
+  let photo: string | undefined;
+  let ticked: number[] = [];
+  let compared = false;
+  // kept while the tab is open, by the page and the exercise; a self-assessment keeps nothing
+  const storage = options.assessment
+    ? undefined
+    : createStorage(element.dataset["storage"] ?? "explainer", { type: "sessionStorage" });
+  const key = `antwort:${element.ownerDocument.location.pathname}#${id}`;
+  const kept = storage?.load(key, isKept);
+  if (kept !== undefined && data.answer.includes(kept.way)) {
+    ({ way, text, compared } = kept);
+    ticked = kept.ticked.filter((index) => index < points.length);
+    // a photo is never kept: comparing it again needs a new one
+    if (way === "photo") compared = false;
+  }
+  const keep = () => storage?.save(key, { way, text, ticked, compared } satisfies Kept);
+
+  const choice = both
+    ? [
+        `<fieldset class="explainer-open-choice"><legend>${t("openTaskChoice")}</legend>`,
+        `<label><input type="radio" name="${id}-way" value="text" checked> <span>${t("openTaskType")}</span></label>`,
+        `<label><input type="radio" name="${id}-way" value="photo"> <span>${t("openTaskPaper")}</span></label>`,
+        `</fieldset>`,
+      ].join("")
+    : "";
+  live.innerHTML = [
+    `<div class="explainer-open-write">`,
+    choice,
+    `<div class="explainer-open-text"><label for="${id}-text">${t("openTaskAnswer")}</label>`,
+    `<textarea id="${id}-text" rows="6"></textarea></div>`,
+    `<div class="explainer-open-photo" hidden><p>${t("openTaskPaperHow")}</p>`,
+    `<label class="explainer-open-shoot"><input type="file" accept="image/*" capture="environment"> <span>${t("openTaskPhoto")}</span></label>`,
+    `<img class="explainer-open-preview" alt="${t("openTaskPhotoAlt")}" hidden>`,
+    `<p class="explainer-open-local"><small>${t("openTaskPhotoLocal")}</small></p></div>`,
+    `<p class="explainer-open-need" aria-live="polite"></p>`,
+    `<p class="explainer-open-locked"><small>${t("openTaskLocked")}</small></p>`,
+    `</div>`,
+    `<fieldset class="explainer-open-check" hidden><legend>${t("openTaskCheck")}</legend>`,
+    `<p>${t("openTaskCheckHow")}</p>`,
+    points
+      .map(
+        (point, index) =>
+          `<label><input type="checkbox" value="${index}"> <span>${escape(point.text)}${point.kind === "form" ? ` <small>(${t("openTaskForm")})</small>` : ""}${point.href === undefined ? "" : ` <a href="${escape(point.href)}">${t("openTaskSource")}</a>`}</span></label>`,
+      )
+      .join(""),
+    `</fieldset>`,
+    `<p class="question-actions">`,
+    `<button type="button" class="explainer-open-compare">${t("openTaskCompare")}</button>`,
+    ` <button type="button" class="explainer-open-change" hidden>${t("openTaskChange")}</button>`,
+    `</p>`,
+  ].join("");
+  live.hidden = false;
+  // the tutor's help button goes into the row of "Vergleichen" (explainer.ts)
+  element.dispatchEvent(new CustomEvent(SHOWN_EVENT, { bubbles: true }));
+
+  const part = <T extends HTMLElement>(selector: string) => live.querySelector<T>(selector);
+  const write = part<HTMLElement>(".explainer-open-write");
+  const textPart = part<HTMLElement>(".explainer-open-text");
+  const photoPart = part<HTMLElement>(".explainer-open-photo");
+  const field = part<HTMLTextAreaElement>("textarea");
+  const file = part<HTMLInputElement>('input[type="file"]');
+  const preview = part<HTMLImageElement>(".explainer-open-preview");
+  const shoot = part<HTMLElement>(".explainer-open-shoot span");
+  const need = part<HTMLElement>(".explainer-open-need");
+  const check = part<HTMLFieldSetElement>(".explainer-open-check");
+  const compare = part<HTMLButtonElement>(".explainer-open-compare");
+  const change = part<HTMLButtonElement>(".explainer-open-change");
+
+  const ready = () => (way === "text" ? text.trim() !== "" : photo !== undefined);
+  const current = (): OpenTaskResult => {
+    const answer = way === "text" ? { text: text.trim() } : {};
+    if (!compared) return { ...empty(), ...answer, photo: way === "photo" && photo !== undefined };
+    return { ...openTaskState(ticked, points.length), ticked: [...ticked], ...answer, photo: way === "photo" };
+  };
+
+  /** The step the learner is at: writing, or comparing. */
+  const show = () => {
+    if (textPart) textPart.hidden = way !== "text";
+    if (photoPart) photoPart.hidden = way !== "photo";
+    if (write) write.hidden = compared;
+    if (check) check.hidden = !compared;
+    if (compare) compare.hidden = compared;
+    // the model answer opens with the comparing, after the learner's own answer
+    if (solution) solution.hidden = !compared;
+    if (change) change.hidden = !compared;
+    if (need)
+      need.textContent =
+        compared || ready() ? "" : message(lang, way === "text" ? "openTaskWriteFirst" : "openTaskPhotoFirst");
+  };
+
+  for (const radio of live.querySelectorAll<HTMLInputElement>(".explainer-open-choice input")) {
+    radio.addEventListener("change", () => {
+      if (radio.checked) way = radio.value === "photo" ? "photo" : "text";
+      keep();
+      show();
+    });
+  }
+  field?.addEventListener("input", () => {
+    text = field.value;
+    keep();
+    show();
+  });
+  file?.addEventListener("change", () => {
+    const chosen = file.files?.[0];
+    if (!chosen) return;
+    // shown from memory only: never stored, never sent
+    if (photo !== undefined) URL.revokeObjectURL(photo);
+    photo = URL.createObjectURL(chosen);
+    if (preview) {
+      preview.src = photo;
+      preview.hidden = false;
+    }
+    if (shoot) shoot.textContent = message(lang, "openTaskPhotoAgain");
+    show();
+  });
+  compare?.addEventListener("click", () => {
+    if (!ready()) {
+      show();
+      if (need) moveFocus(need);
+      return;
+    }
+    compared = true;
+    keep();
+    show();
+    const legend = check?.querySelector<HTMLElement>("legend");
+    if (legend) moveFocus(legend);
+    options.onResult?.(current(), true);
+  });
+  change?.addEventListener("click", () => {
+    compared = false;
+    keep();
+    show();
+    if (field && way === "text") moveFocus(field);
+  });
+  for (const box of check?.querySelectorAll<HTMLInputElement>("input") ?? []) {
+    box.addEventListener("change", () => {
+      const index = Number(box.value);
+      ticked = box.checked ? [...ticked, index].sort((a, b) => a - b) : ticked.filter((one) => one !== index);
+      keep();
+      options.onResult?.(current(), false);
+    });
+  }
+  // what the tab kept: the way, the text and the ticks
+  for (const radio of live.querySelectorAll<HTMLInputElement>(".explainer-open-choice input"))
+    radio.checked = radio.value === way;
+  if (field) field.value = text;
+  for (const box of check?.querySelectorAll<HTMLInputElement>("input") ?? [])
+    box.checked = ticked.includes(Number(box.value));
+  show();
+  return { result: current };
+}
+
+/** The names of the points at `indexes` (each from 0): P1, P2, … */
+export const pointNames = (indexes: readonly number[]): string => indexes.map((index) => `P${index + 1}`).join(", ");