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:

1. Het spel toont automatisch de eerste stelling
2. Deelnemers lopen naar links of rechts
3. Na de timer: beep + overlay met knop
4. Druk op knop of spatiebalk voor volgende stelling
5. Laatste stelling toont direct eindscherm

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

• Klik op knop: Ga naar volgende stelling
• Spatiebalk: Ga naar volgende stelling (sneller tijdens presentatie)

Features

Presentatie:

• ✅ Visuele timer rondom scherm (loopt synchroon rond)
• ✅ Geluidssignaal bij einde timer
• ✅ Overlay met stellingen na timer (grayed out)
• ✅ Keyboard shortcut (spatiebalk)
• ✅ Direct eindscherm bij laatste stelling

Editor:

• ✅ Web-based stellingen beheer
• ✅ Real-time preview van aantal stellingen
• ✅ Kleurenpicker voor achtergronden
• ✅ Drag-free toevoegen/verwijderen
• ✅ 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