-
The starting page of the website.
-
What shows up on the screen after getting a question correct.
-
What shows up on the screen when you get a question wrong.
-
What shows up on the screen when you get a hint.
-
What shows up on the screen when you successfully solve the problem with the hint.
Inspiration We noticed many of our classmates getting bored in math class and secretly trying to play video games and watch YouTube shorts. Not only does it get them in trouble when caught, but their math skills also suffer drastically. We wanted to create a solution that makes math more fun by making it feel like an arena battle, but also secretly trains your mental math speed.
What it does Numeracy Arena is a gamified math trainer where users solve math problems to progress. It features a clean, high-contrast UI, instant feedback on answers, and a "Hint" system that provides strategic tips for addition, subtraction, and multiplication without giving the answer away.
How we built it The project was built using HTML5, CSS3, and JavaScript. We used GitHub Pages for deployment to ensure the game is accessible on any device. We also used Claude to generate some of the design codes for the website, including the glow effect. We also explored backend integration using Python and Flask during the development process to understand how web servers communicate with frontends.
Challenges we ran into One of the biggest challenges was managing the deployment. We initially struggled with "404 errors" and folder structures on GitHub. We also had to make a tough technical decision: whether to use a slow AI-powered hint system or a fast, local JavaScript logic. We chose the local path to ensure the game felt snappy and worked perfectly for users with slow internet. This allows people in rural areas to access this website, further improving their math ability.
Accomplishments that we're proud of We are proud of successfully deploying a live web application that anyone can access via a URL. We are also proud of the design that uses a canvas-confetti library to make winning feel rewarding for the student.
What we learned My partner and I learned a massive amount about the GitHub workflow, including commits, repository management, and automated deployments (GitHub Actions). We also learned how to troubleshoot "Secret Scanning" errors and how to pivot our technical strategy when a specific tool (like a backend server) isn't the best fit for the user experience. Furthermore, we learned about tradeoffs that you need, as we decided to trade off some special effects for running speed.
What's next for Numeracy Arena We want to be able to make more detailed explanations after getting a problem, regardless of whether it was right or wrong, add more categories, such as two-step equations, and make the hints even more useful. Also, after finishing the prototype, we want to add a Global Leaderboard so students can compete with their friends. We also plan to add "Boss Levels" with harder algebraic equations and a "Shop" where you can spend the points you earn on different themes and avatars.
Log in or sign up for Devpost to join the conversation.