@lernapps/app-templates 0.1.0 → 0.1.1

package/dist/{assessment-By2GGTJC.mjs → assessment-Dy359O1O.mjs}

@@ -1,5 +1,5 @@
 import { i as inLanguage, l as textsIn, s as localeOf, t as escape } from "./html-mffkHGHh.mjs";
-import { S as shuffled, c as hash, m as parseNumber, u as isCorrect, y as random } from "./render-BJey0bwl.mjs";
+import { S as shuffled, c as hash, m as parseNumber, u as isCorrect, y as random } from "./render-GS1Htlu8.mjs";
 import { createStorage } from "@lernapps/tooling/storage";
 // runtime/explainer/fraction.ts
 const abs = (n) => n < 0n ? -n : n;

package/dist/{blocks-BmRrD7UY.mjs → blocks-CxtCPAa5.mjs}

@@ -1,7 +1,7 @@
 import { i as inLanguage, l as textsIn, n as escapeText, s as localeOf, t as escape } from "./html-mffkHGHh.mjs";
 import { n as markerOf } from "./block-BK_ohsH1.mjs";
-import { l as renderFormula, n as isUrl, o as renderInline, s as renderMarkdown } from "./check-BkEl-m-F.mjs";
-import "./validate-CxtdeQ5S.mjs";
+import { c as renderMarkdown, n as isUrl, s as renderInline, u as renderFormula } from "./check-CteIFN96.mjs";
+import "./validate-Bxy9NfB8.mjs";
 import hljs from "highlight.js/lib/core";
 import bash from "highlight.js/lib/languages/bash";
 import c from "highlight.js/lib/languages/c";

package/dist/blocks.mjs

@@ -1,4 +1,4 @@
 import { i as materialIn, n as markerOf, r as materialImages, t as MATERIAL_TYPES } from "./block-BK_ohsH1.mjs";
-import { a as highlight, i as hundredGrid, n as renderMaterial, r as bar, t as renderCredit } from "./blocks-BmRrD7UY.mjs";
-import { n as checkMaterial, t as MATERIAL_DEFINITIONS } from "./validate-CxtdeQ5S.mjs";
+import { a as highlight, i as hundredGrid, n as renderMaterial, r as bar, t as renderCredit } from "./blocks-CxtCPAa5.mjs";
+import { n as checkMaterial, t as MATERIAL_DEFINITIONS } from "./validate-Bxy9NfB8.mjs";
 export { MATERIAL_DEFINITIONS, MATERIAL_TYPES, bar, checkMaterial, highlight, hundredGrid, markerOf, materialImages, materialIn, renderCredit, renderMaterial };

package/dist/{check-BkEl-m-F.mjs → check-CteIFN96.mjs}

@@ -251,4 +251,4 @@ function checkText(value, kind, languages, declaredIn) {
 		links
 	};
 }
-export { plain as a, renderWithFormulas as c, inspect as i, renderFormula as l, isUrl as n, renderInline as o, formulaProblems as r, renderMarkdown as s, checkText as t };
+export { inspect as a, renderMarkdown as c, formulaProblems as i, renderWithFormulas as l, isUrl as n, plain as o, FORMULA as r, renderInline as s, checkText as t, renderFormula as u };

package/dist/{content-cYBPYg_J.mjs → content-DO6oEJxj.mjs}

@@ -1,4 +1,4 @@
-import { t as checkText } from "./check-BkEl-m-F.mjs";
+import { t as checkText } from "./check-CteIFN96.mjs";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { LineCounter, isNode, parseDocument } from "yaml";

package/dist/{e2e-BiMI-pCL.mjs → e2e-CU0n_unV.mjs}

@@ -1,5 +1,5 @@
 import { l as textsIn } from "./html-mffkHGHh.mjs";
-import { g as questionId, t as QUESTION_MESSAGES } from "./render-BJey0bwl.mjs";
+import { g as questionId, t as QUESTION_MESSAGES } from "./render-GS1Htlu8.mjs";
 import { expect } from "playwright/test";
 // runtime/shared/questions/e2e.ts
 /** The question's own texts in `lang`. */

package/dist/{engine-BqF2Vffn.mjs → engine-CArxqizW.mjs}

@@ -1,5 +1,5 @@
 import { l as textsIn } from "./html-mffkHGHh.mjs";
-import { S as shuffled, c as hash, f as missesRight, l as isComplete, t as QUESTION_MESSAGES, u as isCorrect, w as wrongReasons } from "./render-BJey0bwl.mjs";
+import { S as shuffled, c as hash, f as missesRight, l as isComplete, t as QUESTION_MESSAGES, u as isCorrect, w as wrongReasons } from "./render-GS1Htlu8.mjs";
 import { translator } from "@lernapps/tooling/i18n";
 import { moveFocus } from "@lernapps/tooling/a11y";
 // runtime/shared/questions/engine.ts

package/dist/explainer-e2e.mjs

@@ -1,13 +1,18 @@
-import { a as routes, d as templatesOf, f as workedTasks, l as renderExercise, n as loadSite, s as dataOf, u as taskSeeds } from "./load-C-0hUaSC.mjs";
+import { a as routes, d as templatesOf, f as workedTasks, l as renderExercise, n as loadSite, s as dataOf, u as taskSeeds } from "./load-RosvaPZf.mjs";
 import { i as inLanguage } from "./html-mffkHGHh.mjs";
-import { i as inspect, s as renderMarkdown } from "./check-BkEl-m-F.mjs";
-import { C as wrongAnswer, _ as questionIn, b as rightAnswer, f as missesRight, g as questionId, i as questionMessagesIn, n as answerText, w as wrongReasons } from "./render-BJey0bwl.mjs";
-import { a as giveAnswer, i as expectMaterial, r as expectFeedbackInView, t as answerQuestion } from "./e2e-BiMI-pCL.mjs";
-import { A as answerFor, C as watchAddress, D as generate, F as questionFor, G as taskText, I as taskKey, R as fill, U as plainText, X as kindOf, a as assessments, j as diagnose, m as titleOf, v as timelineEvents, w as message, y as embedAddress } from "./assessment-By2GGTJC.mjs";
-import { n as answerShown } from "./result-_eQcamoz.mjs";
+import { a as inspect, c as renderMarkdown, l as renderWithFormulas } from "./check-CteIFN96.mjs";
+import { C as wrongAnswer, _ as questionIn, b as rightAnswer, f as missesRight, g as questionId, i as questionMessagesIn, n as answerText, w as wrongReasons } from "./render-GS1Htlu8.mjs";
+import { a as giveAnswer, i as expectMaterial, r as expectFeedbackInView, t as answerQuestion } from "./e2e-CU0n_unV.mjs";
+import { A as answerFor, C as watchAddress, D as generate, F as questionFor, G as taskText, I as taskKey, R as fill, U as plainText, X as kindOf, a as assessments, j as diagnose, m as titleOf, v as timelineEvents, w as message, y as embedAddress } from "./assessment-Dy359O1O.mjs";
+import { n as answerShown } from "./result-D_mmCVwN.mjs";
 import { n as ASSESSMENT_TASK_EVENT, p as taskNumber, u as nextTaskNumber } from "./tasks-DADUYy52.mjs";
 import { expect, test } from "playwright/test";
 // runtime/explainer/outline.ts
+/**
+* A learner text of a question as the page shows it, as text: its formulas $…$ rendered (a formula has no space the
+* tests could rely on in a browser's text, see squash in e2e.ts), the rest as written.
+*/
+const shownText = (text) => plainText(renderWithFormulas(text));
 /** The headings, sections, formulas and figures of `blocks` in `lang`, under a heading of level `level`. */
 function walk(site, blocks, lang, level, anchor, into) {
 	const text = (value) => inLanguage(value, lang);
@@ -142,7 +147,7 @@ function walk(site, blocks, lang, level, anchor, into) {
 				id: block.id,
 				type: block.type,
 				question,
-				answers: question.type === "single-choice" || question.type === "multiple-choice" ? question.options.filter((option) => option.correct).map((option) => option.text) : [plainText(answerText(question, lang))]
+				answers: question.type === "single-choice" || question.type === "multiple-choice" ? question.options.filter((option) => option.correct).map((option) => shownText(option.text)) : [plainText(answerText(question, lang))]
 			});
 		}
 	}
@@ -279,6 +284,11 @@ const BAND_WORDS = {
 	read: "assessmentRead",
 	unasked: "assessmentUnasked"
 };
+/**
+* `text` without space. A browser's text of a formula has space between its parts ("2 7" for 2⁷) where the content's
+* has none, so texts with formulas are compared without it (in the order of their characters, which is what counts).
+*/
+const squash = (text) => text.replace(/\s+/g, "");
 /** The task number of the deep link the tests open a generated exercise with. */
 const SEED = 7;
 /**
@@ -290,7 +300,7 @@ async function expectExercises(page, item) {
 	const main = page.locator("main");
 	const expected = item.exercises.map((exercise) => exercise.kind === "question" ? {
 		id: exercise.id,
-		texts: [exercise.question.text],
+		texts: [shownText(exercise.question.text)],
 		answers: [exercise.answers]
 	} : exercise.kind === "open" ? {
 		id: exercise.id,
@@ -301,7 +311,7 @@ async function expectExercises(page, item) {
 		texts: exercise.worked.map((worked) => worked.task),
 		answers: exercise.worked.map((worked) => [worked.answer])
 	});
-	const read = () => main.locator(".explainer-exercise").evaluateAll((elements) => elements.map((element) => {
+	const read = async () => (await main.locator(".explainer-exercise").evaluateAll((elements) => elements.map((element) => {
 		const fold = (text) => (text ?? "").replace(/\s+/g, " ").trim();
 		const own = element.classList.contains("explainer-question") ? [...element.querySelectorAll("legend")] : element.classList.contains("explainer-open-task") ? [...element.querySelectorAll(":scope > .explainer-open-task-text")] : [...element.querySelectorAll(".explainer-worked-task > .explainer-task")];
 		const solutions = [...element.querySelectorAll("details.explainer-solution")];
@@ -310,6 +320,10 @@ async function expectExercises(page, item) {
 			texts: own.map((text) => fold(text.textContent)),
 			shown: solutions.map((details) => details.open ? fold(details.innerText) : "")
 		};
+	}))).map((item) => ({
+		...item,
+		texts: item.texts.map(squash),
+		shown: item.shown.map(squash)
 	}));
 	const before = await read();
 	expect(before.map(({ id, texts }) => ({
@@ -317,12 +331,12 @@ async function expectExercises(page, item) {
 		texts
 	})), `${item.url}: each exercise with its text`).toEqual(expected.map(({ id, texts }) => ({
 		id,
-		texts
+		texts: texts.map(squash)
 	})));
 	await main.locator(".explainer-exercise details.explainer-solution > summary").evaluateAll((summaries) => summaries.forEach((summary) => summary.click()));
 	const after = await read();
 	for (const [index, exercise] of expected.entries()) exercise.answers.forEach((answers, at) => {
-		for (const answer of answers) expect(after[index]?.shown[at] ?? "", `${item.url}: ${exercise.id}, Lösung ${at + 1} shows ${answer}`).toContain(answer);
+		for (const answer of answers) expect(after[index]?.shown[at] ?? "", `${item.url}: ${exercise.id}, Lösung ${at + 1} shows ${answer}`).toContain(squash(answer));
 	});
 }
 /** Without JavaScript: each component's nojs text is visible, not empty and as in the content; its island is hidden. */
@@ -535,7 +549,7 @@ const feedback = (page, id) => page.locator(`[id="${id}"] .question-feedback`);
 function reasonFor(question, answer) {
 	const quiz = questionMessagesIn("de");
 	const [first] = wrongReasons(question, answer);
-	if (first !== void 0) return first.option === void 0 ? first.text : `${first.option}: ${first.text}`;
+	if (first !== void 0) return first.option === void 0 ? shownText(first.text) : `${shownText(first.option)}: ${shownText(first.text)}`;
 	return missesRight(question, answer) ? quiz.missingRight : quiz.lookAgain;
 }
 /**
@@ -545,7 +559,7 @@ function reasonFor(question, answer) {
 async function wrongThenSolution(page, exercise, question, reason) {
 	const item = page.locator(`[id="${questionId(question)}"]`);
 	await expect(feedback(page, questionId(question))).toContainText(questionMessagesIn("de").wrong);
-	await expect(item.locator(".question-diagnosis").first(), `${exercise}: the reason of the wrong answer`).toHaveText(reason);
+	await expect.poll(async () => squash(await item.locator(".question-diagnosis").first().textContent() ?? ""), `${exercise}: the reason of the wrong answer`).toBe(squash(reason));
 	await expectFeedbackInView(page, question);
 	await expect(item.locator(".question-reveal"), `${exercise}: no solution after a wrong answer`).toBeHidden();
 	await expect(item.locator("input, select").first(), `${exercise}: another try`).toBeEnabled();

package/dist/explainer-plugin.mjs

@@ -1,12 +1,12 @@
-import { _ as propertyProblems, a as routes, c as exerciseData, d as templatesOf, g as exampleProblems, h as describedProblems, i as hiddenChapter, l as renderExercise, m as TABLE_CONTRACT, n as loadSite, o as terms, p as SIZE_BUDGET, r as contentPages, s as dataOf, t as ContentError, u as taskSeeds, v as propsIn } from "./load-C-0hUaSC.mjs";
+import { _ as exampleProblems, a as routes, c as exerciseData, d as templatesOf, g as describedProblems, h as TABLE_CONTRACT, i as hiddenChapter, l as renderExercise, m as SIZE_BUDGET, n as loadSite, o as terms, p as formulaAlternative, r as contentPages, s as dataOf, t as ContentError, u as taskSeeds, v as propertyProblems, y as propsIn } from "./load-RosvaPZf.mjs";
 import { i as inLanguage, s as localeOf, t as escape } from "./html-mffkHGHh.mjs";
 import { n as markerOf } from "./block-BK_ohsH1.mjs";
-import { n as renderMaterial } from "./blocks-BmRrD7UY.mjs";
-import { a as plain, c as renderWithFormulas, o as renderInline, s as renderMarkdown } from "./check-BkEl-m-F.mjs";
-import { _ as questionIn, a as renderQuestion, i as questionMessagesIn, n as answerText } from "./render-BJey0bwl.mjs";
+import { n as renderMaterial } from "./blocks-CxtCPAa5.mjs";
+import { c as renderMarkdown, l as renderWithFormulas, o as plain, s as renderInline } from "./check-CteIFN96.mjs";
+import { _ as questionIn, a as renderQuestion, i as questionMessagesIn, n as answerText } from "./render-GS1Htlu8.mjs";
 import { n as isSizeless, t as imageType } from "./image-CspJVfyQ.mjs";
 import { a as pageFooter, c as withLanguage, i as notFoundPage, n as fromDepth, o as pageHeader, r as languageRoot, s as relative, t as alternateLinks } from "./pages-9RaaomoO.mjs";
-import { B as label, D as generate, F as questionFor, H as placeholdersIn, S as videoLine, U as plainText, V as placeholderValue, X as kindOf, _ as termId, a as assessments, b as renderVideo, h as allBlocks, m as titleOf, o as drawsTasks, p as stepHint, r as assessmentOf, v as timelineEvents, w as message } from "./assessment-By2GGTJC.mjs";
+import { B as label, D as generate, F as questionFor, H as placeholdersIn, S as videoLine, U as plainText, V as placeholderValue, X as kindOf, _ as termId, a as assessments, b as renderVideo, h as allBlocks, m as titleOf, o as drawsTasks, p as stepHint, r as assessmentOf, v as timelineEvents, w as message } from "./assessment-Dy359O1O.mjs";
 import { i as NEW_TASK_ICON } from "./tasks-DADUYy52.mjs";
 import { n as NEEDS, o as languageName, t as LANGUAGES } from "./needs-BzEahJ6X.mjs";
 import { n as vueAlias, r as withServer, t as VUE_OPTIONS } from "./vue-DO1m6q1R.mjs";
@@ -909,6 +909,7 @@ function itemHtml(context, data, n, component = "") {
 	return `${label}${renderQuestion(question, {
 		lang,
 		format: (text) => rendered[text] ?? renderWithFormulas(text),
+		describe: (text) => formulaAlternative(text, lang),
 		...question.material === void 0 ? {} : { materialHtml: renderMaterial(question.material, context.material) }
 	})}`;
 }

package/dist/explainer.mjs

@@ -1,8 +1,8 @@
 import { t as escape } from "./html-mffkHGHh.mjs";
-import { S as shuffled, a as renderQuestion, g as questionId, l as isComplete, u as isCorrect } from "./render-BJey0bwl.mjs";
-import { n as startQuestion, t as readAnswer } from "./engine-BqF2Vffn.mjs";
-import { D as generate, F as questionFor, G as taskText, N as mistakeOf, W as stepsOf, c as isStoredResult, f as resultQuery, i as assessmentPrompt, j as diagnose, l as linkLines, n as BAND_MESSAGES, u as pageResults, w as message, x as startVideos, z as hintOf } from "./assessment-By2GGTJC.mjs";
-import { i as sessionLines, n as answerShown, r as resultLine, t as Progress } from "./result-_eQcamoz.mjs";
+import { S as shuffled, a as renderQuestion, g as questionId, l as isComplete, u as isCorrect } from "./render-GS1Htlu8.mjs";
+import { n as startQuestion, t as readAnswer } from "./engine-CArxqizW.mjs";
+import { D as generate, F as questionFor, G as taskText, N as mistakeOf, W as stepsOf, c as isStoredResult, f as resultQuery, i as assessmentPrompt, j as diagnose, l as linkLines, n as BAND_MESSAGES, u as pageResults, w as message, x as startVideos, z as hintOf } from "./assessment-Dy359O1O.mjs";
+import { i as sessionLines, n as answerShown, r as resultLine, t as Progress } from "./result-D_mmCVwN.mjs";
 import { c as addressOf, d as numberFromAddress, f as randomTaskNumber, i as NEW_TASK_ICON, n as ASSESSMENT_TASK_EVENT, p as taskNumber, r as ASSESSMENT_UNPACKED_EVENT, s as SHOWN_EVENT, t as ASSESSMENT_ANSWER_EVENT, u as nextTaskNumber } from "./tasks-DADUYy52.mjs";
 import { a as isNeedsChoice, c as withNeeds, r as NEEDS_KEY, s as withLanguage } from "./needs-BzEahJ6X.mjs";
 import { moveFocus } from "@lernapps/tooling/a11y";

package/dist/interactive-e2e.mjs

@@ -1,7 +1,7 @@
 import { i as inLanguage } from "./html-mffkHGHh.mjs";
 import { r as languageRoot } from "./pages-9RaaomoO.mjs";
 import { i as doingText, n as STATE_PROPERTY, o as inputsOf, s as mismatch, t as CLOCK_PROPERTY } from "./contract-PONpxJtd.mjs";
-import { i as message, o as loadInteractive, t as APP_PAGE } from "./render-BL6fV_NI.mjs";
+import { i as message, o as loadInteractive, t as APP_PAGE } from "./render-D5kwkNt1.mjs";
 import { expect, test } from "playwright/test";
 // runtime/interactive/e2e.ts
 /** The page's language, its alternates and a switch to each other language, the archetype marker. */

package/dist/interactive-plugin.mjs

@@ -1,9 +1,9 @@
 import { c as withLanguage, i as notFoundPage, n as fromDepth } from "./pages-9RaaomoO.mjs";
 import { c as sourceScope, n as codeProblems } from "./vue-code-BkJjW_I_.mjs";
-import { o as pathText, t as Problems } from "./content-cYBPYg_J.mjs";
+import { o as pathText, t as Problems } from "./content-DO6oEJxj.mjs";
 import { n as vueAlias, r as withServer, t as VUE_OPTIONS } from "./vue-DO1m6q1R.mjs";
 import { a as inputText, i as doingText, o as inputsOf, s as mismatch } from "./contract-PONpxJtd.mjs";
-import { a as InteractiveError, n as pages, o as loadInteractive, r as renderPage } from "./render-BL6fV_NI.mjs";
+import { a as InteractiveError, n as pages, o as loadInteractive, r as renderPage } from "./render-D5kwkNt1.mjs";
 import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
 import { join } from "node:path";
 import vue from "@vitejs/plugin-vue";

package/dist/{load-C-0hUaSC.mjs → load-RosvaPZf.mjs}

@@ -1,19 +1,20 @@
 import { a as isLanguage, c as textLanguages, i as inLanguage, o as languageListProblems, r as LANGUAGES } from "./html-mffkHGHh.mjs";
-import { n as renderMaterial } from "./blocks-BmRrD7UY.mjs";
-import { a as plain, c as renderWithFormulas, i as inspect, o as renderInline, r as formulaProblems, s as renderMarkdown } from "./check-BkEl-m-F.mjs";
-import { n as checkMaterial } from "./validate-CxtdeQ5S.mjs";
-import { _ as questionIn, a as renderQuestion, b as rightAnswer, i as questionMessagesIn, n as answerText, o as renderSolution, u as isCorrect, v as questionTexts } from "./render-BJey0bwl.mjs";
-import { _ as verdict, g as schemasById, h as knownProperties, i as addressProblem, m as question_v1_schema_default, s as questionDetails, t as QUESTION_BRANCH, u as questionSchemas } from "./validate-COaZso7u.mjs";
+import { n as renderMaterial } from "./blocks-CxtCPAa5.mjs";
+import { a as inspect, c as renderMarkdown, i as formulaProblems, l as renderWithFormulas, o as plain, r as FORMULA, s as renderInline, u as renderFormula } from "./check-CteIFN96.mjs";
+import { n as checkMaterial } from "./validate-Bxy9NfB8.mjs";
+import { _ as questionIn, a as renderQuestion, b as rightAnswer, i as questionMessagesIn, n as answerText, o as renderSolution, u as isCorrect, v as questionTexts } from "./render-GS1Htlu8.mjs";
+import { _ as verdict, g as schemasById, h as knownProperties, i as addressProblem, m as question_v1_schema_default, s as questionDetails, t as QUESTION_BRANCH, u as questionSchemas } from "./validate-BDwL7Su3.mjs";
 import { t as appName } from "./appname-Bh23cUuz.mjs";
 import { r as languageRoot } from "./pages-9RaaomoO.mjs";
-import { $ as parse, A as answerFor, B as label, D as generate, E as compiled, F as questionFor, G as taskText, I as taskKey, J as tokenize, K as templateProblems, L as answerLabel, M as exampleGiving, O as holds, P as pairValues, Q as evaluate, R as fill, T as StarvedError, W as stepsOf, X as kindOf, Y as unusedVariables, Z as ExpressionError, _ as termId, a as assessments, d as parseRef, et as same, g as isExercise, h as allBlocks, k as values, nt as Fraction, o as drawsTasks, q as templatesIn, s as exerciseOf, t as ASSESSMENT, tt as variables, w as message$1, z as hintOf } from "./assessment-By2GGTJC.mjs";
+import { $ as parse, A as answerFor, B as label, D as generate, E as compiled, F as questionFor, G as taskText, I as taskKey, J as tokenize, K as templateProblems, L as answerLabel, M as exampleGiving, O as holds, P as pairValues, Q as evaluate, R as fill, T as StarvedError, W as stepsOf, X as kindOf, Y as unusedVariables, Z as ExpressionError, _ as termId, a as assessments, d as parseRef, et as same, g as isExercise, h as allBlocks, k as values, nt as Fraction, o as drawsTasks, q as templatesIn, s as exerciseOf, t as ASSESSMENT, tt as variables, w as message$1, z as hintOf } from "./assessment-Dy359O1O.mjs";
 import { a as RESERVED_PARAMS, l as distinctSeeds, o as SEED_TRIES } from "./tasks-DADUYy52.mjs";
 import { a as parse$1, i as nodes, o as readSfc, r as line, s as sfc, t as codeChecker } from "./vue-code-BkJjW_I_.mjs";
-import { a as lineOf, c as schemaProblems, i as isObject, n as Texts, o as pathText, r as get, s as readYaml, t as Problems } from "./content-cYBPYg_J.mjs";
+import { a as lineOf, c as schemaProblems, i as isObject, n as Texts, o as pathText, r as get, s as readYaml, t as Problems } from "./content-DO6oEJxj.mjs";
 import "node:module";
 import { Ajv2020 } from "ajv/dist/2020.js";
 import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
 import { join } from "node:path";
+import untyped from "speech-rule-engine";
 // \0rolldown/runtime.js
 var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod, mod.exports), cb = null), mod.exports);
 // runtime/explainer/components/props.ts
@@ -14709,6 +14710,33 @@ function readComponents(root) {
 	};
 }
 /** A problem with a block's props, at a path below props. */
+// runtime/shared/text/speech.ts
+const SRE = untyped;
+const SPEECH = {
+	domain: "clearspeak",
+	modality: "speech"
+};
+for (const locale of LANGUAGES) await SRE.setupEngine({
+	locale,
+	...SPEECH
+});
+/** The formula `tex` as words in `lang` (German for a language the runtime has no texts for), e.g. "2 hoch 7". */
+function speakFormula(tex, lang) {
+	SRE.setupEngine({
+		locale: isLanguage(lang) ? lang : "de",
+		...SPEECH
+	});
+	return SRE.toSpeech(renderFormula(tex, false)).replace(/\s+/g, " ").trim();
+}
+/**
+* The words of a text that is only formulas, $…$ (and space); undefined for any other text, which has words of its own
+* for a name to be made of.
+*/
+function formulaAlternative(text, lang) {
+	const formulas = [...text.matchAll(FORMULA)];
+	if (formulas.length === 0 || text.replace(FORMULA, "").trim() !== "") return void 0;
+	return formulas.map((formula) => speakFormula(formula[1] ?? "", lang)).join(" ");
+}
 // runtime/explainer/exercises.ts
 /** The templates of a generated exercise in each of `languages`; links inside them through `resolve`. */
 function templatesOf(spec, languages, resolve = (href) => href) {
@@ -14795,6 +14823,7 @@ function questionExercise(block, lang, material) {
 		renderQuestion(question, {
 			lang,
 			format: renderWithFormulas,
+			describe: (text) => formulaAlternative(text, lang),
 			...question.material === void 0 ? {} : { materialHtml: renderMaterial(question.material, material) }
 		}),
 		`<details class="explainer-solution"><summary>${plain(questionMessagesIn(lang).solution)}</summary>`,
@@ -16944,4 +16973,4 @@ function loadSite(root, seeds = 200) {
 	if (site === void 0) throw new ContentError(problems);
 	return site;
 }
-export { propertyProblems as _, routes as a, exerciseData as c, templatesOf as d, workedTasks as f, exampleProblems$1 as g, describedProblems as h, hiddenChapter as i, renderExercise as l, TABLE_CONTRACT as m, loadSite as n, terms as o, SIZE_BUDGET as p, contentPages as r, dataOf as s, ContentError as t, taskSeeds as u, propsIn as v };
+export { exampleProblems$1 as _, routes as a, exerciseData as c, templatesOf as d, workedTasks as f, describedProblems as g, TABLE_CONTRACT as h, hiddenChapter as i, renderExercise as l, SIZE_BUDGET as m, loadSite as n, terms as o, formulaAlternative as p, contentPages as r, dataOf as s, ContentError as t, taskSeeds as u, propertyProblems as v, propsIn as y };

package/dist/questions-e2e.mjs

@@ -1 +1 @@
-export { t as answerQuestion, n as expectBackground, r as expectFeedbackInView, i as expectMaterial, a as giveAnswer, o as question } from "./e2e-BiMI-pCL.mjs";
+export { t as answerQuestion, n as expectBackground, r as expectFeedbackInView, i as expectMaterial, a as giveAnswer, o as question } from "./e2e-CU0n_unV.mjs";

package/dist/questions-engine.mjs

@@ -1,3 +1,3 @@
-import { g as questionId } from "./render-BJey0bwl.mjs";
-import { n as startQuestion, t as readAnswer } from "./engine-BqF2Vffn.mjs";
+import { g as questionId } from "./render-GS1Htlu8.mjs";
+import { n as startQuestion, t as readAnswer } from "./engine-CArxqizW.mjs";
 export { questionId, readAnswer, startQuestion };

package/dist/questions.mjs

@@ -1,5 +1,5 @@
-import { C as wrongAnswer, S as shuffled, T as de_default, _ as questionIn, a as renderQuestion, b as rightAnswer, c as hash, d as materialPairs, f as missesRight, g as questionId, h as questionAddresses, i as questionMessagesIn, l as isComplete, m as parseNumber, n as answerText, o as renderSolution, p as mixed, s as QUESTION_TYPES, t as QUESTION_MESSAGES, u as isCorrect, v as questionTexts, w as wrongReasons, x as rightEntries, y as random } from "./render-BJey0bwl.mjs";
-import { c as questionSchema, l as questionSchemaProblems, n as QUESTION_REF, p as validateQuestion, r as QUESTION_SCHEMA_ID, s as questionDetails, u as questionSchemas } from "./validate-COaZso7u.mjs";
+import { C as wrongAnswer, S as shuffled, T as de_default, _ as questionIn, a as renderQuestion, b as rightAnswer, c as hash, d as materialPairs, f as missesRight, g as questionId, h as questionAddresses, i as questionMessagesIn, l as isComplete, m as parseNumber, n as answerText, o as renderSolution, p as mixed, s as QUESTION_TYPES, t as QUESTION_MESSAGES, u as isCorrect, v as questionTexts, w as wrongReasons, x as rightEntries, y as random } from "./render-GS1Htlu8.mjs";
+import { c as questionSchema, l as questionSchemaProblems, n as QUESTION_REF, p as validateQuestion, r as QUESTION_SCHEMA_ID, s as questionDetails, u as questionSchemas } from "./validate-BDwL7Su3.mjs";
 // runtime/shared/questions/index.ts
 /** The texts of a question for learners in German, by their key (messages/de.json); questionMessagesIn(lang) for another. */
 const messages = de_default;

package/dist/{quiz-BKc8JYtC.mjs → quiz-DnW-xtCh.mjs}

@@ -1,5 +1,5 @@
 import { i as inLanguage } from "./html-mffkHGHh.mjs";
-import { _ as questionIn } from "./render-BJey0bwl.mjs";
+import { _ as questionIn } from "./render-GS1Htlu8.mjs";
 // runtime/quiz/messages/de.json
 var de_default = {
 	howto: "Beantworte die Fragen der Reihe nach. Nach jeder Antwort siehst du, ob sie stimmt, und erfährst mehr über jede Antwort. Am Ende siehst du dein Ergebnis.",

package/dist/quiz-e2e.mjs

@@ -1,7 +1,7 @@
-import { C as wrongAnswer, b as rightAnswer, g as questionId } from "./render-BJey0bwl.mjs";
-import { i as expectMaterial, n as expectBackground, o as question, r as expectFeedbackInView, t as answerQuestion } from "./e2e-BiMI-pCL.mjs";
-import { n as quizLanguages, t as quizIn } from "./quiz-BKc8JYtC.mjs";
-import { n as messagesIn, t as QUIZ_MESSAGES } from "./render-DpRO_RKm.mjs";
+import { C as wrongAnswer, b as rightAnswer, g as questionId } from "./render-GS1Htlu8.mjs";
+import { i as expectMaterial, n as expectBackground, o as question, r as expectFeedbackInView, t as answerQuestion } from "./e2e-CU0n_unV.mjs";
+import { n as quizLanguages, t as quizIn } from "./quiz-DnW-xtCh.mjs";
+import { n as messagesIn, t as QUIZ_MESSAGES } from "./render-DqHOJyHK.mjs";
 import { expect, test } from "playwright/test";
 import { readFileSync } from "node:fs";
 // runtime/quiz/e2e.ts

package/dist/quiz-plugin.mjs

@@ -1,12 +1,12 @@
 import { c as textLanguages, o as languageListProblems, r as LANGUAGES, t as escape } from "./html-mffkHGHh.mjs";
 import { r as materialImages } from "./block-BK_ohsH1.mjs";
-import "./blocks-BmRrD7UY.mjs";
-import { a as duplicates, d as readable, f as schemaMessages, o as inQuestion, p as validateQuestion, u as questionSchemas } from "./validate-COaZso7u.mjs";
-import { n as quizLanguages, t as quizIn } from "./quiz-BKc8JYtC.mjs";
+import "./blocks-CxtCPAa5.mjs";
+import { a as duplicates, d as readable, f as schemaMessages, o as inQuestion, p as validateQuestion, u as questionSchemas } from "./validate-BDwL7Su3.mjs";
+import { n as quizLanguages, t as quizIn } from "./quiz-DnW-xtCh.mjs";
 import { t as appName } from "./appname-Bh23cUuz.mjs";
 import { n as isSizeless, t as imageType } from "./image-CspJVfyQ.mjs";
 import { c as withLanguage, i as notFoundPage, n as fromDepth, r as languageRoot } from "./pages-9RaaomoO.mjs";
-import { r as renderQuiz } from "./render-DpRO_RKm.mjs";
+import { r as renderQuiz } from "./render-DqHOJyHK.mjs";
 import { Ajv2020 } from "ajv/dist/2020.js";
 import { existsSync, readFileSync } from "node:fs";
 import { join } from "node:path";

package/dist/quiz.mjs

@@ -1,6 +1,6 @@
-import { S as shuffled, g as questionId, u as isCorrect } from "./render-BJey0bwl.mjs";
-import { n as startQuestion } from "./engine-BqF2Vffn.mjs";
-import { a as de_default, i as en_default, r as solutionId } from "./quiz-BKc8JYtC.mjs";
+import { S as shuffled, g as questionId, u as isCorrect } from "./render-GS1Htlu8.mjs";
+import { n as startQuestion } from "./engine-CArxqizW.mjs";
+import { a as de_default, i as en_default, r as solutionId } from "./quiz-DnW-xtCh.mjs";
 import { translator } from "@lernapps/tooling/i18n";
 import { announce, moveFocus } from "@lernapps/tooling/a11y";
 import { createStorage } from "@lernapps/tooling/storage";

package/dist/{render-BL6fV_NI.mjs → render-D5kwkNt1.mjs}

@@ -1,7 +1,7 @@
 import { i as inLanguage, l as textsIn, o as languageListProblems, r as LANGUAGES } from "./html-mffkHGHh.mjs";
-import { a as plain, s as renderMarkdown } from "./check-BkEl-m-F.mjs";
+import { c as renderMarkdown, o as plain } from "./check-CteIFN96.mjs";
 import { a as pageFooter, o as pageHeader, r as languageRoot, s as relative, t as alternateLinks } from "./pages-9RaaomoO.mjs";
-import { c as schemaProblems, n as Texts, s as readYaml, t as Problems } from "./content-cYBPYg_J.mjs";
+import { c as schemaProblems, n as Texts, s as readYaml, t as Problems } from "./content-DO6oEJxj.mjs";
 import { Ajv2020 } from "ajv/dist/2020.js";
 import { existsSync, readdirSync } from "node:fs";
 import { join } from "node:path";

package/dist/{render-DpRO_RKm.mjs → render-DqHOJyHK.mjs}

@@ -1,7 +1,7 @@
 import { l as textsIn, s as localeOf, t as escape } from "./html-mffkHGHh.mjs";
-import { n as renderMaterial } from "./blocks-BmRrD7UY.mjs";
-import { a as renderQuestion, g as questionId, o as renderSolution, r as external, t as QUESTION_MESSAGES } from "./render-BJey0bwl.mjs";
-import { a as de_default, i as en_default, r as solutionId } from "./quiz-BKc8JYtC.mjs";
+import { n as renderMaterial } from "./blocks-CxtCPAa5.mjs";
+import { a as renderQuestion, g as questionId, o as renderSolution, r as external, t as QUESTION_MESSAGES } from "./render-GS1Htlu8.mjs";
+import { a as de_default, i as en_default, r as solutionId } from "./quiz-DnW-xtCh.mjs";
 import { a as pageFooter, o as pageHeader, r as languageRoot, s as relative, t as alternateLinks } from "./pages-9RaaomoO.mjs";
 import { translator } from "@lernapps/tooling/i18n";
 // runtime/quiz/render.ts

package/dist/{render-BJey0bwl.mjs → render-GS1Htlu8.mjs}

@@ -199,6 +199,7 @@ function questionIn(question, lang) {
 				text: t(option.text),
 				correct: option.correct,
 				info: t(option.info),
+				...option.alt === void 0 ? {} : { alt: t(option.alt) },
 				...option.link === void 0 ? {} : { link: link(option.link) }
 			}))
 		};
@@ -415,13 +416,17 @@ function questionWords(lang = "de") {
 	}
 	return found;
 }
-function controls(question, { t }, format) {
+function controls(question, { t }, format, describe) {
 	const name = questionId(question);
 	switch (question.type) {
 		case "single-choice":
 		case "multiple-choice": {
 			const type = question.type === "single-choice" ? "radio" : "checkbox";
-			return question.options.map((option, index) => `<label class="question-option"><input type="${type}" name="${name}" value="${index}"> <span>${format(option.text)}</span></label>`).join("\n");
+			return question.options.map((option, index) => {
+				const spoken = option.alt ?? describe?.(option.text);
+				const label = spoken === void 0 ? "" : ` aria-label="${escape(spoken)}"`;
+				return `<label class="question-option"><input type="${type}" name="${name}" value="${index}"${label}> <span>${format(option.text)}</span></label>`;
+			}).join("\n");
 		}
 		case "true-false": return [true, false].map((value) => `<label class="question-option"><input type="radio" name="${name}" value="${value}"> <span>${t(value ? "true" : "false")}</span></label>`).join("\n");
 		case "number": return [
@@ -456,7 +461,7 @@ function controls(question, { t }, format) {
 * what the learner learns about it (the same as its solution). The engine's startQuestion makes it live; without
 * JavaScript the button stays hidden.
 */
-function renderQuestion(question, { element = "div", next = false, lang = "de", textHtml, materialHtml, explanationHtml, format = escape } = {}) {
+function renderQuestion(question, { element = "div", next = false, lang = "de", textHtml, materialHtml, explanationHtml, format = escape, describe } = {}) {
 	const words = questionWords(lang);
 	const { t } = words;
 	const id = questionId(question);
@@ -467,7 +472,7 @@ function renderQuestion(question, { element = "div", next = false, lang = "de",
 		`<fieldset>`,
 		`<legend class="question-text">${textHtml ?? format(question.text)}</legend>`,
 		...materialHtml === void 0 || materialHtml === "" ? [] : [`<div class="question-material">${materialHtml}</div>`],
-		controls(question, words, format),
+		controls(question, words, format, describe),
 		`</fieldset>`,
 		`<div class="question-feedback" role="status"></div>`,
 		`<div class="question-reveal" hidden>`,

package/dist/{result-_eQcamoz.mjs → result-D_mmCVwN.mjs}

@@ -1,5 +1,5 @@
-import { x as rightEntries } from "./render-BJey0bwl.mjs";
-import { w as message } from "./assessment-By2GGTJC.mjs";
+import { x as rightEntries } from "./render-GS1Htlu8.mjs";
+import { w as message } from "./assessment-Dy359O1O.mjs";
 // runtime/explainer/result.ts
 const key = (id, n) => n === void 0 ? id : `${id}=${n}`;
 /**

package/dist/{validate-COaZso7u.mjs → validate-BDwL7Su3.mjs}

@@ -1,6 +1,6 @@
 import { c as textLanguages } from "./html-mffkHGHh.mjs";
-import { n as checkMaterial, t as MATERIAL_DEFINITIONS } from "./validate-CxtdeQ5S.mjs";
-import { _ as questionIn, h as questionAddresses, l as isComplete, m as parseNumber, u as isCorrect, v as questionTexts, x as rightEntries } from "./render-BJey0bwl.mjs";
+import { n as checkMaterial, t as MATERIAL_DEFINITIONS } from "./validate-Bxy9NfB8.mjs";
+import { _ as questionIn, h as questionAddresses, l as isComplete, m as parseNumber, u as isCorrect, v as questionTexts, x as rightEntries } from "./render-GS1Htlu8.mjs";
 import { Ajv2020 } from "ajv/dist/2020.js";
 // runtime/shared/examples.ts
 /**
@@ -591,6 +591,10 @@ var question_v1_schema_default = {
 							"description": "One to three sentences of background on this option itself, true whether or not it is the right answer, e.g. \"Der Uluru ist ein Inselberg in der Wüste Zentralaustraliens ...\". After an answer it shows for every option. For a wrong option it is also the reason a learner who chose it reads with the feedback, so say there why it does not fit.",
 							"$ref": "urn:lernapps:schema:text.v1#/$defs/text"
 						},
+						"alt": {
+							"description": "Optional: the option as it is spoken, for the name of its radio button or checkbox, when its text is only a formula, e.g. \"zwei hoch sieben\" for \"$2^7$\". Without it the name is made from the formula in the page's language (\"2 hoch 7\"); write it where that reads badly, e.g. for a chemical formula. Not needed when the text has words.",
+							"$ref": "urn:lernapps:schema:text.v1#/$defs/text"
+						},
 						"link": {
 							"description": "Further reading on this option.",
 							"$ref": "#/$defs/link"

package/dist/{validate-CxtdeQ5S.mjs → validate-Bxy9NfB8.mjs}

@@ -1,6 +1,6 @@
 import { i as inLanguage } from "./html-mffkHGHh.mjs";
 import { n as markerOf } from "./block-BK_ohsH1.mjs";
-import { t as checkText } from "./check-BkEl-m-F.mjs";
+import { t as checkText } from "./check-CteIFN96.mjs";
 // runtime/shared/blocks/validate.ts
 /** The definition of each type of block in the schema of the blocks (blocks.v1.schema.json). */
 const MATERIAL_DEFINITIONS = {

package/explainer/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@lernapps/app-templates": "file:..",
-    "@lernapps/tooling": "github:lernapps/tooling#7354ffe7ae7d8079ba5f714d5b402666d27df066",
+    "@lernapps/tooling": "^0.1.2",
     "vite-plus": "1.4.0"
   },
   "overrides": {

package/interactive/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@lernapps/app-templates": "file:..",
-    "@lernapps/tooling": "github:lernapps/tooling#7354ffe7ae7d8079ba5f714d5b402666d27df066",
+    "@lernapps/tooling": "^0.1.2",
     "vite-plus": "1.4.0"
   },
   "overrides": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lernapps/app-templates",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "The templates of the archetypes of lernapps.net apps, and the runtime of each archetype that apps depend on (the quiz: engine, build step, styles, end-to-end tests, the schema of the question bank, the questions it shares with the explainer are in ./questions; the explainer: build step, client module with its exercises, the islands of its Vue components, styles, end-to-end tests, the schema of its content; the interactive archetype: build step, the start page and the app page around the app's own Vue components and core, its playthroughs, styles, end-to-end tests, the schemas of its start page and its playthroughs)",
   "license": "MIT",
   "repository": {
@@ -100,6 +100,7 @@
     "highlight.js": "11.12.0",
     "marked": "18.1.2",
     "source-map-js": "1.2.2",
+    "speech-rule-engine": "4.1.5",
     "temml": "0.14.0",
     "vue": "3.5.44",
     "yaml": "2.9.1"

package/quiz/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@lernapps/app-templates": "file:..",
-    "@lernapps/tooling": "github:lernapps/tooling#7354ffe7ae7d8079ba5f714d5b402666d27df066",
+    "@lernapps/tooling": "^0.1.2",
     "vite-plus": "1.4.0"
   },
   "overrides": {

package/runtime/explainer/assessment-page.ts

@@ -12,6 +12,7 @@
 import { renderQuestion } from "../shared/questions/render.ts";
 import { type MaterialContext, renderMaterial } from "../shared/blocks/index.ts";
 import { plain, renderWithFormulas } from "../shared/text/markdown.ts";
+import { formulaAlternative } from "../shared/text/speech.ts";
 import {
   assessments,
   drawsTasks,
@@ -117,6 +118,7 @@ function itemHtml(context: AssessmentContext, data: AssessmentItemData, n: numbe
   return `${label}${renderQuestion(question, {
     lang,
     format: (text) => rendered[text] ?? renderWithFormulas(text),
+    describe: (text) => formulaAlternative(text, lang),
     ...(question.material === undefined ? {} : { materialHtml: renderMaterial(question.material, context.material) }),
   })}`;
 }

package/runtime/explainer/e2e.ts

@@ -67,6 +67,7 @@ import { message as messageOf } from "./messages.ts";
 import { ASSESSMENT_TASK_EVENT, nextTaskNumber, taskNumber } from "./tasks.ts";
 import {
   outline,
+  shownText,
   type AssessmentOutline,
   type ComponentOutline,
   type ExerciseOutline,
@@ -157,6 +158,12 @@ const BAND_WORDS = {
   unasked: "assessmentUnasked",
 } as const;
 
+/**
+ * `text` without space. A browser's text of a formula has space between its parts ("2 7" for 2⁷) where the content's
+ * has none, so texts with formulas are compared without it (in the order of their characters, which is what counts).
+ */
+const squash = (text: string): string => text.replace(/\s+/g, "");
+
 /** The task number of the deep link the tests open a generated exercise with. */
 const SEED = 7;
 
@@ -169,7 +176,7 @@ async function expectExercises(page: Page, item: PageOutline): Promise<void> {
   const main = page.locator("main");
   const expected = item.exercises.map((exercise) =>
     exercise.kind === "question"
-      ? { id: exercise.id, texts: [exercise.question.text], answers: [exercise.answers] }
+      ? { id: exercise.id, texts: [shownText(exercise.question.text)], answers: [exercise.answers] }
       : exercise.kind === "open"
         ? { id: exercise.id, texts: [exercise.task], answers: [exercise.solution] }
         : {
@@ -178,29 +185,31 @@ async function expectExercises(page: Page, item: PageOutline): Promise<void> {
             answers: exercise.worked.map((worked) => [worked.answer]),
           },
   );
-  const read = () =>
-    main.locator(".explainer-exercise").evaluateAll((elements) =>
-      elements.map((element) => {
-        const fold = (text: string | null) => (text ?? "").replace(/\s+/g, " ").trim();
-        const own = element.classList.contains("explainer-question")
-          ? [...element.querySelectorAll("legend")]
-          : element.classList.contains("explainer-open-task")
-            ? [...element.querySelectorAll(":scope > .explainer-open-task-text")]
-            : [...element.querySelectorAll(".explainer-worked-task > .explainer-task")];
-        const solutions = [...element.querySelectorAll<HTMLDetailsElement>("details.explainer-solution")];
-        return {
-          id: element.id,
-          texts: own.map((text) => fold(text.textContent)),
-          // what a learner sees of each "Lösung": nothing while it is closed
-          shown: solutions.map((details) => (details.open ? fold((details as HTMLElement).innerText) : "")),
-        };
-      }),
-    );
+  const read = async () =>
+    (
+      await main.locator(".explainer-exercise").evaluateAll((elements) =>
+        elements.map((element) => {
+          const fold = (text: string | null) => (text ?? "").replace(/\s+/g, " ").trim();
+          const own = element.classList.contains("explainer-question")
+            ? [...element.querySelectorAll("legend")]
+            : element.classList.contains("explainer-open-task")
+              ? [...element.querySelectorAll(":scope > .explainer-open-task-text")]
+              : [...element.querySelectorAll(".explainer-worked-task > .explainer-task")];
+          const solutions = [...element.querySelectorAll<HTMLDetailsElement>("details.explainer-solution")];
+          return {
+            id: element.id,
+            texts: own.map((text) => fold(text.textContent)),
+            // what a learner sees of each "Lösung": nothing while it is closed
+            shown: solutions.map((details) => (details.open ? fold((details as HTMLElement).innerText) : "")),
+          };
+        }),
+      )
+    ).map((item) => ({ ...item, texts: item.texts.map(squash), shown: item.shown.map(squash) }));
   const before = await read();
   expect(
     before.map(({ id, texts }) => ({ id, texts })),
     `${item.url}: each exercise with its text`,
-  ).toEqual(expected.map(({ id, texts }) => ({ id, texts })));
+  ).toEqual(expected.map(({ id, texts }) => ({ id, texts: texts.map(squash) })));
   // a click on each summary, as a learner opens a <details> (its own behaviour, no script of the page)
   await main
     .locator(".explainer-exercise details.explainer-solution > summary")
@@ -212,7 +221,7 @@ async function expectExercises(page: Page, item: PageOutline): Promise<void> {
         expect(
           after[index]?.shown[at] ?? "",
           `${item.url}: ${exercise.id}, Lösung ${at + 1} shows ${answer}`,
-        ).toContain(answer);
+        ).toContain(squash(answer));
       }
     });
   }
@@ -484,7 +493,9 @@ const feedback = (page: Page, id: string) => page.locator(`[id="${id}"] .questio
 function reasonFor(question: Question, answer: Answer): string {
   const quiz = questionMessagesIn("de");
   const [first] = wrongReasons(question, answer);
-  if (first !== undefined) return first.option === undefined ? first.text : `${first.option}: ${first.text}`;
+  if (first !== undefined) {
+    return first.option === undefined ? shownText(first.text) : `${shownText(first.option)}: ${shownText(first.text)}`;
+  }
   return missesRight(question, answer) ? quiz.missingRight : quiz.lookAgain;
 }
 
@@ -495,9 +506,12 @@ function reasonFor(question: Question, answer: Answer): string {
 async function wrongThenSolution(page: Page, exercise: string, question: Question, reason: string): Promise<void> {
   const item = page.locator(`[id="${questionId(question)}"]`);
   await expect(feedback(page, questionId(question))).toContainText(questionMessagesIn("de").wrong);
-  await expect(item.locator(".question-diagnosis").first(), `${exercise}: the reason of the wrong answer`).toHaveText(
-    reason,
-  );
+  await expect
+    .poll(
+      async () => squash((await item.locator(".question-diagnosis").first().textContent()) ?? ""),
+      `${exercise}: the reason of the wrong answer`,
+    )
+    .toBe(squash(reason));
   await expectFeedbackInView(page, question);
   await expect(item.locator(".question-reveal"), `${exercise}: no solution after a wrong answer`).toBeHidden();
   await expect(item.locator("input, select").first(), `${exercise}: another try`).toBeEnabled();

package/runtime/explainer/exercises.ts

@@ -16,6 +16,7 @@ import { questionFor, taskKey } from "./generated/question.ts";
 import { WORKED_TASKS } from "./tasks.ts";
 import { type Data, type Generated, type LanguageTemplates, type Templates } from "./generated/types.ts";
 import { plain, renderInline, renderMarkdown, renderWithFormulas } from "../shared/text/markdown.ts";
+import { formulaAlternative } from "../shared/text/speech.ts";
 import { distinctSeeds } from "./tasks.ts";
 import { message } from "./messages.ts";
 
@@ -166,6 +167,7 @@ function questionExercise(block: QuestionBlock, lang: string, material: Material
     renderQuestion(question, {
       lang,
       format: renderWithFormulas,
+      describe: (text) => formulaAlternative(text, lang),
       ...(question.material === undefined ? {} : { materialHtml: renderMaterial(question.material, material) }),
     }),
     `<details class="explainer-solution"><summary>${plain(questionMessagesIn(lang).solution)}</summary>`,

package/runtime/explainer/outline.ts

@@ -8,6 +8,7 @@ import { answerText } from "../shared/questions/render.ts";
 import { inLanguage, timelineEvents, type Block, type ComponentExample, type Site, type Text } from "./content.ts";
 import { dataOf, renderExercise, templatesOf, workedTasks } from "./exercises.ts";
 import { kindOf } from "./generated/comparator.ts";
+import { renderWithFormulas } from "../shared/text/markdown.ts";
 import { plainText } from "./generated/texts.ts";
 import { type Data, type Generated, type Templates } from "./generated/types.ts";
 import { loadSite } from "./load.ts";
@@ -48,6 +49,12 @@ export interface ComponentOutline {
   examples?: { accepted?: ComponentExample; rejected?: ComponentExample };
 }
 
+/**
+ * A learner text of a question as the page shows it, as text: its formulas $…$ rendered (a formula has no space the
+ * tests could rely on in a browser's text, see squash in e2e.ts), the rest as written.
+ */
+export const shownText = (text: string): string => plainText(renderWithFormulas(text));
+
 /** An exercise of a page, in the page's language: what it shows and what it accepts. */
 export type ExerciseOutline =
   | {
@@ -244,7 +251,7 @@ function walk(
           question,
           answers:
             question.type === "single-choice" || question.type === "multiple-choice"
-              ? question.options.filter((option) => option.correct).map((option) => option.text)
+              ? question.options.filter((option) => option.correct).map((option) => shownText(option.text))
               : [plainText(answerText(question, lang))],
         });
       }

package/runtime/shared/questions/question.ts

@@ -20,6 +20,8 @@ export interface Option<T extends Text = string> {
   text: T;
   correct: boolean;
   info: T;
+  /** The option spoken, as its radio or checkbox is named: for an option that is only a formula; else made from it. */
+  alt?: T;
   link?: Link<T>;
 }
 
@@ -209,6 +211,7 @@ export function questionIn(question: Question<Text>, lang: string): Question {
           text: t(option.text),
           correct: option.correct,
           info: t(option.info),
+          ...(option.alt === undefined ? {} : { alt: t(option.alt) }),
           ...(option.link === undefined ? {} : { link: link(option.link) }),
         })),
       };

package/runtime/shared/questions/question.v1.schema.json

@@ -190,6 +190,10 @@
                 "description": "One to three sentences of background on this option itself, true whether or not it is the right answer, e.g. \"Der Uluru ist ein Inselberg in der Wüste Zentralaustraliens ...\". After an answer it shows for every option. For a wrong option it is also the reason a learner who chose it reads with the feedback, so say there why it does not fit.",
                 "$ref": "urn:lernapps:schema:text.v1#/$defs/text"
               },
+              "alt": {
+                "description": "Optional: the option as it is spoken, for the name of its radio button or checkbox, when its text is only a formula, e.g. \"zwei hoch sieben\" for \"$2^7$\". Without it the name is made from the formula in the page's language (\"2 hoch 7\"); write it where that reads badly, e.g. for a chemical formula. Not needed when the text has words.",
+                "$ref": "urn:lernapps:schema:text.v1#/$defs/text"
+              },
               "link": {
                 "description": "Further reading on this option.",
                 "$ref": "#/$defs/link"

package/runtime/shared/questions/render.ts

@@ -44,17 +44,22 @@ export function questionWords(lang = "de"): Words {
 /** How a learner text becomes HTML. */
 export type Format = (text: string) => string;
 
-function controls(question: Question, { t }: Words, format: Format): string {
+/** A text as words for a name, where the text itself has none (a formula); undefined where it has. */
+export type Describe = (text: string) => string | undefined;
+
+function controls(question: Question, { t }: Words, format: Format, describe?: Describe): string {
   const name = questionId(question);
   switch (question.type) {
     case "single-choice":
     case "multiple-choice": {
       const type = question.type === "single-choice" ? "radio" : "checkbox";
       return question.options
-        .map(
-          (option, index) =>
-            `<label class="question-option"><input type="${type}" name="${name}" value="${index}"> <span>${format(option.text)}</span></label>`,
-        )
+        .map((option, index) => {
+          // an option that is only a formula has no text to name its control; the page says in words what it shows
+          const spoken = option.alt ?? describe?.(option.text);
+          const label = spoken === undefined ? "" : ` aria-label="${escape(spoken)}"`;
+          return `<label class="question-option"><input type="${type}" name="${name}" value="${index}"${label}> <span>${format(option.text)}</span></label>`;
+        })
         .join("\n");
     }
     case "true-false":
@@ -111,6 +116,8 @@ function controls(question: Question, { t }: Words, format: Format): string {
 export interface RenderQuestionOptions {
   /** How a learner text becomes HTML, e.g. with its formulas; escaped as plain text by default. */
   format?: (text: string) => string;
+  /** The words a screen reader names the control of an option by, when its text is only a formula. */
+  describe?: Describe;
   element?: "div" | "li";
   next?: boolean;
   lang?: string;
@@ -142,6 +149,7 @@ export function renderQuestion(
     materialHtml,
     explanationHtml,
     format = escape,
+    describe,
   }: RenderQuestionOptions = {},
 ): string {
   const words = questionWords(lang);
@@ -156,7 +164,7 @@ export function renderQuestion(
     ...(materialHtml === undefined || materialHtml === ""
       ? []
       : [`<div class="question-material">${materialHtml}</div>`]),
-    controls(question, words, format),
+    controls(question, words, format, describe),
     `</fieldset>`,
     `<div class="question-feedback" role="status"></div>`,
     `<div class="question-reveal" hidden>`,

package/runtime/shared/text/markdown.ts

@@ -158,7 +158,7 @@ export function renderInline(source: string, resolve: (href: string) => string):
 /** A plain text as HTML. */
 export const plain = escape;
 
-const FORMULA = /\$((?:\\.|[^\\$\n])+?)\$/g;
+export const FORMULA = /\$((?:\\.|[^\\$\n])+?)\$/g;
 
 /** A plain text as HTML in which only $…$ is a formula (MathML); everything else stays text, as in a quiz. */
 export function renderWithFormulas(text: string): string {

package/runtime/shared/text/speech.ts

@@ -0,0 +1,39 @@
+// The text alternative of a formula, for a name a screen reader or the accessibility check can read where the page has
+// only MathML (an option of a choice whose text is a formula, see the label of its radio): Speech Rule Engine speaks
+// the MathML of the formula in the page's language. Build time only; the engine loads its rules for every language
+// of the runtime once, here, so that speaking a formula in any of them is then synchronous.
+// @ts-expect-error speech-rule-engine ships no types; the part this file uses is typed below (drop this line if it does)
+import untyped from "speech-rule-engine";
+import { isLanguage, LANGUAGES } from "../languages.ts";
+import { renderFormula } from "./formula.ts";
+import { FORMULA } from "./markdown.ts";
+
+/** The part of Speech Rule Engine that this file uses. */
+interface Engine {
+  /** Loads the rules of the locale; once loaded, switching to it takes effect at once. */
+  setupEngine(setup: { locale: string; domain: string; modality: string }): Promise<void>;
+  /** The words of a MathML string, in the locale set up last. */
+  toSpeech(mathml: string): string;
+}
+const SRE: Engine = untyped;
+
+const SPEECH = { domain: "clearspeak", modality: "speech" } as const;
+
+for (const locale of LANGUAGES) await SRE.setupEngine({ locale, ...SPEECH });
+
+/** The formula `tex` as words in `lang` (German for a language the runtime has no texts for), e.g. "2 hoch 7". */
+export function speakFormula(tex: string, lang: string): string {
+  // the rules of every language are loaded: switching to one takes effect at once
+  void SRE.setupEngine({ locale: isLanguage(lang) ? lang : "de", ...SPEECH });
+  return SRE.toSpeech(renderFormula(tex, false)).replace(/\s+/g, " ").trim();
+}
+
+/**
+ * The words of a text that is only formulas, $…$ (and space); undefined for any other text, which has words of its own
+ * for a name to be made of.
+ */
+export function formulaAlternative(text: string, lang: string): string | undefined {
+  const formulas = [...text.matchAll(FORMULA)];
+  if (formulas.length === 0 || text.replace(FORMULA, "").trim() !== "") return undefined;
+  return formulas.map((formula) => speakFormula(formula[1] ?? "", lang)).join(" ");
+}