Let's add some simple sound effects to your trivia game when a player answers a question.

1 - Find sound effects you would like to use or make your own. Files of type .mp3 are a good choice for web apps. You can download the two sounds below as a starting point.

2 - Create a folder named sounds and place your sound files in it. Pay close attention to your files and folder structure for you app. Below is an example of what yours should look like.

• index.html

• style.css

• code.js

• sounds

  • sound_correct.mp3

  • sound_incorrect.mp3

3 - Declare variables for your sounds at the very top of your code.js file. They should be above the setup() function. These lines create variables that will represent your sound files so that you can play them at a later point in your code. Also, since we are placing them at the top of your code and not inside any function, they are called global variables. This means we can access these variables inside any other function, which we will do next.

4 - Place the code shown below inside your onClickedAnswer( ) function to play the sounds at the appropriate time. Notice how we are combining the text and sound feedback in our if/else statements inside the code brackets { }. Your text feedback will likely be different. So adjust as needed.

That's it. Your game should now play your sound effects when a player answers a question.

Below are some basic style changes you could use to update the look of the trivia app. With CSS, the possibilities are nearly endless. Just look at this CSS reference at w3schools. It is easy to just try things out by trial and error. Most styles have several options to consider. So, as needed, do a Google search for "CSS" followed by a simple description of a style you are interested in, and you will likely find some answers.

Backgrounds

In your style.css file try changing or adding the following background properties to different elements in your trivia game,--like the body, .screen, or button CSS selectors to see the result.

background: rgba(255,100,100);

Notice that there are many ways to define colors.

background: linear-gradient(red, yellow);

/* You need an image file in your folder for this one */
background: url("paper.gif");

Borders and Shadows

border: 1px solid rgb(50,50,50);

border-radius: 10px;

box-shadow: 3px 3px 7px red;

Fonts and Text

font-family: "Times New Roman", Times, serif;
font-size: 32px;
color: blue;
text-align: right;

Want to get a unique font? Try Google Fonts. Hint: If you find a font you like, click the "+" for the font family then click the "family selected" bar at the bottom of the page to see instructions.

The following example code demonstrates how to add basic scoring to your trivia game.

HTML

Add an HTML element with a unique id that will display the score. For example, you could place the following example to the top of the question screen.

<h1 id="score">-</h1>

Javascript

Next you will need to update the score presented on the screen at the appropriate time. For starters, place the following line of Javascript inside the curly braces { } of the onClickedAnswer() function code block. Placing it at the top of the code block is a good place.

$('#score').html(`${trivia.totalCorrect} of ${trivia.totalAnswered} Correct`);

That's it, but you will likely want to customize how the score is presented. You could also add the core to the thank you screen in a similar way.

Let's add a screen for the player to choose a question category after they click start.

1 - Add the following HTML in your index.html file just after your welcome screen. This provides a place for the iDEW trivia library to place buttons for your categories.

<!-------------- CATEGORY SCREEN --------------->
	<div class='screen' id='category-screen'>
		<h1>Choose a category.</h1>
    	<div id="category-set">
    	</div>
	</div>

2 - Enable trivia categories in your code.js file by placing the following Javascript line inside your setup( ) function. This simply tells the iDEW trivia library that you would like to process your category screen.

trivia.categoriesEnabled = true;

3 - Add the following Javascript function in your code.js file after (not inside) your displayWelcome( ) function.

function displayCategories() {
  $(".screen").hide();
  $("#category-screen").show();
  trivia.insertCategoriesInfo();
}

4 - Modify your current onClickedStart( ) function to include displayCategories(), shown on line 2 below. You should remove displayQuestion()line inside your onClickedStart(). You simply want the player to see your categories screen after clicking start, instead of going straight to the question screen.

function onClickedStart() {
  displayCategories();
}

5 - Lastly, add a new Javascript function to handle what to do when a category is selected. In this case you will just move the player on to the question screen. The iDEW trivia library is keeping track of what category was selected. To keep things tidy, place this new function just before (but not inside) your onClickedStart( ) function.

function onClickedCategory() {
  displayQuestion();
}

That's it. Try it out.

The default trivia template moves the player on to the next question after a few seconds. This example demonstrates how to add a button for the player to click that moves the game along to the next question.

Javascript Changes

First, find the onClickedAnswer( ) function. Then locate the following line of code in that function.

setTimeout(trivia.gotoNextQuestion, 3000);

The code above causes your game to wait 3 seconds before moving on to the next question. Since you will use a button instead, you can either delete this line of code or comment // it out.

Next, add the following line of code as a replacement. Notice how an HTML button is appended after your question feedback that responds to a click by running trivia.gotoNextQuestion() .

$("#feedback").append(`<br><button onclick="trivia.gotoNextQuestion();">Next Question</br>`);

That's it. It should work for you. Consider styling this button differently by assigning it a class and adding the new style in your CSS.

In the menu to the left you can find a list of example code modifications you could make to the trivia game.

This is an example of adding a timer to the question screen that counts down to zero.

HTML

Add the following HTML element inside your question screen section--and probably at the top of the screen. This will be where your timer digits will be displayed.

Javascript

Add the code shown below to your displayQuestion ( ) function inside the curly braces { } of the function's code block. The Javascript function called setInterval runs a block of code at a set interval. In this example, we run a block of code every 100 milliseconds that allows us to update the countdown timer accurately. If the timer reaches zero, it triggers an incorrect answer using trivia.triggerAnswer(false). Notice that you can adjust the time limit by changing the timeLimit variable.

CSS

Below is an example of some basic CSS properties you could apply in your stylesheet. Adjust as needed.

That's it. You should have a functioning timer that you can modify as you wish.

In this simple mod we will let the player know at the welcome screen how many questions are in the database using the trivia.totalQuestions value that automatically counts the questions for us.

1 - Modify your welcome screen HTML like on line 4 below, where the id="question-count" was added.

Now we will insert the trivia.totalQuestions value into a sentence to be placed in the element with id="question-count".

2- Add the code on line 4 below to the end of your displayWelcome() function in your JavaScript.

That's it. Try it out.

CSS

In order to display basic True/False questions, simply add the following CSS to your stylesheet. :empty identifies answer buttons that have no content and hides the element using display: none

.answer-btn:empty {
   display: none;
} 

Google Sheet Table of Questions

In your Google sheet table simply put the correct answer (whether "True" or "False") in the correct answer column and the incorrect (whether "False" or "True") in the first incorrect column. Leave the remaining two answers blank.

Likewise, you could have questions that offer only 3 multiple choice answers.

HTML

Add the following HTML element inside your question screen section--and probably at the top of the screen. This will be where your timer digits will be displayed.

<h1 id="timer">-</h1>

Add the following HTML element insider your question screen section--possibly at the bottom. This is the button to pause the game.

<button id="pause-game" onclick="togglePause();">Pause</button>

Javascript

Add the code shown below to your displayQuestion ( ) function inside the curly braces { } of the function's code block. The Javascript function called setInterval runs a block of code at a set interval. In this example, we run a block of code every 100 milliseconds that allows us to update the countdown timer accurately. If the timer reaches zero, it triggers an incorrect answer using trivia.triggerAnswer(false). Notice that you can adjust the time limit by changing the timeLimit variable.

  $("#pause-game").show(); //in case it was hidden
  $("#pause-game").html("Pause");
  var timeLimit = 10;
  var startTime = Date.now();
  var clock = 10;
  clearInterval(trivia.countDown);
  trivia.isPaused = false;
  trivia.countDown = setInterval(function () {
    if (trivia.state == "question" && !trivia.isPaused) { //ensure the user has not already answered
      var elapsedTime = (Date.now() - startTime) / 1000; //calculate the time elapsed
      clock = timeLimit - Math.floor(elapsedTime);//calculate the countdown w/o decimals
      $('#timer').html(clock);// place the clock time in the html for viewing
      if (clock == 0) { //if time is up
        clearInterval(trivia.countDown); //stops our timer at 0. Don't want -1 ...
        trivia.triggerAnswer(false); //marks the answer as incorrect in trivia library
      }
    }
    else if (!trivia.isPaused) clearInterval(trivia.countDown);
    else {
      timeLimit = clock;
      startTime = Date.now();
    }
  }, 100);//100 is the time interval in milliseconds

Add the following function to your Javascript file at the bottom. This will change the pause state of the game and change the text of the button appropriately. Your HTML button runs this function on a click.

function togglePause() {
  trivia.isPaused = !trivia.isPaused; //changes pause state
  var btnTxt = trivia.isPaused ? "Resume" : "Pause";
  $("#pause-game").html(btnTxt);
  $(".answer-btn").attr("disabled",trivia.isPaused);//disable answer buttons when paused.
}

Add the following line to the top (but inside the curly braces) of your onClickedAnswer function. This will hide the pause button after an answer is clicked. It probably doesn't make sense to have that button showing after the answer is clicked.

$("#pause-game").hide();

CSS

Below is an example of some basic CSS properties you could apply in your stylesheet. Adjust as needed.

#timer{
  text-align: center;
  width: fit-content;
  margin: auto;
}

That's it. You should have a functioning timer that you can modify as you wish.

If you want questions to display a particular image, like shown above, here are the basic steps.

1 - Upload Images to Your App in an "images" folder.

• index.html

• style.css

• code.js

• images

  • question1image.png

  • question2image.png

2 - Add a Column in Your Spreadsheet for Image Names

3 - Add HTML to Hold the Image

You may want to place this right below your question, like the example at the top of this page.

<div id="image-holder"></div>

4 - Add the Javascript to Display the Image

You will want to add this right after trivia.insertQuestionInfo(); in your displayQuestion( ) function.

if (trivia.currentQuestion.image)
    $('#image-holder').html(`<img src='images/${trivia.currentQuestion.image}'</img>`);
else 
    $('#image-holder').html(``);

5 - Add CSS Styles

These styles will maintain the width of the image and center it on the screen. Change the styles as needed.

#image-holder {
  margin: auto;
  width: 150px;
}

#image-holder > img {
  width: 100%;
}

That's it. It should work for you now.

Spinning Block Example

The function below uses p5.js functions to create a spinning block that you can add to your app background.

1 - Add the following function to the bottom of your JavaScript.

function spinningBlock() { 
    background("gray"); 
    translate(width / 2, height / 2); //move to the middle
    rotate(PI / 90 * frameCount); //rotate more with each frame
    rect(-26, -26, 52, 52); //place the rectangle
}

2 - Now you simply need to call this function when you want it to display in the background. In the example below, spinningBlock( ) is called in the draw( ) function when the trivia game state is "welcome" on line 3. If you want, you can choose to call the function at a different point.

//Loops continously for background effects and animations. (p5.js)
function draw() {
  if (trivia.state == "welcome") spinningBlock();
  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");
}

Other Example Animations

Here are more examples of custom animation functions that could be implemented like the spinningBlock() above.

//Just a ball that bounces around on the screen
function ballInBox() {
  background("gray");
  //adjust ball x/y positions based on frameCount
  //and know when to "bounce"
  var x = frameCount%width;
  if (floor(frameCount/width)%2 == 0) x = width - x;
  var y = frameCount*1.3%height;
  if (floor(frameCount*1.3/height)%2 == 0) y = height - y;
  translate(x, y);
  ellipse(0, 0, 3, 3);
}

//balloons rising to the top
function balloons() {
  background("gray");
  var sFrame = floor(frameCount / (4*height))*4*height; //starting frame for looping
  for (var i = 0; i < 30; i++) { //let's do 30 balloons
    randomSeed(10510 * i + 2); //ensures a repeatable random #
    var y = int(random(height*4) - (frameCount - sFrame)/2);
    randomSeed(30260 * i + 1); //ensures another repeatable random #
    var x = int(random(width));
    fill("red");
    line(x, y, x, y + 30);//balloon string
    ellipse(x, y, 10, 15);//balloon
  }
}

This is an example of how you can provide special feedback for each trivia question after the player answers. For example, you may want to provide more information on that question's topic whether they answered correctly or not.

1 - Add a "feedback" column to your question spreadsheet (our database) like shown below, and add custom feedback text for each question.

2 - Next, you want to use the trivia property trivia.currentQuestion.feedback to place the text in the HTML element having id="feedback". Notice how this is done in lines 2 and 3 below. Make the same changes within your onClickedAnswer function in your JavaScript.

function onClickedAnswer(isCorrect) {
  if (isCorrect) $("#feedback").html(trivia.currentQuestion.feedback).show();
  else $("#feedback").html(trivia.currentQuestion.feedback).show();
  $("#correctAnswer").addClass("highlight"); //highlight right answer
  setTimeout(trivia.gotoNextQuestion, 3000); //wait 3 secs...next question
}

That's it. Try it out.