我的JavaScript测试同时有"下一步"one_answers"上一步"按钮。单击上一个/下一个按钮时,我希望保持选择的答案
这是JsFiddle链接
我用来检查的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>
我知道这个问题以前也被问过。但我是一个初学者,这是以不同的方式编程的。
-
添加答案
array
以存储答案var answers = [];
-
当点击按钮时更新答案的值,让正确的答案最终被计算出来。
函数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
实际上,我只是将答案保存在您的对象allQuestions中。
即在检查中答案:
allQuestions[pos].userAnswer = checkedAnswer;
当你在renderQuestion()中编写HTML时:
test.innerHTML +=
'<input type="radio" value="A" name="answerChoice" '
+ (allQuestions[pos].userAnwer == 1 ? 'checked' : '')
+ ' /> ' + A + '<br />';
这对于检查基于字符串的答案并不理想,但这应该是一个良好的开端。
编辑:我更新了fiddle: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>'
}