如何为每个问题创建测验倒数计时器

Question

我想为测验创建一个倒数计时器，该计时器将在下一个问题上重置，如果时间用完并且玩家未选择答案，则也将转到下一个问题。谁能帮助我创建这个plz？

var counter = 10;

setInterval(function () {
  counter--;

  if (counter >= 0) {
    id = document.getElementById('count');
    id.innerHTML = counter;
  }
  if (counter === 0) {
    id.innerHTML = 'Times Up!';
  }
}, 1000);
'''

Answer 1

这里是您的基本工作代码。试一下以获得您想要的结果。编码愉快！

var counter = 10;             //Time counter
var questionsCount = 0;       //Questions counter

//Questions array
var questions = [
   "Question 1","Question 2","Question 3"
] 

questionDivId =  document.getElementById('question');

setInterval(function () {
    counter--;

    if (counter >= 0) {
        id = document.getElementById('count');
        id.innerHTML = counter;
    }
    if (counter === 0) {
        id.innerHTML = 'Times Up!';
        counter = 10;
        questionsCount++;
    } 
    
    //To check if all questions are completed or not
    if (questionsCount === questions.length){
        questionDivId.innerHTML = "Well Played! Game is over";
        id.innerHTML = "";
    } else{
        questionDivId.innerHTML = questions[questionsCount];
    }   
}, 1000);

//To go to the next question
function goToNextQuestion() {
    questionsCount++;
    counter = 10;
}

<div>
    <h1 id="question"></h1>
    <h1 id="count"></h1>
    <button onclick="goToNextQuestion()">Next</button>
</div>