Quiz: Auswertung; README aktualisiert

README.md

@@ -27,6 +27,7 @@ https://isa##.edumake.de
 ├── textanalyse.html        # Textanalyse-Tool
 ├── api.html                # fetch & API Demo (JSONPlaceholder)
 ├── kanban.html             # Kanban-Board (Drag & Drop)
+├── quiz.html               # Mini-Quiz (50 Fragen, 3 random, DOM-basiert)
 ├── kontakt.html            # Kontaktformular
 ├── impressum.html          # Rechtliche Infos
 ├── css/
@@ -34,7 +35,8 @@ https://isa##.edumake.de
 ├── js/
 │   ├── script.js           # Dark Mode, Hamburger-Nav, Formular, Lightbox
 │   ├── api-demo.js         # fetch() API Demo
-│   └── kanban.js           # Kanban-Board Logik
+│   ├── kanban.js           # Kanban-Board Logik
+│   └── quiz.js             # Mini-Quiz Logik (U14)
 ├── img/
 │   ├── logo.png            # Projekt-Logo
 │   ├── gruppenbild.jpg     # Team-Gruppenbild
@@ -54,19 +56,21 @@ https://isa##.edumake.de
   - Formularvalidierung (feldspezifisch)
   - fetch() API Demo
   - Kanban-Board (Drag & Drop)
+  - Mini-Quiz (DOM-basiert, 50 Fragen, zufällig)
 
 ### Features
 - ✅ Responsive Design (Mobile, Tablet, Desktop)
 - ✅ Dark Mode (Toggle + localStorage; Auto-Dark ab 16:00 Uhr)
 - ✅ Begrüssung nach Tageszeit im Header (Morgen/Mittag/Abend + Uhrzeit, live)
 - ✅ Hamburger-Menü (Mobile)
-- ✅ Einheitliche Navigation (11 Seiten)
+- ✅ Einheitliche Navigation (12 Seiten)
 - ✅ Kontaktformular mit feldspezifischer JS-Validierung
 - ✅ Bildergalerie mit Lightbox
 - ✅ Notenrechner (DOM-basiert, Tabs, Fortschrittsbalken)
 - ✅ Textanalyse-Tool (Wörter, Zeichen, Sätze, Metriken)
 - ✅ fetch & API Demo (JSONPlaceholder, DOM-Rendering, Fehlerbehandlung, Filter)
 - ✅ Kanban-Board (Drag & Drop, Labels, localStorage, JSON-Export)
+- ✅ Mini-Quiz (50 Fragen, 3 zufällig, Feedback, Auswertung, Highscore)
 - ✅ SEO-freundliches Markup
 
 ## 🖥️ SSH-Zugang
@@ -136,8 +140,17 @@ Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:
 - `.catch(err)` – Fehlermeldung + „Erneut versuchen"-Button
 - Client-seitiger Live-Filter (Name, Stadt, Firma, E-Mail)
 
-### kanban.js
-- Spalten anlegen (`prompt` → `createElement` + `appendChild`)
+### quiz.js
+- 50 Fragen als Array von Objekten `{ frage, antworten, richtig }`
+- `shuffle()` (Fisher-Yates) zieht jede Runde 3 zufällige Fragen
+- Komplett dynamischer DOM-Aufbau (`createElement`, kein statisches HTML)
+- Direktes Feedback im DOM (kein `alert()`): Button grün/rot eingefärbt
+- Buttons nach Antwort deaktiviert (kein doppeltes Punkten)
+- Fortschrittsbalken + Live-Punktestand während dem Quiz
+- Auswertungsscreen mit Ergebnis-Nachricht je Punktzahl (0/1/2/3)
+- Fragen-Rückblick mit richtigen Antworten
+- 🥇 Highscore (perfekte Runden) in `localStorage`
+- „Neues Quiz starten" – zieht neue 3 zufällige Fragen
 - Karten anlegen / löschen / editieren (`contenteditable`)
 - Drag & Drop (`dragstart`, `dragover`, `drop`, `dragenter`, `dragleave`)
 - Präzise Reihenfolge via `getBoundingClientRect` + Drop-Placeholder
@@ -178,6 +191,10 @@ Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:
 - Trello-ähnliches Kanban-Board
 - Drag & Drop, Labels, localStorage-Persistenz, JSON-Export
 
+### quiz.html
+- Mini-Quiz mit 3 zufälligen Fragen aus 50 (Allgemeinwissen)
+- Direktes Feedback, Punktezähler, Auswertung, Highscore
+
 ### kontakt.html
 - Kontaktformular mit feldspezifischer JavaScript-Validierung
 
@@ -193,11 +210,13 @@ Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:
 | **U3** | Website-Architektur | Navigation, mehrere Seiten |
 | **U4** | DOM & APIs | Notenrechner, Textanalyse, fetch & API Demo |
 | **Bonus** | Erweitert | Kanban-Board (Drag & Drop, localStorage) |
+| **U14** | Quiz | Mini-Quiz (50 Fragen, zufällig, DOM-basiert, Highscore) |
 
 ## 🗓️ Änderungsprotokoll
 
 | Datum | Änderung |
 |-------|----------|
+| 03.06.2026 | U14: Mini-Quiz – 50 Fragen, 3 zufällig, DOM-Aufbau, Auswertung, Highscore |
 | 03.06.2026 | U13: Begrüssung nach Tageszeit im Header + Auto-Dark-Mode ab 16:00 Uhr |
 | 20.05.2026 | Dark Mode: Beschreibungstexte Team/Notenrechner/Textanalyse in dunkelblau |
 | 20.05.2026 | Galerie: teambild.jpeg eingefügt |