JavaScript测验代码错误

Question

这是一个简单的JavaScript测验代码，我发现虽然它主要是功能性的，但是一旦我只回答一个问题，然后继续对其余问题进行空白答案，测验将其计算为总值的一半。

例如;如果我只回答4个问题中的一个问题，它会告诉我，尽管没有回答其他问题，但我有4个问题中的2个是正确的。我对此感到困惑，我需要一些澄清。

我特意需要添加什么？谁能解释为什么？我从Adam Khoury's tutorials获得了这个测验代码，

bin/console assetic:dump

Answer 1

正如评论中所述，我发现了这个问题但由于某些限制而无法发布。解决方案如下

你做了一个简单的错误，我纠正了它。

  

您没有在choice='';的开头声明function checkAnswer。您也没有使用关键字var将其设为本地关键字。所以它将编译为window.choice并且是全局的   在for loop的{​​{1}}中，您检查function的{​​{1}}，如果找到任何内容，则会复制并与答案进行交叉检查。   如果没有找到答案，因为它是全局的，之前的值就在那里。

测试： 我点击了第一个问题的第一个单选框，然后跳过了所有的问题。

结果： 4

原因： 由于有4个A并且我们跳过剩余的所有内容，因此首先选择的checked value存储在radio中，并且每次都与A进行交叉检查。所以，它将匹配4次。

＆＃13;

＆＃13;

choice

＆＃13;

Array answer

＆＃13;

    var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
    var questions = [
      ["What does HTML stand for?", "Hypertext Markup Language", "Hypertrain Master Language", "Hypertext Marking Language", "A"],
      ["What was Java's first project name?", "Mocha", "Perseus", "Green", "C"],
      ["This programming language was the predecessor of Java, developed by James Gosling", "C++", "Oak", "Python", "B"],
      ["What does CSS stand for?", "Cascading Style Sheet", "Calculating Solutions Sheet", "Computer String Sheet", "A"],
      ["What was the dominant programming language before Java was created?", "C#", "C++", "Python", "B"],
      ["Can CSS be used in tandem with HTML and Java?", "True", "False", "Neither", "A"],
      ["What is the main foundation of all programming language?", "Binary/Machine Language", "Logic", "Code", "A"]
    ];
    function _(x){
    return document.getElementById(x);
    }

    function renderQuestion() {
    
    test = _("test");
    if (pos >= questions.length) {

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

    }
     _("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
     question = questions[pos][0];
     chA = questions[pos][1];
     chB = questions[pos][2];
     chC = questions[pos][3];
    test.innerHTML = "<h3>"+question+"</h3>";
    test.innerHTML += "<form id='qz'><input type='radio' name='choices' required value='A'>"+chA+"<br>";
    test.innerHTML += "<input type='radio' name='choices' required value='B'>"+chB+"<br>";
    test.innerHTML += "<input type='radio' name='choices' required value='C'>"+chC+"<br><br>";
    test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button></form>";  
    
    }
    function checkAnswer(){
    choice='';
    choices = document.getElementsByName("choices");
    for(var i=0; i<choices.length; i++) {
    if (choices[i].checked) {
    choice = choices[i].value;
             }
        }
        if (choice == questions[pos][4]){
        correct++;
        }
        
        _('qz').reset();
        pos++;
        renderQuestion();
    }

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

＆＃13;

＆＃13;

＆＃13;