"Du bist ein Experte für didaktische Web-Entwicklung und E-Learning. Erstelle eine **Single-Page HTML5 Anwendung** (HTML + CSS + JS in EINER einzigen Datei). **KONTEXT:** - Zielgruppe: Berufsschule (Berufsschule) - Fach: Allgemein - Thema: ABC-Analayse - Zweck: Erarbeitung - Ansprache: "Sie" - Stil: Modern, professionell, sachlich - Welche Aktivitäten sollen enthalten sein?: Einführungstext, Interaktives Quiz, Karteikarten, Simulation, Abschlusstest, Reflexion/Zusammenfassung **UMFANG (PFLICHT):** MINDESTENS 5 verschiedene Aktivitäten (Lesen, Quiz, Simulation/Übung, Wiederholung, Abschlusstest), Fortschrittsbar, XP-Punkte, Abschluss-Zertifikat-Screen. Dies ist eine MINDESTVORGABE — unterschreite sie NICHT. **DIDAKTISCHER ZWECK — ERARBEITUNG (Neues Wissen aufbauen):** Die Anwendung soll neues Wissen vermitteln. Struktur PFLICHT: 1. INFORMATIONSVERMITTLUNG: Der Schüler erhält strukturierte Informationen (Texte, Erklärungen, Fakten) zu "ABC-Analayse". 2. VERARBEITUNG: Unmittelbar nach jeder Informationseinheit folgt eine Aufgabe, die das Gelernte aktiv anwenden lässt (Frage, Zuordnung, Lückentext o.ä.). 3. Verhältnis: Ca. 60% Information, 40% Anwendung — KEINE reine Aufgabensammlung ohne vorherigen Input. **Erstelle eine "Komplette Lernumgebung (Lernpfad)" — PFLICHT-ARCHITEKTUR:** SCHRITT 1 — ALLE INHALTE ZUERST (ZWINGEND vor dem HTML): const envData = { modules: [ { id: 1, title: "Modul-Titel", icon: "passendes Emoji", infoText: "VOLLSTÄNDIGER FACHTEXT — ZWINGEND mind. 150 Wörter. Echte Fachbegriffe, Erklärungen, konkrete Beispiele. KEIN Platzhalter!", tasks: [ { type: "mc", question: "...", options: ["A","B","C","D"], correct: 0, explanation: "Warum richtig..." }, { type: "lueckentext", template: "Der Begriff ___ beschreibt ...", answer: "..." }, { type: "zuordnung", pairs: [{ left: "Begriff", right: "Definition" }] }, { type: "wahr-falsch", statement: "Aussage...", correct: true, explanation: "..." } /* ZWINGEND mind. 4 Aufgaben pro Modul — KEINE zwei gleichen Typen direkt hintereinander */ ] } /* weitere Module — ZWINGEND 6 insgesamt */ ], finalTest: { questions: [ /* ZWINGEND mind. 10 Fragen, gemischt aus ALLEN Modulen, verschiedene Typen (mc, lueckentext, zuordnung, wahr-falsch) */ ] }, summary: { keyTerms: [ { term: "...", definition: "vollständige Definition" } /* alle wichtigen Begriffe */ ], coreStatements: [ "Kernaussage 1", "Kernaussage 2" /* mind. 5 Kernaussagen vollständig ausformuliert */ ], learningGoals: [ "Lernziel 1" /* alle Lernziele aus dem Thema ableiten */ ] } }; VERBOT: Kein Platzhalter in irgendeinem Feld. Alle Texte und Aufgaben vollständig ausschreiben. SCHRITT 2 — SEITENSTRUKTUR: LANDING PAGE (Startansicht): - Titel + kurze Beschreibung der Lernumgebung - ZWINGEND 6 Modul-Kacheln als klickbares Grid (max. 3 Kacheln pro Zeile) - Jede Kachel: icon + title aus envData.modules + Status-Badge (gesperrt / offen / abgeschlossen) - Kacheln 2+ zunächst mit Schloss-Icon gesperrt — erst nach Abschluss der vorherigen Kachel freischalten - Fortschrittsbalken: "X von 6 Modulen abgeschlossen" MODUL-ANSICHT (öffnet sich beim Klick auf eine freigeschaltete Kachel): - Zurück-Button zur Landing Page (Fortschritt bleibt erhalten) - infoText vollständig und ungekürzt anzeigen - Danach alle 4 tasks aus envData.modules[i].tasks sequenziell mit sofortigem Feedback - Nach Abschluss: XP-Overlay, Kachel auf Landing Page als "✓ abgeschlossen" markieren - Zusatz-Elemente je Modul einbauen wo sinnvoll: Interaktives Quiz, Karteikarten, Simulation NACH ALLEN MODULEN — LERNZIELKONTROLLE: - Wird erst freigeschaltet wenn alle 6 Module abgeschlossen sind (eigene Kachel/Button auf Landing Page) - Alle Fragen aus envData.finalTest.questions — mind. 10, verschiedene Typen - Ergebnis-Screen: Punktzahl, Prozent, motivierender Text je nach Ergebnis NACH LERNZIELKONTROLLE — ZUSAMMENFASSUNG (DOWNLOAD): - Button "Zusammenfassung herunterladen" (window.print() Druckansicht) - Inhalt aus envData.summary: alle Kernbegriffe mit Definitionen + Kernaussagen + Lernziele - Druckfreundliches Layout: weißer Hintergrund, schwarze Schrift, kein Game-Design **INHALTS-ERSTELLUNG:** Du bist der Fachexperte. Erstelle eigenständig hochwertige, fachlich korrekte Inhalte zum Thema "ABC-Analayse". - Niveau: Berufsschule (Berufsschule) - Sprache: Präzise, altersgerecht, motivierend (Ansprache: "Sie") - Qualität: Kein triviales Füllmaterial — jede Frage/Aufgabe soll didaktisch wertvoll sein. **PFLICHT-AUFBAU DER ANWENDUNG (Lernbogen):** 1. EINLEITUNG: Kurze, motivierende Begrüßung mit dem Thema und was der Schüler gleich lernt/erlebt (ca. 10–20 Sek.) 2. HAUPTTEIL: Lerninhalt gemäß den Anforderungen oben 3. ABSCHLUSS: Ergebnis-/Zusammenfassungs-Screen mit Punktzahl/Feedback und motivierendem Abschlusstext **DESIGN-SYSTEM & VISUELLES ERSCHEINUNGSBILD (PFLICHT):** - **Sprache:** ALLE UI-Texte, Buttons, Labels, Fehlermeldungen und Feedback-Texte AUSSCHLIESSLICH AUF DEUTSCH. - **Farbpalette:** Wähle maximal 3 Hauptfarben + 1 Akzentfarbe, die zum Thema und Schultyp passen. Definiere sie als CSS Custom Properties im :root: ```css :root { --c-primary: #...; --c-secondary: #...; --c-accent: #...; --c-bg: #...; } Nutze diese Variablen konsequent — kein wildes Mix aus 10 verschiedenen Farben. Design-Stil: Modern, aufgeräumt, zeitgemäß — kein "Web 1.0"-Look. Klare Typografie-Hierarchie (Überschriften groß und fett, Body lesbar, Labels klein). Motivierendes Erlebnis: Jede richtige Antwort: freudige Bestätigung mit Icon + kurzem Motivationstext ("Perfekt! 🎉", "Genau richtig! ✅", "Stark gemacht! 💪") Jede falsche Antwort: ermutigender Ton ("Fast! Schau nochmal hin 🤔", "Noch nicht ganz — du schaffst das!") Smooth CSS Transitions (0.2–0.3s ease) auf allen interaktiven Elementen. Buttons mit Hover-Effekt (leichtes Aufhellen/Vergrößern), aktive States. Abschluss-Screen: Großes, freudiges Design mit Gesamtbewertung und motivierendem Schlusssatz. Barrierefreiheit (Grundanforderungen): Ausreichende Farbkontraste (WCAG AA), alle Buttons haben aussagekräftigen Text. TECHNISCHE VORGABEN (MANDATORY): Single File: Alles (HTML, CSS, JS) in EINER Datei — kein externer Download außer erlaubten CDNs. Framework: Tailwind CSS via CDN. Design: Responsiv, ästhetisch, Mobile-First (Responsive) für Touch & Maus. Erlaubte Bibliotheken (nur bei Bedarf einbinden – nicht alle auf einmal!): Tailwind CSS (immer): FontAwesome (Icons): Canvas Confetti (Spielabschluss/Gamification): Chart.js (Diagramme/Visualisierungen): MathJax (mathematische Formeln, STEM): GSAP (komplexe Animationen): jsPDF (PDF-Generierung, Pflicht bei Leistungskontrolle): Lucide Icons (alternativ/ergänzend zu FontAwesome): CodeMirror (Code-Editor, für Informatik-Aufgaben): + Skulpt (Python im Browser, nur zusammen mit CodeMirror): + Keine externen Bilder — nutze Emojis und FontAwesome-Icons. Funktionen: [x] Fortschrittsanzeige (Progress Bar) [x] Direktes, motivierendes Feedback nach jeder Antwort [x] Hilfe-Tipps bei falschen Antworten [x] Klare Navigation (Weiter/Zurück) [ ] Aufgabentyp muss NICHT variieren. [x] Konfetti-Effekt bei Erfolg [x] Punkte-System / Score [ ] KEIN Timer. Robustheit & Fehlerbehandlung: Kapsele kritische JS-Funktionen in try/catch-Blöcken. Die App darf NIEMALS eine weiße/leere Seite zeigen — bei unerwarteten Fehlern: freundliche Fehlermeldung auf Deutsch. Prüfe CDN-Abhängigkeiten vor Verwendung (typeof window.jsPDF !== 'undefined' etc.). KEINE setTimeout-Hacks für Layout — nutze DOMContentLoaded oder requestAnimationFrame. METADATEN (in den einfügen — PFLICHT): HTML <meta name="schulspace-title" content="[Kreativer, motivierender Titel passend zum Inhalt]"> <meta name="schulspace-description" content="[Kurze, motivierende Beschreibung (1–2 Sätze)]"> <meta name="schulspace-subject" content="Allgemein"> <meta name="schulspace-audience" content="Berufsschule"> SELBSTPRÜFUNG VOR DER AUSGABE (PFLICHT): Bevor du den Code ausgibst, prüfe mental: □ Mindestumfang erfüllt: MINDESTENS 5 verschiedene Aktivitäten (Lesen, Quiz, Simulation/Übung, Wiederholung, Abschlusstest), Fortschrittsbar, XP-Punkte, Abschluss-Zertifikat-Screen. □ Vollständiger Lernbogen vorhanden (Einleitung → Hauptteil → Abschluss) □ ALLE Texte auf Deutsch (keine englischen Buttons/Labels) □ Design-System: max. 3 Farben, konsistent verwendet, modern und motivierend □ Inhalte abwechslungsreich (keine monotone Wiederholung) □ Sprache motivierend und altersgerecht für "Berufsschule" □ Anwendung sofort lauffähig, keine Leerseiten, kein Absturz möglich □ Robustheit: try/catch, keine weißen Seiten bei Fehlern Wenn eine Box NICHT erfüllt ist: Überarbeite den Code vor der Ausgabe. Erstelle jetzt den vollständigen, sofort lauffähigen Code."