JavaScript測驗不會回憶起以前的答案

Question

我是編程和Java語言的新手，並且作為第一個項目，我試圖創建一個小的測驗應用程序。

我在jsfiddle上包括了它： http : //jsfiddle.net/ben220/L0y43q3d/

我已經嘗試過設計程序，以便用戶可以單擊測驗並更改其答案，然后再單擊以最終獲得最終分數。 用戶選中所選答案旁邊的單選按鈕。 當用戶單擊“下一個”繼續（或單擊“上一步”以再次訪問上一個問題）時，他們的答案將傳遞到名為“選擇”的數組，並且該數組將存儲用戶通過測驗時的所有答案。

我設法編寫了程序，以便可以保存和調出以前的答案，但是有一個煩人的問題。 如果用戶在測驗中多次檢查特定的單選按鈕，則程序將僅記住第一個按鈕。 例如：如果我在問題4上，並選中答案2的單選按鈕，我可能會決定繼續前一個問題並更改答案，然后再繼續。 因此，我回到問題3並更改答案2的答案。我現在在兩個連續的問題上選擇了相同的單選按鈕。 但是現在，當我單擊“下一步”再次移至問題4時，我發現未選中任何單選按鈕，則未保存我的答案。

我確實嘗試自己解決此問題，但是我不明白自己做錯了什么。 如果有人可以提出解決方案，我將不勝感激。 如果需要進一步澄清，請告訴我。 抱歉，如果我的解釋或代碼令人困惑-我仍然是Java語言的新手！ 非常感謝。

<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示例