我正在尝试创建一个多项选择测验。 如果用户选择了正确的答案，则会显示一条警告，说明＆＃34;正确＆＃34;测验继续进行下一个问题。 如果用户选择了错误的答案，则会显示一条警告，说明＆＃34;不正确＆＃34;。 这是我希望测验在继续下一个问题之前给用户最后一次尝试的地方。我尝试过使用变量＆＃34;尝试＆＃34;跟踪用户尝试问题的次数。目前，如果用户选择了正确的答案，代码将成功进入下一个问题，但如果选择的答案不正确，则＆＃34;不正确＆＃34;警报弹出，测验仍然进入下一个问题。
我有一个外部二维数组，目前存储所有问题及其各自的多项选择和解决方案。
renderQuestion（）对每个问题采取相应的选择，并将显示问题的html写入网页。
checkAnswer（）会检查每个选项，直到找到用户选择的选项。如果它是正确的，它会递增正确的计数器，如果它不正确，我希望它告诉用户他们是＆＃34;不正确＆＃34;并且为了测验，在进入下一个问题之前给用户1最后一次尝试该问题。
这是q_list.js的精简版本（我将2-D数组外部化，包含所有问题及其多项选择）：
****** ****** EDIT
我们现在正在尝试包含用户必须点击图表某个部分以获得正确答案的问题。因此，现在测验有两个问题，即多项选择和问题，可以向用户提供他们必须点击某个部分的图表。有＆＃34; mc＆＃34;和＆＃34;图表＆＃34;二维数组中每个问题包含的标识符，用于区分程序正在处理的问题类型。根据问题的类型，程序调用一个处理多项选择题的函数和一个处理图表问题的函数。现在，我们正在使用图像映射，只是根据他们点击的位置发送警报。有没有办法记录用户点击的位置（比如设置一些布尔标志选择= true;某处？）我们还希望有一个提交按钮，以便用户可以选择图表的多个区域，然后单击＆＃34;提交＆ ＃34;发送答案。
注意：抱歉，我不知道如何使用此代码附加img文件，因此如果您尝试运行它，它将无法工作/您将无法看到我们正试图在问题4上使用图片。
var questions = [
["mc", "A 25 year-old man named Tommy is a football superstar. Throughout his football career, he’s had several concussions. On a crisp fall eve, Tommy rushes into the ER after being checked by an opponent. Tommy presents with aphasia, dilation of his left pupil, and nausea. Where’s the damage in his brain?", "Right hemisphere occipital", "Bilateral frontal lobe", "Basal ganglia", "Cerebellum", "B"],
["mc", "A patient has trouble making decisions and refraining from saying inappropriate comments. Where could the lesion be located?", "Occiptital lobe", "Temporal cortex", "Parietal cortex", "Prefrontal cortex", "D"],
["mc", "A patient has conduction aphasia. He cannot produce appropriate responses to heard communication, and has difficulty naming pictures and objects. Where is his lesion located?", "Broca's area", "The arcuate fasiculus", "The primary auditory cortex", "Wernicke's area", "B"],
["diagram", "Can you click on the ponytail?", "img/facesmall.png"]
];
<h2 id="test_status"></h2>
<div id="test"></div>
<script src="js/orgNervSysq_list.js"></script>
<script type="text/javascript">
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, chD, correct = 0;
var tries = 0; //keeps track of how many times student attempts problem
var type = ""; //type of question
function _(x) {
return document.getElementById(x);
}
function renderQuestion() {
type = questions[pos][0];
console.log("type is: " + type);
if (type == "mc") {
console.log("mc case");
renderMCQuestion();
} else if (type == "diagram") {
console.log("diagram case");
renderDiagram();
}
}
renderQuestion();
//create a multiple-choice function
function renderMCQuestion() {
test = _("test");
if (pos >= questions.length) {
test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
_("test_status").innerHTML = "Homework Completed";
pos = 0;
correct = 0;
return false;
}
_("test_status").innerHTML = "Question " + (pos+1) + " of " + questions.length;
question = questions[pos][1];
chA = questions[pos][2];
chB = questions[pos][3];
chC = questions[pos][4];
chD = questions[pos][5];
test.innerHTML = "<h3>"+question+"</h3>";
test.innerHTML += "<input type='radio' name = 'choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name = 'choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name = 'choices' value='C'> "+chC+"<br>";
test.innerHTML += "<input type='radio' name = 'choices' value='D'> "+chD+"<br><br>";
test.innerHTML += "<button onclick='checkAnswer()'>Submit</button>";
console.log("current question = " + (pos+1));
}
//create a diagram question
function renderDiagram() {
console.log("we're in renderDiagram");
_("test_status").innerHTML = "Question " + (pos+1) + " of " + questions.length;
question = questions[pos][1];
test.innerHTML = "<h3>"+question+"</h3>";
test.innerHTML += "<img id = 'q_diagram' src =" + questions[pos][2] + " alt='Sorry, could not load image.' usemap = 'ponytail' usemap = 'frontalCortex' ></img>";
test.innerHTML += "<map name = 'ponytail'> <area shape='poly' coords='427,33, 456,12, 506,5, 573,38, 578,219, 576,330, 599,377, 618,517, 598,560, 539,446, 459,371, 467,290, 463,104, 423,26' alt='ponytail face' href='javascript: alert(\"Yes you can!\")'> <area shape = 'poly' coords='167,232, 116,193, 113,135, 162,84, 231,65, 324,74, 267,182' href='javascript: alert(\"No, idiot that is the frontal cortex!\")'> ";
}
function checkAnswer(){
choices = document.getElementsByName("choices");//get all the choices
for (var i=0; i<choices.length; i++) { //traverse through the choices
if (choices[i].checked) { //check which choice the student chose
choice = choices[i].value; //set student's choice to var choice
if (choice == questions[pos][6]) { //check if student's choice is correct
alert("Correct");
correct++;
tries = 0;
pos++;
} else if (choice != questions[pos][6] && tries < 1) {
tries++;
console.log("tries = " + tries);
alert("Try again");
//need to somehow display the same question again
} else if (choice != question[pos][6] && tries >= 1) {
tries = 0;
pos++;
alert("Incorrect");
}
renderQuestion();
}
}
}
window.addEventListener("load", renderMCQuestion, false);
</script>
答案 0 :(得分：0)
您问题的最简单的解决方案是在if的第一个分支中移动pos++指令，因此只有在用户选择正确的解决方案时才会执行，如下所示：
if (choices[i].checked) { //check which choice the student chose
choice = choices[i].value; //set student's choice to var choice
if (choice == questions[pos][5]) { //check if student's choice is correct
alert("Correct");
correct++;
tries = 0;
pos++;
} else if (choice != questions[pos][5] && tries < 1) {
tries++;
console.log("tries = " + tries);
alert("Try again");
//need to somehow display the same question again
} else if (choice != question[pos][5] && tries >= 1) {
alert("Incorrect");
}
renderQuestion();
}
在您的示例中，您设置tries = 0和pos++而不检查答案是否正确答案，因此它始终转到下一个问题
答案 1 :(得分：0)
如果renderQuestion（）总是呈现下一个问题，那么，无论用户的答案是什么，你总是在最后调用它。
所以，在你的循环中，你有一个if-else-if-else-if-else块...为什么不保持一个＆＃34;尝试的数组[pos] =（尝试[pos] || 0）＆＃34;然后尝试[pos] ++。然后你可以检查它们是对还是错（一个if-else）然后最后检查是否尝试[pos]＆gt; 1（2个猜测）导航？
'Drink'我意识到这确实摆脱了＆＃34;正确的＆＃34;计数器，但你可以通过编写一个函数来回答对象，以便用正确的标志取回答案的数量，从而轻松得到它。