The Backroads Challenge
An interactive geography quiz that makes learning about the world fun and addictive
The Inspiration
As someone who's passionate about travel, I've always been fascinated by how much there is to learn about our world. I wanted to create something that would help people—including myself—build geographical knowledge in an engaging, game-like way.
Most geography quizzes I found online were either too easy or frustratingly difficult with no middle ground. I wanted to build something with adaptive difficulty that would challenge players at their level while keeping them motivated to improve.
The result is The Backroads Challenge: a quiz game that starts accessible and progressively gets harder, rewarding consistency with streak bonuses while keeping pressure on with a dynamic timer system.
The Challenge
Data Accuracy
Ensuring country data, capitals, and facts were accurate and up-to-date across 195+ sovereign nations.
Progressive Difficulty
Designing three distinct difficulty tiers that feel meaningfully different without being unfair.
Mobile-First Design
Creating a responsive experience that works flawlessly on phones, tablets, and desktops.
Performance
Keeping the game fast and responsive with instant feedback on answers and smooth animations.
How It Works
The Boardroom (Easy)
Four multiple-choice options with the country's capital displayed as a clue. No timer — ideal for building foundational knowledge at your own pace.
The Backroads (Medium)
Four multiple-choice options with only the world region shown as a clue. A 25-second countdown timer adds pressure and forces quicker recall.
The Explorer (Hard)
Flag only — no clues, no capital, no region. A tight 15-second timer and the full pool of 195+ countries including obscure nations and island states.
Key Features
195+ Countries
Complete coverage of recognized sovereign nations with real flag images
Streak System
Flame visualisation that grows and glows as your streak builds
Circular SVG Timer
Animated countdown ring that shifts white → orange → red as time runs out
Grade & Results Screen
Explorer, Traveler, or Tourist grade based on score, with confetti for top results
Lettered Answer Buttons
A/B/C/D badges on each option with full-colour correct/incorrect feedback
Progress Dots
10-dot tracker showing correct, incorrect, and current question at a glance
Tech Stack
JavaScript (ES6+)
Vanilla JS for all game logic, state management, timer control, and DOM manipulation — no frameworks.
SVG Animation
Inline SVG circular timer driven by stroke-dashoffset, with JS-controlled colour transitions and pulse keyframes.
CSS3 & Custom Properties
CSS variables for theming, CSS grid for the two-column quiz layout, and keyframe animations for confetti and answer feedback.
flagcdn.com
Flag images served by URL pattern (flagcdn.com/{code}.svg) — no API key required, 195+ country codes supported.
What I Learned
Building The Backroads Challenge reinforced several important development principles:
- DOM Timing is Subtle: Caching a DOM reference at script load time caused a hard-to-diagnose bug — the reference pointed to a skeleton element that React had already unmounted. Re-querying at runtime fixed it cleanly.
- SVG Animation Without Libraries: Building the circular countdown timer with stroke-dashoffset and a requestAnimationFrame loop taught me how much is achievable with plain SVG — no canvas, no third-party library needed.
- Event Delegation with Nested Elements: Adding letter-badge spans inside answer buttons broke click detection until I switched to e.target.closest('.option-btn') — a pattern that handles any level of child nesting.
- CSS Grid for Game Layouts: A two-column grid (flag + clue on the left, options on the right) dramatically improved the readability and feel of the game without any JavaScript changes.