@lernapps/app-templates 0.0.1 → 0.1.1

package/dist/explainer-e2e.mjs

@@ -0,0 +1,1311 @@
+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 { 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);
+	const formulas = (value) => {
+		if (value !== void 0) into.formulas += inspect(text(value)).formulas.length;
+	};
+	for (const block of blocks) switch (block.type) {
+		case "section": {
+			const id = [...anchor, block.id].join("/");
+			into.headings.push({
+				level: level + 1,
+				text: text(block.title)
+			});
+			into.sections.push({
+				id,
+				title: text(block.title)
+			});
+			walk(site, block.blocks, lang, level + 1, [...anchor, block.id], into);
+			break;
+		}
+		case "example":
+		case "note":
+			into.headings.push({
+				level: level + 1,
+				text: text(block.title)
+			});
+			walk(site, block.blocks, lang, level + 1, anchor, into);
+			break;
+		case "text":
+			formulas(block.text);
+			break;
+		case "formula":
+			into.formulas += 1;
+			break;
+		case "figure":
+			into.figures.push(text(block.alt));
+			formulas(block.caption);
+			break;
+		case "labelled-figure":
+			into.figures.push(text(block.alt));
+			formulas(block.caption);
+			break;
+		case "table":
+			for (const cell of [...block.header ?? [], ...block.rows.flat()]) formulas(cell);
+			break;
+		case "timeline":
+			for (const event of timelineEvents(site, block)) formulas(event.text);
+			break;
+		case "definition":
+			formulas(block.explanation);
+			break;
+		case "quote":
+			formulas(block.text);
+			break;
+		case "code": break;
+		case "video":
+			into.videos.push({
+				youtube: block.youtube,
+				title: block.title,
+				channel: block.channel
+			});
+			break;
+		case "vue-component": {
+			const use = site.components.find((candidate) => candidate.block === block);
+			const nojs = block.nojs === void 0 ? "" : text(block.nojs);
+			into.formulas += inspect(nojs).formulas.length;
+			into.components.push({
+				name: block.component,
+				...use?.id === void 0 ? {} : { id: use.id },
+				nojs: plainText(renderMarkdown(nojs, (href) => href)),
+				exercise: use?.component.exercise ?? false,
+				caption: use?.component.caption ?? false,
+				...use?.component.exercise && block.examples !== void 0 ? { examples: {
+					...block.examples.accepted?.[0] === void 0 ? {} : { accepted: block.examples.accepted[0] },
+					...block.examples.rejected?.[0] === void 0 ? {} : { rejected: block.examples.rejected[0] }
+				} } : {}
+			});
+			break;
+		}
+		case "generated": {
+			const data = dataOf(block, site.data);
+			const templates = templatesOf(block, [lang]);
+			const worked = workedTasks(block, data, templates, lang);
+			for (const item of worked) for (const html of [
+				item.task,
+				item.hint ?? "",
+				...item.steps
+			]) into.formulas += html.split("<math").length - 1;
+			into.exercises.push({
+				kind: "generated",
+				id: block.id,
+				type: `generated:${kindOf(block.answer.compare).kind}`,
+				spec: block,
+				data,
+				templates,
+				worked: worked.map((item) => ({
+					task: plainText(item.task),
+					answer: plainText(item.answer)
+				}))
+			});
+			break;
+		}
+		case "open-task": {
+			const html = renderExercise(block, lang, site.data, (href) => href, {
+				lang,
+				href: (image) => image
+			});
+			into.formulas += (html.split("<script type=\"application/json\"")[0] ?? "").split("<math").length - 1;
+			into.exercises.push({
+				kind: "open",
+				id: block.id,
+				type: "open-task",
+				task: plainText(renderMarkdown(inLanguage(block.task, lang), (href) => href)),
+				answer: block.answer ?? ["text", "photo"],
+				points: block.points.map((point) => ({
+					text: inLanguage(point.text, lang),
+					source: point.source !== void 0
+				})),
+				solution: inLanguage(block.solution, lang).split(/\$[^$]+\$/).map((piece) => plainText(renderMarkdown(piece, (href) => href)).replace(/\s+/g, " ").trim()).filter((piece) => piece !== "")
+			});
+			break;
+		}
+		default: {
+			const html = renderExercise(block, lang, site.data, (href) => href, {
+				lang,
+				href: (image) => image
+			});
+			into.formulas += (html.split("<script type=\"application/json\"")[0] ?? "").split("<math").length - 1;
+			const question = questionIn(block, lang);
+			into.exercises.push({
+				kind: "question",
+				id: block.id,
+				type: block.type,
+				question,
+				answers: question.type === "single-choice" || question.type === "multiple-choice" ? question.options.filter((option) => option.correct).map((option) => shownText(option.text)) : [plainText(answerText(question, lang))]
+			});
+		}
+	}
+}
+/** The outline of the explainer whose content is in `root`/src. */
+function outline(root = ".") {
+	const site = loadSite(root, 0);
+	const pages = {};
+	const others = {};
+	for (const route of routes(site)) {
+		const item = {
+			kind: route.kind,
+			url: route.path,
+			lang: route.lang,
+			title: route.title,
+			headings: [{
+				level: 1,
+				text: route.title
+			}],
+			sections: [],
+			formulas: 0,
+			figures: [],
+			videos: [],
+			exercises: [],
+			components: []
+		};
+		if (route.page === void 0) (others[route.lang] ??= []).push(item);
+		else {
+			walk(site, route.page.blocks, route.lang, 1, [], item);
+			(pages[route.lang] ??= []).push(item);
+		}
+	}
+	const asked = assessments(site).map((assessment) => ({
+		url: assessment.local,
+		offer: assessment.chapter === void 0 ? "" : `${assessment.chapter.id}/`,
+		key: assessment.key,
+		steps: assessment.steps,
+		items: assessment.items.map((item) => ({
+			key: item.key,
+			step: item.step,
+			page: `${item.page.chapter}/${item.page.id}/`,
+			id: item.exercise
+		})),
+		pages: assessment.pages.map((page) => ({
+			url: `${page.chapter}/${page.id}/`,
+			title: titleOf(page, "de"),
+			asked: assessment.items.filter((item) => item.page === page).length
+		}))
+	}));
+	return {
+		languages: site.app.languages,
+		pages,
+		others,
+		assessments: asked
+	};
+}
+// runtime/explainer/e2e.ts
+/** The key a self-assessment's last result is kept under in localStorage: its key with the app's prefix. */
+const storedKeys = (page) => page.evaluate(() => Object.keys(localStorage).filter((key) => /:self-assessment(:|$)/.test(key)));
+/**
+* One run of the self-assessment `assessment`, from the page that offers it: each of its pages in turn, with the right
+* answer to each exercise when `right`, else none, and its exercises without "Prüfen"; then "Auswerten".
+*/
+async function runAssessment(page, app, assessment, right) {
+	await page.goto(`./${assessment.offer}`);
+	const offer = page.locator(".explainer-assessment-offer");
+	await expect(offer, "offered with JavaScript").toBeVisible();
+	await offer.locator(".explainer-assessment-link").click();
+	await expect(page.locator(".explainer-assessment-intro")).toBeVisible();
+	expect(await storedKeys(page), "nothing kept before a run").toEqual([]);
+	await page.locator(".explainer-assessment-begin").click();
+	for (let step = 0; step < assessment.steps; step++) {
+		const view = page.locator(`.explainer-assessment-step[data-step="${step}"]`);
+		await expect(view).toBeVisible();
+		await expect(view.locator("h2")).toBeFocused();
+		await expect(view.locator(".question-check:visible"), "no exercise is checked alone").toHaveCount(0);
+		for (const item of assessment.items.filter((candidate) => candidate.step === step)) {
+			if (!right) continue;
+			const content = app.pages["de"]?.find((candidate) => candidate.url === item.page);
+			const component = content?.components.find((candidate) => candidate.exercise && candidate.id === item.id);
+			if (component !== void 0) {
+				const element = view.locator(`[data-key="${item.key}"] .explainer-component`);
+				await expect(element, `${item.key}: ${component.name} hydrates`).toHaveAttribute("data-hydrated", "");
+				await expect(element.locator(".question-check, .question-feedback, .explainer-task-controls")).toHaveCount(0);
+				const example = component.examples?.accepted;
+				if (example === void 0) throw new Error(`${component.name}: its block has no accepted example`);
+				await element.evaluate((node, [name, seed]) => node.dispatchEvent(new CustomEvent(String(name), { detail: { seed } })), [ASSESSMENT_TASK_EVENT, example.seed ?? 1]);
+				await element.evaluate(emitAnswer, example.answer);
+				continue;
+			}
+			const exercise = content?.exercises.find((candidate) => candidate.id === item.id);
+			if (exercise === void 0) throw new Error(`${item.page}#${item.id} is not in the outline`);
+			if (exercise.kind === "open") {
+				await answerOpenTask(view.locator(`[data-key="${item.key}"]`), exercise, exercise.points.length);
+				continue;
+			}
+			let question;
+			if (exercise.kind === "question") question = {
+				...exercise.question,
+				id: item.key
+			};
+			else {
+				const { spec, data, templates } = exercise;
+				const n = Number(await view.locator(`[data-key="${item.key}"]`).getAttribute("data-number"));
+				const seeds = taskSeeds(spec, data);
+				const task = generate(spec, seeds[taskNumber(n, seeds.length) - 1] ?? n, data);
+				question = {
+					...questionFor(spec, task, "de", templates),
+					id: item.key
+				};
+			}
+			await giveAnswer(page, question, rightAnswer(question));
+		}
+		const last = step === assessment.steps - 1;
+		await view.getByRole("button", {
+			name: message("de", last ? "assessmentFinish" : "assessmentNext"),
+			exact: true
+		}).click();
+	}
+	await expect(page.locator(".explainer-assessment-result h2")).toBeFocused();
+}
+/** The result of a run: each content page with its band, the pages asked as `band`, the others not asked. */
+async function expectResult(page, assessment, band) {
+	const lines = page.locator(".explainer-assessment-page");
+	await expect(lines).toHaveCount(assessment.pages.length);
+	for (const [index, item] of assessment.pages.entries()) {
+		const line = lines.nth(index);
+		await expect(line.locator("a")).toHaveText(item.title);
+		await expect(line.locator("strong")).toHaveText(message("de", BAND_WORDS[item.asked === 0 ? "unasked" : band]));
+	}
+}
+const BAND_WORDS = {
+	known: "assessmentKnown",
+	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;
+/**
+* Every exercise of the page shows its text, and each "Lösung" opens and shows the accepted answer: read in one go,
+* before and after a click on each "Lösung".
+*/
+async function expectExercises(page, item) {
+	if (item.exercises.length === 0) return;
+	const main = page.locator("main");
+	const expected = item.exercises.map((exercise) => exercise.kind === "question" ? {
+		id: exercise.id,
+		texts: [shownText(exercise.question.text)],
+		answers: [exercise.answers]
+	} : exercise.kind === "open" ? {
+		id: exercise.id,
+		texts: [exercise.task],
+		answers: [exercise.solution]
+	} : {
+		id: exercise.id,
+		texts: exercise.worked.map((worked) => worked.task),
+		answers: exercise.worked.map((worked) => [worked.answer])
+	});
+	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")];
+		return {
+			id: element.id,
+			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 }) => ({
+		id,
+		texts
+	})), `${item.url}: each exercise with its text`).toEqual(expected.map(({ id, texts }) => ({
+		id,
+		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(squash(answer));
+	});
+}
+/** Without JavaScript: each component's nojs text is visible, not empty and as in the content; its island is hidden. */
+async function expectNojs(page, item) {
+	if (item.components.length === 0) return;
+	const components = page.locator("main .explainer-component");
+	await expect(components, `${item.url}: one island per component`).toHaveCount(item.components.length);
+	for (const [index, component] of item.components.entries()) {
+		const element = components.nth(index);
+		const nojs = element.locator(":scope > .explainer-nojs");
+		await expect(nojs, `${item.url}: the nojs text of ${component.name}`).toBeVisible();
+		expect((await nojs.innerText()).trim(), `${item.url}: the nojs text of ${component.name}`).not.toBe("");
+		if (component.nojs !== "") await expect(nojs).toContainText(component.nojs);
+		if (component.exercise) {
+			await expect(nojs.locator(".explainer-task-number"), `${item.url}: ${component.name}, task 1`).toHaveText(message(item.lang, "taskNumber", { n: "1" }));
+			await expect(nojs.locator("details.explainer-solution")).not.toHaveAttribute("open");
+		}
+		await expect(element.locator(".explainer-island")).toBeHidden();
+		await expect(element.locator(".question-actions"), "no Prüfen without JavaScript").toBeHidden();
+		await expect(element.locator(":scope > .explainer-task-controls")).toBeHidden();
+	}
+}
+/** Without JavaScript: each video shows its title as the link to YouTube, its channel and the note; no player. */
+async function expectVideos(page, item) {
+	if (item.videos.length === 0) return;
+	const videos = page.locator("main figure.explainer-video");
+	await expect(videos, `${item.url}: one figure per video`).toHaveCount(item.videos.length);
+	for (const [index, video] of item.videos.entries()) {
+		const figure = videos.nth(index);
+		const link = figure.getByRole("link", {
+			name: video.title,
+			exact: true
+		});
+		await expect(link, `${item.url}: the video "${video.title}" as a link`).toBeVisible();
+		await expect(link).toHaveAttribute("href", watchAddress(video.youtube));
+		await expect(figure.locator(".explainer-video-channel")).toHaveText(message(item.lang, "videoChannel", { channel: video.channel }));
+		await expect(figure.locator(".explainer-video-note")).toHaveText(message(item.lang, "videoNote"));
+		await expect(figure.locator(".explainer-video-controls"), "no button without JavaScript").toBeHidden();
+	}
+	await expect(page.locator("iframe"), `${item.url}: no player without JavaScript`).toHaveCount(0);
+}
+/** Whether `url` is of YouTube or Google: a player, a thumbnail, a script or a beacon of theirs. */
+const ofYoutubeOrGoogle = (url) => /(^|\.)(youtube[a-z-]*\.com|youtu\.be|ytimg\.com|google[a-z-]*\.com|gstatic\.com|ggpht\.com|doubleclick\.net)$/.test(new URL(url).hostname);
+/**
+* With JavaScript: the videos of a page load nothing of another host before a click (every such request is blocked and
+* recorded); "Video abspielen" puts the player of youtube-nocookie.com, named by the video's title, into its figure
+* and stores nothing; "Videos immer direkt laden" is kept on the device, loads every player without the click from
+* then on, and goes when the learner unticks it.
+*/
+async function checkVideos(page, item, origin) {
+	const requested = [];
+	await page.route((url) => url.origin !== origin, async (route) => {
+		requested.push(route.request().url());
+		await route.abort("blockedbyclient");
+	});
+	const stored = () => page.evaluate(() => [...Object.keys(localStorage), ...Object.keys(sessionStorage)]);
+	await page.goto(`./${item.url}`);
+	const videos = page.locator("main figure.explainer-video");
+	const [first] = item.videos;
+	if (first === void 0) return;
+	await expect(videos.first().locator(".explainer-video-controls"), "the controls show").toBeVisible();
+	await page.waitForLoadState("networkidle");
+	expect(requested, `${item.url}: no request to another host before a click`).toEqual([]);
+	await expect(page.locator("iframe"), "no player before a click").toHaveCount(0);
+	await videos.first().getByRole("button", { name: message("de", "videoPlay") }).click();
+	const player = videos.first().locator("iframe");
+	await expect(player).toHaveAttribute("src", embedAddress(first.youtube, true));
+	await expect(player).toHaveAttribute("title", first.title);
+	await expect(player).toBeFocused();
+	await expect(videos.first().locator(".explainer-video-play"), "the button goes").toHaveCount(0);
+	await expect.poll(() => requested.filter(ofYoutubeOrGoogle), "the player loads after the click").toContain(embedAddress(first.youtube, true));
+	expect(new Set(requested.map((url) => new URL(url).hostname)), "only the player's host").toEqual(/* @__PURE__ */ new Set(["www.youtube-nocookie.com"]));
+	await expect(page.locator("iframe"), "only the clicked video").toHaveCount(1);
+	expect(await stored(), "a click on the button stores nothing").toEqual([]);
+	const always = page.getByRole("checkbox", { name: message("de", "videoAlways") });
+	await always.first().check();
+	expect(await stored(), "the choice is kept").toHaveLength(1);
+	await page.reload();
+	await expect(page.locator("main figure.explainer-video iframe"), "every player, without a click").toHaveCount(item.videos.length);
+	for (const [index, video] of item.videos.entries()) await expect(videos.nth(index).locator("iframe")).toHaveAttribute("src", embedAddress(video.youtube, false));
+	for (const box of await always.all()) await expect(box).toBeChecked();
+	await always.first().uncheck();
+	for (const box of await always.all()) await expect(box).not.toBeChecked();
+	expect(await stored(), "the choice goes").toEqual([]);
+	requested.length = 0;
+	await page.reload();
+	await expect(videos.first().locator(".explainer-video-play")).toBeVisible();
+	await expect(page.locator("iframe")).toHaveCount(0);
+	expect(requested, `${item.url}: again no request before a click`).toEqual([]);
+}
+/** With JavaScript: each component hydrates without a console error; an exercise's "Prüfen" checks its answer. */
+async function checkComponents(page, item) {
+	const errors = [];
+	page.on("console", (message) => {
+		if (message.type() === "error") errors.push(message.text());
+	});
+	page.on("pageerror", (error) => errors.push(error.message));
+	await page.goto(`./${item.url}`);
+	const components = page.locator("main .explainer-component");
+	for (const [index, component] of item.components.entries()) {
+		const element = components.nth(index);
+		await expect(element, `${item.url}: ${component.name} hydrates`).toHaveAttribute("data-hydrated", "");
+		await expect(element.locator(".explainer-island")).toBeVisible();
+		const nojs = element.locator(":scope > .explainer-nojs");
+		if (component.caption) {
+			const details = nojs.locator(":scope > details");
+			await expect(details.locator(":scope > summary"), "the nojs text folds").toHaveText(message("de", "textDescription"));
+			await expect(details).not.toHaveAttribute("open");
+		} else await expect(nojs, "the component replaces its nojs text").toBeHidden();
+		if (!component.exercise) continue;
+		const check = element.locator(":scope > form.explainer-component-form > .question-actions .question-check");
+		await expect(check, `${component.name}: "Prüfen" under it`).toHaveText(questionMessagesIn("de").check);
+		const look = await check.evaluate((node) => {
+			const style = getComputedStyle(node);
+			const accent = getComputedStyle(document.documentElement).getPropertyValue("--page-accent").trim();
+			const probe = document.createElement("span");
+			probe.style.color = accent;
+			document.body.append(probe);
+			const filled = getComputedStyle(probe).color;
+			probe.remove();
+			return {
+				height: node.getBoundingClientRect().height,
+				background: style.backgroundColor,
+				filled
+			};
+		});
+		expect(look.height, `${component.name}: "Prüfen" is at least 44 px high`).toBeGreaterThanOrEqual(44);
+		expect(look.background, `${component.name}: "Prüfen" is filled with the accent`).toBe(look.filled);
+		await expect(check, `${component.name}: "Prüfen" waits for an answer`).toBeDisabled();
+		const feedback = element.locator(":scope > .question-feedback");
+		for (const kind of ["accepted", "rejected"]) {
+			const example = component.examples?.[kind];
+			if (example === void 0) continue;
+			await showSeed(page, component, example.seed);
+			await element.evaluate(emitAnswer, example.answer);
+			await expect(check).toBeEnabled();
+			await check.click();
+			await expect(feedback, `${component.name}: the feedback on the ${kind} example`).toHaveText(new RegExp(`^${questionMessagesIn("de")[kind === "accepted" ? "right" : "wrong"].replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`));
+			await expect(feedback).toBeFocused();
+			await expect(feedback).toBeInViewport();
+			await expect(check, `${component.name}: "Prüfen" waits for another answer`).toBeDisabled();
+			await expect(element.locator(".question-feedback"), "one feedback").toHaveCount(1);
+		}
+		await checkTaskNumber(page, item, component);
+	}
+	expect(errors, `${item.url}: no console error`).toEqual([]);
+}
+/** Emits answer with `answer` from the component in the island of `node`, as the component itself does. */
+function emitAnswer(node, answer) {
+	const wrapper = node.querySelector(".explainer-island")._vnode?.component;
+	(wrapper?.subTree?.component ?? wrapper)?.emit("answer", answer);
+}
+/**
+* Opens the page at the task number of `seed` of the exercise component, keeping the rest of its address, or leaves
+* it as it is without one.
+*/
+async function showSeed(page, component, seed) {
+	if (seed === void 0 || component.id === void 0) return;
+	const element = page.locator(`[id="${component.id}"]`);
+	const number = JSON.parse(await element.getAttribute("data-seeds") ?? "[1]").indexOf(seed) + 1;
+	if (number === 0) throw new Error(`${component.name}: no task number has the seed ${seed} of an example`);
+	const address = new URL(page.url());
+	address.searchParams.set(component.id, String(number));
+	address.hash = component.id;
+	await page.goto(address.href);
+	await expect(element).toHaveAttribute("data-hydrated", "");
+}
+/**
+* Answers the exercise component with its block's first rejected example, as the component emits it, and "Prüfen";
+* the task number it is at.
+*/
+async function answerRejected(page, component) {
+	const example = component.examples?.rejected;
+	if (example === void 0 || component.id === void 0) throw new Error(`${component.name}: its block has no rejected example`);
+	await showSeed(page, component, example.seed);
+	const element = page.locator(`[id="${component.id}"]`);
+	await element.evaluate(emitAnswer, example.answer);
+	await element.locator(":scope > form.explainer-component-form .question-check").click();
+	return Number(new URL(page.url()).searchParams.get(component.id));
+}
+/** The task number the component in the island of `node` was given, as its prop seed. */
+function seedOf(node) {
+	return node.querySelector(".explainer-island")._vnode?.component?.subTree?.component?.props["seed"];
+}
+/**
+* An exercise component at its address ?<id>=<n>: it gets the task number n as its prop seed and shows "Aufgabe
+* Nr. n"; "Neue Aufgabe" moves to the next number, in the address and on the page, with the focus on it.
+*/
+async function checkTaskNumber(page, item, component) {
+	if (component.id === void 0) return;
+	await page.goto(`./${item.url}?${component.id}=3#${component.id}`);
+	const element = page.locator(`[id="${component.id}"]`);
+	await expect(element, `${component.name}: hydrates at its address`).toHaveAttribute("data-hydrated", "");
+	const seeds = JSON.parse(await element.getAttribute("data-seeds") ?? "[1]");
+	const shown = taskNumber(3, seeds.length);
+	const number = element.locator(":scope > .explainer-task-controls .explainer-task-number");
+	await expect(number, `${component.name}: the task number of the address`).toHaveText(message("de", "taskNumber", { n: String(shown) }));
+	await expect.poll(() => element.evaluate(seedOf), `${component.name}: gets the seed of number ${shown}`).toBe(seeds[shown - 1]);
+	await element.locator(":scope > .explainer-task-controls .explainer-new-task").click();
+	const next = Number(new URL(page.url()).searchParams.get(component.id));
+	expect(next, `${component.name}: the next task number in the address`).toBe(nextTaskNumber(shown, seeds.length));
+	expect(new URL(page.url()).hash).toBe(`#${component.id}`);
+	await expect(number).toHaveText(message("de", "taskNumber", { n: String(next) }));
+	await expect(number).toBeFocused();
+	await expect.poll(() => element.evaluate(seedOf), `${component.name}: gets the seed of number ${next}`).toBe(seeds[next - 1]);
+}
+/** The feedback of the question `id` says `text`. */
+const feedback = (page, id) => page.locator(`[id="${id}"] .question-feedback`);
+/** The first reason the feedback gives for the wrong `answer`: the most specific the question has. */
+function reasonFor(question, answer) {
+	const quiz = questionMessagesIn("de");
+	const [first] = wrongReasons(question, answer);
+	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;
+}
+/**
+* A wrong answer to the question in `exercise` (an element's id): the feedback with the reason `reason`, in view
+* with the focus; the solution still hidden and the controls open; then "Lösung zeigen" shows the solution.
+*/
+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.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();
+	await item.getByRole("button", { name: questionMessagesIn("de").showSolution }).click();
+	await expect(item.locator(".question-reveal"), `${exercise}: the solution on Lösung zeigen`).toBeVisible();
+	await expect(item.locator(".question-reveal")).toBeFocused();
+}
+/** With JavaScript: a question of the question types, answered before its solution shows, right and wrong. */
+async function checkQuestion(page, url, exercise) {
+	const { question } = exercise;
+	const item = page.locator(`[id="${exercise.id}"]`);
+	await page.goto(`./${url}#${exercise.id}`);
+	await expectMaterial(page, question);
+	await expect(item.locator(".question-reveal"), `${exercise.id}: no solution before the answer`).toBeHidden();
+	await expect(item.locator("details.explainer-solution"), `${exercise.id}: no Lösung before the answer`).toBeHidden();
+	await answerQuestion(page, question, rightAnswer(question));
+	await expect(feedback(page, questionId(question))).toContainText(questionMessagesIn("de").right);
+	await expectFeedbackInView(page, question);
+	await expect(item.locator(".question-reveal"), `${exercise.id}: the solution after the right answer`).toBeVisible();
+	await page.reload();
+	const wrong = wrongAnswer(question);
+	await answerQuestion(page, question, wrong);
+	await wrongThenSolution(page, exercise.id, question, reasonFor(question, wrong));
+}
+/** An example answer to an open task, which the tests type. */
+const OPEN_ANSWER = "Meine Antwort in eigenen Worten.";
+/**
+* Answers the open task in `item` as text (or, if it takes only photos, with none) and ticks the first `ticks` of its
+* points: in a self-assessment that is the answer.
+*/
+async function answerOpenTask(item, exercise, ticks) {
+	if (!exercise.answer.includes("text")) return;
+	const choice = item.getByRole("radio", { name: message("de", "openTaskType") });
+	if (await choice.count() > 0) await choice.check();
+	await item.getByRole("textbox", { name: message("de", "openTaskAnswer") }).fill(OPEN_ANSWER);
+	await item.getByRole("button", { name: message("de", "openTaskCompare") }).click();
+	const boxes = item.getByRole("checkbox");
+	await expect(boxes, `${exercise.id}: a tick box per point`).toHaveCount(exercise.points.length);
+	for (let index = 0; index < ticks; index += 1) await boxes.nth(index).check();
+}
+/**
+* With JavaScript: an open task is answered before its points and model answer show; "Vergleichen" waits for an
+* answer; the ticks give right or partly right with the missing points; the model answer opens after "Auswerten".
+*/
+async function checkOpenTask(page, url, exercise) {
+	const item = page.locator(`[id="${exercise.id}"]`);
+	await page.goto(`./${url}#${exercise.id}`);
+	await expect(item.locator("details.explainer-solution"), `${exercise.id}: no Lösung before the answer`).toBeHidden();
+	await expect(item.locator(".explainer-open-points"), `${exercise.id}: no points before the answer`).toBeHidden();
+	if (!exercise.answer.includes("text")) return;
+	await item.getByRole("button", { name: message("de", "openTaskCompare") }).click();
+	await expect(item.locator(".explainer-open-need"), `${exercise.id}: compare waits for an answer`).toHaveText(message("de", "openTaskWriteFirst"));
+	await item.getByRole("textbox", { name: message("de", "openTaskAnswer") }).fill(OPEN_ANSWER);
+	await page.reload();
+	await expect(item.getByRole("textbox", { name: message("de", "openTaskAnswer") }), `${exercise.id}: kept`).toHaveValue(OPEN_ANSWER);
+	await answerOpenTask(item, exercise, exercise.points.length);
+	await expect(item.locator("details.explainer-solution"), `${exercise.id}: the Lösung after the answer`).toBeVisible();
+	await item.getByRole("button", { name: message("de", "openTaskChange") }).click();
+	await expect(item.locator("details.explainer-solution"), `${exercise.id}: no Lösung while writing`).toBeHidden();
+	await item.getByRole("button", { name: message("de", "openTaskCompare") }).click();
+	await expect(item.locator(".explainer-open-check").getByRole("link", { name: message("de", "openTaskSource") }), `${exercise.id}: a link to read up per point of the content`).toHaveCount(exercise.points.filter((point) => point.source).length);
+}
+/** With JavaScript: a generated exercise at its deep link, its answers, a mistake, and "Neue Aufgabe". */
+async function checkGenerated(page, url, exercise) {
+	const { spec, data, templates } = exercise;
+	const seeds = taskSeeds(spec, data);
+	const seedOfNumber = (n) => seeds[taskNumber(n, seeds.length) - 1] ?? n;
+	const task = generate(spec, seedOfNumber(SEED), data);
+	const question = questionFor(spec, task, "de", templates);
+	const address = `./${url}?seed=${SEED}#${exercise.id}`;
+	const legend = page.locator(`[id="${questionId(question)}"] legend`);
+	const worked = page.locator(`[id="${exercise.id}"] .explainer-worked`);
+	await page.goto(address);
+	await expect(legend, "the deep link shows the task of its seed").toHaveText(plainText(taskText(spec, task, "de", templates)));
+	await expect(worked, `${exercise.id}: no worked task before the answer`).toBeHidden();
+	if (task.mistakes.length > 0) {
+		await answerQuestion(page, question, answerFor(spec, task, question, 0));
+		const message = fill(templates["de"]?.messages[0] ?? "", spec, task, "de", "text");
+		await wrongThenSolution(page, exercise.id, question, message);
+	} else {
+		const wrong = wrongAnswer(question);
+		await answerQuestion(page, question, wrong);
+		await wrongThenSolution(page, exercise.id, question, reasonFor(question, wrong));
+	}
+	await expect(worked, `${exercise.id}: the worked tasks stay hidden with JavaScript`).toBeHidden();
+	await page.locator(`[id="${exercise.id}"] .explainer-new-task`).click();
+	const number = Number(new URL(page.url()).searchParams.get(exercise.id));
+	expect(number, "the next task number in the address").toBe(nextTaskNumber(taskNumber(SEED, seeds.length), seeds.length));
+	const next = generate(spec, seedOfNumber(number), data);
+	const nextQuestion = questionFor(spec, next, "de", templates);
+	const nextLegend = page.locator(`[id="${questionId(nextQuestion)}"] legend`);
+	await expect(nextLegend).toHaveText(plainText(taskText(spec, next, "de", templates)));
+	if (seeds.length > 1) expect(taskKey(spec, next, "de", templates), "a new task").not.toBe(taskKey(spec, task, "de", templates));
+	await expect(nextLegend).toBeFocused();
+	await answerQuestion(page, nextQuestion, rightAnswer(nextQuestion));
+	await expect(feedback(page, questionId(nextQuestion))).toContainText(questionMessagesIn("de").right);
+	await expectFeedbackInView(page, nextQuestion);
+}
+/** Whether the page at `url` (absolute) has an element with the id `id`, fetched once per page. */
+const known = /* @__PURE__ */ new Map();
+async function hasAnchor(page, url, id) {
+	let html = known.get(url);
+	if (html === void 0) {
+		html = page.request.get(url).then((response) => response.text());
+		known.set(url, html);
+	}
+	const escaped = id.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+	return (await html).includes(` id="${escaped}"`);
+}
+/** Every link of the page to an anchor of this app finds an element with that id. */
+async function expectAnchors(page) {
+	const here = new URL(page.url());
+	const links = await page.locator("a[href*='#']").evaluateAll((anchors) => anchors.map((a) => a.href));
+	for (const link of new Set(links)) {
+		const url = new URL(link);
+		if (url.origin !== here.origin || url.hash === "") continue;
+		const id = decodeURIComponent(url.hash.slice(1));
+		const found = url.pathname === here.pathname ? await page.locator(`[id="${id.replace(/"/g, "\\\"")}"]`).count() === 1 : await hasAnchor(page, url.href.replace(/#.*$/, ""), id);
+		expect(found, `${here.pathname}: the link to ${url.pathname}${url.hash} finds its anchor`).toBe(true);
+	}
+}
+/** The page's language, its alternates and a switch to each other language, the archetype marker. */
+async function expectLanguages(page, item, languages) {
+	await expect(page.locator("html")).toHaveAttribute("lang", item.lang);
+	await expect(page.locator("meta[name=\"lernapps-archetype\"]")).toHaveAttribute("content", "explainer");
+	for (const lang of languages) {
+		await expect(page.locator(`link[rel="alternate"][hreflang="${lang}"]`)).toHaveCount(1);
+		if (lang === item.lang) continue;
+		const other = page.locator(`.page-languages a[hreflang="${lang}"]`);
+		await expect(other).toBeVisible();
+		const response = await page.request.get(await other.evaluate((a) => a.href));
+		expect(response.status(), `${item.url}: the switch to ${lang}`).toBe(200);
+	}
+}
+/**
+* The clipboard of the page, recorded in the test (nothing leaves the browser): each text the page writes, kept even
+* when the page goes on right after.
+*/
+async function recordClipboard(page) {
+	const copied = [];
+	await page.exposeBinding("lernappsRecordCopy", (_source, text) => {
+		copied.push(text);
+	});
+	await page.addInitScript(() => {
+		const recorder = window;
+		Object.defineProperty(navigator, "clipboard", {
+			configurable: true,
+			value: { writeText: (text) => recorder.lernappsRecordCopy(text) }
+		});
+	});
+	return copied;
+}
+/** Records the addresses the page opens with window.open, which opens nothing. */
+async function recordOpen(page) {
+	await page.addInitScript(() => {
+		const opened = [];
+		Object.assign(window, {
+			opened,
+			open: (url) => (opened.push(String(url ?? "")), null)
+		});
+	});
+	return () => page.evaluate(() => window.opened);
+}
+/**
+* Switches the way `label` to the tutor on under the title of a content page (an assistant's name, or copying the
+* text): "Mit einem KI-Tutor lernen" is folded while none is on; then the bar with its button shows.
+*/
+async function switchOn(page, label) {
+	const tutor = page.locator(".explainer-tutor");
+	const off = tutor.locator("details.explainer-tutor-off");
+	await expect(off, "folded at first").not.toHaveAttribute("open");
+	await expect(tutor.locator(".explainer-tutor-bar")).toBeHidden();
+	await off.locator(":scope > summary").click();
+	await tutor.locator(".explainer-tutor-select").selectOption({ label });
+	await tutor.locator(".explainer-tutor-on").click();
+	await expect(off).toBeHidden();
+	await expect(tutor.locator(".explainer-tutor-go")).toBeVisible();
+	return tutor;
+}
+/** The app's first assistant, from the page's tutor section: its name and its address with {prompt}. */
+async function firstAssistant(page) {
+	return (await page.locator("script.explainer-tutor-prompt").evaluate((script) => JSON.parse(script.textContent ?? "{}").ways))[0] ?? {
+		name: "",
+		url: ""
+	};
+}
+/** The prompt in the address `opened` of the assistant `template`. */
+function promptOf(template, opened) {
+	const [before = "", after = ""] = template.split("{prompt}");
+	return decodeURIComponent(opened.slice(before.length, opened.length - after.length));
+}
+/**
+* The address of the page's tutor page with where the learner is, as the ways to the tutor name it from the page
+* `here` (its address before the click): the tutor page beside the page, every task number of `here`, and the exercise
+* `id` at task `n` (none for one without numbers); for way A, without `id`, no exercise and no section.
+*/
+function expectTutorAddress(address, here, id, n) {
+	const url = new URL(address);
+	expect(`${url.origin}${url.pathname}`, "the page's tutor page").toBe(new URL("tutor/", new URL(".", here)).href);
+	for (const [key, value] of new URL(here).searchParams) if (key !== "via") expect(url.searchParams.get(key), `the task number of ${key}`).toBe(value);
+	expect(url.searchParams.get("via"), "no via=tutor").toBeNull();
+	if (id === void 0) {
+		expect(url.searchParams.get("uebung"), "no exercise").toBeNull();
+		expect(url.searchParams.get("abschnitt"), "no section").toBeNull();
+		return;
+	}
+	expect(url.searchParams.get("uebung"), "the exercise").toBe(id);
+	if (n !== void 0) expect(url.searchParams.get(id), "its task number").toBe(String(n));
+}
+/**
+* What "Zurück zum Tutor" copies on the page `here` (its address before the click): the page's tutor page with the
+* page's task numbers, which answers and has the exercise `id`; a line with `line` for the task the learner did; the
+* count of the session last.
+*/
+async function expectSessionLines(request, copied, here, line, id) {
+	await expect.poll(() => copied.length, "the lines are copied").toBe(1);
+	const lines = (copied[0] ?? "").split("\n");
+	const [intro, before = "", after = ""] = [lines[0] ?? "", ...message("de", "sessionIntro").split("{url}")];
+	expect(intro.startsWith(before) && intro.endsWith(after), "the first line: the page's tutor page").toBe(true);
+	const address = intro.slice(before.length, intro.length - after.length);
+	expectTutorAddress(address, here, void 0, void 0);
+	expect(lines.slice(1, -1), "a line per task").toContainEqual(expect.stringContaining(line));
+	expect(lines.at(-1), "the count of the session").toMatch(/^Sitzung: \d+ von \d+ richtig\.$/);
+	const response = await request.get(address);
+	expect(response.status(), `${address} answers`).toBe(200);
+	expect(await response.text(), "the tutor page has the exercise").toContain(id);
+}
+/**
+* The result line "Zurück zum Tutor" copies on the page `here` (its address before the click): its first line has
+* `first`, then the page's tutor page with the task `n` of the exercise `id`, which answers and has the exercise.
+*/
+async function expectResultLine(request, copied, here, first, id, n) {
+	await expect.poll(() => copied.length, "the result line is copied").toBe(1);
+	const lines = (copied[0] ?? "").split("\n");
+	expect(lines, "two lines").toHaveLength(2);
+	const [line = "", tutor = ""] = lines;
+	expect(line, "the first line: exercise, number, how far, the input").toContain(first);
+	const prefix = `${message("de", "resultTutor")} `;
+	expect(tutor.startsWith(prefix), "the page's tutor page").toBe(true);
+	const address = tutor.slice(prefix.length);
+	expectTutorAddress(address, here, id, n);
+	const response = await request.get(address);
+	expect(response.status(), `${address} answers`).toBe(200);
+	expect(await response.text(), "the tutor page has the exercise").toContain(id);
+}
+/** The explainer's tests, for the content in `root`/src. */
+function explainerTests(root = ".") {
+	const app = outline(root);
+	test.describe("explainer", () => {
+		test.describe.configure({ mode: "parallel" });
+		test.use({ reducedMotion: "reduce" });
+		test.describe("without JavaScript", () => {
+			test.use({ javaScriptEnabled: false });
+			for (const lang of app.languages) {
+				for (const item of app.pages[lang] ?? []) test(`${item.url || "./"}: headings, sections, formulas, figures and anchors as in the content`, async ({ page }) => {
+					await page.goto(`./${item.url}`);
+					const main = page.locator("main");
+					const headings = await main.locator("h1, h2, h3, h4, h5, h6").evaluateAll((elements) => elements.map((element) => ({
+						level: Number(element.tagName.slice(1)),
+						text: (element.textContent ?? "").replace(/\s+/g, " ").trim()
+					})));
+					expect(headings, "the heading levels follow the nesting").toEqual(item.headings);
+					for (const section of item.sections) {
+						const heading = page.locator(`[id="${section.id}"]`);
+						await expect(heading, `section ${section.id}`).toBeVisible();
+						await expect(heading).toHaveText(section.title);
+					}
+					const formulas = await main.locator("math").evaluateAll((elements) => elements.filter((math) => !math.closest(".explainer-described")).length);
+					expect(formulas, "one <math> per formula").toBe(item.formulas);
+					for (const name of item.figures) await expect(main.getByRole("img", {
+						name,
+						exact: true
+					}).first(), `the figure "${name}"`).toBeVisible();
+					await expectAnchors(page);
+					await expectLanguages(page, item, app.languages);
+					await expectExercises(page, item);
+					await expectNojs(page, item);
+					await expectVideos(page, item);
+				});
+				for (const item of app.others[lang] ?? []) test(`${item.url || "./"}: its heading, its links and anchors, its languages`, async ({ page }) => {
+					await page.goto(`./${item.url}`);
+					await expect(page.locator("main h1")).toHaveText(item.title);
+					await expectAnchors(page);
+					await expectLanguages(page, item, app.languages);
+					await expect(page.locator(".explainer-tutor"), "no way to the tutor here").toHaveCount(0);
+					if (item.kind === "start") await expect(page.locator(".explainer-tutor-about h2")).toHaveText(message(item.lang, "tutorTitle"));
+				});
+				test(`${lang}: previous and next form one chain over all pages`, async ({ page }) => {
+					const order = (app.pages[lang] ?? []).map((item) => item.url);
+					const first = order[0];
+					if (first === void 0) throw new Error(`no page in ${lang}`);
+					const relative = (url) => {
+						const path = new URL(url).pathname;
+						return order.find((candidate) => path.endsWith(`/${candidate}`)) ?? path;
+					};
+					const forward = [];
+					await page.goto(`./${first}`);
+					for (let step = 0; step <= order.length; step++) {
+						forward.push(relative(page.url()));
+						const next = page.locator("a[rel=\"next\"]");
+						if (await next.count() === 0) break;
+						const here = page.url();
+						await next.click();
+						await page.waitForURL((url) => url.href !== here);
+					}
+					expect(forward, "next leads through every page in order").toEqual(order);
+					const backward = [];
+					for (let step = 0; step <= order.length; step++) {
+						backward.push(relative(page.url()));
+						const previous = page.locator("a[rel=\"prev\"]");
+						if (await previous.count() === 0) break;
+						const here = page.url();
+						await previous.click();
+						await page.waitForURL((url) => url.href !== here);
+					}
+					expect(backward, "previous leads back through every page").toEqual([...order].reverse());
+				});
+			}
+		});
+		test.describe("with JavaScript", () => {
+			test.skip(({ viewport }) => (viewport?.width ?? 0) > 400, "the exercises run at 360 px");
+			for (const item of app.pages["de"] ?? []) {
+				const types = /* @__PURE__ */ new Map();
+				for (const exercise of item.exercises) if (!types.has(exercise.type)) types.set(exercise.type, exercise);
+				if (types.size === 0) continue;
+				test(`${item.url}: one exercise of each type checks its answers (${[...types.keys()].join(", ")})`, async ({ page }) => {
+					for (const exercise of types.values()) if (exercise.kind === "question") await checkQuestion(page, item.url, exercise);
+					else if (exercise.kind === "open") await checkOpenTask(page, item.url, exercise);
+					else await checkGenerated(page, item.url, exercise);
+					expect(await page.evaluate(() => Object.keys(localStorage))).toEqual([]);
+					const kept = await page.evaluate(() => Object.keys(sessionStorage));
+					expect(kept.filter((key) => !/^lernapps:[^:]+:antwort:/.test(key)), "nothing else in the tab").toEqual([]);
+					expect(kept.length, "an answer per open task").toBe(types.has("open-task") ? 1 : 0);
+				});
+			}
+			for (const item of app.pages["de"] ?? []) {
+				if (item.videos.length === 0) continue;
+				test(`${item.url}: the videos load nothing before a click, the player after it, directly once chosen`, async ({ page, baseURL }) => {
+					await checkVideos(page, item, new URL(baseURL ?? page.url()).origin);
+				});
+			}
+			for (const item of app.pages["de"] ?? []) {
+				if (item.components.length === 0) continue;
+				test(`${item.url}: each component hydrates without a console error (${item.components.map((component) => component.name).join(", ")})`, async ({ page }) => {
+					await checkComponents(page, item);
+					expect(await page.evaluate(() => [...Object.keys(localStorage), ...Object.keys(sessionStorage)])).toEqual([]);
+				});
+			}
+		});
+		for (const item of (app.pages["de"] ?? []).filter((candidate) => candidate.exercises.some((exercise) => exercise.kind === "generated"))) test(`${item.url}: the address holds the task of each exercise, and the tutor button gives them to the prompt`, async ({ page }) => {
+			await page.addInitScript(() => {
+				const copied = [];
+				Object.assign(window, { copied });
+				Object.defineProperty(navigator, "clipboard", {
+					configurable: true,
+					value: { writeText: (text) => (copied.push(text), Promise.resolve()) }
+				});
+			});
+			await page.goto(`./${item.url}`);
+			const ids = item.exercises.flatMap((exercise) => exercise.kind === "generated" ? [exercise.id] : []);
+			for (const id of ids) await expect.poll(() => new URL(page.url()).searchParams.get(id), `${id} is in the address`).not.toBeNull();
+			const first = ids[0];
+			if (first === void 0) return;
+			const before = new URL(page.url()).searchParams;
+			await page.locator(`[id="${first}"] .explainer-new-task`).click();
+			const after = new URL(page.url()).searchParams;
+			expect(after.get(first), "the exercise's task changes").not.toBe(before.get(first));
+			for (const id of ids.slice(1)) expect(after.get(id), `${id} stays`).toBe(before.get(id));
+			const tutor = await switchOn(page, message("de", "tutorOther"));
+			await expect(tutor.locator(".explainer-tutor-go")).toHaveText(`?${message("de", "tutorCopy")}`);
+			await tutor.locator(".explainer-tutor-go").click();
+			await expect(tutor.locator(".explainer-tutor-status")).toHaveText(message("de", "tutorCopied"));
+			const [prompt = "", ...markdown] = ((await page.evaluate(() => window.copied))[0] ?? "").split("\n");
+			const address = /https?:\/\/\S+/.exec(prompt)?.[0] ?? "";
+			expect(new URL(address).searchParams.get(first), "the task number in the tutor page's address").toBe(after.get(first));
+			expect(`${new URL(address).origin}${new URL(address).pathname}`).toBe(new URL("tutor/", page.url()).href);
+			expect(markdown.join("\n"), "the tutor page's Markdown, with the guide").toContain("## So leitest du an");
+			expect(markdown.join("\n"), "and the exercise").toContain(`### Übung ${first}`);
+			await page.reload();
+			await expect(tutor.locator(".explainer-tutor-go")).toBeVisible();
+		});
+		const generatedPage = (app.pages["de"] ?? []).find((candidate) => candidate.exercises.some((exercise) => exercise.kind === "generated"));
+		if (generatedPage !== void 0) {
+			const exercise = generatedPage.exercises.find((candidate) => candidate.kind === "generated");
+			test(`${generatedPage.url}: way A, the provider link names the page's tutor page with the page's task numbers`, async ({ page, request }) => {
+				if (exercise?.kind !== "generated") return;
+				const opened = await recordOpen(page);
+				await page.goto(`./${generatedPage.url}?${exercise.id}=${SEED}#${exercise.id}`);
+				const n = taskNumber(SEED, taskSeeds(exercise.spec, exercise.data).length);
+				const assistant = await firstAssistant(page);
+				const template = assistant.url;
+				test.skip(!template.includes("{prompt}"), "the app's first assistant takes no prompt in its address");
+				await (await switchOn(page, assistant.name)).locator(".explainer-tutor-go").click();
+				const addresses = await opened();
+				expect(addresses, "one assistant opens").toHaveLength(1);
+				const prompt = promptOf(template, addresses[0] ?? "");
+				const found = prompt.match(/https?:\/\/\S+/g) ?? [];
+				expect(found, "one address: the tutor page").toHaveLength(1);
+				const [address = ""] = found;
+				expectTutorAddress(address, page.url(), void 0, void 0);
+				expect(new URL(address).searchParams.get(exercise.id), "the task number").toBe(String(n));
+				expect(prompt, "in the learner's voice: be my tutor").toContain("Tutor");
+				const response = await request.get(address);
+				expect(response.status(), "the tutor page answers").toBe(200);
+				expect(await response.text()).toContain("<main id=\"anleitung\">");
+			});
+			/** The first line of way B1: the tutor page and the task in one sentence. */
+			const stuckFirst = (line, here, n) => {
+				const address = /https?:\/\/\S+/.exec(line)?.[0] ?? "";
+				expectTutorAddress(address, here, exercise?.id ?? "", n);
+				expect(line).toBe(message("de", "stuckAsk", {
+					url: address,
+					exercise: exercise?.id ?? "",
+					number: message("de", "resultNumber", { n: String(n) })
+				}));
+				return address;
+			};
+			test(`${generatedPage.url}: way B1, "Warum?" after a wrong answer opens the assistant with the input and the app's message word for word`, async ({ page, request }) => {
+				if (exercise?.kind !== "generated") return;
+				const opened = await recordOpen(page);
+				const { spec, data, templates } = exercise;
+				const seeds = taskSeeds(spec, data);
+				const n = taskNumber(SEED, seeds.length);
+				const task = generate(spec, seeds[n - 1] ?? n, data);
+				const question = questionFor(spec, task, "de", templates);
+				await page.goto(`./${generatedPage.url}?${exercise.id}=${SEED}#${exercise.id}`);
+				const assistant = await firstAssistant(page);
+				const template = assistant.url;
+				test.skip(!template.includes("{prompt}"), "the app's first assistant takes no prompt in its address");
+				await expect(page.locator(`[id="${questionId(question)}"] legend`)).toBeVisible();
+				await switchOn(page, assistant.name);
+				const wrong = task.mistakes.length > 0 ? answerFor(spec, task, question, 0) : wrongAnswer(question);
+				await answerQuestion(page, question, wrong);
+				await expect(feedback(page, questionId(question))).toContainText(questionMessagesIn("de").wrong);
+				const shown = (await feedback(page, questionId(question)).locator(".question-diagnosis").allTextContents()).slice(0, -1).join(" ");
+				if (task.mistakes.length > 0) expect(shown, "the message of the mistake").toBe(diagnose(spec, task, question, wrong, "de", templates));
+				const help = page.locator(`[id="${exercise.id}"] .question-actions button.explainer-help`);
+				await expect(help).toHaveText(`${assistant.name.charAt(0).toUpperCase()}${message("de", "helpWhy")}`);
+				await expect(help).toHaveAttribute("aria-label", message("de", "helpWhyLabel", { name: assistant.name }));
+				await help.click();
+				const addresses = await opened();
+				expect(addresses, "one assistant opens").toHaveLength(1);
+				const [first = "", ...rest] = promptOf(template, addresses[0] ?? "").split("\n");
+				const address = stuckFirst(first, page.url(), n);
+				expect(rest).toEqual([message("de", "stuckInput", {
+					input: answerShown(question, wrong, "de"),
+					tries: message("de", "resultTry")
+				}), message("de", "stuckMessage", { message: shown.replace(/\s+/g, " ").trim() })]);
+				expect((await request.get(address)).status(), `${address} answers`).toBe(200);
+			});
+			test(`${generatedPage.url}: way B1 before the first input, the sentence with the tutor page and the task alone`, async ({ page }) => {
+				if (exercise?.kind !== "generated") return;
+				const opened = await recordOpen(page);
+				const n = taskNumber(SEED, taskSeeds(exercise.spec, exercise.data).length);
+				await page.goto(`./${generatedPage.url}?${exercise.id}=${SEED}#${exercise.id}`);
+				const assistant = await firstAssistant(page);
+				const template = assistant.url;
+				test.skip(!template.includes("{prompt}"), "the app's first assistant takes no prompt in its address");
+				const button = page.locator(`[id="${exercise.id}"] .question-actions button.explainer-help`);
+				await expect(button, "no help before a tutor is on").toBeHidden();
+				await switchOn(page, assistant.name);
+				await expect(button, "there before the first input").toHaveText(`${assistant.name.charAt(0).toUpperCase()}${message("de", "help")}`);
+				await button.click();
+				const addresses = await opened();
+				expect(addresses, "one assistant opens").toHaveLength(1);
+				const lines = promptOf(template, addresses[0] ?? "").split("\n");
+				expect(lines, "the sentence alone").toHaveLength(1);
+				stuckFirst(lines[0] ?? "", page.url(), n);
+			});
+			test(`${generatedPage.url}: way B2, on a page a tutor opened "Warum?" copies the lines and opens nothing`, async ({ page }) => {
+				if (exercise?.kind !== "generated") return;
+				const copied = await recordClipboard(page);
+				const opened = await recordOpen(page);
+				const { spec, data, templates } = exercise;
+				const seeds = taskSeeds(spec, data);
+				const n = taskNumber(SEED, seeds.length);
+				const task = generate(spec, seeds[n - 1] ?? n, data);
+				const question = questionFor(spec, task, "de", templates);
+				await page.goto(`./${generatedPage.url}?${exercise.id}=${SEED}&via=tutor#${exercise.id}`);
+				await expect(page.locator(`[id="${questionId(question)}"] legend`)).toBeVisible();
+				const wrong = task.mistakes.length > 0 ? answerFor(spec, task, question, 0) : wrongAnswer(question);
+				await answerQuestion(page, question, wrong);
+				await expect(feedback(page, questionId(question))).toContainText(questionMessagesIn("de").wrong);
+				await page.locator(`[id="${exercise.id}"] .question-actions button.explainer-help`).click();
+				await expect.poll(() => copied.length, "the lines are copied").toBe(1);
+				expect(await opened(), "no new chat").toEqual([]);
+				const lines = (copied[0] ?? "").split("\n");
+				expect(lines[0], "the task first").toBe(message("de", "stuckTask", {
+					exercise: exercise.id,
+					number: message("de", "resultNumber", { n: String(n) })
+				}));
+				expect(lines[1]).toBe(message("de", "stuckInput", {
+					input: answerShown(question, wrong, "de"),
+					tries: message("de", "resultTry")
+				}));
+				expect(lines[2]).toMatch(/^Die App sagt: „.+“$/);
+				const prefix = `${message("de", "resultTutor")} `;
+				expect(lines.at(-1)?.startsWith(prefix), "the tutor page last").toBe(true);
+				expectTutorAddress((lines.at(-1) ?? "").slice(prefix.length), page.url(), exercise.id, n);
+			});
+			test(`${generatedPage.url}: on a page a tutor opened, "Zurück" in the row copies the result line once the solution shows`, async ({ page, request }) => {
+				if (exercise?.kind !== "generated") return;
+				const copied = await recordClipboard(page);
+				const { spec, data, templates } = exercise;
+				const seeds = taskSeeds(spec, data);
+				const n = taskNumber(SEED, seeds.length);
+				const task = generate(spec, seeds[n - 1] ?? n, data);
+				const question = questionFor(spec, task, "de", templates);
+				await page.goto(`./${generatedPage.url}?${exercise.id}=${SEED}&via=tutor#${exercise.id}`);
+				await expect(page.locator(`[id="${questionId(question)}"] legend`)).toBeVisible();
+				const wrong = task.mistakes.length > 0 ? answerFor(spec, task, question, 0) : wrongAnswer(question);
+				await answerQuestion(page, question, wrong);
+				await page.getByRole("button", {
+					name: questionMessagesIn("de").showSolution,
+					exact: true
+				}).click();
+				const back = page.locator(`[id="${exercise.id}"] .question-actions button.explainer-help`);
+				await expect(back).toHaveAttribute("aria-label", message("de", "helpBackLabel", { name: message("de", "tutorSomeone") }));
+				const here = page.url();
+				await back.click();
+				await expectResultLine(request, copied, here, `, ${exercise.id}, Nr. ${n}: ${message("de", "resultSolution")}`, exercise.id, n);
+			});
+			test(`${generatedPage.url}: "Zurück zum Tutor" copies the tutor page and the tasks of a generated exercise`, async ({ page, request }) => {
+				if (exercise?.kind !== "generated") return;
+				const copied = await recordClipboard(page);
+				const { spec, data, templates } = exercise;
+				const seeds = taskSeeds(spec, data);
+				const n = taskNumber(SEED, seeds.length);
+				const task = generate(spec, seeds[n - 1] ?? n, data);
+				const question = questionFor(spec, task, "de", templates);
+				await page.goto(`./${generatedPage.url}?${exercise.id}=${SEED}&via=tutor#${exercise.id}`);
+				await expect(page.locator(`[id="${questionId(question)}"] legend`)).toBeVisible();
+				const wrong = task.mistakes.length > 0 ? answerFor(spec, task, question, 0) : wrongAnswer(question);
+				await answerQuestion(page, question, wrong);
+				await expect(feedback(page, questionId(question))).toContainText(questionMessagesIn("de").wrong);
+				const here = page.url();
+				await expect(page.getByRole("button", { name: message("de", "backToTutor") })).toHaveCount(2);
+				const back = page.locator(".explainer-back-end button");
+				await back.click();
+				await expect(back).toHaveText(message("de", "backToTutorDone"));
+				await expect(page.locator(".explainer-back-end [role=status]")).toHaveText(message("de", "backToTutorCopied", { name: message("de", "tutorSomeoneTo") }));
+				const status = `${message("de", "resultOpen")} (${message("de", "resultTry")}, ${message("de", "resultInput", { input: answerShown(question, wrong, "de") })})`;
+				await expectSessionLines(request, copied, here, `- ${exercise.id}, Nr. ${n}: ${status}.`, exercise.id);
+			});
+		}
+		const firstPage = (app.pages["de"] ?? [])[0];
+		if (firstPage !== void 0) {
+			test("the start page switches an assistant on for every page, and off again", async ({ page }) => {
+				await page.goto("./");
+				const choose = page.locator("select.explainer-tutor-choose");
+				await expect(choose, "none at first").toHaveValue("");
+				const name = (await choose.locator("option").evaluateAll((options) => options.map((option) => option.value)))[1] ?? "";
+				await choose.selectOption(name);
+				await page.goto(`./${firstPage.url}`);
+				const tutor = page.locator(".explainer-tutor");
+				await expect(tutor.locator(".explainer-tutor-bar")).toBeVisible();
+				await expect(tutor.locator("details.explainer-tutor-off")).toBeHidden();
+				if (name !== "copy") await expect(tutor.locator(".explainer-tutor-go")).toContainText(name);
+				await page.goto("./");
+				await expect(choose).toHaveValue(name);
+				await choose.selectOption("");
+				await page.goto(`./${firstPage.url}`);
+				await expect(tutor.locator(".explainer-tutor-bar")).toBeHidden();
+				await expect(page.locator("button.explainer-help").first(), "no help without a tutor").toBeHidden();
+			});
+			test("the start page keeps the learner's needs for every explainer or this app; way A names them", async ({ page }) => {
+				await page.goto("./");
+				const needs = page.locator("dialog.explainer-tutor-needs");
+				await expect(needs, "closed at first").toBeHidden();
+				await page.locator("button.explainer-tutor-needs-open").click();
+				await expect(needs, "opened by Einstellungen").toBeVisible();
+				const language = needs.locator("select.explainer-tutor-language");
+				await expect(language, "the first language only with andere-muttersprache").toBeHidden();
+				await needs.locator("input.explainer-tutor-need[value=\"kurze-schritte\"]").check();
+				await needs.locator("input.explainer-tutor-need[value=\"andere-muttersprache\"]").check();
+				await expect(language).toBeVisible();
+				await language.selectOption("tr");
+				const stored = (key) => page.evaluate((name) => localStorage.getItem(name), key);
+				expect(JSON.parse(await stored("lernapps:settings:explainer:tutor-bedarf") ?? "null"), "for every explainer").toEqual({
+					needs: ["kurze-schritte", "andere-muttersprache"],
+					language: "tr"
+				});
+				await needs.locator("input.explainer-tutor-needs-scope[value=\"app\"]").check();
+				const own = await page.evaluate(() => Object.keys(localStorage).find((key) => /^lernapps:[a-z0-9-]+:settings:tutor-bedarf$/.test(key) && !key.startsWith("lernapps:settings:")));
+				expect(own, "for this app only, under its own prefix").toBeDefined();
+				await needs.locator("button.explainer-tutor-needs-done").click();
+				await expect(needs, "closed by Fertig").toBeHidden();
+				await page.reload();
+				await page.locator("button.explainer-tutor-needs-open").click();
+				await expect(needs.locator("input.explainer-tutor-needs-scope[value=\"app\"]")).toBeChecked();
+				await expect(needs.locator("input.explainer-tutor-need[value=\"kurze-schritte\"]")).toBeChecked();
+				const opened = await recordOpen(page);
+				await page.goto(`./${firstPage.url}`);
+				const assistant = await firstAssistant(page);
+				test.skip(!assistant.url.includes("{prompt}"), "the app's first assistant takes no prompt in its address");
+				await (await switchOn(page, assistant.name)).locator(".explainer-tutor-go").click();
+				const prompt = promptOf(assistant.url, (await opened())[0] ?? "");
+				const address = /https?:\/\/\S+/.exec(prompt)?.[0] ?? "";
+				expect(new URL(address).searchParams.get("bedarf"), "the needs in the tutor page's query").toBe("kurze-schritte,andere-muttersprache");
+				expect(prompt, "the first language in the learner's voice").toContain("Meine Muttersprache ist Türkisch.");
+			});
+		}
+		for (const item of app.pages["de"] ?? []) {
+			const component = item.components.find((candidate) => candidate.exercise && candidate.id !== void 0);
+			if (component?.id === void 0) continue;
+			const id = component.id;
+			for (const [first, held] of [["the component", "**/assets/index-*.js"], ["the client module", "**/assets/islands-*.js"]]) test(`${item.url}: on a page a tutor opened, ${component.name} has its help button once, ${first} loaded first`, async ({ page }) => {
+				const errors = [];
+				page.on("console", (message) => {
+					if (message.type() === "error") errors.push(message.text());
+				});
+				page.on("pageerror", (error) => errors.push(error.message));
+				await page.route(held, async (route) => {
+					await new Promise((resolve) => setTimeout(resolve, 500));
+					await route.continue();
+				});
+				await page.goto(`./${item.url}?via=tutor#${id}`);
+				const element = page.locator(`[id="${id}"]`);
+				await expect(element).toHaveAttribute("data-hydrated", "");
+				const help = element.locator("button.explainer-help");
+				await expect(help, "once").toHaveCount(1);
+				await expect(help).toBeVisible();
+				await expect(element.locator(".explainer-island button.explainer-help"), "not in the island").toHaveCount(0);
+				await element.locator(".explainer-new-task").click();
+				await expect(help, "once after a new task").toHaveCount(1);
+				await expect(help).toBeVisible();
+				await answerRejected(page, component);
+				await expect(help, "after a wrong answer").toContainText(message("de", "helpWhy"));
+				expect(errors, "no console error").toEqual([]);
+			});
+		}
+		for (const item of app.pages["de"] ?? []) {
+			const component = item.components.find((candidate) => candidate.exercise && candidate.id !== void 0);
+			if (component?.id === void 0) continue;
+			const id = component.id;
+			test(`${item.url}: "Zurück zum Tutor" copies the tutor page and the tasks of the exercise component ${component.name}`, async ({ page, request }) => {
+				const copied = await recordClipboard(page);
+				await page.goto(`./${item.url}?${id}=3&via=tutor#${id}`);
+				const element = page.locator(`[id="${id}"]`);
+				await expect(element).toHaveAttribute("data-hydrated", "");
+				const n = await answerRejected(page, component);
+				const here = page.url();
+				await page.getByRole("button", { name: message("de", "backToTutor") }).first().click();
+				const status = `${message("de", "resultOpen")} (${message("de", "resultTry")}`;
+				await expectSessionLines(request, copied, here, `- ${id}, Nr. ${n}: ${status}`, id);
+			});
+		}
+		test.describe("a self-assessment", () => {
+			test.skip(({ viewport }) => (viewport?.width ?? 0) > 400, "the self-assessments run at 360 px");
+			for (const assessment of app.assessments) {
+				test(`${assessment.url}: a run with every answer right says each page asked is known`, async ({ page }) => {
+					await runAssessment(page, app, assessment, true);
+					await expectResult(page, assessment, "known");
+					const total = String(assessment.items.length);
+					await expect(page.locator(".explainer-assessment-score")).toHaveText(message("de", "assessmentScore", {
+						right: total,
+						total
+					}));
+				});
+				test(`${assessment.url}: opened by a tutor, a run keeps nothing and copies its result for the chat`, async ({ page, request }) => {
+					const copied = await recordClipboard(page);
+					await page.goto(`./${assessment.url}?via=tutor`);
+					await expect(page.locator(".explainer-back")).toHaveCount(0);
+					const errors = [];
+					page.on("pageerror", (error) => errors.push(error.message));
+					await page.locator(".explainer-assessment-begin").click();
+					for (let step = 0; step < assessment.steps; step++) {
+						const last = step === assessment.steps - 1;
+						const view = page.locator(`.explainer-assessment-step[data-step="${step}"]`);
+						for (const item of assessment.items.filter((candidate) => candidate.step === step)) {
+							const example = (app.pages["de"]?.find((candidate) => candidate.url === item.page)?.components.find((candidate) => candidate.exercise && candidate.id === item.id))?.examples?.accepted;
+							if (example === void 0) continue;
+							const element = view.locator(`[data-key="${item.key}"] .explainer-component`);
+							await expect(element).toHaveAttribute("data-hydrated", "");
+							await element.evaluate(emitAnswer, example.answer);
+							await element.evaluate(emitAnswer, void 0);
+						}
+						const ids = await view.locator("[id]").evaluateAll((nodes) => nodes.map((node) => node.id));
+						expect(ids.length, `step ${step}: ids once`).toBe(new Set(ids).size);
+						await view.getByRole("button", {
+							name: message("de", last ? "assessmentFinish" : "assessmentNext"),
+							exact: true
+						}).click();
+					}
+					expect(errors, "no error in the page").toEqual([]);
+					await expectResult(page, assessment, "read");
+					expect(await storedKeys(page), "a run for the tutor keeps nothing").toEqual([]);
+					await expect(page.locator(".explainer-assessment-delete")).toHaveCount(0);
+					await page.getByRole("button", {
+						name: message("de", "backToTutor"),
+						exact: true
+					}).click();
+					await expect.poll(() => copied.length).toBe(1);
+					const lines = (copied[0] ?? "").split("\n");
+					expect(lines[0]).toBe(message("de", "assessmentBackLine"));
+					const prefix = `${message("de", "resultTutor")} `;
+					const tutor = lines.find((line) => line.startsWith(prefix))?.slice(prefix.length) ?? "";
+					const [nextBefore = ""] = message("de", "assessmentNextRound").split("{url}");
+					const next = new URL(lines.at(-1)?.slice(nextBefore.length) ?? "");
+					expect(next.pathname.endsWith(`/${assessment.url}`), "the next round's link").toBe(true);
+					expect(next.searchParams.get("via")).toBe("tutor");
+					const url = new URL(tutor);
+					expect(url.pathname.endsWith(`/${assessment.url}tutor/`), "the self-assessment's tutor page").toBe(true);
+					for (const item of assessment.items) expect(url.searchParams.get(item.key) ?? "").toMatch(/(^|-)offen$/);
+					expect((await request.get(tutor)).status(), "the tutor page answers").toBe(200);
+				});
+				test(`${assessment.url}: a run without an answer stays on the device, goes to the tutor and is deleted`, async ({ page, request }) => {
+					const opened = await recordOpen(page);
+					await runAssessment(page, app, assessment, false);
+					await expectResult(page, assessment, "read");
+					expect(await storedKeys(page)).toHaveLength(1);
+					await page.reload();
+					await expect(page.locator(".explainer-assessment-result")).toBeVisible();
+					await expectResult(page, assessment, "read");
+					await page.goto(`./${assessment.offer}`);
+					await expect(page.locator(".explainer-assessment-link")).toHaveText(message("de", "assessmentOfferLast"));
+					await page.locator(".explainer-assessment-link").click();
+					const select = page.locator(".explainer-assessment-way");
+					const first = await select.locator("option").first().textContent() ?? "";
+					await select.selectOption({ index: 0 });
+					await page.locator(".explainer-assessment-go").click();
+					const [address = ""] = await opened();
+					expect(address, `opens ${first}`).not.toBe("");
+					const tutor = /https?:\/\/\S+\/tutor\/\?\S+/.exec(decodeURIComponent(address))?.[0] ?? "";
+					const url = new URL(tutor);
+					expect(url.pathname.endsWith(`/${assessment.url}tutor/`), "the self-assessment's tutor page").toBe(true);
+					for (const item of assessment.items) expect(url.searchParams.get(item.key) ?? "").toMatch(/(^|-)offen$/);
+					expect((await request.get(tutor)).status(), "the tutor page answers").toBe(200);
+					await page.getByRole("button", {
+						name: message("de", "assessmentDelete"),
+						exact: true
+					}).click();
+					await expect(page.locator(".explainer-assessment-intro")).toBeVisible();
+					expect(await storedKeys(page)).toEqual([]);
+				});
+			}
+		});
+		test("nothing is stored on the device", async ({ page, context }) => {
+			const urls = app.languages.flatMap((lang) => [...app.others[lang] ?? [], ...app.pages[lang] ?? []]);
+			for (const item of urls) {
+				await page.goto(`./${item.url}`);
+				const stored = await page.evaluate(() => [...Object.keys(localStorage), ...Object.keys(sessionStorage)]);
+				expect(stored, `${item.url} stores nothing`).toEqual([]);
+			}
+			expect(await context.cookies()).toEqual([]);
+		});
+	});
+}
+export { explainerTests };