Sessie IJsbreker

Een browser-based interactief spel voor workshops waarbij deelnemers fysiek kiezen tussen twee stellingen.

Installatie

Eerste keer setup:

# Installeer Python dependencies
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

Gebruik

1. Start de Flask server

# Activeer virtual environment (indien nog niet actief)
source venv/bin/activate

# Start de server
python3 server.py

De server draait nu op http://localhost:8000

2. Beheer Stellingen

Open in je browser: http://localhost:8000/editor.html

Hier kun je:

⚙️ Instellingen aanpassen (timer, kleuren, teksten)
✏️ Stellingen toevoegen, bewerken, verwijderen
💾 Opslaan naar config.json
⌨️ Keyboard shortcut: Ctrl+S of Cmd+S om op te slaan

3. Spel Draaien (Presentatie)

Open in je browser: http://localhost:8000

Sluit aan op beamer/groot scherm en:

Klik op groene "Start IJsbreker" knop om te beginnen
Klik op fullscreen knop rechtsonder voor volledig scherm (zonder browser UI)
Deelnemers lezen stellingen en lopen naar links of rechts
Na de timer: beep + overlay met knop
Druk op knop of spatiebalk voor volgende stelling
Laatste stelling toont direct eindscherm
Druk nogmaals op fullscreen knop of ESC om fullscreen te verlaten

Configuratie

Alle instellingen staan in config.json:

{
  "timer": 30,               // Timer duur in seconden
  "fontSize": "3rem",        // Tekst grootte (CSS waarde)
  "buttonText": "Volgende Stelling",
  "finishText": "Sessie Afgelopen!",
  "colors": {
    "left": "#3B82F6",      // Achtergrondkleur links (hex)
    "right": "#EF4444"      // Achtergrondkleur rechts (hex)
  },
  "stellingen": [
    {
      "links": "Koffie",
      "rechts": "Thee"
    }
  ]
}

Configuratie Opties

timer: Aantal seconden per stelling (bijv. 30, 45, 60)
fontSize: CSS font grootte (bijv. "3rem", "48px", "4vw")
buttonText: Tekst op de 'volgende' knop
finishText: Tekst op het eindscherm
colors.left: Hex kleurcode voor linker stelling achtergrond
colors.right: Hex kleurcode voor rechter stelling achtergrond
stellingen: Array van stelling paren

Interactie

Presentatie modus:

Klik op knop: Ga naar volgende stelling
Spatiebalk: Start spel (op startscherm) of ga naar volgende stelling
Fullscreen knop: Toggle volledig scherm (rechtsonder, naast counter)
ESC toets: Verlaat fullscreen modus

Features

Presentatie:

✅ Startscherm met controle over startmoment
✅ Fullscreen modus voor presentaties zonder browser UI
✅ Visuele timer rondom scherm (loopt synchroon rond)
✅ Geluidssignaal bij einde timer
✅ Overlay met stellingen na timer (grayed out)
✅ Stelling counter rechtsonder (toont bijv. "1/8", "2/8")
✅ Keyboard shortcuts (spatiebalk voor volgende, ESC voor fullscreen uit)
✅ Direct eindscherm bij laatste stelling

Editor:

✅ Web-based stellingen beheer
✅ Workshop sets systeem (meerdere configuraties opslaan en laden)
✅ Stellingkast met bibliotheek voor snelle import
✅ Drag & drop om stellingen te herordenen
✅ Real-time preview van aantal stellingen
✅ Kleurenpicker voor achtergronden
✅ Keyboard shortcut (Ctrl/Cmd+S)
✅ Validatie van invoer

Algemeen:

✅ Volledig offline werkend
✅ Configureerbaar via JSON én webinterface
✅ Geen authenticatie nodig (lokaal gebruik)

Technisch

Frontend: Pure HTML/CSS/JavaScript
Backend: Python Flask voor config management
Dependencies: Flask, flask-cors

3.6 KiB Raw Blame History