Inspiration
Our inspiration was to bring forth a fun learning experience for young kids to explore different career fields in STEM and financial literacy associated with their futures. We took inspiration, and some of the features of Super Mario Bros, Brainpop, and Khan Academy, to implement a quest-like activity for kids to do while learning about various careers in the STEM fields.
What it does
The website has allowed the user to explore and choose one of the fields of STEM or finance to further learn about what a career in that field looks like. The user can explore the different subsets of STEM by “traveling” along paths of the island and map; the user embodies an adorable cat-like adventurer as they wander through the inspiring world built forth by human imagination.
How we built it
We used a combination of GitHub, VSCode, HTML, CSS, Javascript, and Procreate to assemble the necessary components of our website. The coding aspect revolved around a delicate balance of HTML, CSS, and JavaScript to produce the front-end of the webpage and the functionality of the user clicks. On the other hand, Procreate was used to create original art assets for this project, specifically the four islands and cat adventure. Procreate was used to create many art animations to complement and liven up our narrative. Given time restraints, some of the features could not be hand-created and were instead generated with the help of ChatGPT and online.
Challenges we ran into
Due to time constraints and the technical difficulties with collaboration, we were limited in building the navigation bar, trying to make the logo a separate entity as well as getting the other text aligned to the left. Furthermore, we initially had plans to pull videos and labor data statistics from different APIs. However, we were unable to find and set up suitable REST API’s for our objective. Creating the assets was also a struggle on a time-crunch as most of the artwork used in this project was handmade.
Accomplishments that we're proud of
We are proud of both the concept we've developed and the graphics we've achieved within the timeframe allotted. This includes the original art and functionality of the website that we were able to get completed within the time, such as the video embed implemented in the pop-up screen when a treasure chest is clicked on.
What we learned
For many of us, this marked our first hackathon experience, and we discovered the importance of seeking help and utilizing available resources effectively. Though it was challenging and we had to overcome a lot of learning curves, we had fun overall and learned many new features for HTML, CSS, and JavaScript, and how to collaborate with peers of different skills and strengths. These features included learning how to manipulate the language, how to implement modals, and how to formulate and integrate CSS with HTML.
What's next for FutureU
Develop the rest of the maps for the subsets of STEM. Add more videos, blogs, and games to each of the islands and quest paths. Add an opportunity for children to develop good finance habits while simultaneously encouraging them to be invested in the site by creating a shop. Using the points accumulated from completing the tasks, users can buy accessories for their avatars, or invest their money in different power ups to encourage them to develop good financial habits.
Built With
- css
- github
- html
- javascript
- vscode
Log in or sign up for Devpost to join the conversation.