My nephew and nieces are all in school and not too fond of geography. So, for the past week I built them a simple tool to learn maps.
It runs a simple 30 second timer and the player gets unlimted retries. And since I wanna keep it interesting, there is positive and negative marking. It is not heavily gamified as in, no nudges or tricks or hints at the moment. My primary purpose is to have them learn the locations of countries in an interactive way.
I also linked it to a google sheet. At the end of the game, a prompt will pop-up and ask the user if they wanna register their score with their name. I plan to display the leaderboard soon. So the kids can see how they stack up across time.
The technical details are not much. I mostly rely on the mapslibre library for the base maps. Most of the visual appearance of the map, including its base colors and features is determined by a style file from CARTO. I load the country data from a local GeoJSON file. It is all inclded in the index.html file. I saw no use in using a framework for a couple of simple JS based interaction features and timers and whatnot. That said, when it comes to styling, tailwindcss is in use here.
You are welcome to try it out. Works best on desktop. Feel free to play it here.
It is my first draft, so there is always scope for improvement. Email me or send me a message on mastodon with your suggestions and thoughts if you play it!