私のトリビアゲームのJavascript/jQueryバグ

Question

私はWeb Devクラスのための基本的なトリビアゲームを作成しています。 HTML/CSS/JS/jQueryを使用して作成します。この課題で作業する新しい要素は、setTimeout（）& setInterval（）メソッドです。

スタートボタンをクリックすると、ゲームは質問をして4つの可能な回答を提供します。ユーザーが回答をクリックするか、タイマーが切れます。結果が表示され、次の質問が自動ロードされます。質問配列のすべての質問が尋ねられると、ゲームは全体的な結果を表示し、画面を更新します。

私が発見したバグは、「ゼロ」が画面に表示されてすぐに答えをクリックするまで、タイマーを一番下まで動かすと、ゲームが反応します答えがクリックされ、時間切れが同時に発生しました。次に、次の質問があまりにも多くの回答を読み込み、タイマーが増加率で減少しています。私は、タイマーに何らかの種類のタイムラグがある場合、答えクリックが通過することを許可するどこかでゼロに達するかどうか、そして、これはクリアされない新しいtimerIDを作成し、次の質問が増える率で。

私はこのためにフィドルを作成しました：https://jsfiddle.net/brianpatrickhummel/0a2hg782/

var correctAnswers = 0; 
var incorrectAnswers = 0; 
var unansweredQuestions = 0; 
var timeRemaining = 16; 
var intervalID; 
var indexQandA = 0; //index to load a different question each round without the game reset or screen refresh 
var answered = false; //variable to stop the timer if user has clicked an answer 
var correct; 
var triviaGame = [ 
     {question:"HOW MANY COLORS ARE THERE ON A RUBIK'S CUBE ?", answer:["5", "6", "7", "4"], correct: "1", image:("assets/images/rubik.png")}, 
     {question:"WHAT IS THE SPEED OF LIGHT ?", answer:["8,600 MILES per SECOND","86,000 MILES per SECOND","186,000 MILES per SECOND","886,000 MILES per SECOND"], correct:"2", image:("assets//images/lightspeed.jpg")}, 
     {question:"APPROXIMATELY HOW LONG DOES IT TAKE FOR SUNLIGHT TO REACH THE EARTH ?", answer:["45 SECONDS", "10 HOURS", "2 HOURS 15 MINUTES", "8 MINUTES"], correct:"3", image:("assets//images/sunlight.jpg")}, 
     {question:"WHAT ELEMENT'S CHEMICAL SYMBOL IS Pb ?", answer:["POTASSIUM","STRONTIUM","LEAD","PALLADIUM"], correct:"2", image:("assets//images/periodictable.png")}, 
     {question:"HOW FAST CAN BEES FLY ?", answer:["35 MPH", "15 MPH", "48 MPH", "8 MPH"], correct:"1", image: ("assets/images/bee.png")}, 
     {question:"WHAT IS THE MOST ABUNDANT ELEMENT IN THE UNIVERSE ?", answer:["HYDROGEN", "OXYGEN", "HELIUM", "CARBON"], correct:"0", image:("assets//images/universe.png")}, 
     {question:"THE AIR THAT WE BREATHE IS COMPRISED MOSTLY OF WHAT ELEMENT ?", answer:["CARBON", "ARGON", "OXYGEN", "NITROGEN"], correct:"3", image:("assets//images/breathe.jpg")}, 
     {question:"WHAT IS THE DIAMETER OF THE EARTH ?", answer:["140,000 MILES", "2,500,000 MILES", "8,000 MILES", "25,000,000 MILES"], correct:"2", image:("assets//images/earth.png")} 
]; 

// ------------- FUNCTION DECLARATIONS ---------------------------- 


function startGame() { 
    console.log("game has begun"); 
    $('.start-button').remove(); 
    correctAnswers = 0; 
    incorrectAnswers = 0; 
    unansweredQuestions = 0; 
    loadQandA(); 
}  

function loadQandA() { 
    // console.log(correctAnswers); 
    // console.log(incorrectAnswers); 
    // console.log(unansweredQuestions); 
    // console.log(indexQandA); 
    answered = false; // will allow timeRemaining to be pushed back to <h5> after round reset....else statement in function timer() 
    timeRemaining = 16; 
    intervalID = setInterval(timer, 1000); 
    if (answered === false){ 
     timer(); 
    } 
    correct = triviaGame[indexQandA].correct; 
    var question = triviaGame[indexQandA].question; 
    $('.question').html(question); 
    for (var i = 0; i < 4; i++) { 
     var answer = triviaGame[indexQandA].answer[i]; 
     $('.answers').append('<h4 class= answersAll id=' + i + '>' + answer + '</h4>'); 
    } 

    $("h4").click(function() { 
     var id = $(this).attr('id'); 
     // alert(id); 
     if (id === correct) { 
      answered = true; // stops the timer 
      // alert("correct answer"); 
      $('.question').text("THE ANSWER IS: " + triviaGame[indexQandA].answer[correct]); 
      correctAnswer(); 
     } 
     else { 
      answered = true; //stops the timer 
      // alert("incorrect answer"); 
      $('.question').text("YOU CHOSE: " + triviaGame[indexQandA].answer[id] + ".....HOWEVER THE ANSWER IS: " + triviaGame[indexQandA].answer[correct]); 
      incorrectAnswer(); 
     } 
    });  
} 

function timer() { 
    if (timeRemaining === 0) { 
     answered = true; 
     clearInterval(intervalID); 
     $('.question').text("THE CORRECT ANSWER IS: " + triviaGame[indexQandA].answer[correct]); 
     unAnswered(); 
    } 
    else if (answered === true) { 
     clearInterval(intervalID); 
    } 
    else { 
     timeRemaining--; 
     $('.timeRemaining').text('YOU HAVE ' + timeRemaining + ' SECONDS TO CHOOSE').removeClass('animated pulse infinite'); 
    } 
} 

function correctAnswer() { 
    correctAnswers++; 
    $('.timeRemaining').text("YOU HAVE ANSWERED CORRECTLY!").css({'color':'#3D414F'}).addClass('animated pulse infinite'); 
    resetRound(); 
} 

function incorrectAnswer() { 
    incorrectAnswers++; 
    $('.timeRemaining').text("YOU HAVE ANSWERED INCORRECTLY!").css({'color':'#3D414F'}).addClass('animated pulse infinite'); 
    resetRound(); 

} 

function unAnswered() { 
    unansweredQuestions++; 
    $('.timeRemaining').text("YOU FAILED TO CHOOSE AN ANSWER").css({'color':'#3D414F'}).addClass('animated pulse infinite'); 
    resetRound(); 
} 

function resetRound() { 
    $('.answersAll').remove(); 
    $('.answers').append('<img class=answerImage src="' + triviaGame[indexQandA].image + ' ">'); // adds answer image 
    indexQandA++;         // increments index which will load next question when loadQandA() is called again 
    if (indexQandA < triviaGame.length) { 
     setTimeout(function(){ loadQandA(); $('.answerImage').remove();}, 5000);   // removes answer image from previous round 
    } 
    else { 
     setTimeout(function(){ 
      $('.question').remove(); 
      $('.timeRemaining').remove(); 
      $('.answerImage').remove(); 
      $('.answers').append('<h4 class= answersAll end>CORRECT ANSWERS: ' + correctAnswers + '</h4>'); 
      $('.answers').append('<h4 class= answersAll end>INCORRECT ANSWERS: ' + incorrectAnswers + '</h4>'); 
      $('.answers').append('<h4 class= answersAll end>UNANSWERED QUESTIONS: ' + unansweredQuestions + '</h4>'); 
      setTimeout(function(){ location.reload(); }, 7000);  
     }, 5000); 
    } 
} 





// ----------------------- MAIN PROCESS --------------------- 


$('.startButton').on("click", function() { 
    $('.startButton').removeClass('infinite').addClass('animated fadeOutDown'); //manages the Animate.css applied to Start Button 
     startGame(); 

}); 

Answer 1

たびsetTimeoutかsetIntervalのいずれかでタイマーを設定するには、返されたタイマIDに変数を設定する必要があります。その変数は、タイマーの対話が必要な場所からアクセスできるように、十分なスコープが必要です。

次に、タイマーを中断する必要がある場合はどこでもクリアできます。あなたのケースでは、答えがクリックされると、カウントダウンタイマーを停止する必要があります。

ここではスケールダウンの例です：

window.addEventListener("DOMContentLoaded", function(){ 
 

 
    var clock = document.getElementById("clock"); 
 
    var btnStart = document.getElementById("btnStart"); 
 
    var btnStop = document.getElementById("btnStop"); 
 
    
 
    // Declare this where you can get at it 
 
    var timer1 = null; 
 
    
 
    function start(){ 
 
    clock.textContent = new Date().toLocaleTimeString(); 
 
    timer1 = setTimeout(start, 900); 
 
    } 
 
    
 
    function stop(){ 
 
    // Cancel the timer 
 
    clearTimeout(timer1); 
 
    } 
 
    
 
    btnStart.addEventListener("click", start); 
 
    btnStop.addEventListener("click", stop); 
 
    
 
    start(); 
 

 
});

<div id="clock"></div> 
 
<button id="btnStop">Stop the Clock</button> 
 
<button id="btnStart">Start the Clock</button>