-
What was your motivation?
- My motivation for this project was to come up with a simple interactive quiz that mimics other multiple-choice quizzes I've taken in my life.
- The acceptance and grading criteria are simple - creating a multiple choice quiz that progresses through questions, tracks the user's score, and then logs that score into a highscores table.
-
Why did you build this project?
- I build this project to continue to build my skills using JavaScript. Before delving fully into JQuery and other APIs/Libraries, it is essential to learn the basics of "Vanilla JavaScript".
-
What problem does it solve?
- I now how a webpage built which functions correctly using multiple query selectors, event listeners, objects, and creating/appending elements to an HTML page.
-
What did you learn?
- HTML:
- Computational Thinking - breaking this entire project down into small tasks and then tackling one by one. Example - putting together the bare minimum in the header and introduction sections before progressing to the quiz or final score sections
- Starting off with the bare minimum HTML/CSS is very important before moving to JS. Often, it seems very easy to get caught up styling the page when that is not of the most importance.
- JavaScript:
- Similar to the HTML/CSS - making sure to tackle the basic requirements before proceeding to anything more difficult
- The importance of using multiple functions. Having many different functions allows debugging to be easier, and helps to break the code down into smaller bits.
- Gained better practice using and accessing JS objects
- Must have at the minimum an empty return value if you want a function to stop after a condition is met in an if statement. First occurance in the runQuiz() function in order to stop the quiz from progressing when the index is reached - otherwise it will throw an error.
- Gained a better understanding of setTimeout functions - the delay of 250ms is enough to show the result of the current question and quick enough to proceed to the next question.
- Append child is very easy - just need to locate the div or HTML element that you want to append to.
- Time Interval as a global variable - by removing the var keyword from the setTime() function, you are able to clear the interval from anywhere in the JS file rather than only locally within the function.
- HTML:
