CxD Archive
Code: Trivia App
Code: Trivia App
  • About
  • Prerequisite Knowledge
  • Code Template
    • Template Build Tutorial
      • 1. Screens as Containers
      • 2. Welcome Screen
      • 3. Question Screen
      • 4. Thank You Screen
      • 5. Core JS Functions
      • 6. Load Questions and Go
      • 7. Respond to Answer Clicks
      • 8. Finishing the Game
      • 9. Visual Enhancement
    • Managing the Question DB
  • More
    • Code Mod Examples
      • Style Changes with CSS
      • Support True/False Questions
      • Add "Next Question" Button
      • Add a Category Selection Screen
      • Add Sound Effects on Answer Clicks
      • Add Basic Scoring
      • Add a Question Timer
      • Add a Question Timer with Pause Button
      • Custom Feedback Text for Individual Questions
      • Use Images with Questions
      • Display the Total Question Count at Welcome
      • Add Background Animation
    • Trivia JS Library Reference
    • P5.js
    • ★ Trivia Project Guidebook
Powered by GitBook
On this page
Export as PDF
  1. Code Template
  2. Template Build Tutorial

9. Visual Enhancement

Previous8. Finishing the GameNextManaging the Question DB

Last updated 4 years ago

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 , 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.

code examples section