Come Together · Tools – Bedienungsanleitung

Alle Mitmach- und Moderationswerkzeuge für den Workshop, an einem Ort erklärt. Stand: Juni 2026.

Inhalt

1 · Aufbau & Zugang

Jedes Tool hat (je nach Art) bis zu drei Ansichten:

• Teilnehmer die Seite fürs Handy (z. B. qa.html) – erreichbar per QR-Code.
• Beamer die Vollbild-Ansicht für die Projektion (z. B. qa-screen.html).
• Moderation die Steuerung – entweder direkt in der Beamer-Ansicht (Button „Moderation", Code 7434) oder als eigene Seite (z. B. quiz-admin.html).

Über alle Seiten bleibt oben der Header mit Live-Programm (aktueller Punkt + Restzeit), Uhr und Menü sichtbar. Das Menü (☰) führt zu Übersicht, Präsentationsseite, Workspace und allen Tools.

Wo finde ich was? Auf der Präsentationsseite im Menü „mitmachen" (zeigt die QR-Codes) und „tools ↗" (Übersicht). Im Workspace im Tab „Tools". Oder direkt hub.html.

2 · Live-Feedback / Voting

Wofür: Strukturierte Umfragen in Blöcken (Beginn / Mitte / Gesamtfeedback) mit Wortwolke, Skala, Auswahl und offenem Text.

Ansicht	Datei
Teilnehmer	voting.html
Beamer	voting-screen.html
Moderation	voting-admin.html

So bedienst du es

1. In voting-admin mit Code anmelden. Fragen/Blöcke anlegen (Frage ziehen zum Sortieren, 3–5 pro Block empfohlen).
2. „Freischalten" beim gewünschten Block – nur dieser ist für Teilnehmende sichtbar. „Alle schliessen" beendet die Eingabe.
3. Teilnehmende öffnen voting.html (QR), beantworten Frage für Frage – Antworten sind jederzeit änderbar.
4. Auf dem Beamer (voting-screen) blätterst du mit ‹ › durch die Ergebnisse; Wortwolken/Balken bauen sich live auf. „← QR-Code einblenden" für Nachzügler.

3 · Fragen-Wall (Slido-Prinzip)

Wofür: Offene Fragen sammeln. Teilnehmende stellen anonym Fragen und voten andere hoch – die wichtigsten stehen zuoberst.

Ansicht	Datei
Teilnehmer	qa.html · QR: qa-qr.png
Beamer + Moderation	qa-screen.html

So bedienst du es

1. Beamer öffnen (qa-screen), unten „Moderation" mit Code → Steuerung erscheint.
2. Teilnehmende öffnen qa.html, tippen ihre Frage, voten mit ▲ (eine Stimme pro Frage, abwählbar).
3. Pro Frage kannst du: ★ dran (gross oben einblenden), ✓ erledigt (abdunkeln), ausblenden oder löschen.
4. „Wall schliessen" stoppt neue Fragen. „← QR-Code" blendet den Beitritts-Code ein.

4 · Ideenwand (Padlet-Prinzip)

Wofür: Stichworte/Ideen sammeln, live in Spalten geclustert. Ideal für Brainstorming und Gruppenarbeit.

Ansicht	Datei
Teilnehmer	wall.html · QR: wall-qr.png
Beamer + Moderation	wall-screen.html

So bedienst du es

1. Auf dem Beamer mit Code anmelden. Über „+ Spalte" Themen anlegen (oder die Vorgaben Ideen/Stärken/To-dos nutzen, umbenennen/löschen möglich).
2. Teilnehmende öffnen wall.html, schreiben ein Stichwort, wählen Spalte und Farbe, „Anheften".
3. Beiträge erscheinen sofort als Karten. Per Code kannst du einzelne Beiträge oder ganze Spalten löschen.

5 · Live-Quiz (Kahoot-Prinzip)

Wofür: Schnelle Multiple-Choice-Runden mit Punkten (Tempo-Bonus) und Rangliste – Energizer und spielerisches Verankern.

Ansicht	Datei
Teilnehmer	quiz.html · QR: quiz-qr.png
Beamer	quiz-screen.html
Host	quiz-admin.html

So bedienst du es

1. In quiz-admin mit Code anmelden, Fragen erfassen (Antworten, richtige grün markieren, Zeit pro Frage), „Fragen speichern".
2. Teilnehmende öffnen quiz.html, geben einen Nickname ein und warten in der Lobby.
3. Host: ▶ Start → Frage läuft (Countdown). Auflösen zeigt die richtige Antwort + verteilt Punkte. Weiter › zur nächsten Frage; am Ende erscheint die Schlussrangliste.
4. Den Beamer (quiz-screen) projizieren – er zeigt Frage, Timer, Antwortbalken und Rangliste. Reset startet neu.

6 · Foto-Moments

Wofür: Bilder vom Anlass hochladen, moderiert freigeben, als Slideshow zeigen – später mit dem Song kombinierbar.

Ansicht	Datei
Teilnehmer	foto.html · QR: foto-qr.png
Beamer	foto-screen.html
Moderation	foto-admin.html

So bedienst du es

1. Teilnehmende öffnen foto.html, wählen/knipsen ein Bild, setzen den Einwilligungs-Haken (Pflicht) und laden hoch.
2. In foto-admin (Code) erscheinen neue Bilder unter „Wartet auf Freigabe". Mit ✓ Freigeben kommen sie in die Galerie, mit ✕ werden sie gelöscht.
3. Der Beamer (foto-screen) zeigt freigegebene Bilder als Slideshow (Vollbild, automatischer Wechsel).

7 · Stimmungsbarometer / Check-in

Wofür: Kurzer Stimmungs-Check (😟–😄) zu mehreren Zeitpunkten – mit Verlaufskurve über den Tag.

Ansicht	Datei
Teilnehmer	mood.html · QR: mood-qr.png
Beamer + Moderation	mood-screen.html

So bedienst du es

1. Auf dem Beamer mit Code anmelden, oben einen Titel eingeben (z. B. „Morgen") und „+ Check-in starten".
2. Teilnehmende öffnen mood.html und tippen ein Smiley (1–5), jederzeit änderbar.
3. Der Screen zeigt Schnitt + Verteilung der aktiven Runde und den Tagesverlauf über alle Runden. Mit „schliessen" beendest du eine Runde; eine neue startest du jederzeit.

8 · Facilitation-Kit

Wofür: Die stillen Moderationshelfer – kein Login, alles lokal. Datei: tools.html.

• Timer: Minuten/Sekunden oder Presets, Start/Pause, Fortschrittsring, akustisches Signal am Ende, ⛶ Vollbild für den Beamer.
• Namensrad: Namen (eine pro Zeile) eingeben, „Drehen" zieht zufällig – optional „Gezogene entfernen", damit niemand doppelt drankommt.
• Gruppen: Namen + Anzahl Gruppen → zufällige Einteilung, „↻ neu" mischt neu.

9 · Feedback-Report (PDF)

Wofür: Nach dem Workshop in Sekunden ein PDF aus allen Daten. Datei: report.html (Code 7434).

1. report.html öffnen, Code eingeben – der Report wird automatisch aus Voting, Fragen-Wall, Quiz und Stimmungsbarometer aufgebaut.
2. Oben „⤓ Als PDF speichern" → im Druckdialog „Als PDF sichern". „↻ Aktualisieren" lädt die neuesten Daten.

10 · Technik & Tipps

• Moderations-Code: überall 7434 (in den Beamer-/Admin-Ansichten).
• Nach Upload auf den Server: einmal Cmd+Option+R (Hard-Reload) – wegen Service-Worker-Cache.
• Daten zurücksetzen: jedes Tool hat in der Moderation „Alle löschen"/„Reset". Vor einem neuen Durchlauf nutzen.
• Foto-Upload: braucht serverseitig genügend Speicher und Schreibrechte; PHP-Limits (upload_max_filesize/post_max_size) ≥ 10 MB. Der Ordner media/ entsteht automatisch.
• Kurz-Adressen wie „phoenix.fragen" sind aktuell nur Anzeige – die QR-Codes funktionieren immer, weil sie die echte URL enthalten.
• Offline: Die Seiten sind als PWA installierbar; einmal geladene Seiten funktionieren auch bei kurzem Netzausfall (Eingaben werden nachgereicht, sobald wieder online).