This is a project to just help boost my general understanding of some core fundamentals of HTML, CSS, and JavaScript. One of the earlier challenges for me was to get a complete understanding of how the browser stores data and later uses that to populate elements on a page. My plan is to really utilize local storage as a means to keep track of the player’s score as they progress through the quiz. When the user submits an answer, I want the page to refresh to the next question while keeping track of the user’s previous answer which should all contribute to their final score in the end.
What may be the most challenging aspect of this project is not the technology but logic of the quiz. I am basing this quiz off of the ‘Big 5’ personality traits. These traits are: Openness, Contentiousness, Extroversion, Agreeableness, and Neuroticism. Depending on what the answers the user selects they will be labeled one of these traits. Furthermore, each of these traits will be tied to a specific Seinfeld character whom represents it the most.
To start I created a quick UI using Bootstrap with a header, some radio buttons, and a submit button. As of right now each radio button is given the name of a Seinfeld character (these will later be questions). In this early testing, once a user hit’s the submit button, the following event handler will run:
In this event handler, a switch function will be called and based on the radio button label selected, a score associated with it will by saved in local storage.
This is part one of an ongoing plan of posting updates for this project. This is just a test, more updates will come.