Zum Inhalt springen

Diskussion:Arduino-Quiz mit ESP32 und Smartphones

Aus MOOCsWiki Staging

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 Smartphones verbinden. Die Spieler:innen öffnen eine lokale Webseite im Browser, sehen dort die Quizfrage, vier Antwortmöglichkeiten, eine farbige Rückmeldung und den Punktestand.

Grundidee

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

Warum ESP32 statt Arduino Uno?

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

Mindestvoraussetzungen

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

Einkaufsliste

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

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

Wichtige technische Entscheidungen

  1. Variante 1: Beide Spieler:innen dürfen antworten.
  2. Diese Variante ist einfacher und für den Einstieg am besten geeignet.
  3. Jede richtige Antwort gibt einen Punkt.
  4. Beide sehen den Punktestand.
  1. Variante 2: Buzzer-Prinzip.
  2. Nur die erste Antwort zählt.
  3. Diese Variante ist spannender, aber schwieriger zu programmieren.
  4. Sie eignet sich eher als Erweiterung.
  1. Empfehlung:
  2. Für den ersten Projektdurchlauf sollte Variante 1 gewählt werden.
  3. Danach kann das Spiel mit Buzzer-Regel, Zeitlimit oder Highscore erweitert werden.

Projektablauf Schritt für Schritt

Schritt 1: Ziel festlegen

  1. Entscheide, welches Thema das Quiz haben soll.
  2. Beispiele:
  3. Medienbildung
  4. Mathematik
  5. Ernährung
  6. Nachhaltigkeit
  7. Englisch
  8. Schulwissen
  9. Lege fest, wie viele Fragen das Quiz enthalten soll.
  10. Für den Anfang reichen 5 bis 10 Fragen.

Schritt 2: Material vorbereiten

  1. ESP32 bereitlegen.
  2. USB-Kabel testen.
  3. Laptop starten.
  4. Arduino IDE öffnen.
  5. Smartphones bereitlegen.
  6. Stromversorgung prüfen.
  7. Falls mehrere Gruppen arbeiten, jeder Gruppe ein Materialset geben.

Schritt 3: Arduino IDE einrichten

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

Schritt 4: Grundcode hochladen

  1. Den vorbereiteten Quiz-Code in die Arduino IDE kopieren.
  2. WLAN-Name und Passwort festlegen.
  3. Beispiel:
  4. WLAN: Quiz-Spiel
  5. Passwort: 12345678
  6. Code auf den ESP32 hochladen.
  7. Seriellen Monitor öffnen.
  8. Prüfen, ob der ESP32 gestartet ist.

Schritt 5: Handys verbinden

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

Schritt 6: Quiz testen

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

Schritt 7: Eigene Fragen ergänzen

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

Schritt 8: Gestaltung verbessern

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

Schritt 9: Spielregeln festlegen

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

Schritt 10: Präsentation vorbereiten

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

Programmieren mit KI

  1. Die Schüler:innen sollten nicht einfach nur fertigen Code kopieren.
  2. Besser ist ein schrittweises Arbeiten mit KI.
  3. Die KI kann Code erklären, vereinfachen, Fehler suchen und Erweiterungen vorschlagen.
  4. Die Schüler:innen sollten jeden neuen Codeabschnitt testen.
  5. 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">

  1. include <WiFi.h>
  2. 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 += "

"; html += "

ESP32 Quiz

"; html += "

Spieler " + player + "

"; html += "

" + questions[currentQuestion] + "

"; 
 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 += "
"; html += "

Punkte Spieler 1: " + String(score1) + "

"; html += "

Punkte Spieler 2: " + String(score2) + "

"; html += "
"; html += "

</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 += "

" + text + "

"; html += "

Punkte Spieler 1: " + String(score1) + "

"; html += "

Punkte Spieler 2: " + String(score2) + "

"; 

 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

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

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

Mögliche Erweiterungen

  1. Buzzer-Modus: Nur die erste Antwort zählt.
  2. Zeitlimit pro Frage.
  3. Highscore am Ende.
  4. Reset-Button für neues Spiel.
  5. Admin-Seite für die Lehrkraft.
  6. Zufällige Reihenfolge der Fragen.
  7. Zufällige Reihenfolge der Antworten.
  8. OLED-Display am ESP32.
  9. LED-Streifen für grüne und rote Rückmeldung.
  10. Soundeffekte mit Buzzer.
  11. QR-Code zur Spielseite.
  12. Mehr als zwei Spieler:innen.
  13. Teammodus.
  14. Fachquiz für verschiedene Unterrichtsfächer.

Empfohlener Zeitplan für einen Projekttag

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

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

Bewertungskriterien

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

Fazit

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

USB ODER?



Arduino-Quiz mit ESP32 und Smartphones




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

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

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

Bluetooth

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

USB-C

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

Empfohlene Projektlösung

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

Spielstruktur

Startseite

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

Auswahlseite

  1. Fach wählen.
  2. Schwierigkeitsgrad wählen.
  3. Quiz wählen.
  4. Spiel starten.

Spielseite

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

Endseite

  1. Punktestand Spieler 1
  2. Punktestand Spieler 2
  3. Sieger:in
  4. Button: Neues Spiel

Mindestvoraussetzungen

  1. ESP32 oder besser ESP32-S3.
  2. Zwei Smartphones mit WLAN und Browser.
  3. Ein Laptop mit Arduino IDE.
  4. USB-C- oder Micro-USB-Kabel für den ESP32.
  5. Stromversorgung über Laptop, Netzteil oder Powerbank.
  6. Grundkenntnisse in Arduino-Code.
  7. Grundkenntnisse in HTML sind hilfreich.
  8. Vorbereitete Quizfragen im Code.

Empfohlene Hardware

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

  1. 1x ESP32-S3 Dev Board
  2. 1x passendes USB-C-Datenkabel
  3. 1x Powerbank oder USB-Netzteil
  4. 2x Smartphone
  5. Optional: 1x Buzzer
  6. Optional: 1x rote LED
  7. Optional: 1x grüne LED
  8. Optional: 2x Widerstand 220 Ohm
  9. Optional: kleine Box oder Gehäuse

Wichtige Vorüberlegung für die Lehrkraft

  1. Bluetooth und USB-C nicht als Pflichtzugang planen.
  2. WLAN-Browserlösung vorher vollständig testen.
  3. Prüfen, ob Schulhandys oder Schülerhandys sich mit einem WLAN ohne Internet verbinden dürfen.
  4. Ersatzkabel bereithalten.
  5. Arduino IDE mit ESP32-Unterstützung vorher installieren.
  6. Beispielcode vor dem Projekttag einmal erfolgreich hochladen.
  7. Entscheidung treffen, ob Schüler:innen eigene Quizsets schreiben oder fertige Quizsets bearbeiten.
  8. Vorher festlegen, ob ein Spieler oder nur die Lehrkraft das Quiz auswählen darf.
  9. Bei jüngeren Schüler:innen besser vorbereitete Quiz-Vorlagen nutzen.
  10. 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:

  1. Fach
  2. Schwierigkeitsgrad
  3. Quizname
  4. 10 Fragen
  5. pro Frage 10 Antwortmöglichkeiten
  6. 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?

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

<syntaxhighlight lang="cpp"> Quiz quizzes[] = { 

 multiplicationEasy,
 capitalsEasy

};

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

Spielregel: Schnelligkeit entscheidet

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

Empfohlene Punkte-Regel

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

Technischer Ablauf einer Frage

  1. ESP32 setzt die aktuelle Frage.
  2. ESP32 setzt answered = false.
  3. ESP32 speichert die Startzeit.
  4. Beide Smartphones fragen regelmäßig den aktuellen Spielstand ab.
  5. Beide zeigen dieselbe Frage an.
  6. Spieler:innen drücken eine Antwort.
  7. ESP32 prüft:
  8. Ist die Frage noch offen?
  9. Ist die Antwort richtig?
  10. Wer war schneller?
  11. ESP32 speichert Gewinner:in der Frage.
  12. Beide Smartphones erhalten dieselbe Rückmeldung.
  13. ESP32 schaltet zur nächsten Frage.

Empfohlene Webtechnik

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

Projektaufbau Schritt für Schritt

Schritt 1: Grundversion bauen

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

Schritt 2: Zwei Spieler:innen ergänzen

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

Schritt 3: Schnelligkeitsregel einbauen

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

Schritt 4: 10 Fragen pro Spiel einbauen

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

Schritt 5: Quizauswahl ergänzen

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

Schritt 6: Erweiterbare Quizsets erstellen

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

Schritt 7: Design verbessern

  1. Antwortbuttons groß darstellen.
  2. Punktestand oben anzeigen.
  3. Countdown oder Status anzeigen.
  4. Farben eindeutig nutzen:
  5. Grün für richtig.
  6. Rot für falsch.
  7. Gelb für zu langsam.
  8. Blau für nächste Frage.

Schritt 8: Erweiterungen testen

  1. Test mit einem Smartphone.
  2. Test mit zwei Smartphones.
  3. Test mit mehreren Quizsets.
  4. Test mit falscher Antwort.
  5. Test mit gleichzeitiger Antwort.
  6. Test nach 10 Fragen.
  7. Test mit Neustart.

Was die Lehrkraft im Vorfeld vorbereiten sollte

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

Realistische Rollenverteilung

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

KI-Nutzung im Projekt

  1. KI kann Quizfragen erstellen.
  2. KI kann Code erklären.
  3. KI kann Fehlermeldungen übersetzen.
  4. KI kann HTML und CSS verbessern.
  5. KI kann neue Quizsets im passenden Format erzeugen.
  6. KI sollte nicht ungeprüft übernommen werden.
  7. 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

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

Mögliche Profi-Erweiterung: SD-Karte

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

Mögliche Profi-Erweiterung: Admin-Seite

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

Empfehlung für den ersten funktionsfähigen Prototyp

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

Fazit

  1. Das gewünschte Spiel ist gut machbar, wenn der ESP32 als WLAN-Webserver genutzt wird.
  2. Die Smartphones sollten über Browser und WLAN verbunden werden.
  3. Bluetooth und USB-C sind für Schulprojekte als Hauptverbindung zu kompliziert.
  4. Die Quizsets können durch klare Datenstrukturen einfach erweitert werden.
  5. Die Auswahl von Fach, Schwierigkeitsgrad und Quiz kann direkt auf dem Smartphone erfolgen.
  6. Die Schnelligkeitsregel macht das Spiel deutlich spannender.
  7. Für Projekttage ist diese Lösung technisch anspruchsvoll, aber realistisch umsetzbar.
Abgerufen von „https://staging.moocwiki.org/index.php?title=Diskussion:Arduino-Quiz_mit_ESP32_und_Smartphones&oldid=23438“