Baue ein Lernspiel für Klasse 3: „Wörter-Zauberer“. Aus großen bunten Buchstaben-Kacheln legen die Kinder ein Wort. Oben zeigt ein Bild-Emoji den Hinweis (z. B. 🐶 für HUND). Es gibt Punkte, einen fröhlichen Ton bei richtiger Lösung und eine sanfte Animation. Nur einfache Wörter mit 3 bis 6 Buchstaben, nie mehr als 8 Kacheln gleichzeitig. Tippt ein Kind dreimal falsch, zeigt das Spiel den nächsten fehlenden Buchstaben als Hilfe an. Große Schrift und große Klickflächen, damit es auch auf dem Tablet in der Klasse funktioniert. WICHTIG für fehlerfreien Code: Wenn ein Element per document.getElementById oder querySelector gesucht wird, MUSS das HTML genau diese id besitzen (keine onClick="fn()"-Attribute, sondern addEventListener; keine Funktion aufrufen, die erst später definiert wird). Alle Variablen vor Gebrauch initialisieren, jede DOM-Referenz null-prüfen und erst nach DOMContentLoaded binden. Das Skript am Ende des body ausführen, nie im head. Fehler dürfen nicht auftreten: kein Zugriff auf undefined (z. B. eine Liste, die leer sein kann) und kein innerHTML/appendChild auf null. Nutzerdaten und Eingaben ausschließlich über textContent oder document.createElement ins DOM schreiben, niemals per innerHTML mit eingesetzten Werten; Eingaben nie in eine Vorlage interpolieren. Klickbare Flächen: Das ganze sichtbare Element löst den Klick aus; kein Kind-Element, das die meiste Fläche überdeckt. Zähler und Anzeigen starten mit dem ehrlichen Anfangswert, nie mit einem Endwert.

Baue eine Seite „Pausen-Würfel“ für die Grundschule. Ein großer Knopf würfelt per Zufall ein Pausenspiel aus (Kettenfangen, Standbild, Zipp-Zapp, Schattenlauf, Feuer-Wasser-Sturm) und zeigt dazu in genau einem Satz die Regel. Dazu läuft ein Countdown von 5 Minuten mit großer Restzeit-Anzeige. Sehr große Schrift und starke Farben, damit man es vom Beamer in der ganzen Klasse lesen kann. Kein Login, nichts wird gespeichert. WICHTIG für fehlerfreien Code: Wenn ein Element per document.getElementById oder querySelector gesucht wird, MUSS das HTML genau diese id besitzen (keine onClick="fn()"-Attribute, sondern addEventListener; keine Funktion aufrufen, die erst später definiert wird). Alle Variablen vor Gebrauch initialisieren, jede DOM-Referenz null-prüfen und erst nach DOMContentLoaded binden. Das Skript am Ende des body ausführen, nie im head. Fehler dürfen nicht auftreten: kein Zugriff auf undefined (z. B. eine Liste, die leer sein kann) und kein innerHTML/appendChild auf null. Nutzerdaten und Eingaben ausschließlich über textContent oder document.createElement ins DOM schreiben, niemals per innerHTML mit eingesetzten Werten; Eingaben nie in eine Vorlage interpolieren. Klickbare Flächen: Das ganze sichtbare Element löst den Klick aus; kein Kind-Element, das die meiste Fläche überdeckt. Zähler und Anzeigen starten mit dem ehrlichen Anfangswert, nie mit einem Endwert.

Baue eine Präsentationsseite „Unsere Klasse“ für Klasse 3–4: bunte Karten mit Lieblingstieren. Ein Klick auf eine Karte öffnet einen kurzen Steckbrief (3 Zeilen: Tier, was es frisst, ein spannender Fakt). Die Kinder können den Text direkt auf der Karte ändern. Keine persönlichen Daten, keine Speicherung auf einem Server, alles bleibt im Browser. Freundliche Farben, große Emojis, gut lesbare Schrift. Der Klick öffnet den Steckbrief überall auf der Karte, auch auf der Kopfmitte — kein Eingabefeld, das die meiste Fläche überdeckt. Der Zähler startet mit dem ehrlichen Anfangswert (z. B. 0 von 6 bearbeitet), nicht mit einem Endwert. WICHTIG für fehlerfreien Code: Wenn ein Element per document.getElementById oder querySelector gesucht wird, MUSS das HTML genau diese id besitzen (keine onClick="fn()"-Attribute, sondern addEventListener; keine Funktion aufrufen, die erst später definiert wird). Alle Variablen vor Gebrauch initialisieren, jede DOM-Referenz null-prüfen und erst nach DOMContentLoaded binden. Das Skript am Ende des body ausführen, nie im head. Fehler dürfen nicht auftreten: kein Zugriff auf undefined (z. B. eine Liste, die leer sein kann) und kein innerHTML/appendChild auf null. Nutzerdaten und Eingaben ausschließlich über textContent oder document.createElement ins DOM schreiben, niemals per innerHTML mit eingesetzten Werten; Eingaben nie in eine Vorlage interpolieren. Klickbare Flächen: Das ganze sichtbare Element löst den Klick aus; kein Kind-Element, das die meiste Fläche überdeckt. Zähler und Anzeigen starten mit dem ehrlichen Anfangswert, nie mit einem Endwert.

Baue einen Busfahrplan-Finder für unseren Ort: Man wählt Haltestelle und eine Uhrzeit, das Tool zeigt die nächsten drei Abfahrten mit Linie, Ziel und Umstieg. Die Fahrplandaten liegen in einer eingebauten, gut kommentierten Liste, die man leicht ändern kann. Ist ein Anschluss knapper als 4 Minuten, erscheint eine deutliche amberfarbene Warnung „knapper Umstieg“. Klare Tabelle, große Schrift, funktioniert offline im Browser. Haltestellen, Ziele und Umstiegshinweise stehen als reiner Text in Tabelle und Auswahlliste — nie per innerHTML mit eingesetztem Wert. WICHTIG für fehlerfreien Code: Wenn ein Element per document.getElementById oder querySelector gesucht wird, MUSS das HTML genau diese id besitzen (keine onClick="fn()"-Attribute, sondern addEventListener; keine Funktion aufrufen, die erst später definiert wird). Alle Variablen vor Gebrauch initialisieren, jede DOM-Referenz null-prüfen und erst nach DOMContentLoaded binden. Das Skript am Ende des body ausführen, nie im head. Fehler dürfen nicht auftreten: kein Zugriff auf undefined (z. B. eine Liste, die leer sein kann) und kein innerHTML/appendChild auf null. Nutzerdaten und Eingaben ausschließlich über textContent oder document.createElement ins DOM schreiben, niemals per innerHTML mit eingesetzten Werten; Eingaben nie in eine Vorlage interpolieren. Klickbare Flächen: Das ganze sichtbare Element löst den Klick aus; kein Kind-Element, das die meiste Fläche überdeckt. Zähler und Anzeigen starten mit dem ehrlichen Anfangswert, nie mit einem Endwert.

Baue einen Umfrage-Auswerter für den Unterricht: Die Klasse gibt bis zu 30 Antworten ein (z. B. Lieblingsfach), das Tool zählt die Häufigkeiten in Echtzeit, zeichnet ein Balkendiagramm mit Achsenbeschriftung und zeigt Prozentwerte. Die häufigste Antwort wird hervorgehoben und in einem Satz erklärt („Mathe liegt vorn, weil …“). Alles rechnet im Browser, nichts wird gesendet. Dazu ein Knopf „Tabelle leeren“ und ein Beispiel-Datensatz zum Ausprobieren. Jeder zusätzliche Regler oder Schalter muss die angezeigten Werte sichtbar verändern — kein toter Zweig. Prozentwerte exakt aus Zählwert und Gesamtzahl berechnen. WICHTIG für fehlerfreien Code: Wenn ein Element per document.getElementById oder querySelector gesucht wird, MUSS das HTML genau diese id besitzen (keine onClick="fn()"-Attribute, sondern addEventListener; keine Funktion aufrufen, die erst später definiert wird). Alle Variablen vor Gebrauch initialisieren, jede DOM-Referenz null-prüfen und erst nach DOMContentLoaded binden. Das Skript am Ende des body ausführen, nie im head. Fehler dürfen nicht auftreten: kein Zugriff auf undefined (z. B. eine Liste, die leer sein kann) und kein innerHTML/appendChild auf null. Nutzerdaten und Eingaben ausschließlich über textContent oder document.createElement ins DOM schreiben, niemals per innerHTML mit eingesetzten Werten; Eingaben nie in eine Vorlage interpolieren. Klickbare Flächen: Das ganze sichtbare Element löst den Klick aus; kein Kind-Element, das die meiste Fläche überdeckt. Zähler und Anzeigen starten mit dem ehrlichen Anfangswert, nie mit einem Endwert.

Baue einen Vokabel-Trainer Englisch–Deutsch: 20 eingebaute Vokabeln, Abfrage in beide Richtungen, Punkte, Streak und am Ende eine Wiederholungsrunde nur mit den falschen Wörtern. Großes Eingabefeld, sofortiges Feedback (richtig grün, falsch rot mit der richtigen Lösung) und ein Fortschrittsbalken. Kein Login, keine Serververbindung. Die Vokabelliste steht gut sichtbar im Code, damit die Lehrkraft sie austauschen kann. WICHTIG für fehlerfreien Code: Wenn ein Element per document.getElementById oder querySelector gesucht wird, MUSS das HTML genau diese id besitzen (keine onClick="fn()"-Attribute, sondern addEventListener; keine Funktion aufrufen, die erst später definiert wird). Alle Variablen vor Gebrauch initialisieren, jede DOM-Referenz null-prüfen und erst nach DOMContentLoaded binden. Das Skript am Ende des body ausführen, nie im head. Fehler dürfen nicht auftreten: kein Zugriff auf undefined (z. B. eine Liste, die leer sein kann) und kein innerHTML/appendChild auf null. Nutzerdaten und Eingaben ausschließlich über textContent oder document.createElement ins DOM schreiben, niemals per innerHTML mit eingesetzten Werten; Eingaben nie in eine Vorlage interpolieren. Klickbare Flächen: Das ganze sichtbare Element löst den Klick aus; kein Kind-Element, das die meiste Fläche überdeckt. Zähler und Anzeigen starten mit dem ehrlichen Anfangswert, nie mit einem Endwert.

Baue einen Simulator für gleichförmige und beschleunigte Bewegung: Mit Schiebereglern stellt man Startort, Geschwindigkeit und Beschleunigung ein. Links läuft die Bewegung animiert auf einer Strecke, rechts entsteht live das Weg-Zeit-Diagramm mit beschrifteten Achsen und Gitter. Ein Messpunkt zeigt die aktuelle Steigung als Zahl (v in m/s) und die zurückgelegte Strecke. Dazu ein Knopf „zurücksetzen“ und ein sichtbarer Hinweis, dass das Modell Reibung vernachlässigt. WICHTIG für fehlerfreien Code: Wenn ein Element per document.getElementById oder querySelector gesucht wird, MUSS das HTML genau diese id besitzen (keine onClick="fn()"-Attribute, sondern addEventListener; keine Funktion aufrufen, die erst später definiert wird). Alle Variablen vor Gebrauch initialisieren, jede DOM-Referenz null-prüfen und erst nach DOMContentLoaded binden. Das Skript am Ende des body ausführen, nie im head. Fehler dürfen nicht auftreten: kein Zugriff auf undefined (z. B. eine Liste, die leer sein kann) und kein innerHTML/appendChild auf null. Nutzerdaten und Eingaben ausschließlich über textContent oder document.createElement ins DOM schreiben, niemals per innerHTML mit eingesetzten Werten; Eingaben nie in eine Vorlage interpolieren. Klickbare Flächen: Das ganze sichtbare Element löst den Klick aus; kein Kind-Element, das die meiste Fläche überdeckt. Zähler und Anzeigen starten mit dem ehrlichen Anfangswert, nie mit einem Endwert.

Baue ein Klimadaten-Dashboard mit einer kleinen eingebauten Zeitreihe (globale Jahresmitteltemperaturen 1950–2024, Werte im Code sichtbar und änderbar). Umschaltbar zwischen Linien- und Balkendiagramm, dazu eine berechnete Trendgerade mit Steigung pro Jahrzehnt. Ein Textfeld erklärt in zwei Sätzen, was der Trend bedeutet und was er NICHT beweist; darunter steht die Datenquelle und ein Hinweis auf Unsicherheit. Sauberes Layout, Achsen beschriftet, Werte per Mauszeiger ablesbar. WICHTIG für fehlerfreien Code: Wenn ein Element per document.getElementById oder querySelector gesucht wird, MUSS das HTML genau diese id besitzen (keine onClick="fn()"-Attribute, sondern addEventListener; keine Funktion aufrufen, die erst später definiert wird). Alle Variablen vor Gebrauch initialisieren, jede DOM-Referenz null-prüfen und erst nach DOMContentLoaded binden. Das Skript am Ende des body ausführen, nie im head. Fehler dürfen nicht auftreten: kein Zugriff auf undefined (z. B. eine Liste, die leer sein kann) und kein innerHTML/appendChild auf null. Nutzerdaten und Eingaben ausschließlich über textContent oder document.createElement ins DOM schreiben, niemals per innerHTML mit eingesetzten Werten; Eingaben nie in eine Vorlage interpolieren. Klickbare Flächen: Das ganze sichtbare Element löst den Klick aus; kein Kind-Element, das die meiste Fläche überdeckt. Zähler und Anzeigen starten mit dem ehrlichen Anfangswert, nie mit einem Endwert.

Baue eine Präsentation „KI in der Arbeitswelt“ für die Oberstufe: 8 Folien, jede mit genau einer Kernaussage, zwei Stichpunkten und einer Quellenangabe (klein am unteren Rand, z. B. OECD 2023, IAB 2024). Steuerung per Pfeiltasten und Klick, Fortschrittsbalken, dunkles, seriöses Layout mit gut lesbarer Typografie. Die letzte Folie stellt drei offene Diskussionsfragen. Keine Behauptung ohne Beleg, keine erfundenen Zahlen — wo Zahlen fehlen, steht ausdrücklich „Schätzung“. WICHTIG für fehlerfreien Code: Wenn ein Element per document.getElementById oder querySelector gesucht wird, MUSS das HTML genau diese id besitzen (keine onClick="fn()"-Attribute, sondern addEventListener; keine Funktion aufrufen, die erst später definiert wird). Alle Variablen vor Gebrauch initialisieren, jede DOM-Referenz null-prüfen und erst nach DOMContentLoaded binden. Das Skript am Ende des body ausführen, nie im head. Fehler dürfen nicht auftreten: kein Zugriff auf undefined (z. B. eine Liste, die leer sein kann) und kein innerHTML/appendChild auf null. Nutzerdaten und Eingaben ausschließlich über textContent oder document.createElement ins DOM schreiben, niemals per innerHTML mit eingesetzten Werten; Eingaben nie in eine Vorlage interpolieren. Klickbare Flächen: Das ganze sichtbare Element löst den Klick aus; kein Kind-Element, das die meiste Fläche überdeckt. Zähler und Anzeigen starten mit dem ehrlichen Anfangswert, nie mit einem Endwert.