@lernapps/app-templates 0.0.1 → 0.1.0

package/dist/render-BL6fV_NI.mjs

@@ -0,0 +1,507 @@
+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 { 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 { Ajv2020 } from "ajv/dist/2020.js";
+import { existsSync, readdirSync } from "node:fs";
+import { join } from "node:path";
+// runtime/interactive/interactive.v1.schema.json
+var interactive_v1_schema_default = {
+	$schema: "https://json-schema.org/draft/2020-12/schema",
+	$id: "urn:lernapps:schema:interactive.v1",
+	title: "The start page of a lernapps interactive app",
+	description: "src/app.yaml of an app built from the archetype interactive (runtime @lernapps/app-templates): what the static start page says, readable without JavaScript, the app's languages and its routes, the modes or levels that each have an address app/#<id>. The build validates it against this schema, then what a schema cannot say (languages complete, restricted Markdown, unique ids), and fails with one line per problem. Every text is for learners, in plain language. A text is a string while German is the app's only language, else a map of texts by language: { de: …, en: … }.",
+	type: "object",
+	additionalProperties: false,
+	required: [
+		"title",
+		"description",
+		"howto",
+		"competencies",
+		"languages"
+	],
+	properties: {
+		"title": {
+			"description": "The app's title: the h1 of the start page and of the app page, and the title of both.",
+			"$ref": "#/$defs/text"
+		},
+		"description": {
+			"description": "What the app does and for whom, under the title of the start page.",
+			"$ref": "#/$defs/markdown"
+		},
+		"howto": {
+			"description": "How to play or use the app: the keys, the goal, what counts. The start page shows it under \"So geht's\".",
+			"$ref": "#/$defs/markdown"
+		},
+		"competencies": {
+			"description": "What a learner can do after practising with the app, each an \"Ich kann …\" statement. The start page lists them under \"Das lernst du\".",
+			"type": "array",
+			"minItems": 1,
+			"items": { "$ref": "#/$defs/text" }
+		},
+		"languages": {
+			"description": "The languages of the app, German first. Every text is then complete in each of them; each language other than German gets its own pages below /<language>/.",
+			"type": "array",
+			"minItems": 1,
+			"items": {
+				"type": "string",
+				"pattern": "^[a-z]{2}$"
+			}
+		},
+		"routes": {
+			"description": "Optional: the modes or levels of the app, each with its address app/#<id>, linked from the start page and listed on the app page. The core starts with the route of the address (start(seed, route)), the first one when the address names none. A topic of the app's catalog entry may link one: app/#<id>.",
+			"type": "array",
+			"minItems": 1,
+			"items": { "$ref": "#/$defs/route" }
+		},
+		"sections": {
+			"description": "Optional: background sections at the end of the start page, each a heading with its text; its id is its anchor.",
+			"type": "array",
+			"minItems": 1,
+			"items": { "$ref": "#/$defs/section" }
+		}
+	},
+	$defs: {
+		"id": {
+			"description": "A stable name, part of the address: lower-case letters, digits and hyphens. Keep it once published, so that links to it keep working.",
+			"type": "string",
+			"pattern": "^[a-z0-9]+(-[a-z0-9]+)*$"
+		},
+		"text": {
+			"description": "A text without formatting: a string while German is the only language of the app, else a map of texts by language ({ de: …, en: … }) with every declared language.",
+			"anyOf": [{
+				"type": "string",
+				"minLength": 1,
+				"pattern": "\\S"
+			}, {
+				"type": "object",
+				"minProperties": 1,
+				"propertyNames": { "pattern": "^[a-z]{2}$" },
+				"additionalProperties": {
+					"type": "string",
+					"minLength": 1,
+					"pattern": "\\S"
+				}
+			}]
+		},
+		"markdown": {
+			"description": "A text in restricted Markdown (paragraphs, **bold**, *italics*, lists, links, $…$ formulas; no headings, no raw HTML): a string while German is the only language of the app, else a map of texts by language.",
+			"anyOf": [{
+				"type": "string",
+				"minLength": 1,
+				"pattern": "\\S"
+			}, {
+				"type": "object",
+				"minProperties": 1,
+				"propertyNames": { "pattern": "^[a-z]{2}$" },
+				"additionalProperties": {
+					"type": "string",
+					"minLength": 1,
+					"pattern": "\\S"
+				}
+			}]
+		},
+		"route": {
+			"description": "A mode or level of the app.",
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["id", "title"],
+			"properties": {
+				"id": {
+					"description": "Its anchor: the address app/#<id>.",
+					"$ref": "#/$defs/id"
+				},
+				"title": {
+					"description": "Its name, the text of its links.",
+					"$ref": "#/$defs/text"
+				},
+				"description": {
+					"description": "Optional: what it practises, next to its link on the start page.",
+					"$ref": "#/$defs/text"
+				}
+			}
+		},
+		"section": {
+			"description": "A background section of the start page.",
+			"type": "object",
+			"additionalProperties": false,
+			"required": [
+				"id",
+				"title",
+				"text"
+			],
+			"properties": {
+				"id": {
+					"description": "Its anchor on the start page: #<id>.",
+					"$ref": "#/$defs/id"
+				},
+				"title": {
+					"description": "Its heading.",
+					"$ref": "#/$defs/text"
+				},
+				"text": { "$ref": "#/$defs/markdown" }
+			}
+		}
+	}
+};
+// runtime/interactive/playthrough.v1.schema.json
+var playthrough_v1_schema_default = {
+	$schema: "https://json-schema.org/draft/2020-12/schema",
+	$id: "urn:lernapps:schema:playthrough.v1",
+	title: "A playthrough of a lernapps interactive app",
+	description: "A file src/playthroughs/<name>.yaml of an app built from the archetype interactive: what a learner does, from the start of a route with a seed: inputs (keys typed, actions of the app's root component) and time passing (ticks), and after each step what is expected: the state of the core (the fields named, compared with the state step(state, input) and tick(state, dt) give) or the announcement for screen readers (@lernapps/tooling/a11y), or both. The build plays every playthrough against the core and fails with one line per mismatch; the end-to-end tests play the same inputs and ticks in the browser. In both, no time passes but the ticks a step names.",
+	type: "object",
+	additionalProperties: false,
+	required: ["seed", "steps"],
+	properties: {
+		"route": {
+			"description": "The route it starts at, an id of routes in src/app.yaml; the first route when it names none.",
+			"type": "string",
+			"pattern": "^[a-z0-9]+(-[a-z0-9]+)*$"
+		},
+		"seed": {
+			"description": "The seed it starts with: start(seed, route); in the browser the address app/?seed=<seed>#<route>.",
+			"type": "integer",
+			"minimum": 1,
+			"maximum": 2147483647
+		},
+		"steps": {
+			"description": "The steps, in order.",
+			"type": "array",
+			"minItems": 1,
+			"items": { "$ref": "#/$defs/step" }
+		}
+	},
+	$defs: {
+		"step": {
+			"description": "What happens: keys or inputs, then ticks, at least one of them; then what is expected after them: state, announce, or both.",
+			"type": "object",
+			"additionalProperties": false,
+			"properties": {
+				"keys": {
+					"description": "Keys, one after the other, each as the browser names it (KeyboardEvent.key): a, A, Enter, \" \" for the space bar, ArrowLeft. The short form of inputs that are all keys; a step has keys or inputs, not both.",
+					"type": "array",
+					"minItems": 1,
+					"items": {
+						"type": "string",
+						"minLength": 1
+					}
+				},
+				"inputs": {
+					"description": "Inputs, one after the other: a key ({ kind: key, key: a }), pressed on the keyboard in the browser, or an action of the app's root component ({ kind: action, name: again }, with a value if it has one), emitted by the root component as input in the browser.",
+					"type": "array",
+					"minItems": 1,
+					"items": { "$ref": "#/$defs/input" }
+				},
+				"ticks": {
+					"description": "The ticks that pass after the keys or inputs: tick(state, TICK) that many times, TICK = 20 ms, so 50 ticks are a second.",
+					"type": "integer",
+					"minimum": 1
+				},
+				"state": { "description": "The state expected after the step: the fields named, each compared in the same way; a list or any other value is compared as a whole." },
+				"announce": {
+					"description": "The announcement expected after the step, in German: what @lernapps/tooling/a11y's announce said last. Only the browser can see it.",
+					"type": "string",
+					"minLength": 1,
+					"pattern": "\\S"
+				}
+			}
+		},
+		"input": {
+			"description": "An input to the core: step(state, input). Told apart by kind.",
+			"type": "object",
+			"required": ["kind"],
+			"properties": { "kind": { "enum": ["key", "action"] } },
+			"allOf": [{
+				"if": {
+					"type": "object",
+					"properties": { "kind": { "const": "key" } }
+				},
+				"then": { "$ref": "#/$defs/key" }
+			}, {
+				"if": {
+					"type": "object",
+					"properties": { "kind": { "const": "action" } }
+				},
+				"then": { "$ref": "#/$defs/action" }
+			}]
+		},
+		"key": {
+			"description": "A key, as the browser names it (KeyboardEvent.key).",
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["kind", "key"],
+			"properties": {
+				"kind": { "const": "key" },
+				"key": {
+					"type": "string",
+					"minLength": 1
+				}
+			}
+		},
+		"action": {
+			"description": "An action the app's root component emits as input, for what the learner does with the pointer or by touch.",
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["kind", "name"],
+			"properties": {
+				"kind": { "const": "action" },
+				"name": {
+					"description": "The name the app gives the action.",
+					"type": "string",
+					"minLength": 1,
+					"pattern": "\\S"
+				},
+				"value": { "description": "The JSON value the action carries, if it needs one." }
+			}
+		}
+	}
+};
+// runtime/interactive/load.ts
+/** Where an app finds the schemas of its start page and of its playthroughs, for the messages that name them. */
+const SCHEMA_FILE = "node_modules/@lernapps/app-templates/runtime/interactive/interactive.v1.schema.json";
+const PLAYTHROUGH_SCHEMA_FILE = "node_modules/@lernapps/app-templates/runtime/interactive/playthrough.v1.schema.json";
+const RULE_URL = "https://lernapps.net/tooling/rules/#interactive-app-valid";
+const APP = "src/app.yaml";
+const PLAYTHROUGHS = "src/playthroughs";
+/** The app is not valid: one problem per line in `problems`. */
+var InteractiveError = class extends Error {
+	problems;
+	constructor(problems) {
+		super([
+			`the interactive app in src/ is not valid (${RULE_URL}):`,
+			...problems.map((problem) => `  - ${problem}`),
+			`Fix it as the schemas say: ${SCHEMA_FILE}, ${PLAYTHROUGH_SCHEMA_FILE}`
+		].join("\n"));
+		this.problems = problems;
+	}
+};
+const ajv = new Ajv2020({
+	allErrors: true,
+	strict: true,
+	allowUnionTypes: true
+});
+const validators = {
+	app: ajv.compile(interactive_v1_schema_default),
+	playthrough: ajv.compile(playthrough_v1_schema_default)
+};
+function validate(yaml, kind, problems) {
+	const check = validators[kind];
+	if (check(yaml.value)) return true;
+	const before = problems.lines.length;
+	schemaProblems(yaml, check.errors ?? [], problems);
+	if (problems.lines.length === before) problems.at(yaml, [], "does not match the schema");
+	return false;
+}
+/** The problems of a list of ids: each once. */
+function uniqueIds(yaml, key, items, problems) {
+	items.forEach((item, index) => {
+		if (items.findIndex((other) => other.id === item.id) !== index) problems.at(yaml, [
+			key,
+			index,
+			"id"
+		], `${item.id} is used twice in ${key}; give each its own id`);
+	});
+}
+/** The app in `root`, or the problems that keep it from building. */
+function check(root) {
+	const problems = new Problems();
+	if (!existsSync(join(root, "src/app.yaml"))) {
+		problems.add(`${APP} is missing: the start page of the app comes from it (${SCHEMA_FILE})`);
+		return { problems: problems.lines };
+	}
+	const appYaml = readYaml(root, APP, problems);
+	if (appYaml === void 0 || !validate(appYaml, "app", problems)) return { problems: problems.lines };
+	const app = appYaml.value;
+	const languageList = languageListProblems(app.languages, LANGUAGES);
+	for (const problem of languageList) problems.at(appYaml, ["languages", Math.max(app.languages.lastIndexOf(problem.lang), 0)], problem.message);
+	if (languageList.length > 0) return { problems: problems.lines };
+	const texts = new Texts(app.languages, problems);
+	texts.check(appYaml, ["title"], "plain");
+	texts.check(appYaml, ["description"], "markdown");
+	texts.check(appYaml, ["howto"], "markdown");
+	app.competencies.forEach((_, index) => texts.check(appYaml, ["competencies", index], "plain"));
+	(app.routes ?? []).forEach((_, index) => {
+		texts.check(appYaml, [
+			"routes",
+			index,
+			"title"
+		], "plain");
+		texts.check(appYaml, [
+			"routes",
+			index,
+			"description"
+		], "plain");
+	});
+	(app.sections ?? []).forEach((_, index) => {
+		texts.check(appYaml, [
+			"sections",
+			index,
+			"title"
+		], "plain");
+		texts.check(appYaml, [
+			"sections",
+			index,
+			"text"
+		], "markdown");
+	});
+	uniqueIds(appYaml, "routes", app.routes ?? [], problems);
+	uniqueIds(appYaml, "sections", app.sections ?? [], problems);
+	if (problems.lines.length > 0) return { problems: problems.lines };
+	const routes = (app.routes ?? []).map((route) => route.id);
+	const files = existsSync(join(root, "src/playthroughs")) ? readdirSync(join(root, PLAYTHROUGHS)).filter((file) => file.endsWith(".yaml")).sort() : [];
+	if (files.length === 0) problems.add(`${PLAYTHROUGHS}/: no playthrough; write at least one, <name>.yaml: a seed, and steps of keys, inputs or ticks with the state or announcement expected after them (${PLAYTHROUGH_SCHEMA_FILE})`);
+	const playthroughs = [];
+	for (const file of files) {
+		const yaml = readYaml(root, `${PLAYTHROUGHS}/${file}`, problems);
+		if (yaml === void 0 || !validate(yaml, "playthrough", problems)) continue;
+		const playthrough = yaml.value;
+		if (playthrough.route !== void 0 && !routes.includes(playthrough.route)) problems.at(yaml, ["route"], routes.length === 0 ? `${playthrough.route}: ${APP} has no routes; leave route out` : `${playthrough.route} is not a route of ${APP}; use one of ${routes.join(", ")}`);
+		playthrough.steps.forEach((step, index) => {
+			if (step.keys !== void 0 && step.inputs !== void 0) problems.at(yaml, [
+				"steps",
+				index,
+				"inputs"
+			], "keys and inputs in one step; write the keys as key inputs ({ kind: key, key: a }) in inputs, or give each its own step");
+			else if (step.keys === void 0 && step.inputs === void 0 && step.ticks === void 0) problems.at(yaml, ["steps", index], "does nothing; give the keys (keys) or inputs (inputs) of the step, the ticks that pass (ticks), or both");
+			else if (step.state === void 0 && step.announce === void 0) problems.at(yaml, ["steps", index], "expects nothing; give the state expected after the step (state), the announcement (announce), or both");
+		});
+		playthroughs.push({
+			yaml,
+			playthrough
+		});
+	}
+	if (problems.lines.length > 0) return { problems: problems.lines };
+	return {
+		interactive: {
+			app,
+			appYaml,
+			playthroughs
+		},
+		problems: []
+	};
+}
+/** The app in `root`; an InteractiveError with every problem when it is not valid. */
+function loadInteractive(root) {
+	const { interactive, problems } = check(root);
+	if (interactive === void 0) throw new InteractiveError(problems);
+	return interactive;
+}
+// runtime/interactive/messages.ts
+const MESSAGES = {
+	de: {
+		language: "Deutsch",
+		languages: "Sprache",
+		play: "Los geht's",
+		routes: "Auswahl",
+		howto: "So geht's",
+		competencies: "Das lernst du",
+		noscript: "Für die App brauchst du JavaScript. Schalte es in deinem Browser ein. Alles andere auf dieser Seite kannst du auch ohne lesen.",
+		noscriptApp: "Diese App braucht JavaScript. Schalte es in deinem Browser ein. Was die App macht, steht auf der Startseite.",
+		toStart: "Zur Startseite",
+		footer: "Eine interaktive App auf lernapps.net",
+		imprint: "Impressum",
+		privacy: "Datenschutz"
+	},
+	en: {
+		language: "English",
+		languages: "Language",
+		play: "Let's go",
+		routes: "Choose",
+		howto: "How it works",
+		competencies: "What you learn",
+		noscript: "The app needs JavaScript. Turn it on in your browser. You can read everything else on this page without it.",
+		noscriptApp: "This app needs JavaScript. Turn it on in your browser. The start page says what the app does.",
+		toStart: "To the start page",
+		footer: "An interactive app on lernapps.net",
+		imprint: "Imprint",
+		privacy: "Privacy"
+	}
+};
+/** The text of `key` in `lang`. */
+const message = (lang, key) => textsIn(MESSAGES, lang)[key];
+// runtime/interactive/render.ts
+/** The address of the app page, from a language tree's root. */
+const APP_PAGE = "app/";
+/** Every page of the app, in every language. */
+function pages(app) {
+	return app.languages.flatMap((lang) => ["start", "app"].map((kind) => {
+		const local = kind === "start" ? "" : APP_PAGE;
+		return {
+			kind,
+			lang,
+			path: `${languageRoot(lang)}${local}`,
+			local
+		};
+	}));
+}
+/** The ids of the routes, in order: the app page's anchors. */
+const routeIds = (app) => (app.routes ?? []).map((route) => route.id);
+/** One page of the app. */
+function renderPage(app, page) {
+	const { lang, path } = page;
+	const t = (key) => plain(message(lang, key));
+	const text = (value) => plain(inLanguage(value, lang));
+	/** A link from this page to `to` (from the language tree's root). */
+	const to = (target) => relative(path, `${languageRoot(lang)}${target}`);
+	const markdown = (value) => renderMarkdown(inLanguage(value, lang), (href) => href.startsWith("/") ? to(href.slice(1)) : href);
+	const title = text(app.title);
+	const header = pageHeader({
+		...page,
+		languages: app.languages,
+		label: t("languages"),
+		name: (other) => plain(message(other, "language"))
+	});
+	const footer = pageFooter({
+		footer: t("footer"),
+		imprint: t("imprint"),
+		privacy: t("privacy")
+	});
+	const routes = app.routes ?? [];
+	let main;
+	if (page.kind === "start") {
+		const routeList = routes.length === 0 ? "" : `<section class="interactive-section"><h2>${t("routes")}</h2><ul class="interactive-route-list">${routes.map((route) => {
+			const description = route.description === void 0 ? "" : ` <span class="interactive-description">${text(route.description)}</span>`;
+			return `<li><a href="${to(`${APP_PAGE}#${route.id}`)}">${text(route.title)}</a>${description}</li>`;
+		}).join("")}</ul></section>`;
+		main = [
+			`<h1>${title}</h1>`,
+			`<div class="interactive-intro">${markdown(app.description)}</div>`,
+			`<noscript><p class="interactive-noscript">${t("noscript")}</p></noscript>`,
+			`<p class="interactive-play"><a class="interactive-start" href="${to(APP_PAGE)}">${t("play")}</a></p>`,
+			routeList,
+			`<section class="interactive-section interactive-howto"><h2>${t("howto")}</h2>${markdown(app.howto)}</section>`,
+			`<section class="interactive-section"><h2>${t("competencies")}</h2><ul class="interactive-competencies">${app.competencies.map((competency) => `<li>${text(competency)}</li>`).join("")}</ul></section>`,
+			...(app.sections ?? []).map((section) => `<section class="interactive-section"><h2 id="${section.id}">${text(section.title)}</h2>${markdown(section.text)}</section>`)
+		].filter((part) => part !== "").join("\n");
+	} else {
+		const nav = routes.length === 0 ? "" : `<nav class="interactive-routes" aria-label="${t("routes")}"><ul>${routes.map((route) => `<li id="${route.id}"><a href="#${route.id}">${text(route.title)}</a></li>`).join("")}</ul></nav>`;
+		main = [
+			`<div class="interactive-title"><h1>${title}</h1><div class="interactive-title-slot" hidden></div></div>`,
+			`<noscript><p class="interactive-noscript">${t("noscriptApp")} <a href="${to("")}">${t("toStart")}</a></p></noscript>`,
+			nav,
+			`<div class="interactive-app" data-routes="${plain(JSON.stringify(routeIds(app)))}"></div>`
+		].filter((part) => part !== "").join("\n");
+	}
+	const body = [
+		header,
+		`<main class="interactive" id="inhalt">`,
+		main,
+		`</main>`,
+		footer
+	].filter((part) => part !== "").join("\n");
+	return {
+		page,
+		head: [
+			`<title>${page.kind === "start" ? title : `${t("play")} – ${title}`}</title>`,
+			`<meta name="description" content="${plain(inLanguage(app.description, lang).replace(/\s+/g, " ").trim())}" />`,
+			`<meta name="lernapps-archetype" content="interactive" />`,
+			...alternateLinks({
+				...page,
+				languages: app.languages
+			})
+		].join("\n    "),
+		body
+	};
+}
+export { InteractiveError as a, message as i, pages as n, loadInteractive as o, renderPage as r, APP_PAGE as t };

package/dist/render-DpRO_RKm.mjs

@@ -0,0 +1,146 @@
+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 { 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
+/** The quiz's texts for learners in each language it has them: a quiz may declare only these languages. */
+const QUIZ_MESSAGES = {
+	de: {
+		...QUESTION_MESSAGES.de,
+		...de_default
+	},
+	en: {
+		...QUESTION_MESSAGES.en,
+		...en_default
+	}
+};
+/** The quiz's texts in `lang`; German for a language it does not have. */
+const messagesIn = (lang) => textsIn(QUIZ_MESSAGES, lang);
+const languages = /* @__PURE__ */ new Map();
+function wordsIn(lang = "de") {
+	let found = languages.get(lang);
+	if (found === void 0) {
+		found = { t: translator(messagesIn(lang), localeOf(lang)) };
+		languages.set(lang, found);
+	}
+	return found;
+}
+function solutionItem(question, lang) {
+	const { t } = wordsIn(lang);
+	return [
+		`<li class="quiz-solution" id="${solutionId(question)}">`,
+		`<h3>${escape(question.text)}</h3>`,
+		renderSolution(question, { lang }),
+		`<p><a href="#${questionId(question)}">${t("toQuestion")}</a></p>`,
+		`</li>`
+	].join("\n");
+}
+function renderSources(quiz, { t }) {
+	if (quiz.sources === void 0) return [];
+	return [
+		`<section class="quiz-sources" id="quellen">`,
+		`<h2>${t("sources")}</h2>`,
+		`<p>${t("sourcesIntro")}</p>`,
+		`<ul>`,
+		...quiz.sources.map((source) => `<li>${source.url === void 0 ? escape(source.title) : external({
+			title: source.title,
+			url: source.url
+		})}</li>`),
+		`</ul>`,
+		`</section>`
+	];
+}
+/** The form with which the learner chooses how many questions to answer; the engine shows it (none for one question). */
+function renderStart(total, t) {
+	if (total < 2) return "";
+	return [
+		`<form class="quiz-start" hidden>`,
+		`<p><label for="quiz-count">${t("countLabel")}</label> `,
+		`<input id="quiz-count" type="number" inputmode="numeric" min="1" max="${total}" value="${total}" required> `,
+		`<span>${t("countOf", { total })}</span></p>`,
+		`<p><button type="submit">${t("start")}</button></p>`,
+		`</form>`
+	].join("");
+}
+/**
+* The page of the quiz in its data's language (German without one): its title and description, its alternates, and
+* the quiz itself for the page's body, after a language switch when the quiz has several `languages`.
+*/
+function renderQuiz(data, { languages = ["de"], sizeless } = {}) {
+	const { quiz } = data;
+	const lang = data.lang ?? "de";
+	const words = wordsIn(lang);
+	const { t } = words;
+	const where = {
+		path: languageRoot(lang),
+		local: "",
+		languages
+	};
+	const forEngine = {
+		...data,
+		quiz: {
+			...data.quiz,
+			questions: data.quiz.questions.map(({ material: _material, ...question }) => question)
+		}
+	};
+	const json = JSON.stringify(forEngine).replace(/</g, "\\u003c");
+	const material = {
+		lang,
+		href: (image) => relative(where.path, image),
+		...sizeless === void 0 ? {} : { sizeless }
+	};
+	const body = [
+		pageHeader({
+			...where,
+			lang,
+			label: escape(t("languages")),
+			name: (other) => escape(messagesIn(other).language)
+		}),
+		`<main class="quiz" id="quiz">`,
+		`<h1>${escape(quiz.title)}</h1>`,
+		`<p class="quiz-intro">${escape(quiz.intro)}</p>`,
+		`<p class="quiz-howto">${t("howto")}</p>`,
+		`<noscript><p>${t("noscript")}</p></noscript>`,
+		`<h2 class="quiz-heading">${t("questions")}</h2>`,
+		renderStart(quiz.questions.length, t),
+		`<p class="quiz-progress" hidden></p>`,
+		`<ol class="quiz-questions">`,
+		...quiz.questions.map((question) => renderQuestion(question, {
+			element: "li",
+			next: true,
+			lang,
+			...question.material === void 0 ? {} : { materialHtml: renderMaterial(question.material, material) }
+		})),
+		`</ol>`,
+		`<section class="quiz-result" id="ergebnis" hidden tabindex="-1">`,
+		`<h2>${t("result")}</h2>`,
+		`<p class="quiz-score"></p>`,
+		`<p class="quiz-last" hidden></p>`,
+		`<p><a class="quiz-restart" href="./">${t("restart")}</a></p>`,
+		`</section>`,
+		`<section class="quiz-solutions" id="loesungen">`,
+		`<h2>${t("solutions")}</h2>`,
+		`<ol>`,
+		...quiz.questions.map((question) => solutionItem(question, lang)),
+		`</ol>`,
+		`</section>`,
+		...renderSources(quiz, words),
+		`</main>`,
+		pageFooter({
+			footer: t("footer"),
+			imprint: t("imprint"),
+			privacy: t("privacy")
+		}),
+		`<script type="application/json" id="quiz-data">${json}<\/script>`
+	].filter((part) => part !== "").join("\n");
+	const alternates = languages.length < 2 ? [] : alternateLinks(where);
+	return {
+		title: quiz.title,
+		description: quiz.intro,
+		alternates,
+		body
+	};
+}
+export { messagesIn as n, renderQuiz as r, QUIZ_MESSAGES as t };