Mathe 8 - Lernumgebung Lineare Funktionen - Stufenmodell

Prompt

Du bist erfahrene Mathematiklehrkraft für die Sekundarstufe I, Expertin bzw. Experte für kompetenzorientierten und selbstregulierten Unterricht sowie für UX/UI und barrierearme Webentwicklung mit HTML, CSS und Vanilla JavaScript. Erstelle eine vollständige, interaktive Webanwendung zum Thema „Lineare Funktionen“ für Klasse 8 am Gymnasium in Nordrhein-Westfalen. Sie muss ohne Server, Installation, Build-Prozess, Internet oder zusätzliche Dateien lokal im Browser laufen. Alle Inhalte, Aufgaben, Lösungen, Styles und Skripte befinden sich in einer einzigen HTML-Datei. Ausgabe Gib ausschließlich den vollständigen HTML-Code aus: Beginn mit <!DOCTYPE html>, ohne Markdown-Codezaun und ohne Erläuterung davor oder danach. Die Datei muss als lernpfad_lineare_funktionen.html per Doppelklick funktionieren. Verwende nur HTML5, CSS3 und Vanilla JavaScript. Keine externen Bibliotheken, Frameworks, CDNs, Schriftarten, APIs oder Ressourcen. Der Code muss vollständig, kommentiert, syntaktisch korrekt und lauffähig sein. Keine Platzhalter oder TODOs. Didaktik und Lernziele Richte dich an Lernende der Jahrgangsstufe 8. Der Lernpfad soll aktivierend, entdeckend, problemorientiert, alltagsnah, sprachsensibel, differenziert und selbstständig bearbeitbar sein. Die Lehrkraft begleitet. Beginne neue Inhalte mit Beobachtungen, Situationen, kleinen Untersuchungen oder Problemen statt mit langen Erklärungen. Führe Fachbegriffe anschließend klar ein. Die Stufen beschreiben den aktuellen Lernstand im Thema, nicht den Wert oder die allgemeine Fähigkeit einer Person. Orientiere dich am Kernlehrplan Mathematik NRW, insbesondere Inhaltsfeld Funktionen. Lernende sollen Zuordnungen und Funktionen verstehen, proportionale und lineare Zusammenhänge unterscheiden und lineare Funktionen in Wortform, Tabelle, Graph und Term darstellen sowie Darstellungen wechseln. Sie sollen Steigung, Steigungsdreieck, y-Achsenabschnitt und Parameter samt Einheiten deuten, Modelle anwenden und prüfen sowie Ergebnisse im Kontext bewerten. Berücksichtige die Prozesskompetenzen Operieren, Modellieren, Problemlösen, Argumentieren und Kommunizieren. Aufgaben und Tests sollen Anwendungen, Darstellungswechsel, Fehleranalysen und kurze Begründungen enthalten, nicht nur isoliertes Reproduktionswissen. Stufen und Freischaltung Baue genau drei aufeinander aufbauende Stufen ein: Basiswissen Vertiefung Fortgeschritten Anfangs ist nur Stufe 1 zugänglich. Stufe 2 bzw. 3 wird nach mindestens 80 % im Test der vorherigen Stufe freigeschaltet. Gesperrte Stufen bleiben sichtbar; beim Anklicken wird die fehlende Voraussetzung freundlich erklärt. Nach Bestehen der dritten Stufe erscheinen Abschlussfenster, Kompetenzübersicht, Reflexion und druckbare Abschlussansicht. Speichere Lernstand, Fortschritt, Notizen und optionalen Namen ausschließlich im localStorage; stelle sie nach erneutem Öffnen wieder her. Kommentiere im Code zentrale Konfigurationswerte wie Bestehensgrenze, Testdauer, maximale Versuche und Aufgabenanzahl. Startseite und Aufbau jeder Stufe Die Startseite enthält Titel „Lernpfad: Lineare Funktionen“, kurze Einführung, Lernlandkarte, Status jeder Stufe („gesperrt“, „in Arbeit“, „testbereit“, „bestanden“), Fortschritt in Prozent, verbleibende Testversuche und Schaltflächen „Lernpfad fortsetzen“, „Mein Fortschritt“, „Hilfe zur Bedienung“ sowie „Fortschritt zurücksetzen“ mit Sicherheitsabfrage. Erkläre, dass 80 % die Schwelle zur nächsten Stufe ist. Zeige keine irreführenden Noten. Jede Stufe enthält: Das kannst du danach: verständliche Kann-Sätze. Entdecken: alltagsnaher Einstieg, interaktive Untersuchung und Leitfragen. Verstehen und sichern: kurze Erklärungen, Fachsprache, Merksätze, gerechnete Beispiele und typische Fehlvorstellungen. Trainieren: Pflicht- und Wahlaufgaben, unterschiedliche Darstellungen, unmittelbares Feedback und Hilfen in drei Stufen (Denkimpuls, Hinweis, Lösungsweg), auf Wunsch eingeblendet. Anwenden und vernetzen: Alltag, Darstellungswechsel, Modellierung und mindestens eine Fehleranalyse. Erklären und reflektieren: kurze offene Impulse und lokal gespeicherte Notizen; freie Texte nicht automatisch bewerten. Selbstcheck: Kann-Liste mit „noch unsicher“, „teilweise sicher“, „sicher“ und Übungsempfehlungen. Selbsteinschätzung beeinflusst den Test nicht. Kompetenztest: erst nach Bearbeitung der Kernaktivitäten startbar. Vorher Regeln, Zeit, Bestehensgrenze und Versuchsnummer anzeigen. Inhalte der Stufen Stufe 1 – Basiswissen: Vorwissen zu Zuordnungen, Koordinatensystem, Termen und Tabellen aktivieren; proportionale und lineare Zusammenhänge vergleichen; lineare Situationen, gleichmäßige Änderung und Startwert erkennen; Tabellen ergänzen, Punkte eintragen, Graphen lesen/zeichnen; Grundform y=m\cdot x+b, Bedeutung von m und b; Situation, Tabelle, Graph und Term einfach verknüpfen. Nutze einen alltagsnahen Kontext mit Startwert und gleichmäßiger Änderung, z. B. Fahrradverleih, Schwimmbad, Taxi oder Guthaben; nicht nur Kostenbeispiele. Stufe 2 – Vertiefung: Steigung aus Graph, Tabelle, Term und Sachtext bestimmen; positive, negative und gegebenenfalls null Steigung unterscheiden; Steigungsdreieck korrekt nutzen; y-Achsenabschnitt bestimmen; Terme aus Darstellungen und Situationen aufstellen; Graphen und Terme begründet zuordnen; Parameter und Einheiten deuten; Punktproben nutzen; Angebote oder Entwicklungen vergleichen; Fehler erklären und korrigieren. Stufe 3 – Fortgeschritten: Mehrschrittige Modellierungsprobleme lösen; eigene lineare Modelle und Annahmen entwickeln; Ergebnisse interpretieren und auf Plausibilität prüfen; Gültigkeitsbereiche und Grenzen untersuchen; Modelle und Lösungswege vergleichen; Schnittpunkte grafisch oder durch systematisches Probieren als Gleichstand zweier Situationen deuten; offene Aufgaben mit mehreren Lösungen sowie eine eigene kurze Erklärung oder Modellierung. Algebraische Verfahren für lineare Gleichungssysteme sind kein verbindlicher Schwerpunkt. Aufgabenpools und Kompetenztests Implementiere je Stufe mindestens 30 vollständig ausgearbeitete Aufgabenvarianten, insgesamt mindestens 90. Regelbasierte Generatoren mit didaktisch geprüften Parametern sind zulässig. Aufgaben müssen fachlich korrekt und eindeutig lösbar sein. Verwende angemessen negative Zahlen, Dezimalzahlen und einfache Brüche; vermeide unnötige Rundungsprobleme. Erzeuge Graphen direkt mit SVG oder Canvas. Jede Aufgabe enthält mindestens ID, Stufe, Teilkompetenz, Prozesskompetenz, Aufgabentyp, Schwierigkeitsmarker, geschätzte Zeit, Aufgabenstellung, Antwortmöglichkeiten oder Eingabe, Lösung, Punkte, konkretes Feedback und kurze Lösungserklärung. Ein Test enthält standardmäßig 10 zufällig und geschichtet ausgewählte Aufgaben, deckt die Kernkompetenzen ab und ist in höchstens 20 Minuten lösbar. Die Summe der geschätzten Zeiten darf 20 Minuten nicht überschreiten. Zeige einen Countdown ab 20:00, Warnungen bei 5 und 1 Minute sowie automatische Abgabe nach Zeitablauf. Unbeantwortete Aufgaben zählen null Punkte. Vorzeitiges Abgeben ist nach Sicherheitsabfrage möglich. Nutze eine ausgewogene Mischung aus Single Choice, gekennzeichnetem Multiple Choice, numerischer und kurzer mathematischer Eingabe, Dropdown-Zuordnung, zugänglichen Auswahlfeldern für Reihenfolge/Matching, dynamischer Graphinterpretation und Fehleranalyse mit Auswahl/Begründungsbausteinen. Freitexte dürfen im Test nicht durch bloßen Zeichenkettenvergleich bewertet werden. Bei kurzen Termen dürfen nur eindeutige Schreibvarianten normalisiert werden (z. B. Dezimalkomma/-punkt, Leerzeichen, */·). Versuche, Bewertung und Feedback Jeder Stufentest darf höchstens dreimal gestartet werden. Versuche haben dasselbe Kompetenzniveau und dieselbe Kompetenzverteilung, aber jeweils neue, gleichwertige Aufgaben. Vermeide soweit möglich wiederholte Aufgaben-IDs und Parameter. Jeder Start zählt; Neuladen darf keinen kostenlosen Neustart ermöglichen. Speichere Aufgaben, Parameter und Ergebnisse lokal. Laufende Tests müssen mit Startzeit, Aufgaben und verbleibender Zeit wiederherstellbar sein. Bestanden ist ab 80 % der erreichbaren Punkte. Zeige Punkte, Prozentwert auf eine Nachkommastelle und Status „bestanden“/„noch nicht bestanden“. Keine Noten ohne hinterlegte schuleigene Notentabelle. Speichere Datum, Punkte, Prozent, Aufgaben und diagnostizierte Teilkompetenzen je Versuch. Nach drei nicht bestandenen Versuchen wird der Test gesperrt. Zeige dann: „Du hast deine drei Testversuche genutzt. Besprich mit deiner Lehrkraft, welche Übungen dir jetzt helfen und wie der Test wieder freigeschaltet werden kann.“ Nach Nichtbestehen zuerst kompetenzbezogene Auswertung mit höchstens drei Lernbedarfen, typischen Fehlern und passenden Übungsmodulen zeigen; vollständige Lösungen erst nach Bestehen oder dem dritten Versuch. Empfehle eine kurze Reflexion und Übungsschleife; erst danach ist ein neuer Versuch möglich. Feedback benennt Gelungenes und konkrete nächste Schritte, nicht nur „richtig“ oder „falsch“. Verwende wertschätzende Sprache. Differenzierung und Barrierefreiheit Biete mindestens eine Challenge je Stufe, ausblendbare Übungslösungen, Fehleranalysen, Partner- oder Erkläraufträge (auch schriftlich allein lösbar), Hinweise „Wann solltest du deine Lehrkraft fragen?“ und Lernberatung bei wiederholten Schwierigkeiten. Optional: Helferkarte für Lernende nach bestandener Stufe mit Fragen, die Lösungen nicht vorwegnehmen. Gestalte die Anwendung ruhig, professionell, altersgerecht und responsiv für Notebook, Tablet und Smartphone. Verwende klare Hierarchie, gut lesbare Schrift, große Bedienelemente, hohen Kontrast, dezente Farben und eigene Akzentfarbe je Stufe. Beachte prefers-reduced-motion; biete druckfreundliche Lernübersicht und Abschlussansicht. Mathematik mit HTML, Unicode und CSS darstellen, ohne Formelbibliothek. Setze semantisches HTML, Tastaturbedienbarkeit, sichtbaren Fokus, passende aria-label-/aria-live-Bereiche, korrekte Labels, Statusanzeigen nicht nur durch Farbe, verständliche Fehler, zugängliche Dialoge, Alternativbeschreibungen für Graphen und Bedienbarkeit ohne Drag-and-drop-Zwang um. Datenschutz, Import/Export und Lehrkraftbereich Keine Übertragung, Cookies, Tracker, Analysewerkzeuge oder externen Dienste. Erkläre, dass Name und Lernstand nur im verwendeten Browser gespeichert werden. Biete JSON-Export sowie validierten Import; fehlerhafte Dateien verständlich abfangen. Kapsle den Code in Klassen oder Modulen innerhalb eines Skripts. Validierung und Bewertung beruhen auf JavaScript-Datenobjekten, nicht auf sichtbaren HTML-Attributen. Kommentiere, dass eine lokale HTML-Datei keinen sicheren Prüfungsmodus und keinen Schutz vor Quellcodeeinsicht bietet; sie ist für formatives Lernen, nicht für manipulationssichere Hochrisikoprüfungen gedacht. Integriere einen kompakten, standardmäßig geschlossenen Lehrkraftbereich mit PIN. Er bietet Lernstandsübersicht, Ergebnisse und Versuche je Stufe, Aufgaben-IDs, Kompetenzdiagnosen, Zurücksetzen einzelner Stufen oder des gesamten Lernstands, Export, Druckansicht und Konfigurationswerte. Beispiel: TEACHER_PIN = "4280". Kommentiere, wo die PIN geändert wird; zeige sie nie in der Schüleransicht. Weise darauf hin, dass eine lokale PIN nur eine organisatorische Hürde, keine echte Sicherheit ist. Qualitätsanforderungen und Orientierung Prüfe, dass alle drei Stufen vollständig sind; nur Stufe 1 anfangs offen ist; Freischaltung, Versuchszählung, Timer, Wiederherstellung, automatische Abgabe, Aufgabenpools und Datenimport/-export funktionieren. Graphen, Tabellen, Terme und Kontexte müssen zusammenpassen. Dezimalkomma/-punkt, Reset-Bestätigung, Offlinebetrieb, Tastaturbedienung und Responsivität müssen funktionieren. Keine Platzhalter, Abhängigkeiten oder normalen JavaScript-Fehler. Bei Umfangsgrenzen keine Funktionen oder Pools streichen; stattdessen kompakte, geprüfte Generatoren verwenden. Inhaltliche Orientierung: Kernlehrplan Mathematik Sekundarstufe I Gymnasium NRW, Heft 3401 (2019); Fortbildungsnotizen „Alternative Prüfungsformate“ (Stufenmodell, 80-%-Schwelle, maximal drei gleichwertige Versuche, Lernberatung und Helfersystem); https://wirfuermehr.de/stufenmodell/ (Progression, Diagnostik, Feedback und Stufen als Orientierung); Reihenplanung zu Zuordnungen (alltagsbezogene Einstiege, Darstellungswechsel, digitale Werkzeuge, Übergang proportional/linear, Üben und Sichern). Erzeuge jetzt ausschließlich den vollständigen, sofort funktionsfähigen HTML-Code.