Baue „Trainiere einen Sortierer“ als einzelne HTML-Simulation, kein echtes Machine Learning. Trainingskarten (Farbe, Form, Klasse): rot/Kreis/A; rot/Quadrat/A; rot/Dreieck/A; blau/Kreis/B; blau/Quadrat/B; blau/Dreieck/B. Zwei auswählbare Regeln: R1 „rot→A, sonst→B“; R2 „blau→B, sonst→A“. Beide passen zu allen Trainingskarten. Nach verbindlicher Regelwahl erst Testkarten aufdecken: grün/Kreis/B; gelb/Quadrat/B; rot/Stern/A; blau/Stern/B. Berechne Trainings- und Testtreffer getrennt, mit Zähler und begründetem Feedback. Zielkategorie der Testkarten folgt R1; kennzeichne dies als didaktisch gesetzte Referenz, nicht aus den Trainingsdaten bewiesene Wahrheit. Zeige, warum R2 bei neuen Farben scheitert. Ergänze Reset, eine SVG-Darstellung Beispiele→Regelwahl→unbekannte Fälle und ein Eingabefeld „Unsere Erwartung“. Keine falsche Behauptung, das Programm lerne tatsächlich. Liefere Datei/Code und drei Testfälle.

Gestaltung: clean, großzügiger Weißraum, Hintergrund #F7F7F5, Text #182C33, Akzent Petrol #24666A, Salbei #DCEFE1 und zurückhaltendes Gold #F4EAC8. Systemschrift, große klare Überschriften, kurze Texte, Karten und Bilder mit 18px abgerundeten Ecken und feinem Schatten. Diagramme und beschriftete Bilder vollständig zeigen, nicht abschneiden oder verzerren. Hoher Kontrast, sichtbarer Tastaturfokus, responsive Darstellung. Kein Neon, keine dekorative Überladung. HTML/CSS/JavaScript vollständig in einer Datei, keine CDNs, externen Fonts, APIs oder Netzwerkanfragen. Alle Aktionen müssen auch per Tastatur und Klick bedienbar sein. Verwende nur synthetische Daten.