Picture Idiom Quest Project Report
1. The Concept
Picture Idiom Quest is a playful educational mobile-style game that helps English learners understand common idioms through visual clues. The player looks at cute picture cards, guesses the correct idiom, and then receives a short explanation with the meaning, example sentence, memory tip, difficulty, and usage frequency.
The goal of the project is to make idiom learning feel more like a casual mobile game than a traditional quiz. The experience focuses on friendly characters, clear feedback, simple navigation, and fast learning moments.
2. The Stack
The Stack: HTML, CSS, and vanilla JavaScript. The project is built as a static web app with no framework, no build step, and no required package installation. Visual assets are stored locally in the assets/ folder, and progress is saved with browser localStorage.
The AI Assist: AI was used as a frontend implementation partner to refine the UI, improve layout balance, convert feedback screens into modal popups, organize navigation flow, use project assets consistently, and create documentation.
3. The 1 Day Sprint:
Morning (Hours 1–3): The first part of the sprint focused on understanding the game idea, reviewing the mockups, reading the project rules, and building the core game structure. The main screens were organized around the Home screen, Difficulty selection, Puzzle screen, Results, Collection, Statistics, Settings, and About.
Afternoon (Hours 4–6): The middle of the sprint focused on visual polish. The Home screen was balanced, typography was improved with Baloo 2 and Nunito, custom image assets were connected, clue cards were refined, and the Correct and Wrong feedback screens were redesigned as modal popups over the puzzle screen.
The Finish Line (Hour 7-8): The final stage focused on interaction quality and cleanup. The navigation flow was simplified so Start Game opens Difficulty first, feedback popups were made responsive with no scrolling, the Home menu was reorganized, and documentation files such as the README and project report were added.
4. The Roadblocks
Roadblocks: The biggest challenge was matching the mockup quality while keeping everything responsive across mobile portrait, mobile landscape, tablet, and desktop. The feedback popups needed several spacing adjustments because they had to fit fully inside the viewport without scrollbars. Another challenge was keeping the Home screen balanced after removing the Difficulty button and moving Statistics into the bottom menu.
5. Key Takeaways
Small spacing changes can dramatically improve the feel of a mobile game UI.
Using real project assets instead of generic icons makes the interface feel more polished and consistent.
Feedback screens work better as modal popups because the player keeps visual context of the puzzle.
Responsive design needs to be tested in both portrait and landscape, especially for compact game dialogs.
My final thought: Picture Idiom Quest became a friendly, polished learning game that turns English idioms into a visual and memorable experience.