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

从我看到的情况来看，你在开头的一个变量中选择了一个问题，该变量的范围是你的脚本。

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

但是当选择答案时，请致电：

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

在不影响新问题的情况下，所以＆＃34; new＆＃34;您放入节点的html是相同的，问题不会在视觉上改变。

希望这会对你有所帮助。

Answer 2

使用这个稍微修改过的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();

Javascript测验没有进展到下一个

2 个答案: