9. Visual Enhancement

Using P5.js to Add Animation (Optional)

Let's include a function that will enable you to create fancy animations later. Add the following function just after your setup( ) function. Examples of how to add visual effects to your trivia game are available in the code examples section, but for now we will simply change the background color.

JavaScript

//Loops continously for background effects and animations. (p5.js)
function draw() {
  if (trivia.state == "welcome") background("yellow");
  else if (trivia.state == "question") background("lightblue");
  else if (trivia.state == "correct") background("green");
  else if (trivia.state == "incorrect") background("red");
  else if (trivia.state == "thankyou") background("orange");
}

You will also need to add the following code to the end of your CSS.

CSS

canvas {
  min-width: 100vw;
  min-height: 100vh; 
  position: absolute;
  top: 0;
  z-index: -1;
}

You should now see that the screen’s background color changes based on the current state of the game.