Quiz App

Auslagerung der Quiz-Komponente aus dem Weberding-Hauptprojekt in einen eigenständigen Projektordner mit eigenem Git-Repository.

1.1  Projektstruktur

Dateien: index.html, scripts/quiz_tool.py, SKILL.md, agents/openai.yaml, publish-to-weberding.ps1, .gitignore, README.md

Acht Duo-Themendateien (t_*.htm) aus dem Weberding-Projekt übernommen. Sounddateien für Richtig/Falsch-Feedback kopiert.

1.2  quiz_tool.py

Erstes Validierungsskript: JSON-Extraktion, Pflichtfelder, Datentypen, Duplikaterkennung, Antwortbalance-Prüfung (40–60 % true).

1.3  Publish-Script

publish-to-weberding.ps1 synchronisiert per robocopy nach C:\Daten\Projects\weberding\quiz (ohne .git und __pycache__).

Einführung des zweiten Quiz-Modus: Quattro (Multiple-Choice mit vier Antworten A–D). Umbenennung aller Themendateien auf das neue Präfixschema.

2.1  Dateinamen-Schema

Alle bisherigen t_*.htm umbenannt in td_*.htm (Duo). Zwei neue Quattro-Dateien erstellt: tq_auswahlverfahren.htm, tq_poolbillardregeln.htm.

2.2  index.html – Moduswahl

Neue Moduswahl Duo/Quattro in der Oberfläche. Separate Darstellung für Quattro-Antworten (A–D-Buttons statt zwei großer Schaltflächen).

2.3  quiz_tool.py – Refaktorierung

Validator für beide Modi (validate_duo, validate_quattro) mit gemeinsamer validate()-Dispatcher-Funktion. Automatische Modus-Erkennung anhand des Dateinamenpräfixes.

Behebung korrumpierter Umlaute in den Quattro-Katalogen und Layout-Korrektur der Antwort-Buttons.

3.1  Umlaut-Korrekturen

Dateien: tq_auswahlverfahren.htm, tq_poolbillardregeln.htm

Alle durch ? ersetzten Umlaute (ä, ö, ü, ß etc.) wiederhergestellt.

3.2  Quattro-Button-Ausrichtung

Datei: index.html

CSS-Anpassung .btn_quattro: justify-content: flex-start und padding-inline ergänzt, damit A–D-Labels linksbündig erscheinen.

Einheitliche Schreibweise „Quattro" (zuvor teils „Quattro") und konsistente Darstellung der A–D-Kreissymbole.

4.1  Schreibweise vereinheitlicht

Datei: index.html

Alle Vorkommen von „Quattro"/„quattro" in CSS-Klassen, JS-Variablen, HTML-Option und Anzeigetext auf „Quattro"/„quattro" korrigiert.

4.2  A–D-Icon-Größe

Explizites font-size: 1.15rem und flex-shrink: 0 für die Buchstaben-Kreise, damit alle vier Symbole identische Größe haben.

4.3  Antworttext-Layout

Antworttext mit flex: 1 linksbündig ausgerichtet. Kleinere font-size für längere Antworttexte im Quattro-Modus.

Bereinigung der Quizfragen: Alle Verweise auf LPA-Quellen aus den Fragetexten entfernt, da diese in einem Quiz-Kontext irrelevant und irreführend sind.

5.1  Quellenverweise

Datei: tq_auswahlverfahren.htm

22 Vorkommen von „laut LPA", „laut FAQ", „laut LPA-FAQ", „nach den LPA-FAQ" und „steht in den FAQ" entfernt. Wo der Verweis das Hauptprädikat war (Frage 92), wurde die Frage zu „ist korrekt?" umformuliert.

Vollständige Überarbeitung des Quiz-Skills: Sprachlint im Python-Tool, neuer check-lang-Befehl, publish-Befehl, vollständige ChatGPT-Codex-Implementierung und diese Anpassungs-Dokumentation.

6.1  quiz_tool.py – Heuristischer Sprachlint

Neue Funktion lint_text() mit heuristischen Sprachprüfungen. Neues Flag --lint für den check-Befehl. create aktiviert Lint automatisch.

• Großschreibung am Satzanfang
• Satzzeichen am Ende (Aussagen ./!, Fragen ?)
• Textlänge 10–250 Zeichen, doppelte Leerzeichen, HTML-Tags, Platzhaltertext

6.2  SKILL.md – check-lang & publish

Neuer Befehl /quiz check-lang: zweistufige Sprachprüfung – heuristischer Lint via Python-Tool, dann Claude-Sprachprüfung mit direkter Korrektur.

Neuer Befehl /quiz publish: ruft publish-to-weberding.ps1 auf.

6.3  agents/openai.yaml – vollständige ChatGPT-Implementierung

Von 4 Zeilen auf vollständige Instruktionen erweitert: alle Befehle ($quiz-Präfix), Datenstrukturen, Workflows für create/check/check-lang/publish. Fallback für ChatGPT Codex bei überschrittenem Claude-Token-Kontingent.

6.4  Anpassungen-Dokumentation

Anpassungen.md und Anpassungen.html erstellt. Skill /quiz-anpassungen für die chronologische Fortschreibung.

Anbindung der externen Fragedatenbank „Open Trivia DB" als zweite Fragequelle sowie Einführung eines zweistufigen Publish-Workflows über einen out/-Zwischenordner.

7.1  index.html – Open Trivia DB-Anbindung

Datei: index.html

Neue Quellenauswahl im Control Dock: Dropdown „Quelle" mit den Optionen Lokal (bisheriger Betrieb) und Open Trivia DB (externe API).

Bei OTDB-Modus wird das Thema-Dropdown ausgeblendet und durch ein Kategorie-Dropdown ersetzt, das Kategorien der OTDB dynamisch lädt. Das Control Dock Grid wurde auf 6 Spalten erweitert.

Neue Funktionen:

• quelle_geaendert() – schaltet zwischen lokalem und OTDB-Modus um
• otdb_token_holen() – Session-Token holen, via sessionStorage gecacht
• lade_otdb_kategorien() – füllt das Kategorie-Dropdown per API
• lade_otdb_fragen() – ruft Fragen ab und übersetzt ins interne Format
• htmlDecode() – dekodiert HTML-Entities in OTDB-Antworttexten
• shuffle() – mischt Antwortoptionen zufällig

TTS-Sprache wird pro Quelle gewählt: Englisch (en-US) für OTDB, Deutsch (de-DE) für lokale Fragen.

7.2  scripts/quiz_tool.py – publish-Befehl

Datei: scripts/quiz_tool.py

Neuer Befehl publish: befüllt den out/-Unterordner mit allen webserver-relevanten Dateien (index.html, Anpassungen.html, td_*.htm, tq_*.htm, Sounddateien, media/). Entwicklungs-Artefakte verbleiben im Projektstamm.

Aufruf: python -B scripts\quiz_tool.py publish

7.3  publish-to-weberding.ps1 – out/-Workflow

Datei: publish-to-weberding.ps1

Publish-Quelle ist jetzt der out/-Unterordner statt des Projektstamms. Das Script bricht ab, wenn out/ fehlt. Zweistufiger Ablauf:

1. python -B scripts\quiz_tool.py publish → befüllt out/
2. .\publish-to-weberding.ps1 → kopiert nach weberding\quiz

7.4  README.md – Schreibweise

Datei: README.md

Tippfehler „Quatro" in zwei Überschriften und einem Befehlsbeispiel durch die korrekte Schreibweise „Quattro" ersetzt.

Ausgewählte Duo-Fragen wurden von true auf false umgestellt, um eine bessere Balance zwischen korrekten und falschen Aussagen zu erreichen. Die Quattro-Falschantworten im Auswahlverfahren-Katalog wurden inhaltlich überarbeitet.

8.1  Duo-Kataloge – false-Answer-Diversifizierung

Dateien: td_deutsch.htm, td_geschichte.htm, td_society.htm, td_auswahlverfahren.htm

Bei zuvor wahren Aussagen wurde der Aussagetext verfälscht und "antwort" auf false gesetzt.

Datei	Umgestellte Fragen
td_deutsch.htm	8 (Schreibung ß/ss, Wortarten, Satzanfang)
td_geschichte.htm	6 (Ritter, Burgen, Mittelalter, Martin Luther)
td_society.htm	6 (Begrüßung, Familie, Rathaus, Post, Demokratie)
td_auswahlverfahren.htm	5 (Schulnoten, Auswahlprüfung, Verfahren, Vorstellungsgespräch, Mathematik)

8.2  tq_auswahlverfahren.htm – Falschantworten überarbeitet

Datei: tq_auswahlverfahren.htm

Bei 4 Quattro-Fragen wurden Falschantworten durch realistischere Alternativen ersetzt, die näher am tatsächlichen LPA-Verfahren formuliert sind und damit schwerer durch Ausschlussverfahren zu erkennen sind. Eine Frageformulierung wurde präzisiert.

Vollständige Sprachprüfung (/quiz all check-lang) aller Kataloge: alle acht Duo-Kataloge ohne Befund, zwei Quattro-Kataloge mit insgesamt sechs Fehlern behoben.

9.1  tq_auswahlverfahren.htm – fünf Korrekturen

Datei: tq_auswahlverfahren.htm

Frage	Feld	Fehler	Korrektur
7	antwort[1]	„Eine gültigen Reisepass"	„Einen gültigen Reisepass"
11	antwort[0]	„über 30 Prozent"	„Über 30 Prozent"
11	antwort[1]	„ca. 10 bis 20 Prozent"	„Etwa 10 bis 20 Prozent"
17	antwort[1]	„Nach Auslösen den Senden-Buttons ist automatisch angemeldet."	„Nach Auslösen des Senden-Buttons ist man automatisch angemeldet."
19	frage	überflüssiges „die Bewerbung"	entfernt

9.2  tq_poolbillardregeln.htm – ein Platzhalter ersetzt

Datei: tq_poolbillardregeln.htm

Frage 3, antwort[2] enthielt Meta-Text aus dem Erstellungsprozess („Es gibt nur wahre und falsche Antworten."), der nie durch eine echte Falschantwort ersetzt wurde. Ersetzt durch: „Das Spiel endet, wenn zuerst die 9 versenkt wird."

Erweiterung des Publish-Workflows um einen GitHub-Schritt sowie Pflege der .gitignore.

10.1  SKILL.md – publish um Schritt 3 erweitert

Datei: SKILL.md

Der publish-Abschnitt hat jetzt drei statt zwei Schritte. Schritt 3 stagt alle Quelldateien (ohne out/ und .claude/), leitet eine kontextbasierte Commit-Message aus dem Konversationsverlauf ab und pusht auf origin master → https://github.com/chrisgitti/quiz.

10.2  .gitignore – out/ ausgeschlossen

Datei: .gitignore

out/ als Build-Artefakt ergänzt, damit das befüllte Publish-Verzeichnis nicht versehentlich ins Repository gelangt.

Realisierung des geplanten Echtzeit-Mehrspieler-Modus. Neues GitHub-Projekt quiz-server mit Node.js-WebSocket-Server sowie vollständige Integration in index.html.

11.1  quiz-server – Node.js + Socket.IO

Verzeichnis: C:\Daten\Projects\quiz-server

Neues Projekt mit server.js, package.json, .gitignore. Dependencies: express ^4.19.2, socket.io ^4.7.5. Deployment-Ziel: Render.com Free-Tier.

Socket.IO-Ereignisse (Client → Server):

Event	Payload	Beschreibung
raum_erstellen	{ modus, name }	Host erstellt Raum, erhält 6-stelligen Code
raum_beitreten	{ code, name }	Gast tritt bei
spiel_starten	{ fragen }	Host sendet Fragen (max. 50), Spiel beginnt
antwort_senden	{ antwort_index }	Antwort eines Spielers

Socket.IO-Ereignisse (Server → Client):

Event	Payload	Beschreibung
raum_erstellt	{ code }	Bestätigung Raumcode
raum_beigetreten	{ code, modus }	Bestätigung Beitritt
spieler_liste	Array	Live-Spielerliste bei jeder Änderung
frage	{ index, total, text, antworten, modus }	Nächste Frage synchron an alle
countdown	{ sekunden }	Sekundenweise Countdown (15 s pro Frage)
antwort_bestaetigt	{ korrekt, antwort_index }	Antwort-Rückmeldung an Einzelspieler
aufloesung	{ richtig_index, scores }	Richtige Antwort + Zwischenstand
spiel_ende	{ rangliste }	Endrangliste, Raum wird gelöscht
raum_geschlossen	{ meldung }	Host hat verlassen
fehler	{ meldung }	Fehlermeldung

Spielmechanik:

• Punkte: 1 000 Basispunkte + bis zu 500 Schnelligkeitsbonus (proportional zur Restzeit)
• Timer: 15 s pro Frage, serverseitig getaktet
• Auflösungspause: 3,5 s zwischen Fragen
• Räume ausschließlich im Arbeitsspeicher (keine Datenbank, keine Nutzerkonten)
• Rate-Limiting: max. 5 Räume/Min. pro IP; max. 8 Spieler pro Raum
• Inaktivitäts-Timeout: 30 Min.; CORS: nur weberding.de und localhost

11.2  index.html – Online-Option und Overlay-UI

Datei: index.html

Dritte Quellenoption „Online" im Quelle-Dropdown. Beim Auswählen öffnet sich ein modales Overlay (position:fixed, backdrop-filter:blur) mit sechs Panels:

Panel-ID	Beschreibung
op_start	Wahl: Raum erstellen oder beitreten
op_host_erstellen	Name eingeben, aktuelles Thema anzeigen, Raum erstellen
op_host_warten	Raumcode (groß, cyan), Live-Spielerliste, „Spiel starten"-Button
op_gast_beitreten	Code + Name eingeben, Beitreten-Button
op_gast_warten	Warteraum mit Live-Spielerliste
op_rangliste	Endrangliste mit Medaillen-Emojis 🥇🥈🥉

Neue HTML-Elemente: timer_row (Countdown-Balken in hero_quiz), live_score_panel (Zwischenstand nach jeder Frage), online_overlay (modales Overlay).

Neue JS-Funktionen: online_verbinden(), registriere_socket_events(), op_host_erstellen(), op_gast_beitreten(), op_spiel_starten(), starte_online_timer(), stoppe_online_timer(), online_beenden(), online_zeige_fehler().

Geänderte JS-Funktionen: starte_quiz(), quelle_geaendert(), pruefe_user_antwort().

Server-URL (ONLINE_SERVER_URL): localhost → http://localhost:3010; Produktion → https://quiz-server.onrender.com (nach Deployment anpassen).

Mehrere Verbesserungen am Online-Spielmodus (UI, Punkte-Transparenz, Neustart) sowie ein Bugfix beim Verlassen und Artikelkorrekturen im Duo-Katalog Auswahlverfahren.

12.1  Per-Spieler Antwort-Highlighting

Datei: index.html

Nach dem Senden einer Antwort im Online-Modus wurde der gewählte Button nicht hervorgehoben. Der antwort_bestaetigt-Event enthält jetzt antwort_index; der Client markiert den geklickten Button mit selected-right (grün) bzw. selected-wrong (rot) – identisch zum lokalen Modus.

12.2  Verlassen-Button während des Spiels

Datei: index.html

Unterhalb der Antwort-Buttons wurde ein neuer online_verlassen_bar mit „✕ Verlassen"-Button ergänzt. Er erscheint beim ersten frage-Event und ist für Host und Gast gleichermaßen sichtbar.

12.3  Bugfix: Online-Modus nach Host-Verlassen feststeckend

Datei: index.html

Wenn der Host das Spiel verließ, blieb sel_quelle auf „online" – erneutes Anklicken feuerte kein onchange-Event. Fix: online_beenden_still() setzt den Selektor jetzt immer auf 'lokal' zurück.

12.4  Punkte-Transparenz: Scoring sichtbar

Dateien: index.html, quiz-server/server.js

Der Server sendet punkte im antwort_bestaetigt-Event mit. Der Client zeigt nach richtiger Antwort z. B. „Richtig! +1.347 Pkt." im Feedback-Bereich. Im Endergebnis steht der Hinweis: „1.000 Basispunkte + bis zu 500 Schnelligkeitsbonus".

12.5  Live-Punkteanzeige im Score-Pill

Datei: index.html

Das Score-Pill wechselt beim Spielstart das Label von „Richtig" auf „Punkte" und zeigt den eigenen akkumulierten Gesamtpunktestand live. Bei Spielende wird es zurückgesetzt.

12.6  Timer-Skala mit Bonus-Werten

Datei: index.html

Unterhalb des Countdown-Balkens wurde eine dreistufige Skala ergänzt: 1.000 Pkt. (links, Zeit abgelaufen) – 1.250 Pkt. (Mitte) – 1.500 Pkt. (rechts, volle Zeit). Nur im Online-Modus sichtbar.

12.7  Neustart-Funktion nach Spielende

Dateien: index.html, quiz-server/server.js

Im Endergebnis-Panel erscheint neben „Beenden" ein „Nochmal"-Button. Der Server löscht den Raum nach Spielende nicht mehr, sondern setzt ihn in den Wartezustand zurück. Host und Gast kehren in ihre jeweiligen Warteräume zurück – gleicher Raumcode, Scores genullt.

12.8  LPA-Artikel-Korrekturen in Duo-Katalog

Datei: td_auswahlverfahren.htm

„LPA" ist maskulin (der LPA). Sechs Stellen mit falschem Artikel wurden korrigiert:

Vorher	Nachher
„Das LPA erstellt …"	„Der LPA erstellt …"
„Das LPA stellt … ein."	„Der LPA stellt … ein."
„… entscheidet … das LPA."	„… entscheidet … der LPA."
„Das LPA führt …"	„Der LPA führt …"
„… über das LPA an."	„… über den LPA an."
„Das LPA ist …"	„Der LPA ist …"

Komposita wie „das LPA-Auswahlverfahren" (Genus von „Auswahlverfahren" = sächlich) bleiben unverändert.

Die beiden Poolbillard-Kataloge wurden umbenannt und mit allgemeinen Billardfragen aus einer externen Quelldatei ergänzt.

13.1  Katalogdateien umbenannt

Dateien: td_poolbillardregeln.htm → td_poolbillard.htm, tq_poolbillardregeln.htm → tq_poolbillard.htm

Umbenennung per git mv für klarere, kürzere Bezeichnung ohne redundantes „-regeln".

13.2  Neue Billardfragen aus externer Quelldatei ergänzt

Dateien: td_poolbillard.htm, tq_poolbillard.htm

17 allgemeine Billardfragen (Queue-Bezeichnung, Tischlänge, Kugelfarben und -nummern, Shot-Typen, Spieltechniken usw.) wurden in beide Kataloge integriert.

Katalog	Vorher	Nachher	Neue Einträge
tq_poolbillard.htm	30 Fragen	47 Fragen	+17 Quattro-Fragen
td_poolbillard.htm	100 Fragen	134 Fragen	+34 Duo-Aussagen

Für den Duo-Katalog wurde pro Quattro-Frage je eine wahre Aussage (korrekte Antwort) und eine falsche Aussage (eine der Fehlantworten) erzeugt.