WePrompt Live

Interaktive Abstimmungen für WePrompt-Workshops unter live.weprompt.ch – eine schlanke Mentimeter-Alternative. Die Kursleitung zeigt einen QR-Code, Teilnehmende antworten ohne Konto auf dem Handy, die Ergebnisse erscheinen sofort auf dem Beamer.

Stack: Next.js 16 (App Router), TypeScript, Tailwind 4, Supabase (Postgres mit RLS, Auth, Realtime), Vercel. QR-Codes mit qrcode, Wortwolke mit d3-cloud, Sortieren mit @dnd-kit, PNG-Export mit html-to-image.

Drei Oberflächen

Ansicht	Adresse	Zugriff
Teilnahme (mobil)	/ (Code eingeben), /join/ABC123	ohne Login
Präsentation (Beamer)	/present/<geheimer Token>	ohne Login, nur wer den Link hat; keine Admin-Funktionen
Admin	/admin – Sessions, Fragen-Editor, Live-Steuerung, Ergebnisse, Team	Supabase-Login + Eintrag in live_admins

Live-Steuerung per Tastatur: ← → Fragen wechseln · O Abstimmung öffnen/schliessen · E Ergebnisse zeigen/ausblenden · Q QR-Code auf dem Beamer. Auf dem Beamer: F = Vollbild.

Fragetypen

Typ	Eingabe am Handy	Darstellung	Konfiguration
Wortwolke	1–5 Begriffe (je max. 40 Zeichen)	Wortwolke ohne Überlappung, häufige Begriffe grösser; Gross-/Kleinschreibung und Leerzeichen werden zusammengefasst	Begriffe pro Person; Begriffe lassen sich live ausblenden
Multiple Choice	Auswahlkacheln	animierte Balken mit Stimmen und Prozent	2–12 Optionen, Einfach- oder Mehrfachauswahl, max. auswählbar
Ja/Nein	zwei grosse Kacheln	zwei grosse Prozentzahlen über geteiltem Balken	–
Skala	Zahlenkacheln	Säulen pro Wert, Durchschnitt gross und als Markierung	1–5 oder 1–10, Beschriftung der Enden
Offene Frage	Textfeld (20–500 Zeichen)	Antwortkarten, neue Karten blenden ein	Länge, Zurückhalten bis zur Freigabe; Antworten ausblenden/löschen
Quiz mit zwei Antworten	zwei Kacheln (frei beschriftbar, z. B. Echt/KI), ein Tipp sendet; danach «Richtig!»/«Leider falsch.» mit Bilanz	Aussage, Bild, Countdown-Ring; nach der Auflösung richtige Kachel in amber mit Prozent	Beschriftung der beiden Antworten, richtige Antwort, Timer (10/20/30/60 s oder ohne), Bild (wird auf 1600 px verkleinert)
Manuelle Wortwolke	keine Eingabe («Schau auf die Leinwand»)	Leinwand mit Begriffen und Kategorien, die die Kursleitung live verschiebt	Kategorien und Begriffe vorbereiten; Grösse der Begriffe

Quiz: Die richtige Antwort bleibt bis zur Auflösung auf dem Server (nicht im öffentlichen Zustand, nicht in Realtime-Meldungen). Den Timer setzt die Datenbank beim Aktivieren (voting_deadline), Antworten danach oder nach der Auflösung werden abgelehnt. Die Live-Steuerung löst bei Zeitablauf automatisch auf, «Jetzt auflösen» (Taste E) geht früher. Abstimmung wieder öffnen startet den Timer neu. Die Bilanz «x von y richtig» zählt jedes Gerät für sich (lokal gespeichert, keine Rangliste).

Manuelle Wortwolke: Unter «Live steuern» wird die Vorschau zur bearbeitbaren Leinwand (16:7). Begriff eintippen + Enter legt ihn auf freie Fläche oder in die ausgewählte Kategorie. Ziehen verschiebt, die Ecke unten rechts ändert die Grösse einer Kategorie, Begriffe darin wandern mit. Doppelklick oder Enter benennt um, Entf löscht, Pfeile verschieben fein. Positionen werden während des Ziehens alle 250 ms gespeichert; der Beamer folgt mit sanfter Bewegung. Duplizieren übernimmt die Leinwand, Zurücksetzen löscht nur die Begriffe.

Bei Mehrfachauswahl beziehen sich die Prozente auf die Personen, die abgestimmt haben (Summe kann über 100 % liegen); das steht auch unter dem Diagramm.

Architektur

Handy ──GET /api/join/CODE──┐                       ┌── Realtime «live:<session>»  ──► Handys, Beamer, Admin
      ──POST /api/answer────┤  Next.js (Vercel)     │     (vollständiger öffentlicher Zustand)
Beamer ─GET /api/present/T──┤  Service Role ──► Postgres-Funktionen ──┤
Admin ── Supabase-Session (RLS) ───────────────────► Tabellen live_*  └── Realtime «live-results:<session>»
                                                                           (nur «neue Antwort») ──► Beamer, Admin

• Teilnehmende haben keinen Datenbankzugang. Alles läuft über drei Server-Routen, die security-definer-Funktionen aufrufen (live_join, live_submit, live_present). Diese prüfen jede Eingabe selbst; die Routen prüfen zusätzlich die Form (zod).
• Admins arbeiten mit ihrer Session; Row Level Security erlaubt nur Personen in live_admins.
• Realtime: Datenbank-Trigger senden bei jeder Zustandsänderung den öffentlichen Zustand auf einen privaten Kanal. Clients dürfen mithören (Policy auf realtime.messages), aber nicht senden. Ein Fragewechsel erreicht die Handys deshalb ohne zusätzliche Abfrage.
• Ergebnisse gedrosselt: Für jede Antwort geht nur ein kurzer Hinweis an Beamer und Admin; diese laden das aggregierte Ergebnis höchstens alle 0,7–0,8 s neu (eine Abfrage statt einer pro Stimme). Handys bekommen diese Hinweise nicht.
• Ausfallsicher: Ohne Realtime-Verbindung fragen alle Ansichten alle 3–4 s nach; beim Wiederverbinden und beim Zurückkehren in den Tab wird der Zustand neu geladen (Handys mit zufälliger Verzögerung bis 0,6 s, damit nicht alle gleichzeitig kommen). state_version verhindert, dass verspätete Meldungen einen neueren Zustand überschreiben.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗