Into the Unknown

Our main inspiration for this project was to provide a solution to financial literacy and making proper financial decisions. This stemmed from the fact that a lot of school districts either lack education regarding financial literacy or they do not properly enforce the teaching of financial information. Especially for women, there is a huge gap between education regarding finances for men and women. Our website provides a solution by creating an environment where individuals can choose their own story. This mini game flips the script and has a princess saving the prince. Throughout the journey, the princess needs to make proper decisions to get to the end with enough money, health, reputation, and supplies. By depicting a female protagonist and giving her the agency to make her own decisions to save the prince, we allow women all around to educate themselves. We also have a page of resources for individuals to promote financial literacy, along with a profile page regarding the statistics acquired during the game, so individuals are able to reflect on their choices.

What it does: Our solution is a game. Through interactive storytelling and an immersive script, we are teaching players how to save, invest, and wisely spend their money. Every action in this game has a consequence, so the player understands that every action they do in the real world also has consequences. At the end of the game, there is an evaluation done based on the choices made throughout the game, and educational resources are recommended for further study.

How we built it: We used VSCode as our platform and the languages we used were CSS, HTML, JavaScript, and Python. We also used Claude, Copilot, Eleven Labs, and Gemini.

Challenges we ran into: The main challenge we ran into was figuring out how to use the Gemini API. We did not understand how to integrate the API within the game so the user could get feedback. After we researched and did some trial and error, we managed to use cloudflare and the free Gemini API key to integrate it within the game. Additionally, it was difficult to make the proportions of the visuals align. We solved this by figuring out what the margin was off by and tweaked it to make the margins fit the screen.

Accomplishments that we're proud of: We are very proud of getting our project to look like a completed game ready to play, as this is our first hackathon! As a team, we planned our idea on the idea that education is the most important thing for a better future, and as most of us are business and finance majors, financial literacy was our cup of tea. For this being our first hackathon, we divided the work very efficiently and formatted our code to create a very visually appealing game.

What we learned: We learned how to efficiently work as a group, vibe code, and communicate especially when the coding platform can only have one person working at a time. So we learned how to do other tasks to make it efficient. Moreover, working as a group to brainstorm allowed us to have an in-depth idea that we were able to carry out. For the future, we have more ideas to make the website more interactive.

Built With

• claude
• copilot
• css
• elevenlabs
• google
• html
• javascript
• python