Technische Informatie & README

Dit document bevat technische details over de installatie, structuur en configuratie van het Educatieve Spellen Platform.

Installatie & Vereisten

• Server: Een webserver met PHP ondersteuning (bijv. Apache, Nginx, of PHP built-in server).
• PHP Versie: PHP 7.4 of hoger aanbevolen.
• Database: Geen database vereist. Alle data wordt lokaal in de browser opgeslagen (localStorage).
• Browser: Een moderne browser (Chrome, Firefox, Safari, Edge) met ondersteuning voor ES6 JavaScript en Canvas.

Lokaal Draaien

php -S localhost:8000

Navigeer vervolgens naar http://localhost:8000.

Projectstructuur

/
├── index.php             # Hoofddashboard met links naar alle spellen
├── docs.php              # Documentatie viewer (Markdown -> HTML)
├── HANDLEIDING.md        # Handleiding voor ouders
├── README.md             # Dit bestand
├── CHANGELOG.md          # Wijzigingshistorie
├── shared/               # Gedeelde bronnen (CSS, JS, Fonts, Sounds)
│   ├── css/
│   ├── js/               # Gamification, TTS, Konva helpers
│   ├── lib/              # Externe libraries (Parsedown)
│   ├── sounds/           # Audiobestanden (correct.mp3, wrong.mp3)
│   └── fonts/
├── opruimen/             # Module: Opruimen (ruimtelijke oriëntatie)
├── verfdoos/             # Module: Verfdoos (kleuren mengen)
├── blokkendoos/          # Module: Blokkendoos (vormen, tellen)
├── reken-safari/         # Module: Reken Safari (sommen)
├── woordenboek/          # Module: Woordenboek (lezen, spellen)
├── tijdreizen/           # Module: Tijdreizen (tijd)
├── letter-doolhof/       # Module: Letter Doolhof (schrijven)
└── bakkerij/             # Module: Bakkerij (breuken, symmetrie)

Modules & Technologie

Elke module is zelfstandig maar maakt gebruik van gedeelde componenten in de shared/ map.

1. Opruimen (v1.4.0)

• Doelgroep: 3-5 jaar.
• Tech: Konva.js.
• Kenmerken: Ruimtelijke begrippen (in, op, onder, naast, tussen), Drag & Drop, iPad audio unlock.

2. Verfdoos (v1.5.0)

• Doelgroep: 3-5 jaar.
• Tech: Konva.js.
• Modes:
  • Koekjesmonster: Kleurherkenning en sorteren.
  • Toverketel: Kleurenleer en mengen (primair, secundair).
• Kenmerken: SVG manipulatie, TTS feedback, Gamification badges.

3. Blokkendoos (v1.1.0)

• Doelgroep: 3-6 jaar.
• Tech: Konva.js (Canvas).
• Modes: Schaduw Puzzel, Maak de 10, Blokjesfabriek, Blokkentrein.
• Kenmerken: Numicon vormen, Drag & Drop, TTS feedback.

4. Reken Safari (v1.1.0)

• Doelgroep: 6-9 jaar.
• Tech: Vanilla JS + CSS Grid.
• Modes: Splitsen, Optellen, Aftrekken, Keer, Delen.
• Kenmerken: Sommen genereren, Gamification (dieren verzamelen), Tijdslimieten, Instelbare niveaus (0-10, 0-20, 0-100).

5. Woordenboek (v1.0.0)

• Doelgroep: 5-8 jaar.
• Tech: Vanilla JS.
• Modes: Letter Jacht, Woord Bouwer, Hak-en-Plak.
• Kenmerken: Spraaksynthese (TTS), Visuele ondersteuning.

6. Tijdreizen (v1.0.0)

• Doelgroep: 6-9 jaar.
• Tech: Konva.js (Analoge klok renderen).
• Kenmerken: Stapsgewijs leren (uren -> minuten), Interactieve wijzers.

7. Letter Doolhof (v1.0.0)

• Doelgroep: 4-7 jaar.
• Tech: Canvas API (tekenen), Path checking.
• Kenmerken: Schrijfmotoriek, Nauwkeurigheidsmeting, "Binnen de lijntjes".

8. Bakkerij (v1.2.0)

• Doelgroep: 5-9 jaar.
• Tech: Konva.js.
• Modes:
  • Cupcake Toren (Vormen, Stapelen, Kers-finale).
  • Taart Verdeler (Breuken, 1/12 segmenten).
  • Taart Decorateur (Symmetrie, Spiegelen).
• Kenmerken: Creatief rekenen, SVG assets, Responsive layout.

Gedeelde Componenten

• GamificationManager (gamification.js): Beheert scores, streaks, badges en lokale opslag.
• TTSManager (tts_manager.js): Wrapper rondom de Web Speech API voor tekst-naar-spraak.
• Voice Data (voice-data.js): Curated lijst van Nederlandse stemmen voor betere UX.
• GameHeader (header.php): Consistente navigatiebalk voor alle modules.
• Parsedown (shared/lib/Parsedown.php): Gebruikt om Markdown bestanden (zoals deze) om te zetten naar HTML.

Data Opslag

Alle voortgang, instellingen en statistieken worden opgeslagen in de localStorage van de browser. Er wordt geen data naar een server verstuurd. Dit garandeert privacy en maakt offline gebruik mogelijk (na initieel laden).

Licentie

Dit project is open source en bedoeld voor educatieve doeleinden.