@lernapps/app-templates 0.0.0-stage → 0.1.0

package/runtime/interactive/plugin.ts

@@ -0,0 +1,266 @@
+// The build step of an interactive app (@lernapps/app-templates/interactive/plugin), a Vite plugin. An app's
+// vite.config.ts adds it to the shared preset of @lernapps/tooling:
+//
+//   import { lernapps } from "@lernapps/tooling/preset";
+//   import { interactive } from "@lernapps/app-templates/interactive/plugin";
+//   export default lernapps({ plugins: [interactive()] });
+//
+// It reads src/app.yaml and the playthroughs (load.ts) and fails the build with one line per problem. Then, before
+// anything is written:
+// - the component rules on every single-file component in src/ (src/ui/) and the app's own TypeScript modules they
+//   import, with the explainer's checks on the SFC compiler's output (../explainer/components.ts): no network, no
+//   eval, new Function, innerHTML or v-html, imports only from vue, this runtime, @lernapps/tooling/storage, i18n and
+//   a11y, the app's own files in src/ and the libraries in the dependencies of its package.json (bundled; never from
+//   a URL), browser globals only in onMounted;
+// - the core (src/core/index.ts, contract.ts), loaded in a Vite server of its own: it exports start and step (and tick,
+//   if any, as a function, which a playthrough with ticks needs), every route starts, and every playthrough plays:
+//   start(seed, route), then for each step step(state, input) for each of its inputs (its keys as key inputs) and
+//   tick(state, TICK) for each of its ticks, twice, giving the same states both times (deterministic by its seed),
+//   and after each step the state the playthrough expects. No time passes but the ticks a step names.
+// index.html is Vite's only entry: Vite builds the app's client module (src/main.ts) and stylesheet from it. The built
+// index.html is the shell of every page (render.ts): the start page without any script, and the app page that loads
+// the client module, in each language, with the shell's relative asset URLs rewritten for its depth. An app's code has
+// no size limit. 404.html leads every address the app does not have to its start page. `vp dev` serves the same
+// pages, rendered on each request.
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import vue from "@vitejs/plugin-vue";
+import type { Plugin } from "vite-plus";
+import { codeProblems, sourceScope } from "../shared/vue-code.ts";
+import { pathText, Problems } from "../shared/content.ts";
+import { fromDepth, notFoundPage, withLanguage } from "../shared/pages.ts";
+import { type Load, VUE_OPTIONS, vueAlias, withServer } from "../shared/vue.ts";
+import { doingText, inputsOf, inputText, mismatch, TICK, type Core, type Playthrough } from "./contract.ts";
+import { InteractiveError, loadInteractive, type Interactive } from "./load.ts";
+import { pages, renderPage, type RenderedPage } from "./render.ts";
+
+const MARKER = "<!-- interactive -->";
+/** Where the core is, from the app's root. */
+export const CORE = "src/core/index.ts";
+
+const CONTRACT =
+  "the core exports start(seed, route) and step(state, input), and tick(state, dt) when the app moves on its own (interactive-core-contract)";
+
+/** The shell with the page in it; the start page without the shell's scripts. */
+export function fill(shell: string, rendered: RenderedPage): string {
+  if (!shell.includes(MARKER)) throw new Error(`index.html has no ${MARKER}: put it in <body>, where the pages go`);
+  let html = withLanguage(shell, rendered.page.lang)
+    .replace(/\s*<title>[\s\S]*?<\/title>/, "")
+    .replace("</head>", `  ${rendered.head}\n  </head>`);
+  if (rendered.page.kind === "start") {
+    html = html
+      .replace(/\s*<script type="module"[^>]*><\/script>/g, "")
+      .replace(/\s*<link rel="modulepreload"[^>]*>/g, "");
+  }
+  return fromDepth(html, rendered.page.path).replace(MARKER, () => rendered.body);
+}
+
+/** The single-file components of the app, from its root: every .vue file in src/. */
+function vueFiles(root: string, dir = "src"): string[] {
+  if (!existsSync(join(root, dir))) return [];
+  return readdirSync(join(root, dir))
+    .sort()
+    .flatMap((name) => {
+      const file = `${dir}/${name}`;
+      if (statSync(join(root, file)).isDirectory()) return name === "node_modules" ? [] : vueFiles(root, file);
+      return name.endsWith(".vue") ? [file] : [];
+    });
+}
+
+const reason = (error: unknown) => (error instanceof Error ? error.message : String(error)).split("\n")[0] ?? "";
+
+/** Plays `playthrough` from `route`: the state after each step, or where it throws. */
+function play(
+  core: Core<unknown>,
+  playthrough: Playthrough,
+  route: string,
+): { states: unknown[]; error?: { path: (string | number)[]; message: string } } {
+  const states: unknown[] = [];
+  let state: unknown;
+  try {
+    state = core.start(playthrough.seed, route);
+  } catch (error) {
+    const message = `start(${playthrough.seed}, ${JSON.stringify(route)}) throws: ${reason(error)} (interactive-core-contract)`;
+    return { states, error: { path: ["seed"], message } };
+  }
+  for (const [index, step] of playthrough.steps.entries()) {
+    for (const [at, input] of inputsOf(step).entries()) {
+      try {
+        state = core.step(state, input);
+      } catch (error) {
+        const message = `step(state, ${inputText(input)}) throws: ${reason(error)} (interactive-core-contract)`;
+        return { states, error: { path: ["steps", index, step.keys === undefined ? "inputs" : "keys", at], message } };
+      }
+    }
+    for (let at = 0; at < (step.ticks ?? 0); at++) {
+      try {
+        state = core.tick?.(state, TICK) ?? state;
+      } catch (error) {
+        const message = `tick(state, ${TICK}) throws at tick ${at + 1}: ${reason(error)} (interactive-core-contract)`;
+        return { states, error: { path: ["steps", index, "ticks"], message } };
+      }
+    }
+    states.push(state);
+  }
+  return { states };
+}
+
+const valueAt = (value: unknown, path: readonly (string | number)[]): unknown =>
+  path.reduce<unknown>(
+    (at, part) => (typeof at === "object" && at !== null ? (at as Record<string, unknown>)[part] : undefined),
+    value,
+  );
+
+/** The problems of the core: its exports, the start of every route, and every playthrough. */
+async function coreProblems(root: string, content: Interactive, load: Load): Promise<string[]> {
+  if (!existsSync(join(root, CORE))) return [`${CORE} is missing; ${CONTRACT}`];
+  let exports: Record<string, unknown>;
+  try {
+    exports = await load(`/${CORE}`);
+  } catch (error) {
+    return [`${CORE}: cannot be loaded: ${reason(error)}`];
+  }
+  const lacking = ["start", "step"].filter((name) => typeof exports[name] !== "function");
+  if (exports["tick"] !== undefined && typeof exports["tick"] !== "function") lacking.push("tick as a function");
+  if (lacking.length > 0) return [`${CORE}: exports no ${lacking.join(", ")}; ${CONTRACT}`];
+  const core = exports as unknown as Core<unknown>;
+  const problems = new Problems();
+  const routes = content.app.routes ?? [];
+  const failed = new Set<string>();
+  routes.forEach((route, index) => {
+    try {
+      core.start(1, route.id);
+    } catch (error) {
+      failed.add(route.id);
+      problems.at(
+        content.appYaml,
+        ["routes", index, "id"],
+        `start(1, ${JSON.stringify(route.id)}) throws: ${reason(error)}; the core starts every route (interactive-core-contract)`,
+      );
+    }
+  });
+  for (const { yaml, playthrough } of content.playthroughs) {
+    const route = playthrough.route ?? routes[0]?.id ?? "";
+    if (failed.has(route)) continue;
+    const ticking = playthrough.steps.findIndex((step) => step.ticks !== undefined);
+    if (core.tick === undefined && ticking >= 0) {
+      problems.at(
+        yaml,
+        ["steps", ticking, "ticks"],
+        `the core exports no tick, so no time passes in the app; export tick(state, dt) from ${CORE}, or leave the ticks out (interactive-core-contract)`,
+      );
+      continue;
+    }
+    const first = play(core, playthrough, route);
+    if (first.error !== undefined) {
+      problems.at(yaml, first.error.path, first.error.message);
+      continue;
+    }
+    const second = play(core, playthrough, route);
+    const differs = first.states.findIndex(
+      (state, index) => JSON.stringify(state) !== JSON.stringify(second.states[index]),
+    );
+    if (differs >= 0 || second.error !== undefined) {
+      problems.at(
+        yaml,
+        ["steps", Math.max(differs, 0)],
+        "the state differs between two plays of the same steps; the core gives the same state for the same seed, route, inputs and ticks, so draw from the seed, never from Math.random or the clock (interactive-core-contract)",
+      );
+      // a property of the core: once is enough, and no state of it can be trusted
+      break;
+    }
+    for (const [index, step] of playthrough.steps.entries()) {
+      if (step.state === undefined) continue;
+      const found = mismatch(first.states[index], step.state);
+      if (found === undefined) continue;
+      const done = playthrough.steps
+        .slice(0, index + 1)
+        .flatMap(doingText)
+        .join(", ");
+      const where = found.path.length === 0 ? "the state" : pathText(found.path);
+      problems.at(
+        yaml,
+        ["steps", index, "state", ...found.path],
+        `${where} is ${JSON.stringify(found.actual) ?? "missing"} after ${done}, the playthrough expects ${JSON.stringify(valueAt(step.state, found.path))} (interactive-playthroughs-pass)`,
+      );
+      // the steps after it start from another state
+      break;
+    }
+  }
+  return problems.lines;
+}
+
+/** The build step of an interactive app: validates src/, checks its components and its core, writes every page. */
+export function interactive(): Plugin[] {
+  let root = process.cwd();
+  let command: "build" | "serve" = "build";
+  let content: Interactive | undefined;
+  const load = () => (content ??= loadInteractive(root));
+  const main: Plugin = {
+    name: "lernapps-interactive",
+    enforce: "post",
+    configResolved(config) {
+      root = config.root;
+      command = config.command;
+    },
+    async buildStart() {
+      content = undefined;
+      let loaded: Interactive;
+      try {
+        loaded = load();
+      } catch (error) {
+        this.error(error instanceof Error ? error.message : String(error));
+      }
+      if (command !== "build") return;
+      const problems = codeProblems(root, vueFiles(root), sourceScope(root));
+      if (problems.length === 0)
+        problems.push(...(await withServer(root, (loader) => coreProblems(root, loaded, loader))));
+      if (problems.length > 0) this.error(new InteractiveError(problems).message);
+    },
+    generateBundle(_options, bundle) {
+      const index = bundle["index.html"];
+      if (index === undefined || index.type !== "asset") return;
+      const shell = String(index.source);
+      const app = load().app;
+      for (const page of pages(app)) {
+        const html = fill(shell, renderPage(app, page));
+        if (page.path === "") index.source = html;
+        else this.emitFile({ type: "asset", fileName: `${page.path}index.html`, source: html });
+      }
+      this.emitFile({ type: "asset", fileName: "404.html", source: notFoundPage() });
+    },
+    configureServer(server) {
+      server.watcher.on("all", (_event, file) => {
+        if (file.endsWith(".yaml") && file.startsWith(join(root, "src"))) {
+          content = undefined;
+          server.ws.send({ type: "full-reload" });
+        }
+      });
+      // before Vite's own fallback to index.html
+      server.middlewares.use((request, response, next) => {
+        const path = decodeURIComponent(new URL(request.url ?? "/", "http://localhost").pathname).replace(/^\//, "");
+        let app: Interactive["app"];
+        try {
+          app = load().app;
+        } catch (error) {
+          response.statusCode = 500;
+          response.setHeader("content-type", "text/plain; charset=utf-8");
+          response.end(error instanceof Error ? error.message : String(error));
+          return;
+        }
+        const page = pages(app).find((candidate) => candidate.path === path);
+        if (page === undefined) return next();
+        const shell = readFileSync(join(root, "index.html"), "utf8");
+        server
+          .transformIndexHtml(`/${path}`, fill(shell, { ...renderPage(app, page), page: { ...page, path: "" } }))
+          .then((html) => {
+            response.setHeader("content-type", "text/html; charset=utf-8");
+            response.end(html);
+          })
+          .catch(next);
+      });
+    },
+  };
+  const alias: Plugin = { name: "lernapps-interactive-vue-alias", config: () => ({ resolve: { alias: vueAlias() } }) };
+  return [vue(VUE_OPTIONS), alias, main];
+}

package/runtime/interactive/render.ts

@@ -0,0 +1,126 @@
+// Renders the pages of an interactive app at build time from src/app.yaml, in each of its languages (German at the
+// root, every other language below /<language>/):
+// - the start page (index.html): what the app does, a link into the app, its routes, how to play, what a learner
+//   learns, and the background sections; complete static HTML, with a <noscript> note that the app needs JavaScript;
+// - the app page (app/index.html): the heading line (the title, and the hidden slot that the app's title component is
+//   mounted into, interactive.ts), a <noscript> note, the routes as links to their anchors (#<id>, each the
+//   id of its list item, so that a topic app/#<id> of the catalog entry finds it), and the element the app's root
+//   component is mounted into (interactive.ts).
+// Each page has its language, its alternates, the archetype marker, and the footer with imprint and privacy notice. The
+// header holds the language switch of plain links and nothing else (no link with the app's name: the title is the h1,
+// and the way back to the catalog is the platform's); an app with one language has no header. The end-to-end tests rely on the classes and ids written here.
+import { inLanguage, type Text } from "../shared/languages.ts";
+import { alternateLinks, languageRoot, pageFooter, pageHeader, relative } from "../shared/pages.ts";
+import { plain, renderMarkdown } from "../shared/text/markdown.ts";
+import type { App } from "./load.ts";
+import { message, type Messages } from "./messages.ts";
+
+/** The address of the app page, from a language tree's root. */
+export const APP_PAGE = "app/";
+
+/** A page of the app in one language. */
+export interface Page {
+  kind: "start" | "app";
+  lang: string;
+  /** Where the page is, from the app's root: "", "app/", "en/", "en/app/". */
+  path: string;
+  /** The same page's address within any language tree: "" or "app/". */
+  local: string;
+}
+
+/** A page, rendered: what goes into the shell's head and body. */
+export interface RenderedPage {
+  page: Page;
+  head: string;
+  body: string;
+}
+
+/** Every page of the app, in every language. */
+export function pages(app: App): Page[] {
+  return app.languages.flatMap((lang) =>
+    (["start", "app"] as const).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. */
+export const routeIds = (app: App): string[] => (app.routes ?? []).map((route) => route.id);
+
+/** One page of the app. */
+export function renderPage(app: App, page: Page): RenderedPage {
+  const { lang, path } = page;
+  const t = (key: keyof Messages) => plain(message(lang, key));
+  const text = (value: Text) => plain(inLanguage(value, lang));
+  /** A link from this page to `to` (from the language tree's root). */
+  const to = (target: string) => relative(path, `${languageRoot(lang)}${target}`);
+  const markdown = (value: Text) =>
+    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: string;
+  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 === undefined
+                  ? ""
+                  : ` <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");
+  const 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    ");
+  return { page, head, body };
+}

package/runtime/quiz/e2e.ts

@@ -0,0 +1,233 @@
+// The end-to-end tests of every quiz (@lernapps/app-templates/quiz/e2e), run by `lernapps check --pre-push` on the built
+// app with the app's own question bank. An app's e2e/quiz.e2e.ts is
+//
+//   import { quizTests } from "@lernapps/app-templates/quiz/e2e";
+//   quizTests();
+//
+// For each question: its deep link opens it, the right answer counts and a wrong one does not; after either, the
+// background of every option, the explanation and the links for further reading show, the learner's choice marked.
+// The feedback then has the focus and its top is in view, and the button to the next question comes after it.
+// After the answer the reveal also says what is right: the right options marked, or the right answer for the other
+// types. The seed in the address gives the order of the questions, and the address gets one when it has none. All
+// right answers give the full score and show the solutions; nothing is stored on the device before, and afterwards
+// only the last result when the bank asks for it. Without JavaScript every question and its solution, with the same
+// background and links, can be read. Each test opens its own page; none depends on another, so they run in parallel.
+// A bank in several languages runs all of this in German; for each other language, kept short: without JavaScript
+// its page (/<language>/) is in that language with every question and its solution, and its switch leads to the page
+// in every language; with JavaScript one question is answered, with the feedback in that language.
+// The helpers answerQuestion, expectBackground and expectFeedbackInView work per question, on any page with a question
+// that renderQuestion of @lernapps/app-templates/questions rendered and startQuestion made live (shared/questions/e2e.ts).
+import { readFileSync } from "node:fs";
+import { expect, test } from "playwright/test";
+import type { Text } from "../shared/languages.ts";
+import {
+  answerQuestion,
+  expectBackground,
+  expectFeedbackInView,
+  expectMaterial,
+  question,
+} from "../shared/questions/e2e.ts";
+import { questionId, rightAnswer, wrongAnswer } from "../shared/questions/question.ts";
+import { quizIn, quizLanguages, type Quiz } from "./quiz.ts";
+import { messagesIn, QUIZ_MESSAGES } from "./render.ts";
+
+export { answerQuestion, expectBackground, expectFeedbackInView, expectMaterial } from "../shared/questions/e2e.ts";
+
+const de = QUIZ_MESSAGES.de;
+/** The quiz's own texts in `lang`. */
+const messagesOf = messagesIn;
+
+/** The quiz's tests, for the question bank in `bank` (relative to the app's root). */
+export function quizTests(bank = "src/quiz.json"): void {
+  const all = JSON.parse(readFileSync(bank, "utf8")) as Quiz<Text>;
+  const languages = quizLanguages(all);
+  const quiz = quizIn(all, "de");
+
+  test.describe("quiz", () => {
+    // The runtime scrolls smoothly unless the learner asks for less motion (quiz.css) and moves the focus after every
+    // answer: with motion, every click would wait for a scroll to settle, the run through a quiz grow with its size.
+    test.use({ reducedMotion: "reduce" });
+
+    for (const item of quiz.questions) {
+      test(`${item.id} (${item.type}): its link opens it and the right answer counts`, async ({ page }) => {
+        await page.goto(`./#${questionId(item)}`);
+        await expect(question(page, item)).toBeVisible();
+        await expect(page.locator(".question:visible")).toHaveCount(1);
+        await answerQuestion(page, item, rightAnswer(item));
+        await expect(question(page, item).locator(".question-feedback")).toContainText(de.right);
+        await expectFeedbackInView(page, item);
+        // from the feedback, the keyboard reaches the next question (past the links of the background)
+        const next = question(page, item).locator(".question-next");
+        for (let tab = 0; tab < 30 && !(await next.evaluate((button) => button === document.activeElement)); tab++) {
+          await page.keyboard.press("Tab");
+        }
+        await expect(next).toBeFocused();
+        const reveal = question(page, item).locator(".question-reveal");
+        await expectBackground(reveal, item);
+        if (item.type === "single-choice" || item.type === "multiple-choice") {
+          const right = item.options.filter((option) => option.correct).length;
+          await expect(reveal.locator(".question-badge-right")).toHaveCount(right);
+          await expect(reveal.locator(".question-badge-right").first()).toHaveText(de.rightOption);
+        } else {
+          await expect(reveal).toContainText(de.rightAnswer);
+        }
+      });
+
+      if (item.material !== undefined) {
+        test(`${item.id} (${item.type}): what it shows is there, and its images load`, async ({ page }) => {
+          await page.goto(`./#${questionId(item)}`);
+          await expectMaterial(page, item);
+        });
+      }
+
+      test(`${item.id} (${item.type}): a wrong answer does not count`, async ({ page }) => {
+        await page.goto(`./#${questionId(item)}`);
+        await answerQuestion(page, item, wrongAnswer(item));
+        await expect(question(page, item).locator(".question-feedback")).toContainText(de.wrong);
+        await expectFeedbackInView(page, item);
+        await expectBackground(question(page, item).locator(".question-reveal"), item);
+        if (item.type === "single-choice" || item.type === "multiple-choice") {
+          await expect(question(page, item).locator(".question-badge-chosen").first()).toHaveText(de.yourChoice);
+        }
+      });
+    }
+
+    test("the seed in the address gives the order; without one, the address gets one", async ({ page }) => {
+      const everything = `&n=${quiz.questions.length}`;
+      const order = async (address: string) => {
+        await page.goto(address);
+        return page.locator(".question").evaluateAll((items) => items.map((item) => item.id).join());
+      };
+      const first = await order(`./?seed=11${everything}`);
+      expect(await order(`./?seed=11${everything}`)).toBe(first);
+      if (quiz.questions.length > 2) {
+        const others = [];
+        for (const seed of [12, 13, 14, 15, 16]) others.push(await order(`./?seed=${seed}${everything}`));
+        expect(others.some((other) => other !== first)).toBe(true);
+      }
+      await page.goto("./");
+      await expect.poll(() => new URL(page.url()).searchParams.get("seed")).toMatch(/^\d+$/);
+    });
+
+    test("all right answers give the full score, then the solutions show", async ({ page }) => {
+      await page.goto("./");
+      if (quiz.questions.length > 1) await page.locator(".quiz-start button").click();
+      expect(await page.evaluate(() => Object.keys(localStorage))).toEqual([]);
+      for (let step = 0; step < quiz.questions.length; step++) {
+        const id = await page.locator(".question:visible").getAttribute("data-id");
+        const item = quiz.questions.find((candidate) => candidate.id === id);
+        if (item === undefined) throw new Error(`no visible question at step ${step + 1}`);
+        await answerQuestion(page, item, rightAnswer(item));
+        await question(page, item).locator(".question-next").click();
+      }
+      const total = String(quiz.questions.length);
+      await expect(page.locator(".quiz-score")).toHaveText(
+        de.score.replace("{score}", total).replace("{total}", total),
+      );
+      await expect(page.locator("#loesungen")).toBeVisible();
+      // only the last result, and only when the bank asks for it, under the app's own prefix
+      const stored = await page.evaluate(() => Object.keys(localStorage));
+      if (quiz.rememberLastResult === true) {
+        expect(stored).toHaveLength(1);
+        expect(stored[0]).toMatch(/^lernapps:.+:last-result$/);
+      } else {
+        expect(stored).toEqual([]);
+      }
+    });
+
+    if (quiz.questions.length > 1) {
+      test("the learner chooses how many questions to answer; the address keeps the choice", async ({ page }) => {
+        await page.goto("./?seed=11");
+        await expect(page.locator(".quiz-start")).toBeVisible();
+        await expect(page.locator(".question:visible")).toHaveCount(0);
+        const count = page.locator("#quiz-count");
+        await expect(count).toHaveValue(String(quiz.questions.length));
+        await expect(count).toHaveAttribute("max", String(quiz.questions.length));
+        await count.fill("1");
+        await page.locator(".quiz-start button").click();
+        await expect(page.locator(".quiz-start")).toBeHidden();
+        expect(new URL(page.url()).searchParams.get("n")).toBe("1");
+        await expect(page.locator(".question")).toHaveCount(1);
+        await expect(page.locator(".quiz-solution")).toHaveCount(1);
+        const id = await page.locator(".question:visible").getAttribute("data-id");
+        const item = quiz.questions.find((candidate) => candidate.id === id);
+        if (item === undefined) throw new Error("no visible question");
+        await answerQuestion(page, item, rightAnswer(item));
+        await question(page, item).locator(".question-next").click();
+        await expect(page.locator(".quiz-score")).toHaveText(de.score.replace("{score}", "1").replace("{total}", "1"));
+        // the same address asks the same question, without asking again
+        await page.goto(page.url());
+        await expect(page.locator(".quiz-start")).toBeHidden();
+        await expect(page.locator(".question")).toHaveCount(1);
+        await expect(page.locator(".question")).toHaveAttribute("data-id", item.id);
+      });
+    }
+
+    test.describe("without JavaScript", () => {
+      test.use({ javaScriptEnabled: false });
+
+      test("every question and its solution can be read", async ({ page }) => {
+        await page.goto("./");
+        for (const item of quiz.questions) {
+          await expect(question(page, item).locator("legend")).toHaveText(item.text);
+          await expectMaterial(page, item, { loaded: false });
+          await expectBackground(page.locator(`#loesung-${item.id}`), item);
+        }
+      });
+    });
+
+    for (const lang of languages.slice(1)) {
+      const local = quizIn(all, lang);
+      const words = messagesOf(lang);
+      const address = `./${lang}/`;
+
+      test.describe(`in ${lang}`, () => {
+        test.describe("without JavaScript", () => {
+          test.use({ javaScriptEnabled: false });
+
+          test(`the page is in ${lang}, every question and its solution can be read, the switch leads to every language`, async ({
+            page,
+          }) => {
+            await page.goto(address);
+            await expect(page.locator("html")).toHaveAttribute("lang", lang);
+            await expect(page.locator("h1")).toHaveText(local.title);
+            await expect(page.locator("#loesungen h2")).toHaveText(words.solutions);
+            for (const item of local.questions) {
+              await expect(question(page, item).locator("legend")).toHaveText(item.text);
+              await expectMaterial(page, item, { loaded: false });
+              await expectBackground(page.locator(`#loesung-${item.id}`), item);
+            }
+            for (const other of languages) {
+              await expect(page.locator(`link[rel="alternate"][hreflang="${other}"]`)).toHaveCount(1);
+            }
+            for (const other of languages.filter((candidate) => candidate !== lang)) {
+              await page.goto(address);
+              await page.locator(`.page-languages a[hreflang="${other}"]`).click();
+              await expect(page.locator("html")).toHaveAttribute("lang", other);
+              await expect(page.locator("h1")).toHaveText(quizIn(all, other).title);
+              await expect(page.locator('.page-languages a[aria-current="page"]')).toHaveAttribute("hreflang", other);
+            }
+          });
+        });
+
+        test(`what a question shows, in ${lang}`, async ({ page }) => {
+          const item = local.questions.find((candidate) => candidate.material !== undefined);
+          test.skip(item === undefined, "no question shows content");
+          if (item === undefined) return;
+          await page.goto(`${address}#${questionId(item)}`);
+          await expectMaterial(page, item);
+        });
+
+        test(`one question, answered in ${lang}`, async ({ page }) => {
+          const item = local.questions[0];
+          if (item === undefined) throw new Error("the quiz has no questions");
+          await page.goto(`${address}#${questionId(item)}`);
+          await expect(question(page, item)).toBeVisible();
+          await answerQuestion(page, item, rightAnswer(item), lang);
+          await expect(question(page, item).locator(".question-feedback")).toContainText(words.right);
+          await expectBackground(question(page, item).locator(".question-reveal"), item);
+        });
+      });
+    }
+  });
+}