Math Quest: Adventure Through the Land of Numbers – A Fun, Interactive Way to Learn Math

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

I built Math Quest: Adventure Through the Land of Numbers, a fun, interactive, and educational game designed for kids to learn core math concepts. The app provides a gamified experience that helps kids strengthen their math skills through different themes, such as:

1. Forest of Addition
2. Mountain of Multiplication
3. Ocean of Fractions
4. Castle of Subtraction
5. Jungle of Division

Each theme contains 30 levels, and each level features 25 questions. As players progress, the difficulty increases, offering an engaging learning curve.

To make the experience more interactive, animated characters help guide players. When kids answer incorrectly, they can retry the question. If they get it wrong a second time, a visualized solution is provided, showing step-by-step how to solve the problem.

The Problem It Solves:

Boring Math Learning: Kids get bored with repetitive, one-size-fits-all math problems.
Lack of Personalization: Traditional apps don’t adapt to individual learning needs.
No Instant Feedback: Mistakes aren’t corrected in real-time, leading to confusion and frustration.
Limited Engagement: Static lessons fail to hold kids' attention.

Demo

Live Applet:MathQuest

Github: Github

Youtube: YouTube

MathQuest-FrontPage

Forest of Addition

Gigi the guide

Visual explanation in case of wrong answer

Explanation for a geometry question

How I Used Google AI Studio

Deployment Infrastructure
Platform: Google Cloud Run (auto-scaling, Dockerized)
Backend: Node.js with Express.js
Frontend: React + TypeScript
Scaling: Auto-scaling from 0 to N instances

Google AI API Integration
1. Dynamic Math Problem Generation
Gemini 2.5 Flash generates age-appropriate, themed math problems (Addition, Subtraction, etc.), ensuring no repetition.

const question = await gemini.generateContent({
  model: 'gemini-2.5-flash',
  contents: [{ parts: [level, topic] }],
  generationConfig: {
    responseMimeType: 'application/json',
    responseSchema: questionSchema,
  }
});

2. Text-to-Image Visual Solutions
After a wrong answer, Gemini creates visual solutions (SVGs) to help children understand.

const visualSolution = await gemini.generateContent({
  model: 'imagen-4.0-generate-001',
  contents: [{ parts: [problemText] }],
  generationConfig: {
    responseMimeType: 'application/json',
    responseSchema: svgSchema,
  }
});

3. Real-Time Chatbot Support
Gemini Chat API powers a responsive chatbot, offering real-time personalized hints.

const chatStream = await gemini.streamGenerateContent({
  model: 'gemini-2.5-flash',
  contents: conversationHistory
});

Multimodal Features

Text + Image Fusion: Merges visual and text data for better context and understanding.
Instant Feedback: Text-based hints and visual solutions (SVGs) after incorrect answers.
Real-Time Interaction: The chatbot provides live, context-aware responses based on the child's progress.

Key Features
Dynamic Questions: Fresh, thematic math problems.
Instant Feedback: Visual hints and solutions.
Real-Time Scoring: Tracks progress and shows performance.

Engineering Best Practices
Structured AI Output: JSON responses ensure consistent integration.
State Management: Managed via React hooks for responsiveness.
Code Organization: Modular architecture for easy scalability.

Deployment & Performance
Scalable Deployment: Dockerized and deployed on Google Cloud Run with auto-scaling.
Frontend: React + TypeScript, styled with Tailwind CSS.
Backend: Node.js + Express.js for fast API handling.

Code Example: Multimodal Analysis

const analysis = await gemini.generateContent({
  model: 'gemini-2.5-flash',
  contents: [{ parts: [imageData, textPrompt] }],
  generationConfig: {
    responseMimeType: 'application/json',
    responseSchema: damageAssessmentSchema,
  }
});