Add a Question Timer

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.

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

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.

var timeLimit = 10;
var startTime = Date.now(); //get the time at the moment a user first sees the question
clearInterval(trivia.countDown);
trivia.countDown = setInterval(function () {
  if (trivia.state == "question") { //ensure the user has not already answered
    var elapsedTime = (Date.now() - startTime)/1000; //calculate the time elapsed
    var 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 clearInterval(trivia.countDown);
}, 100);//100 is the time interval in milliseconds

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.