JavaScript问答程序

有人能解释一下这个程序的流程吗？在第一部分中，测试、测试状态、问题、选择、选择、chA、chB、chC、正确性是声明的还是测验的价值？还有

test.innerHTML+=

它将添加test和radio的值

<script type="text/javascript">
var quiz = 0,
    test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
              ["What is 36 + 42", "64", "78", "76", "B"],
              ["What is 7 x 4?", "21", "27", "28", "C"],
              ["What is 16 / 4?", "4", "6", "3", "A"],
              ["What is 8 x 12?", "88", "112", "96", "C"]
              ];

function get(x) {
    return document.getElementById(x);
}

function renderQuestion() {
    test = get("test");
    if (quiz >= questions.length) {
        test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>";
        get("test_status").innerHTML = "Test completed";
        quiz = 0;
        correct = 0;
        return false;
    }
    get("test_status").innerHTML = "Question " + (quiz + 1) + " of " + questions.length;
    question = questions[quiz][0];
    chA = questions[quiz][1];
    chB = questions[quiz][2];
    chC = questions[quiz][3];
    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><br>";
    test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}

function checkAnswer() {
    choices = document.getElementsByName("choices");
    for (var i = 0; i < choices.length; i++) {
        if (choices[i].checked) {
            choice = choices[i].value;
        }
    }
    if (choice == questions[quiz][4]) {
        correct++;
    }
    quiz++;
    renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
</script>

var=0，
测试，测试状态，问题，选择，选择，chA，chB，chC，正确=0；
变量问题=[
[“什么是36+42”、“64”、“78”、“76”、“B”]，
[“7 x 4是什么？”、“21”、“27”、“28”、“C”]，
[“什么是16/4？”、“4”、“6”、“3”、“A”]，
[“8 x 12是什么？”、“88”、“112”、“96”、“C”]
];
函数get（x）{
返回文档.getElementById（x）；
}
函数renderQuestion（）{
测试=获取（“测试”）；
如果（测验>=问题长度）{
test.innerHTML=“您得到了“+问题数+长度数+问题数+正确数”中的“+正确数”；
获取（“测试状态”）.innerHTML=“测试完成”；
测验=0；
正确=0；
返回false；
}
获取“+questions.length”的“+test_status”）.innerHTML=“Question”+（测验+1）+”；
问题=问题[测验][0]；
chA=问题[测验][1]；
chB=问题[测验][2]；
chC=问题[测验][3]；
test.innerHTML=“+问题+”；
test.innerHTML+=“+chA+”
”；
test.innerHTML+=“”+chB+“
”；
test.innerHTML+=“”+chC+“

”；
test.innerHTML+=“提交答案”；
}
函数checkAnswer（）{
选项=document.getElementsByName（“选项”）；
for（var i=0；i

好的。让我们从我们的工作站开始

var quiz = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;

var questions = [
    ["What is 36 + 42", "64", "78", "76", "B"],
    ["What is 7 x 4?", "21", "27", "28", "C"],
    ["What is 16 / 4?", "4", "6", "3", "A"],
    ["What is 8 x 12?", "88", "112", "96", "C"]
];

请注意，测验和正确仅为数字。我认为“测验”将是完成问题的计数器，“正确”将是正确问题的计数器。 所有其他变量都没有定义，除了问题，它们有一个非常奇怪的数组结构。显而易见：这是一个只有3个选项的问题列表。每个问题的结构如下：

[" QUESTION ", " OPTION A ", " OPTION B ", " OPTION C ", " CORRECT OPTION "];

所以我认为这是无限的。如果您想添加一些问题，请尝试

让我们继续。在我们的全局变量之后，我们编写一些函数来进行测验。它们是get-按id返回DOM元素-，renderQuestion-显示当前问题-以及检查答案-当有人选择一个选项时所采取的操作。 我认为函数get只是为了清除代码，它不是必需的。让我们跳到下一个，对吗

  function renderQuestion(){
      test = get("test"); //document.getElementById('test')
      if(quiz >= questions.length){
        test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
        get("test_status").innerHTML = "Test completed";
        quiz = 0;
        correct = 0;
        return false;
      }
      get("test_status").innerHTML = "Question "+(quiz+1)+" of "+questions.length;
      question = questions[quiz][0];
      chA = questions[quiz][1];
      chB = questions[quiz][2];
      chC = questions[quiz][3];
      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><br>";
      test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
    }

这将在DOM#test#U状态中打印“问题1/4”。在这里，我们将最终使用未定义的变量：

question = questions[quiz][0];
chA = questions[quiz][1];
chB = questions[quiz][2];
chC = questions[quiz][3];

作为

quick=0

，

question=“什么是36+42”

，

chA=“64”

，

chB=“78”

和

chC=“76”

。然后，我们准备在DOM测试中打印所有问题：

现在我们有了。但我们选择的价值是什么

for(var i=0; i<choices.length; i++){
    if(choices[i].checked){
        choice = choices[i].value;
    }
}

它验证当前选择的值是否等于当前问题的正确选择。如果是，那么我们的正确问题计数器将增加

quiz++;
renderQuestion();

刚刚结束：我们转到下一个问题，并调用renderQuestion重新开始。当您完成最后一个问题时，renderQuestion函数将在有条件的

测验>=questions.length时停止，调用此函数：

test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
get("test_status").innerHTML = "Test completed";
quiz = 0;
correct = 0;
return false;

当您的窗口准备就绪时，它将为您调用renderQuestion（）。
您的问题很难理解当前的措辞。
<button onclick='checkAnswer()'>Submit Answer</button>

    function checkAnswer(){
      choices = document.getElementsByName("choices");
      for(var i=0; i<choices.length; i++){
        if(choices[i].checked){
          choice = choices[i].value;
        }
      }

      if(choice == questions[quiz][4]){
        correct++;
      }
      quiz++;
      renderQuestion();
    }

choices = document.getElementsByName("choices");

for(var i=0; i<choices.length; i++){
    if(choices[i].checked){
        choice = choices[i].value;
    }
}

if(choice == questions[quiz][4]){
     correct++;
}

quiz++;
renderQuestion();

test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
get("test_status").innerHTML = "Test completed";
quiz = 0;
correct = 0;
return false;

window.addEventListener("load", renderQuestion, false);