Javascript測驗不進行到下一個

Question

我目前正在嘗試做一個測驗，因爲問題一次只顯示一個問題，總的來說，用戶只需在允許進展前正確回答3個問題。在任何時候，如果用戶錯誤地回答任何問題，用戶將被引導至GameOver頁面。

我目前設法設置隨機問題出現，當用戶選擇錯誤答案時，他們將被定向到GameOver頁面。

此時，即使用戶選擇了正確的答案，我仍被卡在始終顯示Question1的部分。

當用戶從當前問題中選擇正確的答案時，我可以獲得一些關於如何調用下一個問題的幫助嗎？

感謝

var questionOrder = ["Q1", "Q2", "Q3"]; 
 

 
var answerOrder = [ 
 
    ["Yes", "No"], 
 
    ["Yes", "No"], 
 
    ["Yes", "No"] 
 
]; 
 
var CorrectAnswers = ["1", "2", "2"]; 
 

 
//To Set random Question 
 
var random_QuestionIndex = Math.floor(Math.random() * questionOrder.length); 
 

 
//Assign Variable to generate random question for the quiz 
 
var question = questionOrder[random_QuestionIndex]; 
 
var answerList = answerOrder[random_QuestionIndex]; 
 

 
function showQuestion() { 
 
    //Randomise Question 
 
    //Code to generate random question for the quiz 
 
    AnswerIndex = ""; 
 

 
    $('#Question_List').html(question); 
 
    //Generate random answers in relation to the questions 
 
    $('#STBAnswer_01').hide(); 
 
    $('#STBAnswer_02').hide(); 
 
    $('#STBAnswer_03').hide(); 
 
    //$('#STBAnswer_04').hide(); 
 

 
    for (i = 0; i < answerList.length; i++) { 
 
    $('#STBAnswer_0' + (i + 1)).attr('src', answerList[i]); 
 
    $('#STBAnswer_0' + (i + 1)).show(); 
 
    } 
 
} 
 

 
function selectSTBAnswer(index) { 
 
    AnswerIndex = index + ""; 
 
    console.log(AnswerIndex); 
 
    console.log(CorrectAnswers[random_QuestionIndex]); 
 
    //Conditional Answer Check; if answer is wrong, GameOver, else proceed to next Question 
 
    if (CorrectAnswers[random_QuestionIndex] != AnswerIndex) { 
 
    console.log("IncorrectAnswer"); 
 
    $('#QnA').fadeOut({ 
 
     duration: slideDuration, 
 
     queue: false 
 
    }); 
 
    $('#GameOver').fadeIn({ 
 
     duration: slideDuration, 
 
     queue: false 
 
    }); 
 
    } else { 
 

 

 
    console.log("CorrectAnswer"); 
 
    for (i = 0; i < 3; i++) { 
 
     $('#Question_List').fadeOut(); 
 
     $('#STBAnswer_01').fadeOut(); 
 
     $('#STBAnswer_02').fadeOut(); 
 
     $('#STBAnswer_03').fadeOut(); 
 
    } 
 

 
    } 
 
}

<div id="QnA" align="center" style="position:absolute; height:1920px; width:1080px; background-repeat: no-repeat; z-index=1; top:0px; left:0px; "> 
 

 
    <div id="Question_List" style="position:absolute; z-index=99; width:900px; height:200px; top:50px; left:100px; font-size:45px; font-family:'HelveticaNeue'; color:#fff;"></div> 
 

 
    <img id="STBAnswer_01" style="z-index=99; position:absolute; top:250px; left:50px; border:0px;" onclick="selectSTBAnswer('1');"> 
 
    <img id="STBAnswer_02" style="z-index=99; position:absolute; top:350px; left:50px; border:0px;" onclick="selectSTBAnswer('2');"> 
 
    <img id="STBAnswer_03" style="z-index=99; position:absolute; top:450px; left:50px; border:0px;" onclick="selectSTBAnswer('3');"> 
 
</div> 
 

 
<div id="GameOver" align="center" style="position:absolute; height:1920px; width:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:0px; "> 
 
    GAME OVER 
 
</div>

我被困當用戶選擇了正確答案爲，它不會轉換到下一個問題，但停留在當期的第一個問題。

請幫忙。謝謝。

Answer 1

有了這個稍微修改過的HTML（我添加了類class="answers"，使圖像有效和修改風格，使它更容易做和看到）我拒絕從標記中刪除所有樣式，並將其放置在它應該在CSS。

仍然有點麻煩，但您可以在生產發佈之前清理它。

運行了幾次位置：https://jsfiddle.net/MarkSchultheiss/3vr1t002/

<div id="QnA" align="center"> 
    <div id="Question_List" style="position:absolute; z-index=99; width:400px; height:100px; top:50px; left:100px; font-size:45px; font-family:'HelveticaNeue'; color:green;"></div> 

    <img id="STBAnswer_01" alt="first" class="answers" style="z-index=99; position:absolute; top:100px; left:50px; border:0px;"> 
    <img id="STBAnswer_02" alt="secon" class="answers" style="z-index=99; position:absolute; top:200px; left:50px; border:0px;"> 
    <img id="STBAnswer_03" alt="third" class="answers" style="z-index=99; position:absolute; top:300px; left:50px; border:0px;"> 
</div> 

<div id="GameOver" align="center" style="position:absolute; height:1920px; width:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:0px; "> 
    GAME OVER 
</div> 

代碼：

console.clear(); 
var myquiz = myquiz || { 
    questionOrder: ["Q1", "Q2", "Q3"], 
    answerOrder: [ 
    ["Yes", "No"], 
    ["Yes", "No", "Maybe"], 
    ["Yes", "No"] 
    ], 
    CorrectAnswers: ["1", "2", "2"], 
    numberCorrect: 0 
}; 

var question, answerList, random_QuestionIndex; 
//Temp Answer Variable 
var AnswerIndex = ""; 
var slideDuration = 100; 

function getRandom() { 
    //To Set random Question 
    random_QuestionIndex = Math.floor(Math.random() * myquiz.questionOrder.length); 
    console.log("rqi" + random_QuestionIndex); 
    //Assign Variable to generate random question for the quiz 
    question = myquiz.questionOrder[random_QuestionIndex]; 
    answerList = myquiz.answerOrder[random_QuestionIndex]; 
    $('#Question_List').html(question); 
    //Generate random answers in relation to the questions 
    $('.answers').hide(); 
    for (var i = 0; i < answerList.length; i++) { 
    $('.answers').eq(i).attr('src', answerList[i]).show(); 
    } 
} 


function selectSTBAnswer(index) { 
    AnswerIndex = index + ""; 
    console.log(AnswerIndex); 
    console.log(myquiz.CorrectAnswers[random_QuestionIndex]); 
    //Conditional Answer Check; if answer is wrong, GameOver, else proceed to next Question 
    if (myquiz.CorrectAnswers[random_QuestionIndex] != AnswerIndex) { 
    console.log("IncorrectAnswer"); 
    $('#QnA').fadeOut({ 
     duration: slideDuration, 
     queue: false 
    }); 
    $('#GameOver').fadeIn({ 
     duration: slideDuration, 
     queue: false 
    }); 
    } else { 

    console.log("CorrectAnswer"); 
    myquiz.numberCorrect++; 
    getRandom(); 
    for (i = 0; i < 3; i++) {} 
    } 
} 
$('.answers').on('click', function() { 
    var index = $(this).index(); 
    selectSTBAnswer(index); 
    if (myquiz.numberCorrect === 3) { 
    alert("winner winner chicken dinner"); 
    myquiz.numberCorrect = 0; 
    } 
}); 
getRandom(); 

Answer 2

從我看到的情況來看，在開始時在一個變量中選擇一個問題，該變量的作用域爲您的腳本。

//Assign Variable to generate random question for the quiz 
var question = questionOrder[random_QuestionIndex]; 

但是，當選擇一個答案，你撥打：

$('#Question_List').html(question); 

不影響新價值的問題，所以「新的」 HTML你把節點是相同的，這個問題不不能直觀地改變。

希望這會幫助你。