Bausteinsicht: Fachliches je App-Ordner, Generisches einmal im Kern, Layout und Build

Die Bausteine folgen einer Linie: Was je App anders ist, steht in src/<app>/. Was alle Apps teilen, steht einmal im Kern (src/kern/), im Layout (src/_includes/, src/*.njk) und im Build (lib/). Die Abhängigkeit zeigt vom Fachlichen zum Kern, nie umgekehrt: Der Kern importiert keine App-Konfiguration; die Seite reicht APP, KOMPETENZEN und Generatoren hinein (ADR-013). Der Build liest die App-Konfigurationen und erzeugt daraus alles, was eine App sonst von Hand pflegen müsste.

Ebene 1: Whitebox Lern-Apps

bausteine ebene 1

Die externen Nachbarn sind dieselben sieben Systeme und zwei Personen wie im fachlichen Kontext.

Der Skill lern-app liegt im Monorepo unter werkzeuge/skill/lern-app/ (PR #7). Er ist Werkzeug der Autor:in, kein Baustein der Site: Er wird weder gebaut noch ausgeliefert, sondern nach ~/.claude/skills/ verlinkt. Eine eigene Vorlage gibt es nicht mehr; eine neue App entsteht als Ordner src/<app>/.

Baustein Verantwortung Schnittstelle Quellort

Build

Lädt jede App aus ihrer Konfiguration und ergänzt Adressen, Fachfarbe und Kompetenznummern; zeichnet statische Bilder; bindet die Karte ein; prüft Regeln und bricht bei Verstößen ab; hängt ?v=<Hash> an jede lokale Referenz. Siehe Ebene 2.

npm run build → _site/; Eleventy-Daten apps, site, fachfarben; Shortcode bild; Funktionen ladeApps, leiteAdressenAb, fachfarbe, zeichneBild, versionsHash, versioniere, pruefe*

eleventy.config.js, lib/*.js, src/_data/

Layout

Erzeugt Kopf, Menü mit Nummern-Plaketten, Footer mit Site-Version, Fachfarbe, das Gerüst jeder Kompetenzseite (Warum, Regel, Beispiel, Bild, Video, optional serlo-Link, Übung) sowie Start-, Test- und Manifest-Seite jeder App per Pagination; dazu Übersicht und llms.txt der Wurzel.

Front Matter der Kompetenzseiten; Anker #warum, #regel, #beispiel, #visualisierung, #video, #serlo (optional), #uebung; data-*-Attribute für den Kern

src/_includes/basis.njk, kompetenz.njk; src/start.njk, src/test.njk, src/manifest.njk, src/index.njk, src/llms.njk

Kern

Alles Generische im Browser: Aufgabennummer, Zahlen und Terme lesen und prüfen, Eingabefelder, Übungsrahmen, Test, Videos, Speicher, Mini-DOM für SVG. Einmal unter /kern/ ausgeliefert. Kennt keine App. Siehe Ebene 2.

starteSeite({ app, modul, visualisiere }), starteStartseite({ app }), starteTestseite({ app, kompetenzen, generatoren }), erzeugeSpeicher(praefix), initVideos(praefix), svgEl

src/kern/js/, src/kern/css/stil.css, src/kern/vendor/talkitover.js

Apps

Das Fachliche je Thema: Konfiguration, eine Markdown-Seite je Kompetenz, Generator mit Prüfer, Zeichenfunktion, Tests, Texte für den Tutor, Icons. Heute binom, prozent, zufall.

APP, KOMPETENZEN (reine Daten); erzeugeAufgabe(zufall, vorgaben), pruefeAntwort(aufgabe, antworten), optional URL_ZAHLEN, URL_TEXTE, testVorgaben; zeichne…(svg, aufgabe, ergebnis); llms.txt, tutor.md

src/<app>/js/app.config.js, src/<app>/<id>.md, src/<app>/js/aufgaben/, src/<app>/js/vis/, src/<app>/llms.njk, src/<app>/tutor.njk, src/<app>/test/

Mathe-Karte

Mathe-Kompetenzen der Sekundarstufe I nach KMK-Leitideen und Lehrplänen (16 Länder, Gymnasium) als statische Seiten, data.json und interaktive Karte; App-Einträge kommen aus den App-Konfigurationen. Kein App-Ordner (keine app.config.js).

URL-Parameter land, jahrgang, leitidee, luecken, knoten; karte/data.json; karte/llms.txt; Build-Fehler bei unbekanntem Knoten

src/karte/ (Daten in src/karte/daten/), lib/karte/

Architektur-Doku

Diese arc42-Dokumentation mit ADRs; eigenes Theme-Overlay ohne CDN-Ressourcen.

scripts/dtc-v4.sh generateSite → build/microsite/output/, ausgeliefert unter /docs/

src/docs/, src/site/, docToolchainConfig.groovy, dtcw, scripts/dtc-v4.sh

Tests und CI

Unit-Tests für Kern, Build und Karte; Generator-Vertrag für jede Kompetenz jeder App; Test und Build bei jedem Push und PR; Deployment von Site und Doku.

npm test (297 Tests), npm run build; Workflows pruefen.yml, pages.yml

test/kern/, test/build/, test/apps/, src/<app>/test/, src/karte/test/, .github/workflows/

Browser-Speicher

Merkt Selbsteinschätzung, letzten Test und Video-Merker, nur im Browser des Kindes.

Schlüssel <APP.id>.selbsteinschaetzung, <APP.id>.test, <APP.id>.video-direkt, talkitover.provider

localStorage; Zugriff nur über src/kern/js/storage.js, src/kern/js/video.js, src/kern/vendor/talkitover.js

Ebene 2: Whitebox Build

bausteine ebene 2 build
Komponente Verantwortung Quelle

Eleventy-Konfiguration

Verdrahtet alles: src/kern → /kern/ (Passthrough), je App js/, Icons und CSS; ignoriert Tests, Karten-Daten, src/docs und src/site; ruft nach dem Schreiben Prüfungen und Versionierung auf.

eleventy.config.js

Adressen

Die einzige Basis-URL und alles daraus Abgeleitete (ADR-015).

src/_data/site.js:9, lib/adressen.js:7-24

App-Lader

Jeder Ordner mit js/app.config.js ist eine App; prüft id, pfad, titel; nummeriert Kompetenzen.

lib/apps.js:12-39, lib/app-daten.js

Fachfarben

Tabelle der fünf Fächer; unbekanntes Fach bricht den Build (ADR-011).

lib/fachfarben.js:6-12, :29-32

Bild

Führt Generator und Zeichenfunktion in Node aus und schreibt das SVG in die Seite (ADR-016).

lib/bild.js:14-26

Karten-Lader

Lädt Leitideen, Kompetenzen, Lehrpläne, Zuordnungen; baut Einträge aus Apps; prüft Knoten (ADR-018).

lib/karte/laden.js:53-56, lib/karte/eintraege.js:15-63

Prüfungen

Regeln als reine Funktionen; jeder Fund bricht den Build (ADR-008, ADR-017).

lib/pruefungen.js

Versionierung

Ein Hash über alle ausgelieferten JS/CSS/JSON; ?v= an Importen, <script src>, <link href> und Inline-Modulen (ADR-014).

lib/versionierung.js:9-28

Ebene 2: Whitebox Kern

bausteine ebene 2 kern
Komponente Verantwortung Schnittstelle (Auswahl) Quelle

Seitenstart

Bereitet Videos vor, liest seed/nr und Vorgaben aus der URL, startet den Trainer. Auf der Startseite: Selbsteinschätzung laden und speichern, letzten Test zeigen.

starteSeite({ app, modul, visualisiere }), starteStartseite({ app })

src/kern/js/seite.js:15, src/kern/js/startseite.js:20

Trainer

Übungsoberfläche: Aufgabe, Prüfen, Tipp, Lösung zeigen/verbergen, Neue Aufgabe, Zähler. Hinweise neutral, nicht als Versuch gezählt.

starteTrainer(…); loesungZustand, schalteLoesung

src/kern/js/ui.js, src/kern/js/loesung-schalter.js

Eingabe

Feldtypen zahl, bruch/term, variablenterm, auswahl, radio, Tabellen; Live-Vorschau nach 150 ms.

zeigeEingaben, lieseAntworten, markiereFelder

src/kern/js/aufgabe-eingabe.js:17

Zahlen und Terme

Deutsche Zahlen, exakte Brüche, Term-Auswerter ohne eval, Rundungsregel; Terme mit Variablen (ADR-006, ADR-009).

pruefeZahlAntwort, passtZu, zahlenfeld, vorschau; pruefeTermAntwort, passtZuTerm

src/kern/js/zahlen.js, bruch.js, zahlantwort.js, variablenterm.js, termantwort.js

Prüfergebnis

Einheitliches Ergebnis aller Prüfer; entscheidet, was zählt.

ergebnisFuer, ergebnisAusFeldern, istHinweis, wirdGezaehlt

src/kern/js/pruefung.js:73

Zufall

Deterministischer Zufall aus der Aufgabennummer; zufällige Nummer 1–9999.

erzeugeZufall(seed), leseSeed

src/kern/js/zufall.js:14-16, :47

Aufgabenlink

Zeile „Aufgabe Nr. N · Link · Link kopieren“; Vorgaben validieren; kopieren mit Rückfall.

aufgabenzeile, leseVorgaben, kopiereText

src/kern/js/aufgabenlink.js

Test

Test und Schnelltest aus der Testnummer; Bild im Test über den Aufgaben-Vertrag; Ergebniszeile.

starteTestseite(…), testAufgaben(nr, modus), erzeugeTestaufgabe, bildFuer

src/kern/js/testseite.js:15, testablauf.js:9, testaufgaben.js:10-28

Rückweg

Nur mit von=tutor: Knopf „Zurück zu Claude“; Ergebniszeile bauen, kopieren, Tab schließen, nach 300 ms prüfen; Rückfall auf Hinweis oder markiertes Feld (ADR-021).

vomTutor, uebungsZeile, uebungsStatus, nachVersuch, zurueckZuClaude, zurueckKnopf

src/kern/js/zurueck.js

Video

Zwei-Klick-Karte mit neutralem Play-Symbol; iframe erst nach Klick; Merker je App.

initVideos(praefix), baueEmbedUrl, PLAY_SYMBOL

src/kern/js/video.js:12, :64, :127

Speicher

Einziger Zugang zu Selbsteinschätzung und letztem Test, mit App-Präfix; false statt Ausnahme.

erzeugeSpeicher(praefix) → lade…, speichere…

src/kern/js/storage.js:36

SVG

Erzeugt SVG-Elemente; im Build ein Mini-DOM, im Browser document. Zeichenfunktionen nutzen nur svgEl.

svgEl, leeresSvg, alsSvgText

src/kern/js/svg.js:45-59