タイマーを実装するのが難しいです - Javascript

Question

私はこのトリビアゲームのタイマーを実装しようとしていましたが、私の場合はどのように動作するのか理解できません。

JS：

var questions = [ 
{ 
    "question": "The next Playstation platform will be:", 
    "allAnswers": ["PS5", "PS4K", "PSX", "PS8K"], 
    "correctAnswer": "PS4K" 
}, 
{ 
    "question": "The Sloth's scientific name, Bradypus, is Greek for:", 
    "allAnswers": ["Moving slowly", "Swiftly", "Slow feet", "Sleeping"], 
    "correctAnswer": "Slow feet" 
}, 
{ 
    "question": "Earth is how far away from the Sun:", 
    "allAnswers": ["92.96 Million Miles", "82.96 Million Miles", "102.96 Million Miles", "72.96 Million Miles"], 
    "correctAnswer": "92.96 Million Miles" 
}, 
{ 
    "question": "The first issue of National Geographic was issued in:", 
    "allAnswers": ["1901", "1874", "1888", "1926"], 
    "correctAnswer": "1888" 
}, 
{ 
    "question": "It is approximitely how hot on the planet Venus:", 
    "allAnswers": ["262 Degrees C", "162 Degrees C", "462 Degrees C", "862 Degrees C"], 
    "correctAnswer": "462 Degrees C" 
}, 
{ 
    "question": "What type of star is the Sun:", 
    "allAnswers": ["White Dwarf", "Yellow Dwarf", "The sun is NOT a star", "Orange Dwarf"], 
    "correctAnswer": "Yellow Dwarf" 
}, 
{ 
    "question": "Approximitely how much of the ocean has been explored:", 
    "allAnswers": ["12%", "23%", "38%", "5%"], 
    "correctAnswer": "5%" 
}, 
{ 
    "question": "Approximitely how long did it take for the Apollo missions to reach the moon:", 
    "allAnswers": ["36 hours", "24 hours", "72 hours", "96 hours"], 
    "correctAnswer": "72 hours" 
}, 
{ 
    "question": "The world record for most spoons balanced on the face is:", 
    "allAnswers": ["45 spoons", "62 spoons", "31 spoons", "91 spoons"], 
    "correctAnswer": "31 spoons" 
}, 
{ 
    "question": "The world record for most socks put on one foot in one minute is:", 
    "allAnswers": ["12 socks", "28 socks", "48 socks", "67 socks"], 
    "correctAnswer": "48 socks" 
}]; 

var content = document.getElementById("content"); 
var questionHolder = document.getElementById("question"); 
var choicesHolder = document.getElementById("choices"); 
var scoreHolder = document.getElementById("score"); 
var timeHolder = document.getElementById("time"); 
var submitButton = document.getElementById("submit"); 

var questionTracker = 0; 
var score = 0; 
var timer = 20; 
var wasQuestionAsked = true; 

// var myTimer = setInterval(askQ(), 10000); 

function askQ() 
{ 
    var choices = questions[questionTracker].allAnswers; 
    var tempChoices = ""; 

    for(var i = 0; i < choices.length; i++) 
    { 
    tempChoices += "<input type='radio' name='quiz" + questionTracker + "' id='choice" + (i + 1) + "' value='" + choices[i] + 
    "'>" + " <label for='choice" + (i + 1) + "'>" + choices[i] + "</label><br>"; 
    } 

    /* LOAD UP QUESTIONS */ 
    questionHolder.textContent = "Question: " + (questionTracker + 1) + ". " + questions[questionTracker].question; 
    timeHolder.textContent = "Time: " + timer + " seconds left."; 
    /* LOAD UP ANSWERS */ 
    choicesHolder.innerHTML = tempChoices; 
    tim = setTimeout(askQ(), 1000); 

    /* SETUP, FIRST ITERATION */ 
    if(questionTracker == 0) 
    { 
    scoreHolder.textContent = "Score: 0 correctly answered questions out of " + questions.length + " total questions."; 
    // timeHolder.textContent = "Time: " + timer + " seconds left."; 
    submitButton.textContent = "Submit Q"; 
    } 
} 

function validateAnswer() 
{ 
    /* CHECK IF QUESTION WAS ASKED, DETERMINE IF WE PROCEED TO NEXT QUESTION */ 
    if(wasQuestionAsked) 
    { 
    submitButton.textContent = "Next Q"; 
    wasQuestionAsked = false; 

    /* DETERMINE WHICH RADIO BUTTON WAS CLICKED */ 
    var userSelection, correctIndex; 
    var radios = document.getElementsByName("quiz" + questionTracker); 
    for(var i = 0; i < radios.length; i++) 
    { 
     /* IF RADIO BUTTON IS CHECKED */ 
     if(radios[i].checked) 
     { 
     userSelection = radios[i].value; 
     } 

     /* FIND CORRECT INDEX */ 
     if(radios[i].value == questions[questionTracker].correctAnswer) 
     { 
     correctIndex = i; 
     } 
    } 

    var labelChange = document.getElementsByTagName("label")[correctIndex].style; 
    labelChange.fontWeight = "bold"; 
    if(userSelection == questions[questionTracker].correctAnswer) 
    { 
     score++; 
     labelChange.color = "#33cc00"; 
    } 
    else 
    { 
     labelChange.color = "#cc0000"; 
    } 

    scoreHolder.textContent = "Score: " + score + " correctly answered questions out of " + questions.length + " possible."; 
    /* MOVE ON TO NEXT QUESTION */ 
    } 
    else 
    { 
    wasQuestionAsked = true; 
    /* RESET BUTTON TEXT TO "SUBMIT QUESTION" */ 
    submitButton.textContent = "Submit Q"; 
    /* IF WE HAVE NOT YET REACHED LAST QUESTION, INCREASE Q BY ONE */ 
    if(questionTracker < questions.length - 1) 
    { 
     questionTracker++; 
     askQ(); 
    } 
    else 
    { 
     showFinalScore(); 
    } 
    } 
} 

/* FUNCTION THAT WILL DISPLAY THE SCORE ONCE TRIVIA GAME IS OVER */ 
function showFinalScore() 
{ 
    content.innerHTML = "<h2 style='color:orange;'>You've finished the Trivia Game!</h2>" + "<h2 style='color:orange;'>These are your results:</h2>" + 
    "<h2 style='color:orange;'>" + score + " out of a total of " + questions.length + " questions." + "<br>" + "Your percentage was: " + Math.round(score/questions.length * 100) + 
    "%</h2>" + "<br>" + "<button class='btn btn-warning' onclick='reset()'>Restart</button>"; 
} 

/* FUNCTION THAT WILL RESET THE GAME */ 
function reset() 
{ 
    location.reload(); 
} 

window.addEventListener("load", askQ, false); 
submitButton.addEventListener("click", validateAnswer, false); 

そして、いくつかのHTML：私は、次のコードを持っている

<div id="content"> 
       <h3 id="question" style="color:orange;"> 

       </h3> 
       <div id="choices"> 

       </div> 
       <br> 
       <p><button id="submit" class="btn btn-warning"></button> 
       </p> 

       <p id="score"> 

       </p> 
       <p id="time"> 

       </p> 
       </div> 

私が欲しいのは疑問が提示されたときに表示、およびからダウンカウントするカウンタのためであります私はsetInterval（）とsetTimeout（）についてW3をチェックしてきましたが、正しく動作するように見えませんでした。誰かがコードを見て、助けを借りて助けてくれるなら、大いに感謝します。ありがとう！ここ

Answer 1

は、例えば次のとおり

<!-- output timer - this will be updated every second. --> 
<div id="output-timer" style="position: absolute; top: 0%; left: 0%;"> 
</div> 

<script> 
    // This is a recursive function, if intTimer is 0 it will return 
    // without doing anything...if intTimer > 0 it will: 
    // 
    // 1. decrease the timer. 
    // 2. update the output. 
    // 3. call itself... 
    // 
    function updateTimer(intTimer) { 
     // timer has expired. 
     // 
     if (intTimer == 0) 
      return; 

     setTimeout(function() { 
      // Decrease timer... 
      // 
      intTimer--; 

      // Update the output... 
      // 
      document.getElementById('output-timer').innerHTML = intTimer.toString(); 

      // Next. 
      // 
      updateTimer(intTimer); 
     }, 1000); 
    } 

    // Initialise the timer ad begin timing! 
    // 
    function initTimer(intTimer) { 
     document.getElementById("output-timer").innerHTML = intTimer.toString(); 

     updateTimer(intTimer); 
    } 

    initTimer(20); 
</script>