Jquery Quiz - 如何进入下一个问题？

Question

我正在根据一些测验模板进行测验，但我被困在“提交”上:(我不知道为什么与“下一步”按钮做的事情不同。 点击“提交”需要做什么：

1. 如果为空 = 显示消息
2. 如果回答正确 = 显示下一个问题（这是我无法让它发挥作用的地方，它会一直跳过一个问题）
3. 如果答案不正确 = 显示一条消息和下一步按钮以转到下一个问题 有人可以看看我的代码吗？并告诉我需要更改哪一部分？ 谢谢。

(function() {
  var questions = [{
    question: "Which food do you like?",
    choices: ["Lettuce", "Chicken", "Eggs"],
    correctAnswer: 0,
    incorrectmsg:"msg1"
  }, {
    question: "What is 3*6?",
    choices: [3, 6, 9, 12, 18],
    correctAnswer: 0,
    incorrectmsg:"msg2"
  }, {
    question: "What is 8*9?",
    choices: [72, 99, 108, 134, 156],
    correctAnswer: 0,
    incorrectmsg:"msg3"
  }, {
    question: "What is 1*7?",
    choices: [4, 5, 6, 7, 8],
    correctAnswer: 0,
    incorrectmsg:"msg4"
  }, {
    question: "What is 8*8?",
    choices: [20, 30, 40, 50, 64],
    correctAnswer: 0,
    incorrectmsg:"msg5"
  }];

  var questionCounter = 0; //Tracks question number
  var selections = []; //Array containing user choices
  var quiz = $('#quiz'); //Quiz div object

  // Display initial question
  displayNext();

  // Click handler for the 'next' button
  $('#submit').on('click', function (e) {
    e.preventDefault();

    // Suspend click listener during fade animation
    if(quiz.is(':animated')) {
      return false;
    }
    selections[questionCounter] = +$('input[name="answer"]:checked').val();
    alert((selections[questionCounter]));

    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        alert("good");
        displayNext();
        questionCounter++;
      } else {
        if (isNaN(selections[questionCounter])){
          alert("none");
          $("#alert").show();
        } else{
          alert("bad");
          $("#answer").empty();
          $("#answer").append('Incorect: ' + questions[i].incorrectmsg);
          $("#answer").show();
          $("#submit").hide();
          $("#next").fadeIn();
        }
      }
    }
  });

  // Next button
  $('#next').on('click', function (e) {
    e.preventDefault();
    displayNext();
    questionCounter++;
  });

  // hide the alert message
  $("#quiz").click(function() {
    $('#alert').fadeOut();
  });

  // Creates and returns the div that contains the questions and
  // the answer selections
  function createQuestionElement(index) {
    var qElement = $('<div>', {
      id: 'question'
    });

    var header = $('<h4>Question ' + (index + 1) + ':</h4>');
    qElement.append(header);

    var question = $('<p>').append(questions[index].question);
    qElement.append(question);

    var radioButtons = createRadios(index);
    qElement.append(radioButtons);

    return qElement;
  }

  // Creates a list of the answer choices as radio inputs
  function createRadios(index) {
    var radioList = $('<ul>');
    var item;
    var input = '';
    for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<li>');
      input = '<input type="radio" name="answer" value=' + i + ' />';
      input += questions[index].choices[i];
      item.append(input);
      radioList.append(item);
    }
    return radioList;
  }

  // Displays next requested element
  function displayNext() {
    quiz.fadeOut(function() {
      $("#answer, #alert").hide();
      $('#question').remove();
      $("#next").hide();
      $("#submit").show();

      if(questionCounter < questions.length){
        var nextQuestion = createQuestionElement(questionCounter);
        quiz.append(nextQuestion).fadeIn();
      }else {
        var numCorrect = 0;
        for (var i = 0; i < selections.length; i++) {
          if (selections[i] === questions[i].correctAnswer) {
            numCorrect++;
          }
        }
        alert('You got ' + numCorrect + ' questions out of ' +
                     questions.length + ' right!!!');
        $('#submit').hide();

        // var scoreElem = displayScore();
        // quiz.append(scoreElem).fadeIn();
        // $('#next').hide();
        // $('#submit').hide();
      }
    });
  }

  // Computes score and returns a paragraph element to be displayed
  function displayScore() {
    var score = $('<p>',{id: 'question'});

    var numCorrect = 0;
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
      }
    }

    score.append('You got ' + numCorrect + ' questions out of ' +
                 questions.length + ' right!!!');
    return score;
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="quiz"></div>
<div id="alert"><p>Please make a selection!</p></div>
<div id="answer"></div>
<button class="btn-lg" id="submit">Submit</button>
<button class="btn-lg" id="next">Next</button>
<div id="results"></div>

Answer 1

问题是您正在收集答案，当您单击提交按钮时，它会迭代整个收集的答案，因此 displayNext 会被之前的答案多次触发。 我无法完全理解您的意图，只是解决上述问题，不要重复收集的全部答案，只需使用i = selections.length - 1 检查最新答案。

(function() {
  var questions = [{
    question: "Which food do you like?",
    choices: ["Lettuce", "Chicken", "Eggs"],
    correctAnswer: 0,
    incorrectmsg:"msg1"
  }, {
    question: "What is 3*6?",
    choices: [3, 6, 9, 12, 18],
    correctAnswer: 0,
    incorrectmsg:"msg2"
  }, {
    question: "What is 8*9?",
    choices: [72, 99, 108, 134, 156],
    correctAnswer: 0,
    incorrectmsg:"msg3"
  }, {
    question: "What is 1*7?",
    choices: [4, 5, 6, 7, 8],
    correctAnswer: 0,
    incorrectmsg:"msg4"
  }, {
    question: "What is 8*8?",
    choices: [20, 30, 40, 50, 64],
    correctAnswer: 0,
    incorrectmsg:"msg5"
  }];

  var questionCounter = 0; //Tracks question number
  var selections = []; //Array containing user choices
  var quiz = $('#quiz'); //Quiz div object

  // Display initial question
  displayNext();

  // Click handler for the 'next' button
  $('#submit').on('click', function (e) {
    e.preventDefault();

    // Suspend click listener during fade animation
    if(quiz.is(':animated')) {
      return false;
    }
    selections[questionCounter] = +$('input[name="answer"]:checked').val();
    alert((selections[questionCounter]));
    
    i = selections.length -1
    if (selections[i] === questions[i].correctAnswer) {
      alert("good");
      displayNext();
      questionCounter++;
    } else {
      if (isNaN(selections[questionCounter])){
        alert("none");
        $("#alert").show();
      } else{
        alert("bad");
        $("#answer").empty();
        $("#answer").append('Incorect: ' + questions[i].incorrectmsg);
        $("#answer").show();
        $("#submit").hide();
        $("#next").fadeIn();
      }
    }
  });

  // Next button
  $('#next').on('click', function (e) {
    e.preventDefault();
    displayNext();
    questionCounter++;
  });

  // hide the alert message
  $("#quiz").click(function() {
    $('#alert').fadeOut();
  });

  // Creates and returns the div that contains the questions and
  // the answer selections
  function createQuestionElement(index) {
    var qElement = $('<div>', {
      id: 'question'
    });

    var header = $('<h4>Question ' + (index + 1) + ':</h4>');
    qElement.append(header);

    var question = $('<p>').append(questions[index].question);
    qElement.append(question);

    var radioButtons = createRadios(index);
    qElement.append(radioButtons);

    return qElement;
  }

  // Creates a list of the answer choices as radio inputs
  function createRadios(index) {
    var radioList = $('<ul>');
    var item;
    var input = '';
    for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<li>');
      input = '<input type="radio" name="answer" value=' + i + ' />';
      input += questions[index].choices[i];
      item.append(input);
      radioList.append(item);
    }
    return radioList;
  }

  // Displays next requested element
  function displayNext() {
    quiz.fadeOut(function() {
      $("#answer, #alert").hide();
      $('#question').remove();
      $("#next").hide();
      $("#submit").show();

      if(questionCounter < questions.length){
        var nextQuestion = createQuestionElement(questionCounter);
        quiz.append(nextQuestion).fadeIn();
      }else {
        var numCorrect = 0;
        for (var i = 0; i < selections.length; i++) {
          if (selections[i] === questions[i].correctAnswer) {
            numCorrect++;
          }
        }
        alert('You got ' + numCorrect + ' questions out of ' +
                     questions.length + ' right!!!');
        $('#submit').hide();

        // var scoreElem = displayScore();
        // quiz.append(scoreElem).fadeIn();
        // $('#next').hide();
        // $('#submit').hide();
      }
    });
  }

  // Computes score and returns a paragraph element to be displayed
  function displayScore() {
    var score = $('<p>',{id: 'question'});

    var numCorrect = 0;
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
      }
    }

    score.append('You got ' + numCorrect + ' questions out of ' +
                 questions.length + ' right!!!');
    return score;
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="quiz"></div>
<div id="alert"><p>Please make a selection!</p></div>
<div id="answer"></div>
<button class="btn-lg" id="submit">Submit</button>
<button class="btn-lg" id="next">Next</button>
<div id="results"></div>