Eine Sammlung von Architecture Decision Records (ADRs) für HTML-Onepager, die im schulischen Kontext erstellt und an Schüler:innen verteilt werden.
Das Repository ist eine Vorlage: Du kannst es forken, einzelne ADRs übernehmen oder dich davon inspirieren lassen, wenn du selbst HTML-Materialien für den Unterricht baust.
HTML-Onepager als digitales Handout (per Link verteilt, im Browser geöffnet) haben viele Vorteile: schnell verteilbar, auf jedem Gerät lauffähig, interaktiv möglich. Beim wiederholten Erstellen tauchen aber dieselben Fragen immer wieder auf: Wie speichern wir Schülerergebnisse? Wie sieht das auf dem iPhone aus? Was passiert beim Ausdrucken?
Hier sind die Antworten dokumentiert — als bewusste, begründete Entscheidungen.
Ein Architecture Decision Record ist eine kurze Markdown-Datei pro Entscheidung. Sie hält fest:
- Kontext — Worum geht es, welches Problem liegt vor?
- Entscheidung — Was wurde konkret entschieden?
- Alternativen — Was wurde sonst noch erwogen?
- Konsequenzen — Was bedeutet das für künftige Arbeit?
So bleibt nachvollziehbar, warum etwas so gebaut wird wie es gebaut wird — auch Monate später oder für andere Personen.
Die hier dokumentierten Entscheidungen gehen davon aus, dass die Onepager auf einem Webhoster liegen und per Link verteilt werden. Schüler:innen öffnen sie im Browser auf Smartphone (oft iOS), Tablet oder Laptop. Es gibt kein Backend, keine Build-Pipeline, kein eingeloggtes Nutzerkonto.
Wenn dein Setup anders ist (z. B. lokal verteilte Dateien, Moodle-Einbettung, eigener Server), prüfe die ADRs entsprechend.
- adr/ — Alle Entscheidungen, je eine Markdown-Datei pro Entscheidung
- adr/template.md — Vorlage für neue ADRs
- adr/0001-… ff. — Die einzelnen Entscheidungen, fortlaufend nummeriert
- templates/onepager-boilerplate.html — Sofort einsetzbares Single-File-HTML-Template, das alle ADRs umsetzt
- CHECKLIST.md — Pre-Publish-Checkliste zum Abhaken vor Veröffentlichung jedes Onepagers
| Nr. | Titel | Status |
|---|---|---|
| 0001 | Single-File-HTML-Architektur | Accepted |
| 0002 | State-Persistenz im localStorage | Accepted |
| 0003 | JSON-Export und -Import für Schülerergebnisse | Accepted |
| 0004 | Reset-Funktion mit Bestätigungsdialog | Accepted |
| 0005 | Sticky Top-Menü mit iOS Safe-Area-Beachtung | Accepted |
| 0006 | Responsives Mobile-First-Layout | Accepted |
| 0007 | Druck- und PDF-Optimierung (A4) | Accepted |
| 0008 | Konsistentes Design-System | Superseded by 0022 |
| 0009 | Barrierefreiheit und Lesbarkeit | Accepted |
| 0010 | Lösungs-Hürde (gestufter Reveal: Tipp + Lösung) | Accepted |
| 0011 | Selbst-Korrektur statt nur Lösungsvergleich | Accepted |
| 0012 | Gamification (sanft, nicht-kompetitiv) | Accepted |
| 0013 | Quiz-Hardening (Antworten nicht im Klartext) | Accepted |
| 0015 | Inhalts-Boxen (Merke, Tipp, Achtung …) | Accepted |
| 0017 | Save-Status-Indikator und Toast-Feedback | Accepted |
| 0018 | Aufgaben-Karten — visuelle Struktur | Accepted |
| 0022 | Aktualisiertes Design-System (Editorial) | Accepted |
| Status | Bedeutung |
|---|---|
| Proposed | Vorgeschlagen, noch nicht endgültig |
| Accepted | Aktiv gültig, wird angewendet |
| Deprecated | Nicht mehr gültig, aber noch nicht ersetzt |
| Superseded by ADR-XXXX | Durch neuere Entscheidung ersetzt |
- templates/onepager-boilerplate.html herunterladen oder kopieren
- Im
<script>-Block die KonstanteONEPAGER_SLUGauf einen eindeutigen Wert setzen (z. B.'bruchrechnen-kl6-01') <title>,<h1>und das UE-Label (Fach · Klasse · Einheit) anpassen- Lernziele in der
.lernziel-Box eintragen - Aufgaben-Karten (
<article class="aufgabe">) kopieren und mit Inhalten füllen - Jedes Eingabefeld bekommt ein eindeutiges
data-state="…" - Vor Veröffentlichung CHECKLIST.md durchgehen
Das Boilerplate v2.1 (Stand 2026-05-21) bringt zusätzlich die didaktischen
Patterns aus Phase 2 mit: Lösungs-Hürde mit Tipp+Lösung (ADR-0010),
Selbst-Korrektur via data-expected (ADR-0011),
sanfter Fortschrittsbalken (ADR-0012) und
gehashte Quiz-Antworten (ADR-0013).
Lehrer-Druck mit Lösungen: Hänge ?solutions=1 an die URL — alle Tipps
und Lösungen werden sofort sichtbar.
Als Inspiration — ADRs lesen, einzelne Entscheidungen für eigene Projekte übernehmen, andere verwerfen.
Als Fork — Repository forken, ADRs an den eigenen Kontext anpassen, weitere Entscheidungen ergänzen. Deine Forks dürfen, müssen aber nicht hierher zurückverlinken.
Mitwirken — Verbesserungsvorschläge per Issue oder Pull Request sind willkommen. Bitte begründe Vorschläge so, dass sie zum ADR-Format passen (Kontext, Alternativen, Konsequenzen).
- adr/template.md kopieren
- Nächste freie Nummer vergeben (4-stellig, z. B.
0010-…) - Dateinamen kebab-case (
0010-thema-der-entscheidung.md) - Eintrag in die Übersicht oben ergänzen
Dieses Werk steht unter der Creative Commons Namensnennung 4.0 International Lizenz (CC BY 4.0).
Du darfst die Inhalte teilen, anpassen und auch kommerziell nutzen — solange du die ursprüngliche Quelle nennst. Siehe LICENSE für den vollständigen Lizenztext.