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>

Я застрял в том, когда пользователь выбирает правильный ответ и не переходит к следующему вопросу, но застрял на currect 1 вопрос.

Пожалуйста, помогите. Благодарю.

Answer 1

С этим слегка измененным HTML (я добавил классы class="answers", alt, чтобы сделать изображения правильными и модифицированными, чтобы облегчить их выполнение и увидеть). Я сопротивлялся удалению всего этого стиля из разметки и помещению его в 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 вы кладете в узле такой же и вопрос делает не меняются визуально.

Надеюсь, это вам поможет.