HTML-Spiele für den Unterricht - selbst erstellen mit KI
25. Mai 2026·Jonas Weidlich·11 Min. Lesezeit
Lernspiele machen Unterricht lebendiger - aber Kahoot ist halt überall, und vorgefertigte Spiele passen oft nicht zu deinem Thema. Mit KI baust du dir in 10 Minuten ein eigenes HTML-Spiel, das genau zu deiner Klasse und deinem Lehrplan passt. Dieser Artikel zeigt 6 Spiel-Typen mit fertigen Prompts für Claude, ChatGPT und Gemini.
1. Warum eigene Spiele statt Kahoot
Kahoot, Quizizz und Co. sind super, aber haben Grenzen: Spiel-Typ vorgegeben (Multiple-Choice), keine Anpassung an dein spezifisches Thema, Daten gehen in die USA. Eigene HTML-Spiele lösen das:
Themen-passgenau: Du gibst der KI dein Lehrplan-Thema, sie baut das Spiel drumherum
Spiel-Typ frei wählbar: Memory, Sortier-Puzzle, Wortgitter - nicht nur Quiz
Kein SuS-Login nötig: HTML läuft direkt im Browser, kein Account
DSGVO-unkritisch: Inhalt hat keine SuS-Daten, läuft lokal in deren Browser
Niedrige Schwelle: keine App-Installation, kein Code abrufen, einfach QR scannen
Quiz-Show-Format mit Erfolgs-Atmosphäre. Fragen werden schwerer, Punkte steigen, drei Joker. Für 15-20 Minuten Klasse-Aktivierung perfekt.
Quiz-Show-Prompt
Baue ein "Wer wird Klassenmillionär"-Spiel als Single-File-HTML.
Thema: [THEMA]
15 Fragen mit ansteigender Schwierigkeit (4 Antworten pro Frage)
Punkte-Stufen (Cliff-Points bei 5 und 10):
50, 100, 200, 500, 1.000 (Cliff)
2.000, 4.000, 8.000, 16.000, 32.000 (Cliff)
64.000, 125.000, 250.000, 500.000, 1.000.000
Features:
- 3 Joker: 50:50, Publikum, Telefon
- Animationen wie in der TV-Show
- Bei Fehler: Spiel endet, letzter Cliff-Score angezeigt
- Bei Aussteigen: Punktestand wird gemerkt
- Mobile-responsive, Touch-friendly
Klassiker mit gutem Lerneffekt - Schüler:innen müssen Buchstaben raten, lernen Schreibweise und Bedeutung gleichzeitig. Funktioniert für jede Klassenstufe.
Galgenmännchen-Prompt
Baue ein Galgenmännchen-Spiel als Single-File-HTML.
Thema: [THEMA, z.B. "Französisch-Vokabeln Klasse 7"]
Wortliste (15-20 Wörter):
- [WORT 1] - [Hinweis/Übersetzung 1]
- [WORT 2] - [Hinweis 2]
(etc.)
Features:
- Zufälliges Wort aus der Liste pro Runde
- Hinweis als Klartext sichtbar (z.B. die Übersetzung)
- Tastatur unten (alphabetisch, Touch-friendly für Handy)
- Bei richtigem Buchstaben: erscheint im Wort
- Bei falschem: Galgenmännchen-SVG wird Schritt für Schritt gezeichnet
- Max 6 Fehler dann Game Over
- Nach Erfolg: nächstes Wort
- Punkte + Streak-Counter
- Mobile-responsive
Schüler:innen ziehen Karten in die richtige Reihenfolge. Funktioniert auch auf Touch-Geräten. Sehr effektiv für historische Ereignisse, Pflanzen-Wachstumsstadien, Geschäfts-Abläufe.
Sortier-Puzzle-Prompt
Baue ein Sortier-Puzzle als Single-File-HTML.
Thema: [z.B. "Französische Revolution: Ereignisse in chronologischer
Reihenfolge"]
8 Karten zum Sortieren (mit korrekter Reihenfolge):
1. [Karte mit Datum + Ereignis]
2. ...
Features:
- 8 Karten gemischt angezeigt
- Drag & Drop zwischen Karten
- Touch-friendly (Mobile + Tablet)
- "Prüfen"-Button: zeigt richtig (grün) und falsch (rot) je Karte
- Falsche Karten: Hinweis nach 2 Versuchen
- Bei alle richtig: Konfetti-Animation + nächste Runde mit neuen Karten
- Mobile-responsive
Schüler:innen suchen Wörter in einem Buchstaben-Gitter. Klassisches Lernspiel, das zu jeder Vokabel-Liste passt. Funktioniert auch als Stillarbeit.
Wortgitter-Prompt
Baue ein Wortgitter (Suchsel) als Single-File-HTML.
Wörter (8-12 Stück):
- [WORT 1]
- [WORT 2]
(etc.)
Features:
- 12×12 Buchstaben-Gitter
- Wörter horizontal, vertikal, diagonal versteckt
- Wort-Liste rechts oder unten, gefundene durchgestrichen
- Schüler:innen markieren Wörter durch Klick auf Start- und End-Buchstabe
- Gefundene Wörter: in Farbe markiert
- Fortschritts-Counter
- "Lösung anzeigen"-Button nach 5 Min Spielzeit (optional)
- Mobile-responsive (Touch zum Markieren)
Spiel 6: Wer-bin-ich / Geschichte-Rätsel
Ideal für: Personen, historische Figuren, Promis aus Sachfächern
Schüler:innen bekommen Hinweise und müssen die Person/Sache erraten. Funktioniert für Geschichte, Politik, Naturwissenschaften - alles mit nennbaren Akteuren.
Wer-bin-ich-Prompt
Baue ein "Wer bin ich"-Ratespiel als Single-File-HTML.
Thema: [z.B. "Berühmte Wissenschaftler"]
10 Personen mit jeweils 5 Hinweisen:
- Person 1: [Name]
- Hinweis 1 (schwierigster): [...]
- Hinweis 2: [...]
- Hinweis 3: [...]
- Hinweis 4: [...]
- Hinweis 5 (leichtester): [...]
(etc.)
Features:
- Hinweis 1 wird zuerst gezeigt
- Schüler:innen tippen Antwort ins Textfeld
- Bei falsch: nächster Hinweis wird freigeschaltet
- Bei richtig: Punkte (mehr Punkte je weniger Hinweise nötig)
- Tippfehler-tolerant (Großschreibung egal, 1-Buchstabe-Fehler ok)
- Score-Counter + Statistik am Ende
- Mobile-responsive
3. Workflow vom Prompt zur fertigen Stunde
Prompt anpassen: Eine der 6 Vorlagen kopieren, Klammern mit deinen Inhalten ausfüllen.
An KI senden: Bei Claude oder ChatGPT/Claude-Pro im Browser einfügen, abschicken.
HTML-Code kopieren: Die KI gibt dir den Code in einem Code-Fenster. Kopier alles (Strg+A, Strg+C).
Lokal speichern: Im Notepad/TextEdit einfügen, speichern als z.B. `memory-vokabeln.html`.
Testen: Datei doppelklicken → öffnet im Browser. Funktioniert alles? Falls nein: zurück zur KI, „Aufgabe 3 hat einen Fehler, behebe das."
Hosten: Auf PrepClass hochladen, Kurz-URL + QR-Code für die Klasse.
PrepClass „Online stellen" macht das in 3 Klicks: Datei hochladen, Titel eingeben, Klasse zuordnen. Du bekommst sofort eine Kurz-URL und einen QR-Code zum Projizieren.
Tarif-Hinweis
Free-Tarif: 1 aktive HTML-Stunde gleichzeitig. Wenn du 3 verschiedene Spiele für 3 verschiedene Klassen hochladen willst, brauchst du den Pro-Tarif (bis zu 20 aktiv). Free ist gut zum Ausprobieren - für regelmäßiges Spielen-pro-Woche lohnt Pro.
5. Spiele anpassen + iterieren
Die KI-generierten Spiele sind selten beim ersten Versuch perfekt. Typische Verbesserungs-Iterationen:
„Mach das Spiel schwieriger": KI erhöht die Anzahl, fügt Zeitdruck hinzu, macht Falsch-Antworten plausibler
„Mach das Design kindgerechter / professioneller": KI ändert Farben, Schriftarten, Animationen
„Füge einen Highscore-Speicher hinzu": KI nutzt LocalStorage, sodass beim Reload der Score erhalten bleibt
„Mach es schöner auf dem Handy": KI überarbeitet die Responsive-Layout-Regeln
„Füge eine Erklärung am Anfang ein": KI baut einen Welcome-Bildschirm
Iteration ist normaler Teil des Prozesses. Plan mit 3-5 Iterations-Runden, bevor das Spiel klassenreif ist. Insgesamt ca. 30-45 Minuten Gesamt-Aufwand für ein neues Spiel.
6. Fazit
Eigene HTML-Spiele sind 2026 in unter einer Stunde Realität - vorausgesetzt du nutzt Claude oder einen ähnlich starken Code-Generator. Sechs Spiel-Typen reichen dir, um für 90 % aller Themen eine passende Spiel-Variante zu finden.
Der eigentliche Vorteil gegenüber Standard-Tools wie Kahoot: du bestimmst Inhalt UND Mechanik. Ein Memory zu Bruch-Darstellungen, ein Galgenmännchen mit Französisch-Vokabeln, eine Quiz-Show zu Photosynthese - alles in deiner Hand. Und das Hosting auf PrepClass macht die Verteilung an die Klasse zum 30-Sekunden-Schritt.