For our group, entertainment and self-motivated growth was a prominent aspect of our quarentine experience. We wanted to create technology that would allow audience to grow, but at the same time experience this progression in an entertaining, creative, and safe way. Our ideation process led us to create an interactive game that would stimulate activity for children ages four to twelve. This web application game not only helps these children build up their foundational math skills, but also gets them excited and physically active while they play in the comfort of their own homes!

What it does

A web application that is able to be projected onto a larger screen for children to interact with the spontaneous number bubbles. If the user answers the math problems correctly by pressing the right bubbles, then their scores go up by one point. The user (whether parent or child) can select which operations they would want to work on, that is addition, subtraction, multiplication, or division. If a child gets a question wrong, they will not receive a point or progress further until the question is answered.

How we built it

Prototyping - UI Team: After our ideation process, we delved into the wireframing for our user interface. We used Figma to create our wireframes and included our main functionalities within the mockup. Within our wireframes, we included: – A home screen that allows the user to select the math operator they desire, with the options of addition, subtraction, multiplication, and division. – A beginning game screen that shows the various bubbles that may pop up as options for the child to choose, the question that the child is trying to answer, a score tracker, a timer that counts down for every new question, a go home button, as well as a pause game button. We’ve made variations to that game screen to show the app’s functions when a child selects the bubbles, when a child gains a point for the correct response, and how a user can toggle the pause or home button for their respective functions.

Development - SWE Team: We developed Bubble Math collaboratively through, coding in HTML, CSS, and JavaScript. Figma served as a reference as we built the UI of our website, and we dove into programming the mechanics of the game (i.e. collision detection, game state handling, game logic, scoring, etc.)

Challenges we ran into

This hackathon was more logistically challenging than previous hackathons our members have attended given both the online environment and large team size. Working remotely has its inherent challenges, but we made good use of tools such as Discord to streamline collaboration.

Overscoping was another issue we ran into, as we initially intended to pursue 2 projects but found our hands full with the one. We also scaled back on our design after running into a host of technical problems which we were unfortunately unable to find workarounds for.

Accomplishments that we're proud of

Given that for many of us this was our first or second hackathon, we are proud to have shipped a complete project! We think we were able to stay quite true to our initial vision, and we all had quite a lot of fun in the process!

What we learned

Because our group is larger than the average team, we truly learned how to divide and conquer to finish this project. Our team split into two groups, the programmers and the designers. Despite this division, we collaborated constantly through check-ins in Discord and Facebook messenger. Being aware of both development and design changes were necessary in our project process, and our thorough communication shows in our final submission.

What's next for Bubble Math

Being that original idea was to project this game on a wall, our future steps involve incoporating this into a more interactive software, such as VR or an interactive light insulation.

Built With

Share this project: