Project 5: Credit App Reflection

     Project 5 was about creating an app that would estimate the user's credit score. Unlike other projects this year, this was an independent project as part of our Career and Financial Management course. The first thing I did in doing this project was research. I was already learning about what credit and a credit score is, why a good credit score is important, how to get a good score, etc. as part of my CFM course but I needed to gather all the information in one place. Then I started planning the parts of my credit app on paper, planning for a total of 3 screens. The first would briefly explain what a credit score is and its significance as well as a few disclaimers. The next screen was a quiz/survey section that asked the user certain questions, the answers to which would determine the user's score. A part of my research, I found out what financial habits and actions either help or hurt one's credit score, so my questions assessed the degree to which they conducted these actions to help or hurt their score. Finally, I planned a results screen to display the user their credit score range based on how they answered the questions.
     Once everything was planned out, I started coding. I encountered a time problem straight off the bat; the 3 screens I planned couldn't be done as separate web pages since time was very tight this time around. Instead, I opted to make on web page with the first screen and last screen as popup modals, small divs that look like a regular popup message on the screen, so there was only 1 web page for this entire project. Upon loading the page, the user would be greeted by a modal that explained what the credit app did, basic info about credit scores, and everything else I planned for he first page. The way I did this was by using a window.onload() function to set the display of the modal's div to block, also including an onlick function for the first modal's button to close the popup when the user clicked the close button.
     The question section implemented objects and arrays to slide through every question and give points to the user. I stored all my questions and answers in the const question object, each q and a set one object and the answer property storying an array of various different choices and point assignment for those choices. Using a for loop in a function, init_ques(), the function added the question and its answers into their specific divs in the HTML, a question index number determining which q and a set to put. Every time the user answered a question, the function nextQues() was called to increase the value of the question index number and the next question would display. Likewise, the function prevQues() decreased the question index number and displayed the previous question.
     As the user answered questions, they accumulated a certain amount of points based on the certain choices they picked. Each choice had a points property and this was added to the user's score if they clicked that choice. When the question index number was greater than the amount of questions there were, the score modal's display was set to block and, using showResult() to allocate the user's in-game score to a real-life score range, I set theHTML of the results modal to display the user's score range.
     These skills are important to a web designer because they are important in making sites interactive. Some sites will ask the user a lot of questions for something like account set up or a 'personality' test. While you could just list all the answers out on the single web page, that could overwhelm the user. Instead, using objects and arrays to slide through the answer make things less crowded and shifts the user's attention to answering the current question. Additionally, using JS to collect and manage points makes things more efficient than putting different score attributes for each answer choice in the HTML. Overall, these skills are good for the UI/UX design of interactive questionnaire sites.