DoodleQuest - Fun Visual Educator

Inspiration

In today’s world, we are surrounded by information – but that doesn’t mean it is easy to absorb. I have always been drawn to the way infographics transform complex topics into less abstract, clearer, and fun content. However, most websites still deliver knowledge in long, dense paragraphs. A brilliant article on quantum physics or a deep dive into history can feel overwhelming, causing many people to skim or lose interest and skip entirely. Having pondered on the question “What if every webpage had an 'infographic mode'? What if anyone (from a curious child to a busy adult) could press a button and instantly turn a wall of text into a visual, interactive quest?

Leading to the development of DoodleQuest - A Fun Visual Educator

What it does

Doodle Quest uses the Gemini nano model to transform any text content, including some of your favorite topics of interest (such as football, history, movies, music, science, engineering, and more), into playful, interactive adventures. It doesn’t just translate text or summarize information; it reimagines the experience by turning each topic into a themed quest filled with:
• Emoji challenges
• Visual puzzles
• Game-like storytelling.
Whether you are reading about space exploration, searching for a movie or music on the web, Doodle Quest acts like a creative companion, designing infographics, mini-games, and visual prompts that make learning feel like play. Doodle Quest is built for people of all ages, especially kids and visual learners who thrive on interaction and imagination.

How I built it

DoodleQuest was built by leveraging the Gemini Nano model running directly on-device. The AI model was prompted to serve as:
• Analyst: It reads and analyzes raw text from the webpage
• Creative Director: It identifies the core theme and writes a short, friendly summary. The complexity of this summary is determined by the difficulty setting (“Easy”, “Medium”, “Intermediate”, or “Hard”).
• Game Designer: Based on the theme, it generates a series of ‘Quests’ (some relevant, some are ‘impostors’) to create a fun gameplay experience.
• Copywriter: For each step, it writes a punchy title that displays on the Quest and a description that pops up when a quest is selected (this description explains how the selected quest is either relevant or irrelevant for the adventure/game
• Emoji Illustrator: It crafts a unique emoji combo for each quest, acting like the game’s visual storyteller.

Challenges I ran into

My initial goal was for the AI to generate unique, hand-drawn SVG doodles for every adventure. I spent a significant amount of time crafting prompts, providing the AI with detailed style guides, color palettes, and examples of ‘a perfect SVG’. However, I ran into the limitations of the Gemini Nano models for complex artistic tasks:
• The SVG doodles generated by the model were highly unpredictable; the results were often random and inaccurate.
• In some scenarios, the results were blank spaces, breaking the user experience and creating a frustrating game.
After several attempts, I decided to pivot away from SVG generation to emojis.

Accomplishments that I am proud of

Building DoodleQuest was a journey to answer the question: “How to make learning as fun as playing an adventure game?” I am proud of the following accomplishments:
• Creating a new way to learning: DoodleQuest isn’t just a Chrome Extension, it is a “ Fun Visual Educator” that adds an adventure mode to any article, blog, or story. I succeeded in building an AI that transforms any piece of text into a vibrant, emoji-based quest, turning passive reading into active, playful discovery.
• The Game’s Intelligent Design: The AI doesn’t just list facts; it creates a real challenge. By prompting it to generate Quests and ‘impostors’, I turned a simple summary into a fun game, with a difficulty setting that controls the AI’s output. With the “Hard” mode, more steps are added, and the summary is more complex and ‘impostors’ trickier to spot, creating an adaptive experience.
• Accessibility: Using the on-device Gemini Nano model, learning can happen anywhere, both offline and online

What I learned

Through this project, I learnt how to build a Chrome Extension and harness the potential of on-device AI to create a new and joyful user experience.

What's next for Doodle Quest - Visual Educator

Currently, the only language supported is English. The next major milestone is to fully implement a multilingual experience.
• User-Selectable Language: I will leverage the full capabilities of the Gemini Nano model by allowing users to set their preferred output language.
• Gamification (Trophies, Streaks, and Rewards): To enhance the “game” aspect and encourage continued learning, I plan to introduce a fun and rewarding achievement system.

Built With

• css
• framer
• motion
• react
• typescript