Kursvorlage
KI Coding Lab: Interaktive Simulationen bauen
Interaktive Web-Projekte mit HTML/CSS/JS entwickeln.
KI-Coding und ProtoTypeFirst
KI-Coding als integrierter Entwicklungsprozess
Diese Kursvorlage nutzt KI-Coding als kontextbewusste Unterstützung direkt in CodeRoom: Bestehender Code kann gezielt erweitert, Fehler können erklärt und Änderungen können am aktuellen Projektstand nachvollziehbar umgesetzt werden. Für Lehrkräfte bleibt der Entwicklungsprozess transparent, weil Prompts, Codeänderungen und Versionen im Unterrichtskontext sichtbar bleiben. Der Kurs wurde speziell für Lernende entwickelt, die mit KI-Unterstützung strukturiert programmieren und ihren Code gezielt weiterentwickeln sollen.
Alle Bausteine folgen dem ProtoTypeFirst-Format: Jedes Projekt startet mit einem bereits funktionierenden Prototyp, der im Browser sofort getestet werden kann. Von dort aus werden Datenmodelle, Oberflächen, Regeln und Auswertungen schrittweise weiterentwickelt, sodass nachvollziehbare Code-Entwicklung und sofort testbare Ergebnisse miteinander verbunden werden.
Didaktische Zielsetzung
Didaktische Zielsetzung
Die Vorlage bündelt mehrere interaktive Web-Projekte, in denen funktionsfähige Prototypen systematisch zu Simulationen, Dashboards oder Anwendungen erweitert werden. Im Mittelpunkt steht der Aufbau von Kompetenzen in HTML-Strukturierung, CSS-Gestaltung und JavaScript-Logik, insbesondere im Umgang mit Datenstrukturen, Zuständen, DOM-Aktualisierung und Interaktion. Die einzelnen Projekte verdeutlichen, wie fachliche Modellierung zunächst in geeignete Datenobjekte und Regeln übersetzt und anschließend in sichtbare Benutzeroberflächen implementiert wird. Fachlich ist die Vorlage im Bereich AI-Coding, Modellbildung, Simulation und schrittweiser Web-App-Entwicklung einzuordnen.
Kompetenzschwerpunkte
Kompetenzschwerpunkte
Die Vorlage verbindet Webentwicklung, Datenmodellierung und Simulation zu einem projektorientierten Kompetenzaufbau.
- Strukturierung von Weboberflächen: Sichtbare Bereiche werden mit HTML aufgebaut und in wiederverwendbare Dashboard-, Karten- und Steuerungsbereiche gegliedert.
- Gestaltung responsiver Interfaces: CSS wird genutzt, um Karten, Layouts, Statusanzeigen, Animationen und mobile Ansichten fachlich passend umzusetzen.
- Datenmodellierung mit JavaScript: Arrays und Objekte bilden zentrale Zustände wie Aktien, Patienten, Zellen, Verbindungen, Fahrzeuge, Pakete, Parteien oder App-Daten ab.
- Implementierung von Interaktion: Klickereignisse, Statuswechsel, Filter, Steuerknöpfe und DOM-Methoden verbinden Daten mit sichtbaren Reaktionen der Oberfläche.
- Entwicklung von Simulationslogik: Regeln, Zustände, Zufallsereignisse, Timer, Auswertungen und automatische Prozesse werden schrittweise aus Prototypen heraus erweitert.
- Fehleranalyse und iterative Weiterentwicklung: Änderungen werden in kleinen Schritten umgesetzt, im Browser geprüft und anhand des Codes gezielt korrigiert.
Struktur der Bausteine
Struktur der Bausteine
Die Bausteine variieren Anwendungskontexte, folgen jedoch einem gemeinsamen didaktischen Muster: Ein lauffähiger HTML/CSS/JS-Prototyp wird über Datenmodellierung, Interaktion, Simulationsregeln und Auswertung schrittweise erweitert.
Börsenlabor: Handelsplatz-Simulation
Der Baustein nutzt eine Börsen- und Handelsplatz-Simulation, um Datenobjekte, Kursverläufe, Kauf- und Verkaufslogik sowie auswertende Dashboard-Elemente schrittweise zu verbinden.
Krankenhaus Leitstand
Der Baustein führt über ein Krankenhaus-Dashboard in Zustandsverwaltung, Prioritäten, Wartelogik, Raumbelegung und kennzahlenbasierte Visualisierung ein.
Cell Defense – Conway gegen die Invasion
Der Baustein verbindet Zellautomaten nach Conway mit spielerischer Verteidigungslogik und macht Rasterdaten, Muster, Energie, Gegnerbewegung und Zustandsübergänge modellierbar.
Quotenlabor: Die Risiko-Simulation
Der Baustein nutzt eine vollständig fiktive Risiko-Simulation, um Wahrscheinlichkeiten, Quotenberechnung, Zufall, Auswertung und kritische Modellbetrachtung in Code umzusetzen.
Leitzentrale Hauptbahnhof
Der Baustein zeigt an einem Bahnhof-Leitsystem, wie Verbindungsdaten, Gleise, Kennzahlen, Störungen und Statuswechsel in einer zusammenhängenden Simulation strukturiert werden.
Stadtverkehr- und Ampel-Simulation
Der Baustein modelliert Stadtverkehr über Fahrzeuge, Ampelzustände, Messwerte und Simulationsschritte und verdeutlicht die Kopplung von Regeln, Bewegung und Anzeige.
PaketPilot: Paketzentrum- und Lieferdienst-Simulation
Der Baustein entwickelt eine Logistik-Simulation mit Paketannahme, Sortierung, Fahrzeugbeladung, Lieferstatus, Ereignissen und auswertenden Dashboard-Komponenten.
Republik-Roulette: Koalition, Krisen und Gesetze
Der Baustein nutzt eine vollständig fiktive Regierungssimulation, um Sitzverteilung, Koalitionen, Ereignisse, Gesetze, Gruppenreaktionen und Neuwahlen als regelbasiertes Modell zu implementieren.
KI App Lab: Von der Idee zur eigenen Web-App
Der Baustein öffnet die Struktur zu einer eigenen Web-App-Idee und unterstützt die Planung, Anpassung von Datenmodellen, Prototyping, Interaktion und iterative Erweiterung.
Die Bausteine bieten transparente Lernziele, wiederkehrende Projektstrukturen und gute Anschlussfähigkeit an Unterrichtsreihen zu Webentwicklung, Modellbildung und Simulation. Durch die unterschiedlichen Anwendungskontexte lässt sich der Kompetenzaufbau fachlich variieren.
Nutzen Sie einen Demo-Zugang, um die Vorlage zu prüfen, einzelne Bausteine auszuwählen und an Ihre Lerngruppe anzupassen.