Quelltext der Seite Diskussion:Arduino-Quiz mit ESP32 und Smartphones

Arduino-Quiz mit ESP32 und Smartphones



= [[Arduino-Quiz mit ESP32 und Smartphones]] =

'''Beste Lösung:''' Ein [[ESP32]] steuert das gesamte Quiz. Er erstellt ein eigenes [[WLAN]], auf das sich zwei [[Smartphone|Smartphones]] verbinden. Die Spieler:innen öffnen eine lokale Webseite im [[Browser]], sehen dort die [[Quizfrage]], vier [[Antwortmöglichkeit|Antwortmöglichkeiten]], eine farbige Rückmeldung und den [[Punktestand]].

= [[Grundidee]] =

# Der [[ESP32]] erzeugt ein eigenes WLAN, zum Beispiel '''Quiz-Spiel'''.
# Zwei Spieler:innen verbinden ihre [[Smartphone|Handys]] mit diesem WLAN.
# Beide öffnen im Browser die Adresse '''http://192.168.4.1'''.
# Auf dem Handy erscheint ein einfaches [[Quiz]] mit vier Antwortbuttons.
# Bei einer richtigen Antwort erscheint grün.
# Bei einer falschen Antwort erscheint rot.
# Der [[ESP32]] zählt die Punkte.
# Die Lehrkraft oder die Gruppe kann das Quiz über den Code mit eigenen Fragen füllen.

= [[Warum ESP32 statt Arduino Uno?]] =

# Ein klassischer [[Arduino Uno]] hat kein eingebautes WLAN.
# Der [[ESP32]] kann selbst ein WLAN erzeugen.
# Der [[ESP32]] kann gleichzeitig als kleiner [[Webserver]] arbeiten.
# Die Handys brauchen keine App, sondern nur einen Browser.
# Das Projekt funktioniert auch ohne Internet.
# Der [[ESP32]] ist günstig, leistungsfähig und gut für Schulprojekte geeignet.

= [[Mindestvoraussetzungen]] =

# Ein [[ESP32]]-Dev-Board.
# Zwei Smartphones mit WLAN und Browser.
# Ein Computer oder Laptop zum Programmieren.
# Ein USB-Kabel passend zum ESP32.
# Die [[Arduino IDE]] oder eine vergleichbare Programmierumgebung.
# Grundkenntnisse im Umgang mit Dateien, USB-Anschluss und Browser.
# Eine Stromversorgung für den ESP32, zum Beispiel Laptop, USB-Netzteil oder Powerbank.
# Optional: LEDs, Buzzer, Display oder Gehäuse für eine schönere Präsentation.

= [[Einkaufsliste]] =

{| class="wikitable" style="width:100%; background:#f4fff4;"
! Material
! Menge
! Zweck
! Hinweis
|-
| [[ESP32]] Dev Board
| 1 pro Quizstation
| Zentrale Steuerung, WLAN und Webserver
| Am besten ESP32 DevKit V1 oder vergleichbares Board
|-
| USB-Kabel
| 1
| Programmieren und Stromversorgung
| Auf passenden Anschluss achten: Micro-USB oder USB-C
|-
| Powerbank
| 1
| Mobiler Betrieb
| Alternativ Laptop oder USB-Netzteil
|-
| Smartphones
| 2
| Eingabegeräte für Spieler:innen
| Keine App nötig
|-
| Laptop oder PC
| 1
| Programmierung
| Mit installierter Arduino IDE
|-
| Steckbrett
| optional
| Erweiterungen mit LEDs oder Buzzer
| Für Grundversion nicht nötig
|-
| LEDs rot/grün
| optional
| Sichtbare Rückmeldung am Spieltisch
| Mit passenden Widerständen verwenden
|-
| Buzzer
| optional
| Ton bei richtiger oder falscher Antwort
| Für Präsentationen motivierend
|-
| kleines Gehäuse oder Box
| optional
| Schutz und Präsentation
| Karton, 3D-Druck oder Holz möglich
|}

= [[Vorbereitung durch die Lehrkraft]] =

# Vorab prüfen, ob die verwendeten [[Smartphone|Smartphones]] sich mit einem WLAN ohne Internet verbinden dürfen.
# Vorab testen, ob die Seite '''http://192.168.4.1''' auf den Geräten geöffnet werden kann.
# Den [[ESP32]] mindestens einmal vor dem Projekttag erfolgreich programmieren.
# Die [[Arduino IDE]] auf den Schulcomputern installieren.
# In der Arduino IDE die Unterstützung für [[ESP32]]-Boards einrichten.
# Passende USB-Treiber prüfen, falls der ESP32 nicht erkannt wird.
# Einen Beispielcode bereithalten, der sicher funktioniert.
# Ersatz-USB-Kabel einplanen, weil viele Lade-Kabel keine Daten übertragen.
# Powerbanks oder Steckdosen vorbereiten.
# Regeln für die Nutzung von Smartphones festlegen.
# Klären, ob Schüler:innen eigene Geräte verwenden dürfen.
# Vorher entscheiden, ob das Quiz fachlich vorgegeben ist oder von den Schüler:innen selbst entwickelt wird.
# Einfache Beispiel-Fragen vorbereiten.
# Gruppenrollen festlegen: Programmierung, Fragenentwicklung, Design, Test, Präsentation.
# Zeit für Fehlersuche einplanen.
# Einen Ersatz-ESP32 bereithalten, falls ein Board nicht funktioniert.

= [[Wichtige technische Entscheidungen]] =

# '''Variante 1: Beide Spieler:innen dürfen antworten.'''
# Diese Variante ist einfacher und für den Einstieg am besten geeignet.
# Jede richtige Antwort gibt einen Punkt.
# Beide sehen den Punktestand.

# '''Variante 2: Buzzer-Prinzip.'''
# Nur die erste Antwort zählt.
# Diese Variante ist spannender, aber schwieriger zu programmieren.
# Sie eignet sich eher als Erweiterung.

# '''Empfehlung:'''
# Für den ersten Projektdurchlauf sollte Variante 1 gewählt werden.
# Danach kann das Spiel mit Buzzer-Regel, Zeitlimit oder Highscore erweitert werden.

= [[Projektablauf Schritt für Schritt]] =

== [[Schritt 1: Ziel festlegen]] ==

# Entscheide, welches Thema das Quiz haben soll.
# Beispiele:
# [[Medienbildung]]
# [[Mathematik]]
# [[Ernährung]]
# [[Nachhaltigkeit]]
# [[Englisch]]
# [[Schulwissen]]
# Lege fest, wie viele Fragen das Quiz enthalten soll.
# Für den Anfang reichen 5 bis 10 Fragen.

== [[Schritt 2: Material vorbereiten]] ==

# ESP32 bereitlegen.
# USB-Kabel testen.
# Laptop starten.
# Arduino IDE öffnen.
# Smartphones bereitlegen.
# Stromversorgung prüfen.
# Falls mehrere Gruppen arbeiten, jeder Gruppe ein Materialset geben.

== [[Schritt 3: Arduino IDE einrichten]] ==

# Arduino IDE öffnen.
# Unter '''Datei > Voreinstellungen''' die Boardverwalter-URL für ESP32 eintragen.
# Danach unter '''Werkzeuge > Board > Boardverwalter''' nach '''ESP32''' suchen.
# ESP32-Paket installieren.
# Unter '''Werkzeuge > Board''' das passende ESP32-Board auswählen.
# Den richtigen USB-Port auswählen.
# Einen kurzen Testcode hochladen, zum Beispiel '''Blink'''.
# Wenn der Upload funktioniert, ist die technische Grundlage bereit.

== [[Schritt 4: Grundcode hochladen]] ==

# Den vorbereiteten Quiz-Code in die Arduino IDE kopieren.
# WLAN-Name und Passwort festlegen.
# Beispiel:
# WLAN: '''Quiz-Spiel'''
# Passwort: '''12345678'''
# Code auf den ESP32 hochladen.
# Seriellen Monitor öffnen.
# Prüfen, ob der ESP32 gestartet ist.

== [[Schritt 5: Handys verbinden]] ==

# Auf beiden Smartphones WLAN öffnen.
# Mit dem WLAN '''Quiz-Spiel''' verbinden.
# Passwort eingeben.
# Warnung '''Kein Internet''' ignorieren.
# Im Browser die Adresse '''http://192.168.4.1''' öffnen.
# Spieler:in 1 öffnet: '''http://192.168.4.1/?player=1'''
# Spieler:in 2 öffnet: '''http://192.168.4.1/?player=2'''

== [[Schritt 6: Quiz testen]] ==

# Beide Spieler:innen beantworten eine Frage.
# Prüfen, ob grün bei richtiger Antwort erscheint.
# Prüfen, ob rot bei falscher Antwort erscheint.
# Prüfen, ob der Punktestand steigt.
# Mehrere Fragen durchspielen.
# Fehler notieren.

== [[Schritt 7: Eigene Fragen ergänzen]] ==

# Fragen im Code austauschen.
# Für jede Frage vier Antwortmöglichkeiten formulieren.
# Die richtige Antwort als Zahl speichern.
# Wichtig:
# Antwort A hat die Zahl 0.
# Antwort B hat die Zahl 1.
# Antwort C hat die Zahl 2.
# Antwort D hat die Zahl 3.

== [[Schritt 8: Gestaltung verbessern]] ==

# Überschrift anpassen.
# Buttons größer machen.
# Farben verbessern.
# Punktestand gut sichtbar anzeigen.
# Optional ein Logo oder einen Projektnamen ergänzen.
# Darauf achten, dass die Webseite auf kleinen Handybildschirmen gut lesbar bleibt.

== [[Schritt 9: Spielregeln festlegen]] ==

# Beispiel-Regeln:
# Jede richtige Antwort gibt einen Punkt.
# Falsche Antworten geben keinen Punkt.
# Nach jeder Antwort kommt die nächste Frage.
# Am Ende gewinnt die Person mit den meisten Punkten.
# Bei Gleichstand gibt es eine Entscheidungsfrage.

== [[Schritt 10: Präsentation vorbereiten]] ==

# Kurz erklären, was ein [[ESP32]] ist.
# Zeigen, dass der ESP32 ein eigenes WLAN erzeugt.
# Erklären, dass die Handys nur Browsergeräte sind.
# Quiz live vorspielen.
# Schwierigkeiten und Lösungen vorstellen.
# Mögliche Erweiterungen nennen.

= [[Programmieren mit KI]] =

# Die Schüler:innen sollten nicht einfach nur fertigen Code kopieren.
# Besser ist ein schrittweises Arbeiten mit [[Künstliche Intelligenz|KI]].
# Die KI kann Code erklären, vereinfachen, Fehler suchen und Erweiterungen vorschlagen.
# Die Schüler:innen sollten jeden neuen Codeabschnitt testen.
# Nach jeder Änderung sollte geprüft werden, ob das Spiel noch funktioniert.

= [[Gute KI-Prompts für das Projekt]] =

== [[Prompt 1: Grundcode erstellen]] ==

Erstelle einen einfachen Arduino-Code für einen ESP32. Der ESP32 soll ein eigenes WLAN mit dem Namen "Quiz-Spiel" erstellen. Zwei Smartphones sollen sich verbinden können. Über den Browser soll eine Webseite mit einer Quizfrage, vier Antwortbuttons und einem Punktestand angezeigt werden. Es gibt zwei Spieler: player=1 und player=2. Richtige Antworten sollen grün angezeigt werden, falsche Antworten rot. Bitte schreibe den Code einfach und kommentiere ihn für Anfänger:innen.

== [[Prompt 2: Code erklären]] ==

Erkläre mir diesen ESP32-Quiz-Code so, dass Schüler:innen der Klasse 7 bis 9 verstehen, was passiert. Erkläre besonders WLAN, Webserver, HTML, Antwortbuttons, Punktestand und richtige Antwort.

== [[Prompt 3: Fehler finden]] ==

Ich bekomme beim Hochladen auf den ESP32 diese Fehlermeldung: [Fehlermeldung einfügen]. Erkläre mir die Ursache einfach und gib mir konkrete Schritte zur Lösung.

== [[Prompt 4: Fragen ergänzen]] ==

Ergänze 10 Quizfragen zum Thema [[Medienbildung]]. Jede Frage soll vier Antwortmöglichkeiten haben. Gib zusätzlich an, welche Antwort richtig ist. Formatiere die Fragen so, dass ich sie leicht in einen Arduino-Code einfügen kann.

== [[Prompt 5: Design verbessern]] ==

Verbessere das HTML-Design dieser ESP32-Webseite. Die Buttons sollen groß und gut auf Smartphones bedienbar sein. Der Punktestand soll klar sichtbar sein. Die Seite soll modern, aber einfach bleiben.

== [[Prompt 6: Erweiterung mit Buzzer-Regel]] ==

Erweitere den Code so, dass bei jeder Frage nur die erste abgegebene Antwort zählt. Danach soll die Frage für beide Spieler:innen gesperrt sein, bis die nächste Frage startet.

= [[Minimaler Beispielcode]] =

<syntaxhighlight lang="cpp">
#include <WiFi.h>
#include <WebServer.h>

const char* ssid = "Quiz-Spiel";
const char* password = "12345678";

WebServer server(80);

int score1 = 0;
int score2 = 0;
int currentQuestion = 0;

String questions[] = {
  "Was ist ein ESP32?",
  "Was bedeutet HTML?",
  "Wofuer braucht man WLAN?"
};

String answers[][4] = {
  {"Ein Mikrocontroller mit WLAN", "Ein Bildschirm", "Ein Lautsprecher", "Ein Akku"},
  {"Eine Sprache fuer Webseiten", "Ein Sensor", "Ein Motor", "Ein Passwort"},
  {"Zur drahtlosen Verbindung", "Zum Schneiden von Holz", "Zum Drucken", "Zum Loeten"}
};

int correctAnswers[] = {0, 0, 0};

int totalQuestions = 3;

void handleRoot() {
  String player = server.arg("player");

  if (player == "") {
    player = "1";
  }

  String html = "";
  html += "<!DOCTYPE html><html><head>";
  html += "<meta name='viewport' content='width=device-width, initial-scale=1'>";
  html += "<style>";
  html += "body{font-family:Arial;text-align:center;background:#f3f7f3;padding:20px;}";
  html += ".card{background:white;border-radius:20px;padding:20px;box-shadow:0 0 10px #999;}";
  html += "button{font-size:22px;margin:10px;padding:15px;width:90%;border-radius:15px;border:0;background:#e0e0e0;}";
  html += ".score{font-size:20px;margin-top:20px;}";
  html += "</style></head><body>";

  html += "<div class='card'>";
  html += "<h1>ESP32 Quiz</h1>";
  html += "<h2>Spieler " + player + "</h2>";
  html += "<h3>" + questions[currentQuestion] + "</h3>";

  for (int i = 0; i < 4; i++) {
    html += "<form action='/answer' method='GET'>";
    html += "<input type='hidden' name='player' value='" + player + "'>";
    html += "<input type='hidden' name='choice' value='" + String(i) + "'>";
    html += "<button>" + answers[currentQuestion][i] + "</button>";
    html += "</form>";
  }

  html += "<div class='score'>";
  html += "<p>Punkte Spieler 1: " + String(score1) + "</p>";
  html += "<p>Punkte Spieler 2: " + String(score2) + "</p>";
  html += "</div>";

  html += "</div></body></html>";

  server.send(200, "text/html", html);
}

void handleAnswer() {
  int player = server.arg("player").toInt();
  int choice = server.arg("choice").toInt();

  bool correct = choice == correctAnswers[currentQuestion];

  if (correct) {
    if (player == 1) {
      score1++;
    }
    if (player == 2) {
      score2++;
    }
  }

  String color = correct ? "#2ecc71" : "#e74c3c";
  String text = correct ? "Richtig!" : "Falsch!";

  currentQuestion++;
  if (currentQuestion >= totalQuestions) {
    currentQuestion = 0;
  }

  String html = "";
  html += "<!DOCTYPE html><html><head>";
  html += "<meta name='viewport' content='width=device-width, initial-scale=1'>";
  html += "<style>";
  html += "body{font-family:Arial;text-align:center;background:" + color + ";color:white;padding:40px;}";
  html += "a{display:inline-block;margin-top:30px;color:white;font-size:24px;text-decoration:none;background:rgba(0,0,0,0.2);padding:15px;border-radius:15px;}";
  html += "</style></head><body>";

  html += "<h1>" + text + "</h1>";
  html += "<h2>Punkte Spieler 1: " + String(score1) + "</h2>";
  html += "<h2>Punkte Spieler 2: " + String(score2) + "</h2>";
  html += "<a href='/?player=" + String(player) + "'>Weiter</a>";

  html += "</body></html>";

  server.send(200, "text/html", html);
}

void setup() {
  Serial.begin(115200);

  WiFi.softAP(ssid, password);

  server.on("/", handleRoot);
  server.on("/answer", handleAnswer);

  server.begin();

  Serial.println("Quiz gestartet");
  Serial.println("WLAN: Quiz-Spiel");
  Serial.println("Passwort: 12345678");
  Serial.println("Adresse: http://192.168.4.1");
}

void loop() {
  server.handleClient();
}
</syntaxhighlight>

= [[Typische Probleme und Lösungen]] =

{| class="wikitable" style="width:100%; background:#fffdf0;"
! Problem
! Mögliche Ursache
! Lösung
|-
| ESP32 wird nicht erkannt
| Falsches Kabel oder fehlender Treiber
| Anderes USB-Kabel testen, Treiber installieren, Port prüfen
|-
| Hochladen funktioniert nicht
| Falsches Board oder falscher Port
| Board und Port in der Arduino IDE kontrollieren
|-
| Handy verbindet sich nicht
| WLAN-Passwort falsch oder Signalproblem
| Passwort prüfen, Abstand verringern, ESP32 neu starten
|-
| Browser zeigt nichts an
| Falsche Adresse
| '''http://192.168.4.1''' eingeben
|-
| Handy meldet kein Internet
| Normal, weil ESP32 nur lokales WLAN erzeugt
| Meldung ignorieren und verbunden bleiben
|-
| Punkte zählen falsch
| Spieler-ID fehlt
| Adresse mit '''?player=1''' oder '''?player=2''' öffnen
|-
| Umlaute werden komisch angezeigt
| Zeichencodierung
| Umlaute vermeiden oder HTML-Zeichencodierung ergänzen
|}

= [[Differenzierung]] =

# Anfänger:innen verändern nur Fragen, Antworten und Farben.
# Fortgeschrittene gestalten die Webseite schöner.
# Stärkere Schüler:innen ergänzen Zeitlimit, Buzzer-Regel oder Highscore.
# Sehr starke Schüler:innen bauen eine Admin-Seite für die Lehrkraft.
# Kreative Schüler:innen bauen ein Gehäuse, Logo oder Präsentationskonzept.
# Technisch interessierte Schüler:innen ergänzen LEDs, Buzzer oder Display.

= [[Mögliche Erweiterungen]] =

# [[Buzzer]]-Modus: Nur die erste Antwort zählt.
# [[Zeitlimit]] pro Frage.
# [[Highscore]] am Ende.
# Reset-Button für neues Spiel.
# Admin-Seite für die Lehrkraft.
# Zufällige Reihenfolge der Fragen.
# Zufällige Reihenfolge der Antworten.
# OLED-Display am ESP32.
# LED-Streifen für grüne und rote Rückmeldung.
# Soundeffekte mit Buzzer.
# QR-Code zur Spielseite.
# Mehr als zwei Spieler:innen.
# Teammodus.
# Fachquiz für verschiedene Unterrichtsfächer.

= [[Empfohlener Zeitplan für einen Projekttag]] =

{| class="wikitable" style="width:100%; background:#f4f8ff;"
! Phase
! Zeit
! Inhalt
! Ergebnis
|-
| Einstieg
| 20 Minuten
| Ziel erklären, ESP32 zeigen, Spielidee vorstellen
| Schüler:innen verstehen das Projekt
|-
| Technikstart
| 30 Minuten
| Arduino IDE, Board, Port, erster Upload
| ESP32 ist programmierbar
|-
| WLAN-Test
| 30 Minuten
| ESP32-WLAN starten, Handy verbinden, Webseite öffnen
| Verbindung funktioniert
|-
| Quizlogik
| 45 Minuten
| Fragen, Antworten, Punkte testen
| Spielbare Grundversion
|-
| Eigene Inhalte
| 45 Minuten
| Fragen erstellen und Code anpassen
| Eigenes Quiz
|-
| Gestaltung
| 30 Minuten
| Farben, Titel, Buttons, Design
| Präsentierbare Version
|-
| Testphase
| 30 Minuten
| Gegenseitig spielen und Fehler notieren
| Verbesserte Version
|-
| Präsentation
| 30 Minuten
| Gruppen stellen ihr Quiz vor
| Projektabschluss
|}

= [[Empfohlene Rollen in der Gruppe]] =

# '''Programmierer:in:''' Arbeitet am ESP32-Code.
# '''Quiz-Redaktion:''' Formuliert gute Fragen und Antwortmöglichkeiten.
# '''Designer:in:''' Verbessert Farben, Texte und Bedienbarkeit.
# '''Tester:in:''' Prüft das Spiel auf Fehler.
# '''Präsentator:in:''' Erklärt das Projekt am Ende.

= [[Bewertungskriterien]] =

# Das Quiz funktioniert auf zwei Smartphones.
# Die Fragen sind verständlich formuliert.
# Es gibt vier Antwortmöglichkeiten pro Frage.
# Richtige und falsche Antworten werden farbig angezeigt.
# Der Punktestand wird korrekt gezählt.
# Die Webseite ist auf dem Handy gut bedienbar.
# Die Gruppe kann erklären, wie ESP32, WLAN und Webseite zusammenarbeiten.
# Die Gruppe hat eigene Ideen eingebaut.
# Die Präsentation ist verständlich.

= [[Fazit]] =

# Die beste Lösung ist ein [[ESP32]] als WLAN-fähige Quiz-Zentrale.
# Die Smartphones dienen als einfache Eingabegeräte über den Browser.
# Es wird keine App benötigt.
# Das Projekt verbindet [[Programmieren]], [[Webdesign]], [[Elektronik]], [[Medienbildung]] und [[Künstliche Intelligenz]].
# Für Schüler:innen ist das Projekt motivierend, weil sie am Ende ein echtes, spielbares Produkt präsentieren können.
# Für die Lehrkraft ist wichtig, die technische Grundfunktion vorher einmal vollständig zu testen.

== USB ODER? ==

{{T}}



= [[Erweitertes ESP32-Quiz: Mehrere Spiele, 10 Fragen, 10 Antworten, Schnelligkeitsmodus]] =

'''Beste realistische Lösung:'''  
Das Spiel sollte weiterhin über ein lokales [[WLAN]] des [[ESP32]] laufen. Die Smartphones verbinden sich mit dem ESP32-WLAN und spielen im [[Browser]]. Zusätzlich können [[Bluetooth]] und [[USB-C]] als optionale Erweiterungen oder Login-Varianten eingeplant werden, aber nicht als Hauptlösung.

= [[Wichtige technische Entscheidung]] =

# '''WLAN über ESP32 ist die beste Hauptlösung.'''
# Beide Smartphones können gleichzeitig dieselbe Frage sehen.
# Der ESP32 kann die Antworten zeitlich vergleichen.
# Die schnellere richtige Antwort bekommt den Punkt.
# Auf dem Smartphone können Fach, Schwierigkeitsgrad und Quiz ausgewählt werden.
# Neue Quizsets können einfach im Code ergänzt werden.

= [[Warum Bluetooth und USB-C nicht die Hauptlösung sein sollten]] =

== [[Bluetooth]] ==

# Bluetooth mit Smartphones ist deutlich komplizierter als WLAN.
# Man braucht meist eine spezielle App oder eine Web-Bluetooth-Lösung.
# Web-Bluetooth funktioniert nicht auf allen Smartphones gleich gut.
# Für Schulprojekte ist Bluetooth als Hauptzugang zu fehleranfällig.
# Sinnvoll wäre Bluetooth eher als spätere Erweiterung.

== [[USB-C]] ==

# USB-C-Verbindung zwischen Smartphone und ESP32 ist technisch schwierig.
# Das Smartphone müsste den ESP32 als serielles Gerät erkennen.
# Viele Smartphones erlauben das nicht ohne zusätzliche App.
# iPhones sind besonders problematisch.
# Für Schüler:innen ist USB-C als Login-Weg nicht empfehlenswert.
# USB-C sollte besser nur für Stromversorgung oder Programmierung genutzt werden.

= [[Empfohlene Projektlösung]] =

# Der [[ESP32]] erstellt ein eigenes WLAN.
# Beide Spieler:innen verbinden sich mit diesem WLAN.
# Beide öffnen im Browser dieselbe lokale Spielseite.
# Spieler:in 1 meldet sich als Spieler 1 an.
# Spieler:in 2 meldet sich als Spieler 2 an.
# Ein Spieler oder die Lehrkraft wählt:
# Fach
# Schwierigkeitsgrad
# konkretes Quiz
# Danach bekommen beide gleichzeitig dieselbe Frage angezeigt.
# Es gibt 10 Fragen pro Quiz.
# Jede Frage hat 10 Antwortmöglichkeiten.
# Die schnellste richtige Antwort bekommt den Punkt.
# Falsche Antworten können entweder 0 Punkte geben oder die Person für diese Frage sperren.
# Nach 10 Fragen erscheint der Endstand.

= [[Spielstruktur]] =

== [[Startseite]] ==

# Spielername eingeben.
# Spielerrolle wählen: Spieler 1 oder Spieler 2.
# Verbindung zum Spiel herstellen.

== [[Auswahlseite]] ==

# Fach wählen.
# Schwierigkeitsgrad wählen.
# Quiz wählen.
# Spiel starten.

== [[Spielseite]] ==

# Beide Spieler:innen sehen dieselbe Frage.
# Beide sehen 10 Antwortbuttons.
# Nach dem Start läuft die Reaktionszeit.
# Wer zuerst richtig antwortet, bekommt den Punkt.
# Beide sehen die Rückmeldung:
# Grün: richtige Antwort
# Rot: falsche Antwort
# Gelb: zu langsam
# Danach geht es zur nächsten Frage.

== [[Endseite]] ==

# Punktestand Spieler 1
# Punktestand Spieler 2
# Sieger:in
# Button: Neues Spiel

= [[Mindestvoraussetzungen]] =

# [[ESP32]] oder besser [[ESP32-S3]].
# Zwei Smartphones mit WLAN und Browser.
# Ein Laptop mit [[Arduino IDE]].
# USB-C- oder Micro-USB-Kabel für den ESP32.
# Stromversorgung über Laptop, Netzteil oder Powerbank.
# Grundkenntnisse in Arduino-Code.
# Grundkenntnisse in HTML sind hilfreich.
# Vorbereitete Quizfragen im Code.

= [[Empfohlene Hardware]] =

{| class="wikitable" style="width:100%; background:#f4fff4;"
! Material
! Menge
! Empfehlung
! Zweck
|-
| [[ESP32-S3]] Dev Board
| 1
| Besser als klassischer ESP32, mehr Speicher
| Quiz-Zentrale, WLAN, Webserver
|-
| USB-C-Kabel
| 1 bis 2
| Datenkabel, nicht nur Ladekabel
| Programmierung und Strom
|-
| Powerbank
| 1
| 5V-Ausgang
| Mobiler Betrieb
|-
| Smartphones
| 2
| Android oder iPhone mit Browser
| Spielergeräte
|-
| Laptop
| 1
| Windows, macOS oder Linux
| Programmierung
|-
| OLED-Display
| optional
| 0,96 Zoll I2C
| Anzeige am Spielgerät
|-
| Buzzer
| optional
| einfacher Piezo-Buzzer
| Tonsignal
|-
| LED rot/grün
| optional
| mit Widerständen
| sichtbare Rückmeldung
|}

= [[Einkaufsliste für eine Gruppe]] =

# 1x ESP32-S3 Dev Board
# 1x passendes USB-C-Datenkabel
# 1x Powerbank oder USB-Netzteil
# 2x Smartphone
# Optional: 1x Buzzer
# Optional: 1x rote LED
# Optional: 1x grüne LED
# Optional: 2x Widerstand 220 Ohm
# Optional: kleine Box oder Gehäuse

= [[Wichtige Vorüberlegung für die Lehrkraft]] =

# Bluetooth und USB-C nicht als Pflichtzugang planen.
# WLAN-Browserlösung vorher vollständig testen.
# Prüfen, ob Schulhandys oder Schülerhandys sich mit einem WLAN ohne Internet verbinden dürfen.
# Ersatzkabel bereithalten.
# Arduino IDE mit ESP32-Unterstützung vorher installieren.
# Beispielcode vor dem Projekttag einmal erfolgreich hochladen.
# Entscheidung treffen, ob Schüler:innen eigene Quizsets schreiben oder fertige Quizsets bearbeiten.
# Vorher festlegen, ob ein Spieler oder nur die Lehrkraft das Quiz auswählen darf.
# Bei jüngeren Schüler:innen besser vorbereitete Quiz-Vorlagen nutzen.
# Bei stärkeren Schüler:innen eigene Fächer, Schwierigkeitsgrade und Quizsets ergänzen lassen.

= [[Datenstruktur für einfache Erweiterbarkeit]] =

'''Ziel:''' Neue Quizsets sollen möglichst einfach ergänzt werden.

Ein Quiz besteht immer aus:

# Fach
# Schwierigkeitsgrad
# Quizname
# 10 Fragen
# pro Frage 10 Antwortmöglichkeiten
# Nummer der richtigen Antwort

= [[Beispiel: Quizstruktur]] =

<syntaxhighlight lang="cpp">
struct Question {
  const char* question;
  const char* answers[10];
  int correct;
};

struct Quiz {
  const char* subject;
  const char* difficulty;
  const char* title;
  Question questions[10];
};
</syntaxhighlight>

= [[Beispiel: Zusatzquiz Multiplikation ergänzen]] =

<syntaxhighlight lang="cpp">
Quiz multiplicationEasy = {
  "Mathematik",
  "leicht",
  "Multiplikation bis 10",
  {
    {
      "Was ist 2 x 3?",
      {"3", "4", "5", "6", "7", "8", "9", "10", "11", "12"},
      3
    },
    {
      "Was ist 4 x 5?",
      {"10", "12", "15", "16", "18", "20", "22", "24", "25", "30"},
      5
    },
    {
      "Was ist 6 x 6?",
      {"12", "18", "24", "30", "32", "34", "36", "40", "42", "48"},
      6
    },
    {
      "Was ist 7 x 8?",
      {"42", "48", "49", "54", "56", "58", "60", "64", "70", "72"},
      4
    },
    {
      "Was ist 9 x 3?",
      {"18", "21", "24", "27", "30", "33", "36", "39", "42", "45"},
      3
    },
    {
      "Was ist 5 x 5?",
      {"10", "15", "20", "25", "30", "35", "40", "45", "50", "55"},
      3
    },
    {
      "Was ist 8 x 2?",
      {"8", "10", "12", "14", "16", "18", "20", "22", "24", "26"},
      4
    },
    {
      "Was ist 10 x 7?",
      {"17", "27", "37", "47", "57", "67", "70", "77", "87", "97"},
      6
    },
    {
      "Was ist 3 x 9?",
      {"12", "15", "18", "21", "24", "27", "30", "33", "36", "39"},
      5
    },
    {
      "Was ist 4 x 4?",
      {"4", "8", "12", "16", "20", "24", "28", "32", "36", "40"},
      3
    }
  }
};
</syntaxhighlight>

= [[Beispiel: Zusatzquiz Hauptstädte ergänzen]] =

<syntaxhighlight lang="cpp">
Quiz capitalsEasy = {
  "Geografie",
  "leicht",
  "Hauptstaedte Europa",
  {
    {
      "Was ist die Hauptstadt von Deutschland?",
      {"Paris", "Berlin", "Madrid", "Rom", "Wien", "Bern", "Prag", "Oslo", "London", "Athen"},
      1
    },
    {
      "Was ist die Hauptstadt von Frankreich?",
      {"Berlin", "Paris", "Rom", "Madrid", "Wien", "Prag", "Bern", "Dublin", "Oslo", "Lissabon"},
      1
    },
    {
      "Was ist die Hauptstadt von Italien?",
      {"Mailand", "Rom", "Neapel", "Turin", "Venedig", "Florenz", "Paris", "Madrid", "Athen", "Wien"},
      1
    },
    {
      "Was ist die Hauptstadt von Spanien?",
      {"Barcelona", "Madrid", "Sevilla", "Valencia", "Lissabon", "Rom", "Paris", "Berlin", "Wien", "Bern"},
      1
    },
    {
      "Was ist die Hauptstadt von Österreich?",
      {"Graz", "Linz", "Salzburg", "Wien", "Bern", "Berlin", "Prag", "Rom", "Paris", "Madrid"},
      3
    },
    {
      "Was ist die Hauptstadt der Schweiz?",
      {"Zuerich", "Genf", "Basel", "Bern", "Lausanne", "Wien", "Berlin", "Paris", "Rom", "Prag"},
      3
    },
    {
      "Was ist die Hauptstadt von Tschechien?",
      {"Brno", "Prag", "Wien", "Berlin", "Budapest", "Krakau", "Rom", "Paris", "Bern", "Madrid"},
      1
    },
    {
      "Was ist die Hauptstadt von Norwegen?",
      {"Stockholm", "Oslo", "Helsinki", "Kopenhagen", "Reykjavik", "Dublin", "London", "Paris", "Berlin", "Wien"},
      1
    },
    {
      "Was ist die Hauptstadt von Griechenland?",
      {"Athen", "Rom", "Sofia", "Tirana", "Madrid", "Paris", "Berlin", "Wien", "Bern", "Prag"},
      0
    },
    {
      "Was ist die Hauptstadt von Portugal?",
      {"Madrid", "Porto", "Lissabon", "Rom", "Paris", "Berlin", "Wien", "Bern", "Prag", "Oslo"},
      2
    }
  }
};
</syntaxhighlight>

= [[Wie werden mehrere Quizsets verwaltet?]] =

# Alle Quizsets werden in einer Liste gespeichert.
# Die Webseite liest diese Liste aus.
# Auf dem Smartphone erscheinen Auswahlfelder.
# Erst wird das Fach gewählt.
# Dann wird der Schwierigkeitsgrad gewählt.
# Dann wird das konkrete Quiz gewählt.
# Danach startet das Spiel.

<syntaxhighlight lang="cpp">
Quiz quizzes[] = {
  multiplicationEasy,
  capitalsEasy
};

int quizCount = sizeof(quizzes) / sizeof(quizzes[0]);
</syntaxhighlight>

= [[Spielregel: Schnelligkeit entscheidet]] =

# Beide Spieler:innen sehen gleichzeitig dieselbe Frage.
# Sobald die Frage angezeigt wird, merkt sich der ESP32 die Startzeit.
# Jede Antwort wird mit Zeitstempel gespeichert.
# Die erste richtige Antwort gewinnt die Frage.
# Falsche Antworten zählen nicht als Punkt.
# Optional: Wer falsch antwortet, ist für diese Frage gesperrt.
# Nach kurzer Rückmeldung startet die nächste Frage.
# Nach 10 Fragen wird der Endstand angezeigt.

= [[Empfohlene Punkte-Regel]] =

# Schnellste richtige Antwort: 1 Punkt.
# Falsche Antwort: 0 Punkte.
# Beide falsch: kein Punkt.
# Beide richtig, aber eine Person war schneller: schnellere Person bekommt 1 Punkt.
# Nach 10 Fragen gewinnt die Person mit den meisten Punkten.

= [[Technischer Ablauf einer Frage]] =

# ESP32 setzt die aktuelle Frage.
# ESP32 setzt '''answered = false'''.
# ESP32 speichert die Startzeit.
# Beide Smartphones fragen regelmäßig den aktuellen Spielstand ab.
# Beide zeigen dieselbe Frage an.
# Spieler:innen drücken eine Antwort.
# ESP32 prüft:
# Ist die Frage noch offen?
# Ist die Antwort richtig?
# Wer war schneller?
# ESP32 speichert Gewinner:in der Frage.
# Beide Smartphones erhalten dieselbe Rückmeldung.
# ESP32 schaltet zur nächsten Frage.

= [[Empfohlene Webtechnik]] =

# HTML für die Oberfläche.
# CSS für Farben und Buttons.
# JavaScript für automatische Aktualisierung.
# ESP32-Webserver für Spielstand und Antworten.
# JSON-ähnliche Daten für Fragen und Ergebnisse.
# Kein Internet nötig.
# Keine App nötig.

= [[Projektaufbau Schritt für Schritt]] =

== [[Schritt 1: Grundversion bauen]] ==

# ESP32 startet ein eigenes WLAN.
# Smartphone öffnet eine einfache Webseite.
# Eine Frage mit 10 Buttons wird angezeigt.
# Eine Antwort kann gesendet werden.
# Richtig oder falsch wird angezeigt.

== [[Schritt 2: Zwei Spieler:innen ergänzen]] ==

# Spieler:in 1 öffnet die Seite als player=1.
# Spieler:in 2 öffnet die Seite als player=2.
# Beide sehen den Punktestand.
# Beide können antworten.

== [[Schritt 3: Schnelligkeitsregel einbauen]] ==

# ESP32 merkt sich, welche richtige Antwort zuerst angekommen ist.
# Nach der ersten richtigen Antwort wird die Frage geschlossen.
# Beide sehen, wer gewonnen hat.

== [[Schritt 4: 10 Fragen pro Spiel einbauen]] ==

# Aktuelle Frage wird als Zahl gespeichert.
# Nach jeder Runde wird die nächste Frage geladen.
# Nach Frage 10 erscheint die Endseite.

== [[Schritt 5: Quizauswahl ergänzen]] ==

# Startseite zeigt Fächer.
# Danach zeigt sie Schwierigkeitsgrade.
# Danach zeigt sie konkrete Quiztitel.
# Ein Spieler oder die Lehrkraft startet das gewünschte Quiz.

== [[Schritt 6: Erweiterbare Quizsets erstellen]] ==

# Jedes Quizset wird als eigener Block im Code gespeichert.
# Neue Quizsets werden nach demselben Muster ergänzt.
# Wichtig: Immer genau 10 Fragen.
# Wichtig: Jede Frage hat genau 10 Antworten.
# Wichtig: Die richtige Antwort wird als Zahl von 0 bis 9 angegeben.

== [[Schritt 7: Design verbessern]] ==

# Antwortbuttons groß darstellen.
# Punktestand oben anzeigen.
# Countdown oder Status anzeigen.
# Farben eindeutig nutzen:
# Grün für richtig.
# Rot für falsch.
# Gelb für zu langsam.
# Blau für nächste Frage.

== [[Schritt 8: Erweiterungen testen]] ==

# Test mit einem Smartphone.
# Test mit zwei Smartphones.
# Test mit mehreren Quizsets.
# Test mit falscher Antwort.
# Test mit gleichzeitiger Antwort.
# Test nach 10 Fragen.
# Test mit Neustart.

= [[Was die Lehrkraft im Vorfeld vorbereiten sollte]] =

# ESP32-Board auswählen und testen.
# Arduino IDE einrichten.
# Funktionierenden Grundcode bereitstellen.
# WLAN-Verbindung mit zwei Smartphones testen.
# Prüfen, ob Schulgeräte lokale WLANs ohne Internet erlauben.
# Quizstruktur als Vorlage ausdrucken oder digital bereitstellen.
# Beispielquiz mit 10 Fragen vorbereiten.
# Schüler:innen erklären, dass richtige Antwortnummern bei 0 beginnen.
# Gruppenrollen festlegen.
# Zeit für Fehlersuche einplanen.
# Bluetooth und USB-C nur als Zusatzthema erklären, nicht als Pflichtfunktion.
# Ein Ersatzboard und Ersatzkabel bereithalten.
# Datenschutz klären: Es werden keine echten Namen benötigt.
# Sinnvoll sind Spielernamen wie Team Rot und Team Blau.

= [[Realistische Rollenverteilung]] =

# '''Technik-Team:''' ESP32, Upload, WLAN, Verbindung.
# '''Webdesign-Team:''' Oberfläche, Farben, Buttons, Lesbarkeit.
# '''Quiz-Team:''' Fragen, Antwortmöglichkeiten, richtige Lösungen.
# '''Test-Team:''' Spielregeln prüfen, Fehler finden.
# '''Präsentations-Team:''' Projekt erklären und Spiel vorstellen.

= [[KI-Nutzung im Projekt]] =

# KI kann Quizfragen erstellen.
# KI kann Code erklären.
# KI kann Fehlermeldungen übersetzen.
# KI kann HTML und CSS verbessern.
# KI kann neue Quizsets im passenden Format erzeugen.
# KI sollte nicht ungeprüft übernommen werden.
# Jede Änderung muss auf dem ESP32 getestet werden.

= [[Gute KI-Prompts]] =

== [[Prompt: Neues Quizset erzeugen]] ==

Erstelle ein Quizset für einen ESP32-Quizcode im folgenden Format: Das Fach ist Mathematik. Der Schwierigkeitsgrad ist leicht. Das Quiz heißt "Multiplikation bis 10". Es soll genau 10 Fragen enthalten. Jede Frage soll genau 10 Antwortmöglichkeiten haben. Gib die richtige Antwort als Zahl von 0 bis 9 an. Verwende einfache Sprache für Schüler:innen.

== [[Prompt: Hauptstadtquiz erzeugen]] ==

Erstelle ein Quizset zum Thema Hauptstädte. Fach: Geografie. Schwierigkeitsgrad: mittel. Genau 10 Fragen. Jede Frage hat genau 10 Antwortmöglichkeiten. Die richtige Antwort soll als Index von 0 bis 9 angegeben werden. Formatiere das Ergebnis als Arduino-C++-Datenstruktur.

== [[Prompt: Spiel schneller machen]] ==

Optimiere diesen ESP32-Quizcode so, dass beide Spieler:innen gleichzeitig dieselbe Frage sehen und die schnellste richtige Antwort den Punkt bekommt. Erkläre die Änderungen einfach.

== [[Prompt: Fehler finden]] ==

Ich bekomme beim Hochladen dieses ESP32-Codes folgende Fehlermeldung: [Fehlermeldung einfügen]. Erkläre mir die Ursache und gib mir eine konkrete Schritt-für-Schritt-Lösung.

== [[Prompt: Code vereinfachen]] ==

Vereinfache diesen ESP32-Quizcode so, dass Schüler:innen der Klassen 7 bis 9 ihn verstehen können. Kommentiere wichtige Stellen und vermeide unnötig komplizierte Programmierung.

= [[Hinweis zur Erweiterbarkeit]] =

# Für den Anfang sollten Quizsets direkt im Arduino-Code gespeichert werden.
# Das ist am einfachsten und zuverlässigsten.
# Später kann man Quizsets über eine SD-Karte laden.
# Noch später kann man eine Admin-Webseite bauen, über die neue Quizfragen eingegeben werden.
# Für ein Schulprojekt ist die Code-Variante meist die beste Startlösung.

= [[Mögliche Profi-Erweiterung: SD-Karte]] =

# Quizsets werden als Dateien gespeichert.
# Jede Datei enthält ein Quiz.
# Neue Quizsets können ohne Änderung am Hauptcode ergänzt werden.
# Dafür braucht man ein SD-Kartenmodul.
# Die Programmierung wird aber deutlich schwieriger.
# Diese Variante eignet sich eher für Fortgeschrittene.

= [[Mögliche Profi-Erweiterung: Admin-Seite]] =

# Lehrkraft öffnet eine Admin-Seite.
# Dort können neue Fragen eingegeben werden.
# Der ESP32 speichert sie im Flash-Speicher.
# Vorteil: kein neuer Upload nötig.
# Nachteil: deutlich komplexerer Code.
# Für den Einstieg nicht empfohlen.

= [[Empfehlung für den ersten funktionsfähigen Prototyp]] =

# ESP32-S3 verwenden.
# WLAN-Browserlösung nutzen.
# Zwei Spieler:innen.
# Fach, Schwierigkeit und Quiz auf dem Smartphone auswählen.
# 10 Fragen pro Spiel.
# 10 Antwortmöglichkeiten pro Frage.
# Schnellste richtige Antwort bekommt den Punkt.
# Quizsets zunächst direkt im Code speichern.
# Bluetooth und USB-C nur als optionale Erweiterungen erwähnen.

= [[Fazit]] =

# Das gewünschte Spiel ist gut machbar, wenn der ESP32 als WLAN-Webserver genutzt wird.
# Die Smartphones sollten über Browser und WLAN verbunden werden.
# Bluetooth und USB-C sind für Schulprojekte als Hauptverbindung zu kompliziert.
# Die Quizsets können durch klare Datenstrukturen einfach erweitert werden.
# Die Auswahl von Fach, Schwierigkeitsgrad und Quiz kann direkt auf dem Smartphone erfolgen.
# Die Schnelligkeitsregel macht das Spiel deutlich spannender.
# Für Projekttage ist diese Lösung technisch anspruchsvoll, aber realistisch umsetzbar.