Question

所以我有一个我在https://jsfiddle.net/juligan01/ko5jqhov/建立的测验。当你点击后退按钮时，我能够弄清楚如何选择单选按钮，但是当你点击下一个按钮时我无法弄清楚如何保留它们。必须有一种比我正在做的更简单的方法。有人可以帮忙吗？这是JavaScript：

var correct = 0; //count of correct answers 
var incorrect = 0; //count of incorrect answers
var questionCount = 0; //count of questions
var answers = [];
var choice;

var allQuestions = [{
  question: "What is Elvis Presley's middle name?",
  choices: ["David", "Aaron", "Eric", "Jack"],
  correctAnswer: 1
}, {
  question: "Who is the singer of the Counting Crows?",
  choices: ["Adam Duritz", "John Adams", "Eric Johnson", "Jack Black"],
  correctAnswer: 0
}, {
  question: "Who is the Queen of Soul?",
  choices: ["Mariah Carey", "Whitney Houston", "Aretha Franklin", "Beyonce"],
  correctAnswer: 2
}, {
  question: "Which famous group was once known as The Quarrymen?",
  choices: ["The Beatles", "The Birds", "The Who", "Led Zeppelin"],
  correctAnswer: 0
}];

var totalQuestions = allQuestions.length; //total number of questions

function loadQuestion(questionCount, choice) { //load the next question
  if (questionCount == totalQuestions) { //if you've answered all questions
    $("#next").hide();
    $("#back").hide();
    $("#score").hide().append(correct + "/" + totalQuestions + " correct!").fadeIn("slow");
    $("#restart").show();
    $("#restart").click(function() {
      location.reload(); //reload page when #restart is clicked
    });
  } else {
    $("#next").show();
    $("#restart").hide();
    $("#quiz").hide().fadeIn("slow");
    $("#quiz").append(allQuestions[questionCount].question + "<br><br>");
    for (var i = 0; i < allQuestions[questionCount].choices.length; i++) {
      if (i == choice) {
        $("#quiz").append("<input type='radio' name='questionChoices' value='" + i + "'checked>" + allQuestions[questionCount].choices[i] + "<br>");
      } else {
        $("#quiz").append("<input type='radio' name='questionChoices' value='" + i + "'>" + allQuestions[questionCount].choices[i] + "<br>");
      }

    }

  }
}

$("#next").click(function() { //on click of next button
  if (!$("input").is(":checked")) { //if nothing is checked
    alert("Please make a selection.");
  } else {
    if ($("input:radio[name=questionChoices]:checked").val() == allQuestions[questionCount].correctAnswer) { //if radio button is correct
      correct++; //increase correct number
      $("#symbols").hide().append("<span style='color: green'>√</span>").fadeIn("slow");
    } else {
      incorrect++; //increase incorrect number
      $("#symbols").hide().append("<span style='color: red'>X</span>").fadeIn("slow");
    }
    answers.push($("input:radio[name=questionChoices]:checked").val());
    questionCount++; //increase questionCount
    $("#quiz").empty(); //empty #quiz div
    loadQuestion(questionCount); //run loadQuestion again
  }
});

$("#back").click(function() { //on click of back button
  if (questionCount > 0) {
    $("#symbols").children().last().remove(); //remove last span item
    questionCount--; //decrease questionCount
    choice = answers[answers.length - 1];
    answers.pop();
    $("#quiz").empty(); //empty #quiz div
    loadQuestion(questionCount, choice); //run loadQuestion again
  }
});

loadQuestion(questionCount); //initialize the function

Answer 1

这是一个有效的解决方案，虽然我注意到一个错误，使得最终结果显示5个答案（例如3/5），但我无法在几次尝试后重现该错误，但请注意。

在后退按钮上使用.pop（）删除了您在下一个按钮上收集的所有信息，因此我将其删除，以便您保留信息。更改了数组中信息的创建方式，因此它基于问题编号而不是数组长度。选择加载到前进按钮上，或者你永远不会看到选择，如果没有选择显示它是不确定的。

https://jsfiddle.net/ko5jqhov/62/embedded/result/

 $("#next").click(function() { //on click of next button
  if (!$("input").is(":checked")) { //if nothing is checked
    alert("Please make a selection.");
  } else {
    if ($("input:radio[name=questionChoices]:checked").val() == allQuestions[questionCount].correctAnswer) { //if radio button is correct
      correct++; //increase correct number
      $("#symbols").hide().append("<span style='color: green'>√</span>").fadeIn("slow");
    } else {
      incorrect++; //increase incorrect number
      $("#symbols").hide().append("<span style='color: red'>X</span>").fadeIn("slow");
    }
    alert(answers[questionCount+1]);
    answers[questionCount] = ($("input:radio[name=questionChoices]:checked").val());
    choice = answers[questionCount+1];
    questionCount++; //increase questionCount
    $("#quiz").empty(); //empty #quiz div
    loadQuestion(questionCount, choice); //run loadQuestion again
  }
});

$("#back").click(function() { //on click of back button
  if (questionCount > 0) {
    $("#symbols").children().last().remove(); //remove last span item
    questionCount--; //decrease questionCount
    choice = answers[questionCount];
    //answers.pop();
    $("#quiz").empty(); //empty #quiz div
    loadQuestion(questionCount, choice); //run loadQuestion again
  }
});

如何在背面和下一次单击时保存单选按钮选项

1 个答案: