Exercise: JavaScript Quiz

For this exercise, explore the basic syntax and semantics of JavaScript and how to apply interactivity to a web page by calling JavaScript functions when events are generated by HTML elements.

Online quizzes are very popular both to "automate" education, to help people learn more about themselves, or even to figure out if you are in love. With JavaScript it is easy to build a site that can deliver a quiz about any subject you can imagine as well as score the results. This version will be very basic, but we will build on it over the next few weeks to parameterize it, add multiple questions, and track the results (including for multiple users).

The given code simply presents users with quiz questions as a simple list. Your task is to make it interactively check if the selected answer is correct by styling the chosen option appropriately. Only after all the questions have been answered, should the user get a report of the percent of correct responses. At any time, the user can reset the quiz and start over. For extra practice, you can prevent the user from changing their answer once a choice has been selected.

Practice adding JavaScript function calls directly within the HTML code as well as doing it programmatically within the JavaScript code; the semantics are slightly different so it is useful to know when to prefer which solution.

Add your JavaScript code by editing a separate file named main.js that is linked from the HTML file.

Practice using the basic GIT workflow commands (add, commit, and push). After you have completed a "task" or "feature", make a GIT commit with an appropriate comment and after and regularly push your changes to Gitlab so your online repository reflects your work and you can see how it looks on the live web.