HTML-Apps für den Unterricht
Warum Lehrpersonen eigene Mini-Apps bauen sollten
1
Was ist eine HTML-App?
Eine HTML-App ist eine einzelne Datei, die im Browser läuft. Kein App Store, keine Installation, kein Login. Doppelklick — fertig.
Stell dir vor: Ein interaktives Quiz, eine Zeitleiste, ein Vokabeltrainer oder ein Lernspiel. Alles in einer einzigen Datei.
Warum ist das genial für den Unterricht?
- Funktioniert auf jedem Gerät mit Browser (Laptop, Tablet, Handy).
- Keine Internetverbindung nötig (offline nutzbar).
- Kein Datenschutz-Problem — alles läuft lokal.
- Du brauchst null Programmierkenntnisse. Die KI schreibt den Code.
Eine HTML-Datei ist wie ein digitales Arbeitsblatt — aber interaktiv. Die Schüler:innen klicken, tippen, lösen Aufgaben.
2
Was kann man damit machen?
Die Möglichkeiten sind riesig. Hier ein paar Ideen:
Für den Unterricht
- Interaktive Quizze: Multiple Choice, Drag & Drop, Lückentexte
- Lernkarten: Digitale Flashcards zum Durchklicken
- Zeitleisten: Historische Ereignisse visuell darstellen
- Rechner: Bruchrechner, Prozentrechner, Einheitenumrechner
- Simulationen: Ökosysteme, Wachstumskurven, einfache Physik
Für die Organisation
- Checklisten: Für Exkursionen, Elternabende, Projekte
- Timer: Für Gruppenarbeit, Präsentationen, Prüfungen
- Dashboards: Übersicht über Themen, Noten, Fortschritt
Fang einfach an. Dein erstes Projekt muss kein Meisterwerk sein. Ein simples Quiz reicht völlig.
3
Welches Tool soll ich nutzen?
Es gibt mehrere KI-Tools, die HTML-Apps erstellen können. Jedes hat Stärken:
| Tool | Stärke | Teilen |
|---|---|---|
| Claude | Beste Codequalität, Artefakte | Direkt teilbar via Link |
| ChatGPT | Canvas, gute Erklärungen | Host nötig (z.B. Lerndrop.ch) |
| Gemini | Google-Integration | Host nötig (z.B. Lerndrop.ch) |
| Fobizz | Speziell für Schule, DSGVO | Host nötig (z.B. Lerndrop.ch) |
Empfehlung: Starte mit Claude. Die Artefakte kannst du sofort per Link teilen — kein Hosting nötig.
Egal welches Tool: Der Prompt ist entscheidend. In den folgenden Tutorials lernst du, wie du gute Prompts für jedes Tool schreibst.
4
Der perfekte Prompt für eine App
Egal welches KI-Tool du nutzt — der Prompt folgt immer dem gleichen Muster:
Die 5 Zutaten
- Was: Was soll die App tun? (z.B. ein Quiz)
- Für wen: Stufe und Niveau (z.B. 2. Sek, Niveau E)
- Inhalt: Thema und konkrete Fragen/Inhalte
- Design: Wie soll es aussehen? (z.B. modern, bunt, minimalistisch)
- Technik: Standalone HTML, keine externen Abhängigkeiten
Beispiel-Prompt
Erstelle ein interaktives Quiz als standalone HTML-Datei. Thema: Fotosynthese, 2. Sek, Niveau E. 8 Multiple-Choice-Fragen mit Sofortfeedback (grün/rot). Am Ende eine Auswertung mit Punktzahl. Design: modern, freundlich, grosse Schrift. Alles in einer einzigen HTML-Datei, keine externen Abhängigkeiten.
Dieser Prompt funktioniert in jedem KI-Tool. Kopiere ihn und passe ihn an.
Der Satz «Alles in einer einzigen HTML-Datei, keine externen Abhängigkeiten» ist der wichtigste Teil. Ohne ihn erstellt die KI oft Projekte mit mehreren Dateien.