Die Sitzordnung unserer Klasse wie ein Online-Spiel gestalten – Seat Stealer

 (seat-admin.coupy.dev)
25 Punkte von coupy1024 2025-01-01 | 4 Kommentare | Auf WhatsApp teilen

Hintergrund

  • Das Side-Project begann in meiner Oberstufenzeit mit dem Wunsch, die lästige und langweilige Sitzverteilung unterhaltsamer zu machen.
  • Die Idee war, dass die Schüler mit ihren eigenen Geräten teilnehmen und um ihre Wunschplätze konkurrieren.
  • Damals war sogar die Schülerliste hartkodiert, und der Code war vollkommen zu Spaghetti-Code geworden, aber am Ende kam dennoch ein ziemlich überzeugendes Ergebnis heraus.
  • Den ersten Tag der Vorführung nach Erlaubnis durch den Klassenlehrer werde ich nie vergessen. Die Reaktionen waren großartig, und das Projekt wurde das ganze Jahr über genutzt.

Neuaufbau

  • Nach dem Abschluss meldete sich die Schule bei mir. Sie baten darum, das Programm an die aktuelle Klasse anzupassen.
  • Der Code war jedoch viel zu verworren, und weil sowohl die Schülerliste als auch die Sitzordnung hartkodiert waren, entschied ich mich für einen Neuaufbau, um ein wartbares Projekt zu schaffen.
  • Struktur
    • Backend: Damit alle Schülerdaten vollständig auf dem Client verarbeitet werden, fungiert das Backend nur als eine Art „Game Server“, der lediglich Daten weitergibt.
      • Node.JS
      • Socket.IO
    • Frontend – Admin: Verwaltet sämtliche Schülerdaten und steuert den gesamten Ablauf des Spiels. Dieser Bildschirm wurde für eine Umgebung entworfen, in der er auf einem TV angezeigt wird.
      • SvelteKit
      • Socket.IO
    • Frontend – Schüler: Ist über das Backend mit dem Admin verbunden und sendet bzw. empfängt Daten.
      • SvelteKit
      • Socket.IO
  • Damit sich Sitzordnung und Schülerliste leicht anpassen lassen, wurde ein Editor mit benutzerfreundlicher UI eingeführt.

Szenario

  1. Auf der Admin-Seite wird „Online-Sitzordnung“ gestartet und eine Datei mit den Schülerdaten hochgeladen. Dadurch wird ein neuer „Raum“ erstellt, und ein QR-Code erscheint, über den sich die Schüler verbinden können.
  2. Die Schüler scannen den QR-Code mit ihren jeweiligen Geräten und treten dem Spiel bei. Auf der Admin-Seite lässt sich der Verbindungsstatus der Schüler überprüfen und verwalten.
  3. Wenn das Spiel auf der Admin-Seite gestartet wird, erscheint auf der Schüler-Seite der Bildschirm zur „Sitzplatzwahl“. Stimmen sie für ihren gewünschten Platz ab, wird dies auf der Admin-Seite protokolliert.
  4. Sobald alle Schüler abgestimmt haben, zeigt die Admin-Seite das Ergebnis an.
  5. Schüler, die für denselben Platz gestimmt haben, spielen vor Ort ein kurzes Spiel gegeneinander.
    • Schere, Stein, Papier, Würfel, Minigame usw.; das liegt im Ermessen der Lehrkraft.
  6. Der Schüler, der das Spiel gewinnt, erhält den entsprechenden Platz.
  7. Das wird wiederholt, bis alle Schüler einen Platz zugewiesen bekommen haben.

Rückblick

  • Um transparent offenzulegen, dass keine Schülerdaten gesammelt oder genutzt werden, wurde das Projekt als Open Source veröffentlicht.
  • Da es für den Einsatz in Schulen gedacht ist, war es am schwierigsten, das System so zu entwerfen, dass es auf möglichst viele Ausnahmesituationen reagieren kann.
    • Wenn bei einem Schüler während des Spiels die Verbindung abbricht, wird eine Wiederverbindung versucht; falls das scheitert, kann er nach erneutem Beitritt an derselben Stelle weitermachen.
    • Wenn ein Schüler fehlt, kann das Spiel auch ohne seine Teilnahme fortgesetzt werden.
    • Wenn ein Schüler zu spät kommt, kann er auch mitten im Spiel noch beitreten.
    • Wenn sich jemand als ein anderer Schüler ausgibt, kann diese Person aus dem Raum entfernt werden.
  • Damit das System auch in verschiedenen Klassen genutzt werden kann, wurde eine benutzerfreundliche Anleitung erstellt und auf YouTube veröffentlicht.
  • Da noch Ferienzeit ist, konnte ich das Ergebnis des Projekts bisher noch nicht sehen; deshalb freue ich mich nun sogar auf das Frühlingssemester, auf das ich sonst nie gewartet hätte.
  • Wenn Sie Lehrkräfte in Ihrem Umfeld haben, teilen Sie es bitte mit ihnen. Vielen Dank.

Verwandte Beiträge

4 Kommentare

 
seoulrain 2025-02-02

In Chrome erhöht sich der Zähler nicht, auch wenn man die Namen der Schüler hinzufügt.
 
2147483647 2025-01-02

Es wäre gut, wenn man statt aller Namen nur Nummern verwenden könnte, da es mühsam sein kann, alle Namen einzutragen.
 
joon14 2025-01-02

Süß, haha
Ich sehe zwar ein paar kleinere Punkte, die man noch verbessern könnte, aber ich werde es mal mit Lehrkräften in meinem Umfeld teilen.
 
geeksk553 2025-01-02

Eine lustige Idee!