Capitals of the World Pro
A premium static web application for mastering world capitals through typed recall, multiple choice, flag challenges, weak-spot review, timed sprints, flashcards, local progress tracking, and an interactive Map Challenge, all inside a fully original three-column dashboard with dark and light mode support.
Capitals of the World Pro is a premium static web app for memorising world capitals, built as a complete redesign of an earlier browser version of my Python capitals trainer.
The app uses a three-column dashboard layout: a sticky sidebar for mode navigation and settings, a central stage for the active quiz, and a sticky right panel for mastery data. This keeps navigation and progress permanently visible without scrolling.
Eight learning modes cover the full range of study workflows: Classic Type, Multiple Choice, Flag Challenge, Weak Spots, Timed Sprint, Flashcards, Review Table, and the newest addition, Map Challenge.
Map Challenge is an interactive geography mode built on Leaflet.js and a bundled Natural Earth GeoJSON dataset. Countries render as vector polygons on a blank canvas with no tile server and no internet connection required. The user is prompted to click the correct country on the map, with a 3-try system, two sub-modes (Reveal and Challenge), direction reversal support, fullscreen mode, and a reset button. Correct answers integrate with the same mastery engine used by all other modes.
Interactive Map Challenge
Click countries on a live Leaflet vector map, no tile server, no internet. Reveal mode builds a permanent green/red map; Challenge mode cycles endlessly.
Eight study modes
Classic Type, Multiple Choice, Flag Challenge, Weak Spots, Timed Sprint, Flashcards, Review Table, and Map Challenge.
Fullscreen map and 3-try system
One button expands the map to fill the screen; three attempt dots per question, with auto-reveal on the third miss.
Smart answer checking
Accent-insensitive, punctuation-tolerant matching, with aliases, alternate spellings, and a stricter mode when needed.
Local flags and visual memory
270 local PNG flag assets used as prompts, visual support during practice, or hint reveals. No remote image service.
Live mastery and region zoom
Animated SVG mastery ring and group bars; switching groups auto-fits the map to Africa, Europe, Asia, the Americas, Oceania, or world view.
Map Challenge: click countries on a live interactive map, with Reveal and Challenge sub-modes, fullscreen support, and real-time mastery tracking. The clip shows selecting a region, identifying countries directly on the map, the 3-try dot system, the flag thumbnail and country name prompt in the top bar, the green/red reveals, the completion screen, and the reset button.
Open the app
Capitals of the World Pro opens in any modern browser as a static site, no install, no account, no setup. The dataset, flags, Leaflet, and GeoJSON all load locally.
Pick a mode and group
Choose one of eight study modes and a practice group, All (World), Africa, Asia, Europe, the Americas, Caribbean, Oceania, or Territories / Other, then start answering.
Play Map Challenge
Switch to Map Challenge, pick a region, and click the prompted country on the live interactive map. Use Reveal mode to fill the continent with green and red as you go, or Challenge mode to drill endlessly without permanent state.
Track progress locally
Every answer (typed or clicked on the map) updates streaks, accuracy, and per-item mastery in browser storage. Weak Spots mode then prioritises the items you keep missing.
- Map Challenge built on Leaflet v1.9.4 with a bundled Natural Earth 1:50m sovereign countries GeoJSON, simplified ~10% with Mapshaper. No tile server, no internet required.
- GeoJSON ships as window.COUNTRIES_GEO via a script tag, so the map works on file:// without any fetch call.
- ISO matching uses ISO_A2_EH first, then ISO_A2, so Kosovo (xk) and Taiwan (tw) resolve correctly.
- Two map sub-modes: Reveal (persistent green/red state, completion screen) and Challenge (stateless cycling with brief flashes).
- 3-try system per question with dot indicators in the prompt bar; auto-reveal and next question on the third miss.
- Fullscreen API support (requestFullscreen with webkit/moz fallbacks) and Leaflet invalidateSize() on enter/exit so the map always fits.
- Reset button replays the current group from scratch at any point, mid-game, at completion, or after switching sub-modes.
- Region zoom: switching groups auto-fits the Leaflet viewport to Africa, Asia, Europe, the Americas, Oceania, the Caribbean, Central America, or a world view.
- Direction toggle (Country to Capital, Capital to Country) and flags toggle both apply inside Map Challenge.
- 258 quiz records across the All (World) dataset, covering countries, territories, overseas regions, and multi-capital cases.
- 270 local PNG flag assets bundled with the app, no remote image service required.
- Accent-, casing-, and punctuation-tolerant answer matching, with an optional strict mode for tighter validation.
- Local-first progress model with export, import, and reset, so progress is portable without an account.
- Three-column sticky dashboard: sidebar navigation, quiz stage, and right-panel data all visible simultaneously without scrolling.
- Indigo and violet color system, display-scale typography, animated SVG mastery ring, and full dark and light mode persisted to localStorage.
Product-grade frontend without a framework
A polished, responsive three-column workspace built with vanilla HTML, CSS, and JavaScript, no framework, no build pipeline, no runtime dependencies.
Local-first data design
Geography data, flag assets, GeoJSON polygons, and learner progress all live on the client. The app is fully usable offline and never depends on a remote service for its core loop.
Considered learning UX
Eight study modes, including an interactive Leaflet-based Map Challenge with Reveal and Challenge sub-modes, flexible directions, weak-spot targeting, flashcards, and a searchable review table turn the same dataset into several genuinely different ways to study.
Careful data modelling
Aliases, alternate spellings, accented variants, and multi-capital cases are handled in the dataset rather than papered over in the UI.