@lernapps/app-templates 0.0.1 → 0.1.1

package/explainer/docs/arc42/11-explainer-risks.arc42.md

@@ -0,0 +1,17 @@
+# Risks and Technical Debt
+
+The explainer's risks, besides the generic ones.
+
+## YouTube's Player After the Click
+
+Once the player of youtube-nocookie.com loads, YouTube gets the learner's IP address and may keep data in its own
+frame; the privacy-enhanced host only defers that until the click. The app cannot limit what the player does.
+
+```arc42
+:::risk
+id: risk-explainer-video-after-click
+severity: low
+title: After the click, YouTube's player sends data to Google
+mitigation: Nothing loads before the click; the note says what the click sends; the standing choice is the learner's and can be withdrawn; the catalog entry declares thirdParty on-click.
+:::
+```

package/explainer/docs/arc42/12-explainer-glossary.arc42.md

@@ -0,0 +1,185 @@
+# Glossary
+
+The explainer's terms, besides the generic ones.
+
+## Block
+
+A page is a list of blocks from a closed set, each with its type; sections give the structure.
+
+```arc42
+:::glossary-term
+id: term-block
+title: Block
+definition: One element of an explainer page in its content YAML (a section, a text, a formula, a figure, an exercise, a vue-component, ...).
+:::
+```
+
+## Island
+
+Only a page with a component loads Vue.
+
+```arc42
+:::glossary-term
+id: term-island
+title: Island
+definition: The place of a Vue component on a static explainer page, rendered at build and hydrated in the browser.
+:::
+```
+
+## Task Number
+
+"Aufgabe Nr. n" on the page, `?<id>=<n>` in the address.
+
+```arc42
+:::glossary-term
+id: term-task-number
+title: Task number
+definition: The number of one of the distinct tasks of a seeded exercise, shared by the learner, the tutor and the address.
+:::
+```
+
+## Generated Exercise
+
+Written as `generated` in the content: given values, preconditions, a task template, an answer and typical mistakes.
+
+```arc42
+:::glossary-term
+id: term-generated-exercise
+title: Generated exercise
+definition: An exercise of the explainer drawn from a seed, property-tested at build and live in the browser.
+:::
+```
+
+## Open Task
+
+Written as `open-task` in the content. German: offene Aufgabe.
+
+```arc42
+:::glossary-term
+id: term-open-task
+title: Open task
+definition: An exercise the learner answers in their own words, typed or on paper with a photo, then compares with the points of a good answer.
+:::
+```
+
+## Point
+
+A point of a good answer to an open task, named P1, P2 … in the result and on the tutor page.
+
+```arc42
+:::glossary-term
+id: term-point
+title: Point
+definition: One checkable sentence a good answer to an open task has, about its content with the section it comes from, or about its form.
+:::
+```
+
+## Scope
+
+`scope` in the content, written at `scope/` beside each page, chapter and the app for the tutor.
+
+```arc42
+:::glossary-term
+id: term-scope
+title: Scope
+definition: The whole learning path of an explainer in the creator's own words, page by page, with what belongs to it and what does not; for the tutor, never shown to the learner.
+:::
+```
+
+## Tutor Page
+
+`<chapter>/<page>/tutor/`, the address a tutor's prompt names for a page.
+
+```arc42
+:::glossary-term
+id: term-tutor-page
+title: Tutor page
+definition: The one source of what the learner's own AI assistant gets about one content page: who it helps and how it guides, where the child is, then the page's content and its exercises with every task number, a generated one with its table of tasks; its query says where the learner is.
+:::
+```
+
+## Table of Tasks
+
+The inputs and outputs of each task number of a `generated` exercise on the tutor page, one line each:
+`27 | 15 | 1260 | 189 | 18900` under `Nr. | p | G | Lösung | F1`.
+
+```arc42
+:::glossary-term
+id: term-table-of-tasks
+title: Table of tasks
+definition: For each task number of a generated exercise, or of an exercise component that declares it, under its template on the tutor page: the values of its placeholders, the solution and what each typical mistake gives, worked out, so that the tutor fills in and calculates nothing.
+:::
+```
+
+## Way to the Tutor
+
+How the learner reaches the tutor: A, "Mit <name> lernen", for a page; B, "Hilfe", for one task.
+
+```arc42
+:::glossary-term
+id: term-tutor-way
+title: Way to the tutor
+definition: Once an assistant is switched on, "Mit <name> lernen" (A) opens it with one sentence that names the page's tutor page with where the learner is; "Hilfe", "Warum?" after a wrong answer (B), gives the lines of one task, as a new chat (B1) or, on a page a tutor opened, copied for the running chat (B2).
+:::
+```
+
+## Assistant Switched On
+
+The learner's choice of a KI assistant, on the start page or beside the title of a page.
+
+```arc42
+:::glossary-term
+id: term-tutor-assistant
+title: Assistant switched on
+definition: One of the app's assistants, or copying the text, chosen once by the learner and kept on the device per app; while one is on, each content page has the bar of way A and every exercise the help button of way B.
+:::
+```
+
+## Need
+
+What helps a learner when the tutor talks to them, named by what helps, never by a diagnosis.
+
+```arc42
+:::glossary-term
+id: term-tutor-need
+title: Need
+definition: One of the ways the tutor can talk that a learner chooses, none, one or several, for every explainer or for one app (kurze-schritte, wenig-lesen, mehr-tiefe, andere-muttersprache, klar-und-woertlich, rechnen-anschaulich); the tutor page's query names them in bedarf=, and the tutor page holds a short section for each.
+:::
+```
+
+## Lines of "Hilfe"
+
+What way B gives the tutor about one task.
+
+```arc42
+:::glossary-term
+id: term-stuck-lines
+title: Lines of "Hilfe"
+definition: In the learner's voice: the page's tutor page with the page's task numbers, uebung and abschnitt, and the task; the last wrong input with its tries, the app's message for it word for word, the hint or solution opened; no rule for the tutor.
+:::
+```
+
+## Result Line
+
+What "Zurück" at one task copies for the learner to paste into the chat; "Zurück zum Tutor" copies the tutor page and a
+line like it for each task of the session.
+
+```arc42
+:::glossary-term
+id: term-result-line
+title: Result line
+definition: The exercise, its task number, how far the learner got and the last input, with the absolute address of the page's tutor page with where the learner is.
+:::
+```
+
+## Self-Assessment
+
+German: Selbsteinschätzung. Optional, for the app or a chapter.
+
+```arc42
+:::glossary-term
+id: term-self-assessment
+title: Self-assessment
+definition: Exercises of an explainer's content pages, a few per page of its own, which the learner may answer before learning and which are checked only all together; the result says per content page whether it is probably known, to look at again or to read.
+:::
+```

package/explainer/e2e/explainer.e2e.ts

@@ -0,0 +1,3 @@
+import { explainerTests } from "@lernapps/app-templates/explainer/e2e";
+
+explainerTests();

package/explainer/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script type="module" src="/src/main.ts"></script>
+  </head>
+  <body>
+    <!-- explainer -->
+  </body>
+</html>

package/explainer/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "explainer",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vp dev",
+    "build": "vp build --outDir _site",
+    "check": "lernapps check"
+  },
+  "devDependencies": {
+    "@lernapps/app-templates": "file:..",
+    "@lernapps/tooling": "^0.1.2",
+    "vite-plus": "1.4.0"
+  },
+  "overrides": {
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.4.0"
+  }
+}

package/explainer/playwright.config.ts

@@ -0,0 +1 @@
+export { default } from "@lernapps/tooling/playwright";

package/explainer/src/app.yaml

@@ -0,0 +1,20 @@
+# yaml-language-server: $schema=../node_modules/@lernapps/app-templates/runtime/explainer/explainer.v1.schema.json
+title: Prozentrechnung
+intro: |
+  Prozentwert, Prozentsatz und Grundwert: Was sie bedeuten, wie du sie ausrechnest, und je ein Beispiel dazu.
+  Für die Klassen 7 und 8.
+languages: [de]
+chapters: [prozent]
+sources:
+  - title: Prozentrechnung mittels Formeln (Serlo)
+    url: https://de.serlo.org/mathe/2193/prozentrechnung-mittels-formeln
+scope:
+  text: |
+    Die App führt in die Prozentrechnung ein. Sie geht von drei Größen aus: dem Grundwert $G$ (das Ganze, 100 %), dem
+    Prozentsatz $p\,\%$ (welcher Anteil gemeint ist) und dem Prozentwert $W$ (der Teil, in der Einheit des Ganzen). Jede
+    Seite nimmt eine der drei Größen als die gesuchte und zeigt, wie man sie aus den beiden anderen ausrechnet. Der Weg
+    über 1 % hilft auf allen drei Seiten: Das Ganze geteilt durch 100 ist 1 %.
+  out:
+    - "Zinsen und Zinseszins"
+    - "Prozentpunkte und die Veränderung eines Prozentsatzes"
+    - "vermehrter und verminderter Grundwert (Preis mit Aufschlag oder nach Rabatt in einem Schritt)"

package/explainer/src/components/ProzentFeld.test.ts

@@ -0,0 +1,30 @@
+import { expect, test } from "vite-plus/test";
+import { check, describe, generate, mistakes, reason, solution, wrong } from "./ProzentFeld.ts";
+
+const props = {
+  task: "Das Feld hat {G} Kästchen. Färbe {p} % davon.",
+  mistakes: ["{p} Kästchen sind {p} % von 100.", "Das ist der Rest."],
+};
+
+test("p % of the field is right; p squares and the rest are wrong", () => {
+  for (let seed = 1; seed <= 50; seed++) {
+    const task = generate(seed, props);
+    expect([20, 25, 40, 50]).toContain(task.G);
+    expect(Number.isInteger((task.G * task.p) / 100)).toBe(true);
+    expect(check(task, solution(task))).toBe(true);
+    expect(check(task, wrong(task))).toBe(false);
+    for (const answer of mistakes(task)) if (answer !== undefined) expect(check(task, answer)).toBe(false);
+    expect(new Set(mistakes(task)).size).toBe(2);
+  }
+});
+
+test("describe fills in the task; each typical mistake gets its message", () => {
+  const task = { G: 20, p: 15 };
+  expect(describe(task, props, "de")).toEqual({
+    task: "Das Feld hat 20 Kästchen. Färbe 15 % davon.",
+    solution: "3 Kästchen: 20 · 15 : 100 = 3",
+  });
+  expect(reason(task, 15, props)).toBe("15 Kästchen sind 15 % von 100.");
+  expect(reason(task, 17, props)).toBe("Das ist der Rest.");
+  expect(reason(task, 4, props)).toBeUndefined();
+});

package/explainer/src/components/ProzentFeld.ts

@@ -0,0 +1,121 @@
+// The logic of ProzentFeld.vue, a field of G squares, together 100 %, of which the learner colours p %: pure
+// functions, which the build tests over fixed seeds (the exercise contract). A task is G and p; an answer is the
+// number of squares coloured, whichever they are. The explainer checks an answer with check and gives the message of
+// reason. describe states a task and its solution, about what the exercise is; template, params, mistakes and show give
+// a tutor the task once and each number's inputs and outputs.
+
+/** The props the logic needs: the task with {G} and {p}, and the app's message for each typical mistake. */
+export interface Props {
+  task: string;
+  mistakes?: readonly string[];
+}
+
+export interface Task {
+  /** The number of squares, the whole: 100 %. */
+  G: number;
+  /** The percentage to colour. */
+  p: number;
+}
+
+/** The number of squares coloured. */
+export type Answer = number;
+
+/** The sizes of the field: never 100, so that p squares is a mistake. */
+const SIZES = [20, 25, 40, 50];
+
+/** A small seeded random generator (mulberry32). */
+function random(seed: number): () => number {
+  let state = seed >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = state;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/** The squares p % of the field are. */
+const part = (task: Task) => (task.G * task.p) / 100;
+
+/**
+ * The percentages of a field of `G` squares: whole squares, neither 50 % (the rest would be as many) nor a p whose
+ * rest is p squares (the two mistakes would give the same answer).
+ */
+const percentages = (G: number) =>
+  Array.from({ length: 99 }, (_, i) => i + 1).filter(
+    (p) => Number.isInteger((G * p) / 100) && p !== 50 && G - (G * p) / 100 !== p,
+  );
+
+/** The task of `seed`: a size and a percentage of it. */
+export function generate(seed: number, _props?: Props): Task {
+  const next = random(seed);
+  const G = SIZES[Math.floor(next() * SIZES.length)] ?? 20;
+  const choices = percentages(G);
+  return { G, p: choices[Math.floor(next() * choices.length)] ?? 10 };
+}
+
+/** Whether `answer` squares are p % of the field. */
+export function check(task: Task, answer: Answer): boolean {
+  return answer === part(task);
+}
+
+/** The right answer. */
+export function solution(task: Task): Answer {
+  return part(task);
+}
+
+/** A wrong answer: the rest coloured. */
+export function wrong(task: Task): Answer {
+  return task.G - part(task);
+}
+
+/** The answer of each typical mistake of about.mistakes: p squares (none when p is more than the field), the rest. */
+export function mistakes(task: Task): (Answer | undefined)[] {
+  return [task.p < task.G ? task.p : undefined, wrong(task)];
+}
+
+/** A text of the props with {G}, {p} and {n} filled in. */
+export const fill = (text: string, task: Task, n = 0) =>
+  text.replace(/\{G\}/g, String(task.G)).replace(/\{p\}/g, String(task.p)).replace(/\{n\}/g, String(n));
+
+/** The app's message for a wrong answer, from the props: that of its typical mistake, or none. */
+export function reason(task: Task, answer: Answer, props: Props, _lang?: string): string | undefined {
+  const index = mistakes(task).findIndex((mistaken) => mistaken === answer);
+  const message = index < 0 ? undefined : props.mistakes?.[index];
+  return message === undefined ? undefined : fill(message, task, answer);
+}
+
+/** The task as a learner sees it, and its solution. */
+export function describe(task: Task, props: Props, _lang: string): { task: string; solution: string } {
+  return {
+    task: fill(props.task, task),
+    solution: `${show(part(task))}: ${task.G} · ${task.p} : 100 = ${part(task)}`,
+  };
+}
+
+/** The task as a learner reads it, with {G} and {p}: the prop task. */
+export function template(props: Props, _lang: string): string {
+  return props.task;
+}
+
+/** What sets a task: the size of the field and the percentage. */
+export function params(task: Task, _props: Props, _lang: string): Record<string, number> {
+  return { G: task.G, p: task.p };
+}
+
+/** An answer as text. */
+export function show(answer: Answer, _task?: Task, _props?: Props, _lang?: string): string {
+  return `${answer} Kästchen`;
+}
+
+/** What the exercise is, for a tutor. */
+export const about = {
+  task: "Ein Feld aus G Kästchen ist das Ganze, also 100 %. Das Kind färbt durch Antippen p % davon und drückt „Prüfen“ unter dem Feld. Wie das Hunderterfeld, nur hat das Feld nicht 100 Kästchen.",
+  answer: "Die Zahl der gefärbten Kästchen; welche es sind, ist egal.",
+  correct: "Richtig, wenn genau G · p : 100 Kästchen gefärbt sind.",
+  mistakes: [
+    "p Kästchen gefärbt, als hätte das Feld 100 Kästchen.",
+    "Den Rest gefärbt: die Kästchen, die nicht zu den p % gehören.",
+  ],
+};

package/explainer/src/components/ProzentFeld.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+// A field of G squares, together 100 %, of which the learner colours p % by tapping, for the task of the number seed.
+// Its logic is in ProzentFeld.ts. It is the input of the task: it emits the number of squares coloured with answer,
+// and the explainer draws "Prüfen", checks the answer, gives the feedback with the message of a typical mistake, the
+// task number and "Neue Aufgabe". Once the answer is checked, the field shows it as it is until the learner changes it.
+import { computed, ref } from "vue";
+import { fill, generate } from "./ProzentFeld.ts";
+
+const props = defineProps<{
+  /** The task, with {G} for the number of squares and {p} for the percentage. */
+  task: string;
+  /** The count below the field, with {n} for the squares coloured and {G}. */
+  counter: string;
+  /** The name of a square for screen readers, with {n} for its number. */
+  cell: string;
+  /** The app's message for each typical mistake, in the order of about.mistakes, with {G}, {p} and {n}. */
+  mistakes: string[];
+  /** The task number, which the explainer gives. */
+  seed: number;
+  /** Whether the explainer checked the answer the field gives now. */
+  checked: boolean;
+}>();
+const emit = defineEmits<{ answer: [number] }>();
+
+// the task of the number the explainer gives; "Neue Aufgabe" mounts the component afresh with another
+const current = computed(() => generate(props.seed, props));
+const coloured = ref<boolean[]>(Array.from({ length: current.value.G }, () => false));
+const count = computed(() => coloured.value.filter(Boolean).length);
+// ten squares to a row, five for a field of 25
+const columns = computed(() => (current.value.G === 25 ? 5 : 10));
+
+function toggle(index: number): void {
+  coloured.value[index] = !coloured.value[index];
+  emit("answer", count.value);
+}
+</script>
+
+<template>
+  <div class="prozent-feld">
+    <p>{{ fill(task, current) }}</p>
+    <div
+      class="prozent-feld-grid"
+      :class="{ 'prozent-feld-checked': checked }"
+      :style="{ gridTemplateColumns: `repeat(${columns}, 1fr)` }"
+    >
+      <button
+        v-for="(on, index) in coloured"
+        :key="index"
+        type="button"
+        :aria-pressed="on"
+        :aria-label="fill(cell, current, index + 1)"
+        @click="toggle(index)"
+      ></button>
+    </div>
+    <p aria-live="polite">{{ fill(counter, current, count) }}</p>
+  </div>
+</template>
+
+<style scoped>
+.prozent-feld-grid {
+  display: grid;
+  gap: 2px;
+  max-width: 20rem;
+}
+
+.prozent-feld-grid button {
+  aspect-ratio: 1;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  padding: 0;
+  border: 1px solid #1a1a1a;
+  border-radius: 0;
+  background: #fff;
+}
+
+.prozent-feld-grid button[aria-pressed="true"] {
+  background: #2f5fb3;
+}
+
+/* the answer checked: its squares a little lighter until the learner changes it */
+.prozent-feld-checked button[aria-pressed="true"] {
+  background: #5b7fc4;
+}
+</style>

package/explainer/src/images/hunderterfeld-klammern.svg

@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="300" viewBox="0 0 240 300">
+  <title>Hunderterfeld mit zwei Klammern</title>
+  <rect x="20" y="46" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="40" y="46" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="60" y="46" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="80" y="46" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="100" y="46" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="120" y="46" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="140" y="46" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="160" y="46" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="180" y="46" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="200" y="46" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="20" y="66" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="40" y="66" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="60" y="66" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="80" y="66" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="100" y="66" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="120" y="66" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="140" y="66" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="160" y="66" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="180" y="66" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="200" y="66" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="20" y="86" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="40" y="86" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="60" y="86" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="80" y="86" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="100" y="86" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="120" y="86" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="140" y="86" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="160" y="86" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="180" y="86" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="200" y="86" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="20" y="106" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="40" y="106" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="60" y="106" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="80" y="106" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="100" y="106" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="120" y="106" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="140" y="106" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="160" y="106" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="180" y="106" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="200" y="106" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="20" y="126" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="40" y="126" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="60" y="126" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="80" y="126" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="100" y="126" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="120" y="126" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="140" y="126" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="160" y="126" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="180" y="126" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="200" y="126" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="20" y="146" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="40" y="146" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="60" y="146" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="80" y="146" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="100" y="146" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="120" y="146" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="140" y="146" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="160" y="146" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="180" y="146" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="200" y="146" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="20" y="166" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="40" y="166" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="60" y="166" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="80" y="166" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="100" y="166" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="120" y="166" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="140" y="166" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="160" y="166" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="180" y="166" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="200" y="166" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="20" y="186" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="40" y="186" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="60" y="186" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="80" y="186" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="100" y="186" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="120" y="186" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="140" y="186" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="160" y="186" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="180" y="186" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="200" y="186" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="20" y="206" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="40" y="206" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="60" y="206" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="80" y="206" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="100" y="206" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="120" y="206" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="140" y="206" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="160" y="206" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="180" y="206" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="200" y="206" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="20" y="226" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="40" y="226" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="60" y="226" width="20" height="20" fill="#4a90d9" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="80" y="226" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="100" y="226" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="120" y="226" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="140" y="226" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="160" y="226" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="180" y="226" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <rect x="200" y="226" width="20" height="20" fill="#ffffff" stroke="#6b6b6b" stroke-width="1"/>
+  <path d="M20 40 Q20 35 25 35 H45 Q50 35 50 28 Q50 35 55 35 H75 Q80 35 80 40" fill="none" stroke="#1a1a1a" stroke-width="2"/>
+  <path d="M20 252 Q20 257 25 257 H115 Q120 257 120 264 Q120 257 125 257 H215 Q220 257 220 252" fill="none" stroke="#1a1a1a" stroke-width="2"/>
+</svg>

package/explainer/src/main.ts

@@ -0,0 +1,4 @@
+import "@lernapps/app-templates/explainer/style.css";
+import { startExplainer } from "@lernapps/app-templates/explainer";
+
+startExplainer();

package/explainer/src/prozent/chapter.yaml

@@ -0,0 +1,18 @@
+# yaml-language-server: $schema=../../node_modules/@lernapps/app-templates/runtime/explainer/explainer.v1.schema.json
+title: Prozent
+summary: Mit Prozenten vergleichst du Anteile, egal wie groß das Ganze ist.
+pages: [prozentwert, prozentsatz, grundwert]
+# The chapter's self-assessment, offered on the start page (an app with one chapter): three or four tasks per page,
+# prozentwert-ueben and the exercise component prozentfeld each drawing a task of their own, the open task
+# tauschen-erklaeren answered in the learner's own words.
+selfAssessment:
+  pages:
+    - exercises:
+        - /prozent/prozentwert/#prozentwert-ueben
+        - /prozent/prozentwert/#prozentfeld
+        - /prozent/prozentwert/#tauschen-erklaeren
+        - /prozent/prozentsatz/#welche-rechnung
+    - exercises:
+        - /prozent/prozentsatz/#prozentsatz-ueben
+        - /prozent/grundwert/#klammern
+        - /prozent/grundwert/#grundwert-ueben