For my first JavaScript project at Code Institute, I developed Geo Quiz, an interactive quiz game that challenges users with geography-based questions of increasing difficulty. The game features dynamic score tracking, responsive design, and smooth user interactions powered by JavaScript. This project helped solidify my understanding of core programming concepts such as event handling, conditional logic, and DOM manipulation. I was proud to earn a Merit grade for this work.
UX Designer, Full Stack Developer
HTML, CSS, JavaScript, Bootstrap
2 Weeks
User Stories, Paper Wireframes, Style Guide, Development, Usability Testing, Reflections
Many JavaScript-based games, especially those targeting beginners, tend to suffer from buggy functionality, lack of proper error handling, and poorly structured code. Additionally, they often fail to implement progressive difficulty, which can lead to user boredom and reduced engagement over time. There's a clear need for a well-built, scalable and simple game that not only provides an engaging and educational experience, but also follows modern JavaScript best practices, including clean code, thoughtful error handling, and a difficulty curve that keeps players challenged and motivated.
Problem 1: Lack of Progressive Difficulty
Many beginner JavaScript games present questions or challenges with no clear difficulty curve, leading to reduced engagement and limited skill growth for users.
Problem 2: Inconsistent Code Quality
Poorly structured or overly complex codebases make it hard for learners to follow the logic, troubleshoot issues, or scale their projects effectively.
Problem 3: Weak Error Handling and Feedback
Many games lack clear feedback mechanisms or proper error handling, which can confuse users and result in a frustrating player experience.
To address the common issues of unreliable code and stagnant difficulty in JavaScript games, I built a geography-based game, called Geo Quiz, using HTML, CSS, and JavaScript. The game was designed to scale in difficulty as users progress, maintaining engagement while testing their geography knowledge. I implemented thorough error handling and followed front-end best practices to ensure clean, maintainable code. To validate its performance and user experience, I conducted both usability testing and manual testing, using real feedback to refine the interface, logic, and overall gameplay for a smooth and enjoyable experience.
Solution 1: Scalable Difficulty System
Implemented tiered question levels that increase in complexity as users progress, ensuring the game remains engaging and appropriately challenging throughout.
Solution 2: Clean, Maintainable Codebase
Followed JavaScript best practices including modular functions, clear logic flow, and thoughtful naming conventions, making the code easy to understand and extend.
Solution 3: Improved User Feedback and Error Handling
Integrated real-time feedback, visual cues, and robust error handling to enhance the user experience and ensure smooth gameplay even when unexpected inputs occur.
As a solo designer and developer, Geo Quiz was my first JavaScript project. I kicked off the process by researching UX principles, game design patterns, and JavaScript best practices. I took notes on what makes quiz games engaging and accessible, then sketched out user flows and wireframes. Before diving into JavaScript, I built a responsive HTML/CSS layout, then incrementally added interactivity, difficulty scaling, and feedback mechanisms. This project helped me apply my research in a practical way while deepening my front-end development skills.
Geo Quiz was designed for casual players and beginners seeking a quick, engaging challenge. I identified this audience by researching trends in online quiz games and focusing on accessibility and ease of use. The game is fully responsive across devices, with clear feedback, helpful error handling, and a smooth, frustration-free experience that encourages replayability.
For the competitive analysis of Geo Quiz, I reviewed a range of beginner-friendly JavaScript quiz games. While many were creative, they often lacked proper error handling, had minimal difficulty progression, or included bugs due to weak game logic. I also noticed that many were themed around niche topics like TV shows or pop culture, which can limit their appeal. To ensure broader accessibility, I chose a geography-based theme, which is something universally relatable, and focused on building a clean, reliable game that offers a smooth, engaging experience for all users.
I created user stories for first-time visitors, returning users, and frequent players to ensure the game stays engaging, enjoyable, and supports long-term user retention.
For this project, I chose to start with paper wireframes to maintain focus on designing a clear and intuitive user flow. This hands-on method allowed me to thoughtfully plan error handling and user interactions early on, helping to ensure a smooth and frustration-free experience before beginning development.
I started with hand-drawn wireframes to map out layout and user flow concepts without focusing on detailed visuals. This approach allowed me to quickly brainstorm and sketch essential screens like the homepage, how instructions will be portrayed to the user, the game layout, and how the buttons will be interacted.
I created the style guide to reflect a calm, accessible look that supports the geography theme. Using a harmonious palette of blues, white, and black, I highlighted key elements like buttons and containers in blue, ensured readability with white text, and used black accents for clarity. I chose Dosis, a playful and readable rounded sans-serif font, to match the game’s friendly tone. The background image of blue skies and Greek architecture reinforces the theme while keeping the layout clean and welcoming.
The logo and favicon were taken from Favicon.io. The logo consists of a globe to match the geography-based theme of the game.
The colour palette for Geo Quiz features calming blues inspired by the background image of Greece, with lighter blue used for main containers and buttons, and darker blue to highlight key actions. White text ensures readability and accessibility, while some black accents emphasize interactive elements. This combination creates a clear, inviting, and user-friendly interface that fits the geography theme.
I began by writing small, focused JavaScript functions that each performed a single, clear task. This modular approach helped ensure clean, testable logic and made it easier to debug and build upon. From there, I gradually layered on additional functionality, keeping the code organized and easy to follow. I maintained consistent structure in the HTML and CSS for smooth styling updates and documented key interaction patterns and design decisions to support a clean developer handoff. Git and GitHub were used throughout to manage version control, and the final build was tested across browsers and screen sizes before being deployed in a way that supports fast, low-risk updates.
I conducted both manual testing and moderated usability sessions to ensure Geo Quiz performed reliably across desktop and mobile environments. Manual testing helped validate core functionality, including scoring accuracy, button states, and level progression. Usability testing offered valuable feedback on how real users interacted with the game, highlighting issues such as unclear feedback messaging and edge-case bugs related to button behaviour. These insights allowed me to refine the user experience, strengthen the game logic, and improve the overall stability before final deployment.
The primary goal of testing Geo Quiz was to ensure key functionalities worked reliably across real-world scenarios. With the first deployment as my prototype, I focused on verifying that questions shuffled correctly, answer buttons disabled appropriately after selection, and the score accurately updated. Additionally, I tested that users were correctly passing or failing each level based on their performance. The game’s responsiveness was also evaluated across various screen sizes and devices to ensure a smooth experience for all users. This comprehensive testing helped identify and resolve issues related to usability, responsiveness, and game logic under diverse conditions.
I conducted moderated usability tests lasting 10–15 minutes each, where I guided users through a series of tasks and questions. Participants were asked to perform actions such as finding out how many points are needed to reach level 3, attempting to manipulate the answer buttons, answering all questions correctly, and intentionally failing. These sessions provided valuable insights into how users interact with the game’s mechanics and helped identify areas where the interface and logic could be improved for clarity and reliability.
Eight participants aged 25–35 took part in the testing. I selected users with varying levels of technical proficiency, ranging from casual web users to those with more advanced skills. Their geography knowledge also varied, from limited to more advanced understanding, to reflect the diverse audience likely to play the quiz. Testing was conducted across different devices and screen sizes to capture a broad range of user behaviours and experiences.
"I didn’t know how many points I needed to pass, I had to guess."
"It would be nice if the game told me right away if I got it right or wrong."
"I tried clicking the answers again and it let me change them, is that supposed to happen?"
User testing revealed areas for improvement in gameplay clarity, feedback responsiveness, and level progression cues. Participants noted some unintended interactions affecting scores, desired clearer visual feedback, and requested more obvious instructions for advancing through difficulty levels to maintain motivation.
Key Finding 1: Score Manipulation Bug
37.5% of users discovered they could change answers after submission, causing incorrect score updates.
Key Finding 2: Feedback Clarity
62.5% of users felt the correct/incorrect feedback wasn’t always clear, prompting improvements to visual cues.
Key Finding 3: Level Progression Confusion
50% of users found the difficulty progression unclear, indicating a need for clearer instructions.
The final Geo Quiz is a well-structured, engaging JavaScript quiz game that challenges users with progressively harder geography questions. Built using HTML, CSS, and JavaScript, the game features a responsive design that works smoothly across devices, clear feedback after each question, and a scoring system that motivates continued play.
Usability testing revealed subtle issues such as unclear feedback and score manipulation bugs. These insights guided key improvements, including enhanced visual cues for answers, stricter control to prevent score changes after submission, and clearer instructions on level progression.
Regular manual testing across multiple browsers and screen sizes ensured consistent performance and accessibility. User feedback confirmed the positive impact of these refinements, resulting in a polished, enjoyable, and educational experience that encourages repeated engagement.
My focused efforts on user-centred design and development earned me a Merit grade for the project.
Improvement 1: Clearer Feedback
75% of users appreciated improved visual cues indicating correct or incorrect answers.
Improvement 2: Score Integrity
87.5% of participants noted no longer being able to manipulate scores after answer submission.
Improvement 3: Level Progression Clarity
75% of users found the new instructions and visual cues helpful for understanding game progression.
This project was a huge milestone for me as it was my first ever JavaScript game. It was incredibly rewarding to not only learn the language but to apply it in building something interactive that real users could play and enjoy. Seeing the logic come to life through code gave me a whole new appreciation for how much thought goes into even the simplest interactions. I learned a lot, not just about JavaScript itself, but about how real users interact with digital products in unexpected ways. Usability testing revealed things I hadn’t considered, and I saw firsthand how important accessibility, feedback, and mobile responsiveness really are. Moving forward, I plan to improve my wireframing process with high-fidelity prototypes earlier in the project and continue refining both my front-end skills and my approach to human-centred design.