Cartoquiz

A simple site to test your geography knowledge using custom geodata.

About the project

Having spent countless hours playing geography quizzes online, I found myself wanting a quizzing experience where:

1. geodata could be loaded dynamically, so the user is not locked to the dataset preconfigured by the quiz creator; and
2. data is displayed on an interactive, mapping app-like UI instead of a static view, so the user can perform actions like panning and zooming to view the quiz geodata in full detail.

This project is a simple app aimed at fulfilling this personal desire.

Main features

• Quizzes configurable using custom geodata with various vector formats.
• Interactive map to view and explore the quiz geodata.
• Quiz progress auto-saved to browser storage.

Software design

I have used this project to challenge myself to building a very bare-bones, vanilla-as-reasonably-possible no-build frontend setup. Some of the browser-native technologies used are:

• Vanilla JS with JSDoc for type management.
• Custom Web Components instead of an established frontend framework.
• CDNs + import map to avoid needing an installation step. (The devDependencies in package.json only exists to aid with type hinting.)
• IndexedDB for persistent storage of quiz progress.

How to play

To run locally, clone this repository and spin up a server from the root directory.

npx http-server

Configuring the quiz

Start the quiz by filling out the required fields on the landing screen.

1. Load your desired dataset from a remote URL or local file. (This may take a while depending on file size.)

   Alternatively, choose from one of the available presets.

2. Select the dataset layer which contains the features you wish to quiz yourself on.

3. Select the feature property which you will be typing to make guesses.

   For example, if the features in your dataset have properties of the following shape:

   {
     "name": "Melbourne",
     "state": "Victoria",
     "population": 5000000
   }

   then you can quiz yourself on either the name, state, or population properties.

   If the name property is selected, you would have to input 'melbourne' (case insensitive) to successfully guess this feature during the quiz.

4. Press Start.

Making guesses

Type your guess in the large input field marked 'Enter guess', then hit Enter.

Filtering

If multiple features match your guess, all of them will become marked as guessed. Set filters to reduce the chances of this behaviour making unintentional guesses for you.

Note that multiple filters work as AND-filters, i.e. your input is only compared against the set of features which satisfy all filters currently set.

Resuming and restarting

Quiz progress is auto-saved to your browser's local IndexedDB storage, so you may leave the site at any time and reopen it later to continue from where you left off (as long as the site's data is not deleted from the browser, either automatically or via something like a 'clear cookies and site data' action).

To end the current quiz and start a new one, click on the gear icon in the top-right corner to switch to the quiz configuration view. The previous quiz will be lost only when you configure a new quiz and press Start again.

Acknowledgements

This project was inspired by geography quizzes on Sporcle, JetPunk, and Ian Fisher's CityQuiz.io.

Data

• Swiss canton and municipality data extracted from the 2025 swissBOUNDARIES3D dataset. ©swisstopo.

• German state and municipality data extracted from the VG250 dataset. © BKG (2024) dl-de/by-2-0.

• Japanese prefecture data extracted from the 日本 都道府県:高解像度TopoJSON dataset. 『歴史的行政区域データセットβ版』（CODH作成）, CC BY-SA 4.0.

• Japanese municipality data extracted from the 日本 市区町村（政令指定都市統合版）:高解像度TopoJSON dataset. 『歴史的行政区域データセットβ版』（CODH作成）, CC BY-SA 4.0.

Map

• Rendering: MapLibre GL JS
• Tiles: Stadia Maps (tile provider), OpenMapTiles, OpenStreetMap

Other

• Geodata format conversion: gdal3.js