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
Easy Mode
Multiple choice questions with 4 options. Perfect for beginners or casual play. Features well-known countries and gives you more time to think.
Medium Mode
Type-in answers with autocomplete suggestions. Includes less common countries and a tighter timer. Builds real recall skills.
Hard Mode
Pure typing with no hints. Every country is fair game, including territories and disputed regions. True geography mastery required.
Key Features
195+ Countries
Complete coverage of recognized sovereign nations
Streak System
Bonus points for consecutive correct answers
Dynamic Timer
Progressive time pressure as difficulty increases
Real-time Scoring
Instant feedback with animated score updates
Mobile Optimized
Touch-friendly interface for on-the-go play
Instant Feedback
Learn correct answers immediately
Tech Stack
JavaScript (ES6+)
Vanilla JS for game logic, state management, and DOM manipulation. No frameworks—just clean, performant code.
HTML5
Semantic markup for accessibility and SEO. Uses modern features like custom data attributes.
CSS3
Custom properties (CSS variables) for theming, flexbox/grid for layout, and smooth animations.
REST APIs
External country data APIs for flags, populations, and geographical information.
What I Learned
Building The Backroads Challenge reinforced several important development principles:
- State Management Without Frameworks: Managing game state, timers, and UI updates in vanilla JS taught me to appreciate what frameworks do under the hood—and when you don't actually need them.
- Mobile-First Thinking: Starting with mobile constraints led to a cleaner, more focused design that scaled up beautifully to desktop.
- User Experience Over Features: I cut several planned features because they didn't improve the core experience. Sometimes less really is more.
- Performance Matters: Optimizing for 60fps animations and instant feedback made the game feel polished and professional.