Javascript 测验没有进行到下一个

Question

我目前正在尝试做一个测验，问题一次只显示一个问题，总共，用户只需要正确回答 3 个问题就可以继续进行。在任何时候，如果用户回答错误，用户将被引导至 GameOver 页面。

我目前已经成功地设置了随机出现的问题，当用户选择了错误的答案时，他们将被定向到 GameOver 页面。

此时，我卡在了始终显示问题 1 的部分，即使用户选择了正确的答案也是如此。

当用户从当前问题中选择了正确答案时，我能否获得有关如何调用下一个问题的帮助？

谢谢

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"，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();