We intended to make a set of tools to allow millennials to easily make financial decisions in the future. Millennials do not have the access to education currently that would allow them to learn about the decisions they will need to make in the future. Our intention was to make a website that allowed easy access to tools that would allow them to learn about these financial decisions and trivia in an easy and enjoyable way.
What it does
There are 3 different main applets. I will list them each and explain their use.
Billionaire: This applet allowed us to use a well known game show and convert it rather easily into a game that gave incentives to get a high score. Everyone enjoys bragging about a high score they got with their friends, so this game uses that fact as an incentive for kids to play and try to get better. If they get a question wrong they can either retry the game of go to a study page that allows them to study up on the questions they will need to know for the game and for life.
Financial Survivor: This applet was modeled after the survivor TV show. It is modeled with the idea of life being something you don't only try to survive in, but do as well as you can. This idea allows us to give kids awful scenarios with limited choices, like what would happen in life, and they have to pick the best of the solutions they are offered. It walks them through life and at the end it shows them how they did overall. It is really hard to do so poorly you have to live in a ghetto, but it is also incredibly hard to do so well that you live in a mansion. It models life and can be easily expanded into more scenarios.
Budget: This allows kids to plan out if their life is actually feasible with how they want to live and their job. For instance, if they want a certain house and car but only make 50k a year with the job they are dreaming about going after. If they want expense items then they will want to think about a job that pays better. Otherwise they will need to dial back what they would like to live on.
How I built it
Billionaire: We built the billionaire game off of a github project that we found. We added a lot of functionality to it because it was just a basic app that gave us a good starting point. We added the phone a friend and poll the audience functionality also made a popup when you lose that gives your the correct answer and also allows you to get redirected to the study page that has a larger explanation of the answer. This part has Knockout that was from the starter template and the extra functionality was built off of Angular. The graph for the audience poll is Chart.js
Survivor: Survivor was built in pure Angular and used the routing library to send arguments to a template page. Angular also keeps track of a score behind the scenes so it can give a good, bad, or medium outcome state.
Budget: The budget page is built on Angular as well and uses Sortable.js to do the drag and drop functionality and D3.js to do the charts. The table on the right is dynamically build by an Angular controller and the charts needed a custom angular directive to work.
Challenges I ran into
Getting the charts to work on the budget page was probably the biggest challenge. Angular needed a special compile for the charts to get the data they needed when they needed it and synchronizing between the two was challenging. Also trying to merge the knockout and Angular in the in the Billionaire app proved challenging.
Accomplishments that I'm proud of
We have a good variety of tools available for the users of the website to use. Both the games give opportunities to learn and the variety means that if someone does not like one of the ways they may like the other. And the budgeting app gives the user a chance to see what they should be spending by being able to see the national averages.
What I learned
We learned a lot about financials by doing research for the Financial Survivor scenarios and the Billionaire questions. Two of us had also never used the MEAN stack and that was a great learning opportunity.
What's next for codeOne
I do not know what this question means.