Skip to content

Lab 5: Amazing Trivia Game

Today, you will put all the JavaScript and DOM selection/manipulation you’ve learned to implement a simple (but amazing) quiz game!

  1. Go download the quiz.zip starter files and put it in a lab05folder, in your cs343 folder (or somewhere else safe).
  2. Open lab05 in VS Code.
  3. Take a look at quiz.html, but
  4. All of your work will be in scripts/quiz.js

AI Off – Time to Practice!

Please turn off any AI code generation or autocomplete for this lab. Additionally, don’t use AI to generate any code. You shouldn’t need to use it as a reference, but you may still do so if desired.

Instructions

The finished game should look like this:

Finished trivia game

The user should be able to click each button and it will update the score and display the next question. When the game is finished, the main interface will disappear and a win screen will appear showing their final percentage:

Final win screen

The quiz questions are in a constant called questions declared in questions.js. Start by taking a look at its structure. questions is an array of objects –> you likely won’t need any special array methods, but you will need to practice working with nested JavaScript objects!

Then, go to the script at the bottom of the body (imported from scripts/quiz.js). Follow the comments in the code to implement the functions and make the game work. Start by getting all the buttons and writing event handlers for them.

Do NOT modify any of the HTML or CSS provided. You will only need to write JavaScript for this lab.

Hints

  • 🪥 Brush up on your document.getElement... methods and document.querySelector()! You will also need to change the text of elements, which can be done by setting its .textContent property (recommended).
  • 🪵 I also recommend using console.log(...) in your code to help you debug. Don’t forget that you can also console.log() entire elements and objects! This is useful for checking if you are selecting the right objects in the DOM.

Submission

Publish your working quiz.js to gradescope.

Going Further 🚠

  1. What changes would you have to make if you wanted to keep the existing functionality, but also wanted to be able to show a history of which questions the player answered correctly and which incorrectly?
  2. What if you also wanted to know how the player answered the questions they got correct/incorrect?