Question

My JavaScript quiz have both 'next' and 'previous' button. I want to keep the answers selected when I click the previous/next button.
Here is the JsFiddle link
The JavaScript I used to check answer:

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>

I know this questioned had been asked before. But I am a beginner and that was programmed in a different way.

Answer 1

添加答案array以存储答案

var answers = [];

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

function 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()

}

渲染完成后更改输入以设置检查收音机

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;
        }
    }
}

计算输出结果

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

Edit: I updated the fiddle: https://jsfiddle.net/4bnx8acw/13/

I fixed it by saving the position number into an array and checking if it is the same afterwards

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>'

}

Answer 3

Actually, I'd just save the answer in your object allQuestions.

ie in checkAnswer:

allQuestions[pos].userAnswer = checkedAnswer;

And when your write HTML in renderQuestion():

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

This is not ideal to check answers based on string but this should be a good start.

How to keep the previous answer selected? (javascript quiz)

3 个答案: