Javascript测试（允许用户多次尝试）

我正在尝试创建一个选择题测验。 如果用户选择了正确的答案，则会显示一条提示“correct”，然后测验将转到下一个问题。 如果用户选择了不正确的答案，则会显示一条警告，提示“不正确”。 这就是我想让测验在进入下一个问题之前给用户最后一次尝试的地方。我曾尝试使用一个变量“trys”来跟踪用户尝试提问的次数。目前，如果用户选择了正确的答案，代码将成功进入下一个问题，但如果选择了错误的答案，则会弹出“错误”警报，测验仍将进入下一个问题

我有一个外部2-D阵列，当前存储所有问题及其各自的多项选择和解决方案

renderQuestion（）对每个问题进行相应的选择，并将显示问题的html写入网页

checkAnswer（）遍历每个选项，直到找到用户选择的选项。如果正确，它会增加正确的计数器，如果不正确，我希望它告诉用户他们“不正确”，并在继续下一个问题之前，让用户对该问题进行最后一次尝试

下面是q_list.js的浓缩版本（我将包含所有问题及其多项选择的二维数组外部化）：

******编辑******

我们现在正试图包括一些问题，用户必须点击图表的某个部分才能得到正确答案。所以现在这个测验有两个问题，一个是多项选择题，另一个是可以向用户展示一个图表，用户必须点击某个部分。二维数组中的每个问题都包含“mc”和“图表”标识符，用于区分程序正在处理的问题类型。根据问题的类型，该程序调用一个处理多项选择题的函数和一个处理图表问题的函数。现在，我们正在使用图像地图，只是根据他们单击的位置发送警报。有没有办法记录用户单击的位置（比如设置一些布尔标志selected=true；某处？）我们还希望有一个提交按钮，这样用户可以选择图表的多个区域，然后单击“提交”发送他们的答案

注意：抱歉，我不知道如何使用此代码附加img文件，因此如果您尝试运行它，它将不起作用/您将无法看到我们在问题4中尝试使用的图像

变量问题=[

["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"]

])

var pos=0，测试，测试状态，问题，选择，选择，chA，chB，chC，chD，正确=0；
var=0//记录学生尝试解决问题的次数
var type=“”//问题类型
函数ux）{
返回文档.getElementById（x）；
}
函数renderQuestion（）{
类型=问题[pos][0]；
console.log（“类型为：”+type）；
如果（类型=“mc”）{
控制台日志（“mc案例”）；
renderMCQuestion（）；
}else if（类型==“图表”）{
console.log（“图表案例”）；
renderDiagram（）；
}
}
renderQuestion（）；
//创建一个多选函数
函数renderMCQuestion（）{
测试=uu（“测试”）；
如果（位置>=问题长度）{
test.innerHTML=“你得到了“+问题中的“+正确的+”。长度+“问题正确”；
_（“测试状态”）.innerHTML=“作业完成”；
pos=0；
正确=0；
返回false；
}
_（“测试状态”）.innerHTML=“问题”+（pos+1）+”of“+问题长度；
问题=问题[pos][1]；
chA=问题[pos][2]；
chB=问题[pos][3]；
chC=问题[pos][4]；
chD=问题[pos][5]；
test.innerHTML=“+问题+”；
test.innerHTML+=“+chA+”
”；
test.innerHTML+=“”+chB+“
”；
test.innerHTML+=“+chC+”
”；
test.innerHTML+=“”+chD+“

”；
test.innerHTML+=“提交”；
console.log（“当前问题=”+（pos+1））；
}
//创建一个图表问题
函数renderDiagram（）{
log（“我们在renderDiagram中”）；
_（“测试状态”）.innerHTML=“问题”+（pos+1）+”of“+问题长度；
问题=问题[pos][1]；
test.innerHTML=“+问题+”；
test.innerHTML+=“”；
test.innerHTML+=“”；
}
函数checkAnswer（）{
choices=document.getElementsByName（“选项”）；//获取所有选项
对于（变量i=0；i=1）{
尝试=0；
pos++；
警告（“不正确”）；
}
renderQuestion（）；
}
}
}
addEventListener（“加载”，renderMCQuestion，false）；

解决问题的最简单方法是将

pos++

指令移动到if的第一个分支中，因此只有在用户选择正确的解决方案时才会执行，如下所示：

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

if（选项[i].checked）{//检查学生选择的选项
choice=choices[i].value；//将学生的选择设置为var choice
如果（choice==问题[pos][5]）{//检查学生的选择是否正确
警惕（“正确”）；
正确的++；
尝试=0；
pos++；
}else if（选择！=问题[pos][5]&尝试<1）{
尝试++；
console.log（“trys=“+trys”）；
警惕（“重试”）；
//需要以某种方式再次显示相同的问题
}else if（选择！=问题[pos][5]&尝试>=1）{
警告（“不正确”）；
}
renderQuestion（）；
}

在您的示例中，您设置了

trys=0

和

pos++

，但没有检查答案是否正确，因此它总是转到下一个问题

如果renderQuestion（）总是呈现下一个问题，那么是的，

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

var answers = {};

function renderNextQuestion () {
    pos++;
    renderQuestion();
}

for (var i=0; i<choices.length; i++) { //traverse through the choices
    if (choices[i].checked) {            //check which choice the student chose
        answers[pos] = (answers[pos] || { attempts: 0, correct: false });
        answers[pos].attempts++;

        // Did they get it right?
        answers[pos].correct = (choices[i].value == questions[pos][5]);

        // Correct answer
        if (answers[pos].correct) {
            alert("Correct");
            renderNextQuestion()

        // Incorrect, but first guess
        } else if (answers[pos].attempts < 2) {
            alert("Try again");
        // Incorrect and not the first
        } else {
            alert("Incorrect");
            renderNextQuestion();
        }
    }
}