Inspiration Math can be daunting for many students, especially when it comes to understanding fractions. I struggled with fractions myself growing up—something about those numbers just never clicked right away. I wanted to create something fun, fast-paced, and educational that could help others grasp fractions in a way I wish I had. Inspired by the simplicity of casual games like Math Blaster and the quick logic challenges from Cool Math Games, Fraction Frenzy was created to make fractions exciting and interactive.

How I Built It Tech Stack: HTML, CSS, JavaScript, and npm for dependency management and development tooling

Frontend: Pure HTML/CSS for structure and styling

Game Logic & Rendering: Vanilla JavaScript with the HTML5 element

Package Management: Used npm to organize and run the development environment

Responsive Design: Mobile-friendly layout with media queries and adaptable canvas elements

What I Learned Structuring a web-based game using modular JavaScript

Rendering dynamic content using the HTML5 canvas

Creating engaging UI/UX using only basic tools

Handling user input and game states

Translating core math concepts into visual, interactive challenges

Challenges I Faced Fixing logic issues with fraction comparison and scoring

Setting up and updating a basic leaderboard system

Ensuring smooth performance and responsiveness across all devices

Making fractions visually understandable while keeping the interface fun

Balancing educational value with gameplay pacing

Conclusion Fraction Frenzy is just the beginning. I plan to expand this into a full suite of math-based mini-games, covering concepts like decimals, percentages, and algebra. A teacher dashboard will allow educators to input custom questions, track progress, and create personalized content. Multiplayer functionality similar to Kahoot will be added, enabling live classroom competitions and remote learning games. The long-term goal is to make math fun, engaging, and accessible for all learners.

Share this project:

Updates