Question

我正在研究Javascript是性感测验，我坚持以下任务：

“添加”后退“按钮以允许用户返回并更改其答案。用户可以返回到第一个问题。对于用户已经回答的问题，请务必显示单选按钮选择，以便用户不必再次回答她已完成的问题。“

我插入后退按钮很好，但我无法弄清楚如何选择单选按钮。请有人帮我弄清楚如何做到这一点。谢谢！

var totalScore = 0
var questionNumber = 0

var allQuestions = [{
    question: "Who is the 12th president of the United States?",
    choices: ["John Tyler", "James K. Polk", "Millard Fillmore", "Zachary Taylor"],
    answer: "Zachary Taylor"
},
{
    question: "What was the first capital of The Replublic of Texas?",
    choices: ["Austin", "West Columbia", "Houston", "Harrisburg"],
    answer: "West Columbia"
},
{
    question: "What is the capital of Rhode Island",
    choices: ["Providence", "Warwick", "Newport", "Westerly"],
    answer: "Providence"
},
{
    question: "Who will be the 2016-2017 NBA Rookie of the Year?",
    choices: ["Ben Simmons", "Dario Saric", "Joel Embiid", "Brandon Ingram"],
    answer: "Joel Embiid"
}
]

var correct = function () {
    totalScore += 1;
    questionNumber += 1;
    $("#questionDiv").remove();
    $("#quizDiv").append("<h3 id='correct'>That's Correct!</h3>");
    $("#correct").append("<p>Your score is " + totalScore)
    $("#correct").append("<button id='nextButton'>Next Question</button>");
    $("#nextButton").click(function(){
        $("#correct").remove();
        if(questionNumber === 4) {  
            final();
        }
        else {
            question(questionNumber);
        }
    });
}

var incorrect = function () {
    questionNumber +=1;
    $('input:radio[name=questionChoices]:checked').attr("checked", "checked");
    $("#questionDiv").remove();
    $("#quizDiv").append("<h3 id='incorrect'>Sorry, that's incorrect!</h3>");
    $("#incorrect").append("<p>Your score is " + totalScore)
    $("#incorrect").append("<button id='nextButton'>Next Question</button>");
    $("#nextButton").click(function(){
        $("#incorrect").remove();
        if(questionNumber === 4) {  
            final();
        } else {
            question(questionNumber);
        }
    });
}

var back = function () {
  if (questionNumber > 0) {
    questionNumber -= 1;
    $("#questionDiv").remove();
    question(questionNumber);
  } else {
    alert("This is the first question!")
  }
}

var final = function() {
    if (totalScore >= 3) {
        $("#quizDiv").append("<h3>Congratulations! Your final score was " + totalScore + "</h3>")
    }
    else {
        $("#quizDiv").append("<h3>Sorry! Your final score was only " + totalScore + "</h3>")
    }
}

var question = function (i) {
    $("#quizDiv").append("<div id='questionDiv'></div>");
    $("#questionDiv").append("<h2>Question " + (i + 1) + "</h1>");
    $("#questionDiv").append("<h3>" + allQuestions[i].question + "</h3>");
    $("#questionDiv").append("<input type = 'radio' name='questionChoices' value ='" + allQuestions[i].choices[0] + "'>" + "</input>");
    $("#questionDiv").append("<label for = " + allQuestions[i].choices[0] + ">" + allQuestions[i].choices[0] + "&nbsp;" + "</label>")
    $("#questionDiv").append("<input type = 'radio' name='questionChoices' value = '" + allQuestions[i].choices[1] + "'>" + "</input>");
    $("#questionDiv").append("<label for = " + allQuestions[i].choices[1] + ">" + allQuestions[i].choices[1] + "&nbsp;" + "</label>")
    $("#questionDiv").append("<input type = 'radio' name='questionChoices' value = '" + allQuestions[i].choices[2] + "'>" + "</input>");
    $("#questionDiv").append("<label for = " + allQuestions[i].choices[2] + ">" + allQuestions[i].choices[2] + "&nbsp;" + "</label>")
    $("#questionDiv").append("<input type = 'radio' name='questionChoices' value = '" + allQuestions[i].choices[3] + "'>" + "</input>");
    $("#questionDiv").append("<label for = " + allQuestions[i].choices[3] + ">" + allQuestions[i].choices[3] + "&nbsp;" + "</label>" + "</br>")
    $("#questionDiv").append("<button id='backButton'>Back</button>" + "<button id='submitButton'>Submit</button>");
    $("#backButton").click(function() {
         back();
  })
    $("#submitButton").click(function() {
        if($('input:radio[name=questionChoices]:checked').val() === allQuestions[i].answer) {
            correct();
        }
   else if (!$('input:radio[name=questionChoices]').is(':checked') ) {
          alert("Please insert a value!")
        }
        else {
            incorrect();
        }
    }); //click event
}


$(document).ready(function() {
    $("#startButton").click(function() {
        $(this).hide();
        question(questionNumber);
    })
});

Answer 1

您可以在网址中轻松存储一些Cookie或查询字符串，然后在导航到某处时让新页面查看这些值。

或者，您可以将值存储到变量数组或其他集合中，方法是永远不要将页面放在首位，只需使用下一页/问题的html / data更新包含<div>或<form>的内容

返回页面时尝试保存单选按钮选择

1 个答案: