Question

我是编程和Javascript的新手，作为第一个项目，我正在尝试创建一个小测验应用程序。

我把它包含在jsfiddle中： http://jsfiddle.net/ben220/L0y43q3d/

我尝试设计该程序，以便用户能够返回测验并更改他们的任何答案，然后再点击以获得最终得分。用户检查他们所选答案旁边的单选按钮。当用户单击“下一步”继续（或“返回”以重新访问上一个问题）时，他们的答案将传递给名为“choices”的数组，此数组将存储测验时所有用户的答案。

我设法编写程序，以便以前的答案可以保存和调用，但有一个恼人的问题。如果用户在测验中多次检查特定的单选按钮，程序将只记住第一个。例如：如果我在问题4并检查答案2的单选按钮，我可能会决定回到上一个问题并更改我的答案，然后再继续。所以我回到问题3并将答案改为答案2.我现在已经连续两个问题选择了相同的单选按钮。但现在当我点击“下一步”再次转到问题4时，我发现没有选中单选按钮，我的答案没有保存。

我真的试图自己解决这个问题，但我不明白我做错了什么。如果有人可以提出解决方案，我将不胜感激。如果需要进一步澄清，请告诉我。对不起，如果我的解释或我的代码令人困惑 - 我仍然是Javascript的新手！非常感谢。

<div id="container">
    <div id="quizArea">
        <h2 id="theQuestion">Question 1</h2>
        <fieldset id="myForm">
                <label><input type="radio" name="question" value="0" />Answer 1</label><br/>
                <label><input type="radio" name="question" value="1" />Answer 2</label><br/>
                <label><input type="radio" name="question" value="2" />Answer 3</label><br/>
                <label><input type="radio" name="question" value="3" />Answer 4</label><br/>
                <label><input type="radio" name="question" value="4" />Answer 5</label><br/>
        </fieldset>
        <div class="mini_container"><button id="next">Next</button></div>
        <button id="getScore">Get Score</button>
        <div class="mini_container"><button id="back">Back</button></div>
        <p id="submitError">Please choose an answer before proceeding to the next question</p>
        <div id="score"></div>
      </div>
 </div>

使用Javascript：

var module = (function () {

var theQuestions = [{question: "Question 1", choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4", "Answer 5"], answer: 2}, {question: "Question 2", choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4", "Answer 5"], answer: 4}, {question: "Question 3", choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4", "Answer 5"], answer: 1}, {question: "Question 4", choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4", "Answer 5"], answer: 1}, {question: "Question 5", choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4", "Answer 5"], answer: 3}],
score = 0,
title = document.getElementById("theQuestion"),
back = document.getElementById("back"),
next = document.getElementById("next"),
radioButtons = document.getElementById("options"),
options = document.getElementsByTagName("label"),
radios = document.getElementsByTagName("input"),
submitError = document.getElementById("submitError"),
scoreBtn = document.getElementById("getScore"),
scoreBox = document.getElementById("score"),
currentQ = 0;

var choices = [];

function getRadioInfo() {
var decision = null;
for(var i = 0; i < radios.length; i += 1) {
        if(radios[i].checked) {
            decision = radios[i].value;
        }
    }
return decision;
}

back.onclick = function() {
var decision = getRadioInfo();
choices[currentQ] = decision;
currentQ -= 1;
if(currentQ === 0) {
    back.style.display = "none";
}
if(currentQ < theQuestions.length) {
next.style.display = "block";
scoreBtn.style.display = "none";
}
title.innerHTML = theQuestions[currentQ].question;
var a = 0;
for(var i = 0; i < options.length; i += 1) {
    options[i].innerHTML = '<input type="radio" name="question" value="' + a + '" />' + theQuestions[currentQ].choices[a];
    a += 1;
}
restorePreviousAnswer();
};

var restorePreviousAnswer = function() {
for(var i = 0; i < choices.length; i += 1) {
    if(choices.indexOf(choices[i]) == currentQ) {
        var prev = choices[i];
    }
}
for(var x = 0; x < radios.length; x += 1) {
    if (radios[x].value == prev) {
        radios[x].checked = true;
    }
}
};


next.onclick = function() {
    var decision = getRadioInfo();
    if(decision == null) {
        submitError.style.display = "block";
        return;
    } else {
        submitError.style.display = "none";
    }
    choices[currentQ] = decision;
    currentQ += 1;
    if(currentQ > 0) {
        back.style.display = "block";
    }
    if(currentQ == theQuestions.length - 1) {
        next.style.display = "none";
        scoreBtn.style.display = "block";
    }
    title.innerHTML = theQuestions[currentQ].question;
    var a = 0;
    for(var i = 0; i < options.length; i += 1) {
        options[i].innerHTML = '<input type="radio" name="question" value="' + a + '" />' + theQuestions[currentQ].choices[a];
        a += 1;
    }
    restorePreviousAnswer();

};

scoreBtn.onclick = function() {
hideAll();
scoreBox.innerHTML = "You scored " + score + " out of " + theQuestions.length;
};

})();

Answer 1

我将restorePreviousAnswer功能简化为if (choices[currentQ] != null) radios[choices[currentQ]].checked = true。另一部分问题是，在您选择单选按钮之前返回时，在您的答案数组中插入了空值。

<强> jsFiddle example

Javascript测验不会回忆起以前的答案

1 个答案: