Javascript测验没有进行到下一个

Javascript Quiz not progressing to next

本文关键字：下一个 Javascript      更新时间：2023-09-26

我目前正在尝试做一个测试，一次只显示一个问题，用户总共只需要正确回答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>

当用户选择了正确的答案，它没有转换到下一个问题，而是停留在当前的第一个问题时，我被卡住了。

请帮忙。谢谢

使用这个稍微修改过的HTML（我添加了class="answerswers"、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="answerswers" style="z-index=99; position:absolute; top:100px; left:50px; border:0px;">
  <img id="STBAnswer_02" alt="secon" class="answerswers" style="z-index=99; position:absolute; top:200px; left:50px; border:0px;">
  <img id="STBAnswer_03" alt="third" class="answerswers" 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();

根据我所看到的，您在脚本范围内的变量的开头选择了一个问题。

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

但当选择一个答案时，您会呼叫：

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

在不影响问题的新值的情况下，因此您在节点中放置的"新"html是相同的，并且问题不会在视觉上发生变化。

希望这对你有帮助。

相关文章：