请注意！

Question

有人可以解释这个程序的流程吗？在第一部分，是测试，test_status，问题，选择，选择，chA，chB，chC，声明是正确的还是测验的值？另外test.innerHTML +=它会增加测试值和收音机吗？

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

Answer 1

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

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

请注意，测验和正确仅限数字。我认为＆＃34;测验＆＃34;将是完成问题的反击和＆＃34;纠正＆＃34;将是正确问题的反击。所有其他变量都是未定义的，除了问题，它有一个非常好奇的Array结构。显而易见的是：这是一个只有3个选项的问题列表。每个问题都遵循这个结构：

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

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

让我们继续。在我们的全局变量之后，我们编写一些函数来使quizz发生。他们获取 - 按ID返回DOM元素， renderQuestion - 显示当前问题 - checkAnswer - 当有人采取行动时选择一个选项。我认为这个功能只是为了清除代码，它并不是那么需要。让我们跳到下一个，对吧？

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

这个功能的第一件事是var test = document.getElementById('test')。然后它会检查您的测验是否已经以quiz >= questions.length结束。也就是说，测验真的只是完成问题的反击。当然，在我们开始的时候，quiz < questions.length会让我们摆脱那种条件。

get("test_status").innerHTML = "Question "+(quiz+1)+" of "+questions.length;

将打印＆＃34;问题1 of 4＆＃34;在DOM #test_status里面。在这里，我们将最终使用未定义的变量：

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

作为quiz = 0，question = "What is 36+42"，chA = "64"，chB = "78"和chC = "76"。然后我们准备打印DOM #test中的所有问题：

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

输出将是：

<h3>What is 36 + 42</h3><input type='radio' name='choices' value='A'> 64<br><input type='radio' name='choices' value='B'> 78<br><input type='radio' name='choices' value='C'> 76<br><button onclick='checkAnswer()'>Submit Answer</button>

请注意！

这是一个调用checkAnswer函数的按钮：

<button onclick='checkAnswer()'>Submit Answer</button>

这就是保持测验的原因。所以，让我们点击那个＆＃34;打电话给我们需要的东西：

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

请记住：选择 s 是我们当前的选择列表，选择是我们当前选择的价值。让我们继续。

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

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

quiz++;
renderQuestion();

刚刚完成：我们转到下一个问题并调用renderQuestion重新开始。当你完成最后一个问题时，renderQuestion函数将在条件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;

我认为现在更容易理解。

哦，我差点忘了。我们开始测验了吗？不。这是做什么的：

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

当您的窗口准备就绪后，它会为您调用renderQuestion（）。

JavaScript测验程序

1 个答案:

请注意！