What inspired us: We were inspired by the lack of financial knowledge among the Americans, especially teenagers. We researched and discovered that a large portion of the population does not keep a sufficient emergency savings account. We decided that this is likely a problem that starts when people first enter the workforce. We understand that financial literacy learning can be very boring. We want to gamify the whole experience as if planting trees to make it more enjoyable to teenagers. Learning by quizzing is a way to go.

What we learned: Through the challenges presented to us from learning React and its accompanying languages in one day, we learnt how important a basis in programming languages is for the efficiency of the development process. In addition, we also realized how important time management and how vital financial literacy is to a sustainable life.

How we built it: We built the app through combination of JSX and CSS to initialize and style a multiple choice quiz format. Then, we integrated Javascript and React to make the quiz template programmable. We also created a results page which displayed the end score, showed whether the user earned a tree, and allowed the user to restart the quiz. CSS was used to add animations and interactivity to our page elements. All images were drawn by hand and added in using either JSX or CSS.

Challenges: We have no experience in React. Two members of our team has zero experience using CSS, HTML before this hackathon. We need to learn nearly all the things from scratch.

Future vision: We want to incorporate more elements such as an interface with the forest, keeping track of all the trees earned through playing the quiz. We also want to add a social element to this application, such as being able to invite friends to play along and compete in the quiz.

Built With

Share this project: