Topotest — local development
This is a small static web app (HTML/CSS/JS) that draws a Netherlands map and runs a geography quiz.
Modern browsers block fetch requests to local files when the page is opened via file://. To let the app fetch assets/provinces.geojson from the assets/ folder, serve the project over HTTP.
Run from the project root (/Users/razr/workspace/Topotest):
# from the project folder
python3 -m http.server 8000
# then open http://localhost:8000 in your browser- Embed GeoJSON into
game.js: safer for offline usage, but increases the JS bundle size. - Overwrite
assets/provinces.geojsonwith a detailed FeatureCollection: if you want full realistic shapes in the repo, I can add the detailed GeoJSON file (it will be large).
- Start the local server above.
- Open http://localhost:8000 in a browser.
- Start the game and confirm the map loads.
- Confirm the marked (target) province fills black and its label is white.
If anything breaks or you want me to write the full detailed GeoJSON into assets/provinces.geojson or embed it into game.js, tell me which option you prefer and I'll do it.
Een educatief topografie spel voor kinderen om de Nederlandse geografie te leren.
Topotest is een interactief spel waarbij kinderen de Nederlandse topografie leren door naar een kaart te kijken en de namen van gemarkeerde gebieden in te voeren.
In dit level leren kinderen de namen van de 12 Nederlandse provincies en hun hoofdsteden:
- Groningen (Groningen)
- Friesland (Leeuwarden)
- Drenthe (Assen)
- Overijssel (Zwolle)
- Flevoland (Lelystad)
- Gelderland (Arnhem)
- Utrecht (Utrecht)
- Noord-Holland (Haarlem)
- Zuid-Holland (Den Haag)
- Zeeland (Middelburg)
- Noord-Brabant (Den Bosch)
- Limburg (Maastricht)
In dit level leren kinderen de namen van belangrijke Nederlandse wateren:
- IJssel
- Maas
- Waal
- Neder-Rijn
- Amsterdam-Rijnkanaal
- Waddenzee
- Oosterschelde
- Westerschelde
- IJsselmeer
- Markermeer
- Nieuwe Waterweg
- Lek
In dit level leren kinderen de namen van belangrijke steden in de noordelijke provincies:
- Friesland: Leeuwarden, Sneek, Heerenveen, Drachten
- Groningen: Groningen, Delfzijl, Veendam
- Drenthe: Assen, Meppel, Hoogeveen, Emmen
In dit level leren kinderen de namen van steden, rivieren en regio's in de oostelijke provincies:
- Steden in Overijssel: Kampen, Zwolle, Almelo, Hengelo, Enschede, Deventer
- Steden in Flevoland: Emmeloord, Lelystad, Almere
- Steden in Gelderland: Zutphen, Doetinchem, Arnhem, Wageningen, Nijmegen, Apeldoorn
- Rivieren: IJssel, Waal, Maas, Neder-Rijn
- Wateren: IJsselmeer, Markermeer
- Regio's: Twente, Veluwe
- Open
index.htmlin een webbrowser - Kies een level (Level 1, 2, 3, of 4)
- Klik op "Start Spel"
- Bekijk de gemarkeerde regio op de kaart
- Voer de naam in van de gemarkeerde regio
- Klik op "Controleer" of druk op Enter
- Krijg feedback en ga door naar de volgende vraag
- Twee levels met verschillende moeilijkheidsgraden
- Interactieve kaart met gemarkeerde gebieden
- Geografisch accurate kaart van Nederland met realistische provincie- en waterlichaamvormen
- Overlay highlighting voor de gevraagde regio's en steden
- Score tracking
- Direct feedback op antwoorden
- Responsief ontwerp voor verschillende schermformaten
- Automatische deployment naar GitHub Pages
- HTML5
- CSS3
- Vanilla JavaScript (geen frameworks vereist)
Geen installatie nodig! Open gewoon index.html in een moderne webbrowser.
De applicatie wordt automatisch gedeployed naar GitHub Pages bij elke push naar de main branch. Je kunt het spel spelen op: https://[username].github.io/Topotest/
Om GitHub Pages in te schakelen:
- Ga naar de repository Settings
- Navigeer naar Pages onder de Code and automation sectie
- Selecteer "GitHub Actions" als bron
- De workflow in
.github/workflows/deploy.ymlzorgt voor automatische deployment