如何保持上一个答案被选中？ （javascript测验）[关闭]

Question

我的 JavaScript 测验有“下一个”和“上一个”按钮。当我点击上一个/下一个按钮时，我想保持选择的答案。
这是JsFiddle link
我用来检查的 JavaScript 回答：

var correct = 0;
var pos = 0;
var choice;
var allQuestions = [
{question:"What is 10 + 5?", choices:["15", "12", "10"], answer: "A" },
{question:"What is 10 - 5?", choices:["5", "6", "8"   ], answer: "A" },
{question:"What is 10 * 5?", choices:["50", "60", "70"], answer: "A" },
{question:"What is 10 / 5?", choices:["1", "2", "3"   ], answer: "B" }
];

function getID(x) {
return document.getElementById(x)
}

function renderQuestions () {
var testStatus = getID("test_status");
var test = getID("test");
if(pos >= allQuestions.length) {
    testStatus.innerHTML = "Test Completed";
    test.innerHTML = "<h2>" + "You got " + correct  + " out of " +  allQuestions.length + "</h2><br/>";
    pos = 0;
    return false
};
testStatus.innerHTML = "Question " + (pos + 1) + " of " + allQuestions.length;

var A = allQuestions[pos].choices[0];;
var B = allQuestions[pos].choices[1];;
var C = allQuestions[pos].choices[2];

test.innerHTML = "<h2>" + allQuestions[pos].question  + "</h2><br/>";
test.innerHTML += '<input type="radio" value="A" name="answerChoice" /> ' + A + '<br />';
test.innerHTML += '<input type="radio" value="B" name="answerChoice" /> ' + B + '<br />';
test.innerHTML += '<input type="radio" value="C" name="answerChoice" /> ' + C + '<br /><br />';
if (pos == allQuestions.length - 1) {
    test.innerHTML += '<input type="button" id="next" onclick="prevAnswer()" value="Prev"> ';
    test.innerHTML += '<input type="button" id="next" onclick="checkAnswer()" value="Submit"> ';
}
else if (pos >= 1) {
    test.innerHTML += '<input type="button" id="next" onclick="prevAnswer()" value="Prev"> ';
    test.innerHTML += '<input type="button" id="next" onclick="checkAnswer()" value="Next"> ';
}
else {
    test.innerHTML += '<input type="button" id="next" onclick="checkAnswer()" value="Next"> ';
}

test.innerHTML += '<br /><br /><p id="error"></p>'
}

choice = document.getElementsByName("answerChoice");
var checkedAnswer = null;

function checkAnswer() {

choice = document.getElementsByName("answerChoice");
var checkedAnswer = null;
for (var i = 0; i < choice.length; i++) {
    if(choice[i].checked) {
        checkedAnswer = choice[i].value;
    }
}

if( checkedAnswer == null ) {
    document.getElementById("error").innerHTML = 'Please select an answer'
    return false;
}

if (checkedAnswer == allQuestions[pos].answer){
    correct++
}

pos++
renderQuestions()
}
function prevAnswer() {
pos--
renderQuestions()
}

HTML：

<div id="header">Simple Quiz Application</div>

<div id="test_status"></div>
<div id="test"></div>

我知道以前有人问过这个问题。但我是一个初学者，并且以不同的方式编程。

Answer 1

1. 添加答案array 以存储答案

   var answers = [];

2. 点击按钮时更新答案的值，最后计算正确。

   函数 checkAnswer() {

   choice = document.getElementsByName("answerChoice");
   var checkedAnswer = null;
   for (var i = 0; i < choice.length; i++) {
       if(choice[i].checked) {
           answers[pos] = choice[i].value;
       }
   }
   
   if( answers[pos] == null ) {
       document.getElementById("error").innerHTML = 'Please select an answer'
       return false;
   }
   
   pos++
   renderQuestions()
   

   }

3. 渲染完成后更改输入以将检查设置为单选

   if (typeof answers[pos] !== undefined) {
       var radios = document.getElementsByName('answerChoice');
       var rLen = radios.length, i;
       for (i = 0; i < rLen; ++i) {
           if (answers[pos] === radios[i].value) {
           radios[i].checked = true;
           }
       }
   }
   

4. 计算输出结果

   if(pos >= allQuestions.length) {
   // Check answers
   var qLen = allQuestions.length, correct = 0;
   for (var i = 0; i < qLen; ++i) {
       if (answers[i] === allQuestions[i].answer) {
           ++correct;
       }
   }
   testStatus.innerHTML = "Test Completed";
   test.innerHTML = "<h2>" + "You got " + correct  + " out of " +  allQuestions.length + "</h2><br/>";
   pos = 0;
   return false
   };
   

与工作jsFiddle

Answer 2

实际上，我只是将答案保存在您的对象 allQuestions 中。

即在检查答案：

allQuestions[pos].userAnswer = checkedAnswer;

当你在 renderQuestion() 中编写 HTML 时：

test.innerHTML += 
    '<input type="radio" value="A" name="answerChoice" '
    + (allQuestions[pos].userAnwer == 1 ? 'checked' : '')
    + ' /> ' + A + '<br />';

根据字符串检查答案并不理想，但这应该是一个好的开始。

Answer 3

编辑：我更新了小提琴：https://jsfiddle.net/4bnx8acw/13/

我通过将位置编号保存到数组中并在之后检查它是否相同来修复它

function renderQuestions() {
var testStatus = getID("test_status");
var test = getID("test");
if (pos >= allQuestions.length) {
    testStatus.innerHTML = "Test Completed";
    test.innerHTML = "<h2>" + "You got " + correct + " out of " + allQuestions.length + "</h2><br/>";
    pos = 0;
    return false
};
testStatus.innerHTML = "Question " + (pos + 1) + " of " + allQuestions.length;

var A = allQuestions[pos].choices[0];;
var B = allQuestions[pos].choices[1];;
var C = allQuestions[pos].choices[2];
test.innerHTML = "<h2>" + allQuestions[pos].question + "</h2><br/>";
for (var j = 0; j < 3; j++) {
    var letter = null;
    switch (j) {
        case 0:
            letter = "A";
            break;
        case 1:
            letter = "B";
            break;
        case 2:
            letter = "C";
            break;
    }
    if (savedAnswers[pos] == j) {
        test.innerHTML += '<input type="radio" checked="true" value="' + letter + '" name="answerChoice" /> ' + letter + '<br />';
    } else {
        test.innerHTML += '<input type="radio" value="' + letter + '" name="answerChoice" /> ' + letter + '<br />';
    }
}

//test.innerHTML += '<input type="radio" value="A" name="answerChoice" /> ' + A + '<br />';
//test.innerHTML += '<input type="radio" value="B" name="answerChoice" /> ' + B + '<br />';
//test.innerHTML += '<input type="radio" value="C" name="answerChoice" /> ' + C + '<br /><br />';
if (pos == allQuestions.length - 1) {
    test.innerHTML += '<input type="button" id="next" onclick="prevAnswer()" value="Prev"> ';
    test.innerHTML += '<input type="button" id="next" onclick="checkAnswer()" value="Submit"> ';
} else if (pos >= 1) {
    test.innerHTML += '<input type="button" id="next" onclick="prevAnswer()" value="Prev"> ';
    test.innerHTML += '<input type="button" id="next" onclick="checkAnswer()" value="Next"> ';
} else {
    test.innerHTML += '<input type="button" id="next" onclick="checkAnswer()" value="Next"> ';
}

test.innerHTML += '<br /><br /><p id="error"></p>'

}