🧙‍♂️ About Math Odyssey

💡 Inspiration

Abstract algebra is often one of the first major hurdles students face in middle school mathematics. Concepts like keeping linear equations balanced ($ax + b = c$) or performing inverse operations ($\pm, \times, \div$) can feel disconnected when taught solely through textbook exercises.

Inspired by the breathtaking, hand-painted aesthetic of Studio Ghibli films and classic RPG games, Math Odyssey was born out of a desire to make algebra feel magical, intuitive, and deeply rewarding. By transforming mathematical equation solving into turn-based wizard spell-casting and interactive mechanical balance scales, we turn problem-solving into an epic quest to liberate fantasy realms.

⚙️ How We Built It

Math Odyssey was engineered as a high-performance, single-page Web Application using modern web technologies:

• Frontend Framework & Language: Built with React 19 and TypeScript for strict type safety and modular component architecture.
• Styling & UI Aesthetics: Styled with Tailwind CSS v4 combined with custom glassmorphism panels, CSS animations, and fantasy color palettes.
• Visual Balance Physics: Created an interactive SVG mechanical balance scale component that models linear equations visually: $$\text{Left Pan: } ax + b \quad \Longleftrightarrow \quad \text{Right Pan: } c$$ When operations are applied (e.g., subtracting $b$ from both sides), the scale dynamically balances in real-time.
• Synthesized Audio Engine: Built a custom zero-dependency Web Audio API Sound Engine that synthesizes retro 8-bit combat sounds, level-up fanfares, and ambient soundscapes directly in code.
• State & Progression: Built-in RPG progression system tracking Player HP, XP, Leveling ($Level = \lfloor \frac{\text{XP}}{200} \rfloor + 1$), Gold rewards, Hero Class perks, and Stage unlock paths.

🚧 Challenges We Faced

1. Visualizing Algebraic Equivalence: Translating algebraic equations like $3x + 4 = 19$ into intuitive visual weights on a dynamic SVG scale required precise layout math. We had to ensure weight blocks visually shifted and balanced naturally whenever a student clicked an operation step.

2. Viewport-Aware Interactive Map UI: Positioning 7 quest waypoints across a responsive Ghibli world map presented UI challenges. Hover details and tooltip dialogs initially overflowed off-screen on smaller displays. We implemented smart viewport boundary checks so tooltips automatically adapt their alignment (left, right, top, or bottom) based on screen coordinates.

3. Balancing Combat & Pedagogical Mechanics: Designing an RPG combat flow where fast math answers yield critical spell strikes ($Damage = Base + SpellPower \times \text{Streak}$) without overwhelming younger students required careful tuning of HP pools and error forgiveness mechanisms.

🎓 What We Learned

• Visual Intuition in Math: Modeling inverse operations (e.g., applying $\frac{1}{a} \times$ to eliminate coefficients) visually on a balance scale dramatically reduces cognitive friction for learners.
• Web Audio Synthesis: Mastering Web Audio API oscillators and gain envelopes allowed us to deliver rich sound effects without loading heavy MP3 audio assets.
• React 19 Performance: Utilizing React 19's state handling enabled silky smooth 60fps animations across complex RPG combat arenas and interactive world maps.

🚀 What's Next for Math Odyssey

• Expanded Curriculum: Adding quadratic equations ($ax^2 + bx + c = 0$), systems of equations, and Cartesian coordinate graphing dungeons.
• Multiplayer Guild Battles: Allowing students to team up in co-op boss raids where team strategy relies on collaborative math problem solving.
• Teacher Dashboard Analytics: Providing real-time class progress tracking, accuracy metrics, and customizable problem set assignments for educators.

Built With

• html5
• javascript