JavaScript 测验答案检查

Question

我正在尝试制作一个分数基础测验，其中显示完成后您获得的分数，例如满分 8 分，您得到的答案不正确。我有评分系统，只是没有验证

HTML

        <div class="quiz">
        1) What noise does a dog make?</div>
        <div class="values">
        <input type="radio" value="0"  id="q1" name="q1" onclick="question('jq1',this.value)">a) Cluck<br>
        <input type="radio" value="0"  id="q1" name="q1" onclick="question('jq1',this.value)">b) Meow<br>
        <input type="radio" value="0"  id="q1" name="q1" onclick="question('jq1',this.value)">c) Moo<br>
        <input type="radio" value="1"  id="q1" name="q1" onclick="question('jq1',this.value)">d) Woof</div><br>
        <input type="hidden" name="jq1" id="jq1" /> 

        <div class="quiz">
        2) What noise does a cat make?</div>
        <div class="values">
        <input type="radio" value="1" id="q2" name="q2" onclick="question('jq2',this.value)">a) Meow<br>
        <input type="radio" value="0" id="q2" name="q2" onclick="question('jq2',this.value)">b) Cluck<br>
        <input type="radio" value="0" id="q2" name="q2" onclick="question('jq2',this.value)">c) Woof<br>
        <input type="radio" value="0" id="q2" name="q2" onclick="question('jq2',this.value)">d) Moo</div><br>
        <input type="hidden" name="jq2" id="jq2" />

(很抱歉提出不恰当的问题，它们只是作为占位符:D)

JavaScript

function question(ref,val) { 
    var x = document.getElementById(ref); 
    x.value = val; 
}
function result() { 
    var score = 0; 
    var x = document.getElementById('jq1'); 
    score = eval (score) + eval(x.value); 
    var x = document.getElementById('jq2'); 
    score = eval (score) + eval(x.value);

    alert("You scored: "+score +" out of 2!"); 
}

我想在警报框中当前的一行下方添加一行，表示“问题1、2、3不正确”。只是非常不确定如何做到这一点，希望有人帮助。

非常感谢!

Answer 1

更加面向对象的答案

演示:http://jsfiddle.net/Victornpb/3cwzndp8/1/

var q = [
    {
        question:"What noise does a dog make?",
        options:["Meow", "Cluck","Woof","Moo"],
        answers: [0,0,1,0]
    },
    {
        question:"What noise does a cat make?",
        options:["Meow", "Cluck","Woof","Moo"],
        answers: [1,0,0,0]
    }
];

var questionary = generateQuestionary(q);
quizBody.appendChild(questionary);

function generateQuestionary(obj){
    var questionary = tag("div",{className:"questionary"});

    for(var i=0; i<obj.length; i++){
        questionary.appendChild(generateQuestionHtml(obj[i], i));
    }
    return questionary;
}

function generateQuestionHtml(obj, n){
    var answers = tag("div",{className:"answers"});

    for(var i=0; i<obj.options.length; i++){
        answers.appendChild(
            tag("label",{},
                tag("input",{type:"radio", name:"q"+n, value:obj.answers[i],onclick:ck} ),
                tag("span",{}, obj.options[i]),
                tag("br")
               )
        );
    }

    return tag("div",{className:"quiz"},
       tag("div",{className:"question"}, obj.question),
       answers,
       tag("div",{className:"info"})
    );
}

function ck(e){
    console.log(this);
    var infoBox = this.parentElement.parentElement.parentElement.getElementsByClassName("info")[0];

    if(this.value==1){
        infoBox.innerHTML = "Correct!";
        infoBox.classList.remove("wrong");
    }
    else{
        infoBox.innerHTML = "Incorrect answer :(";
        infoBox.classList.add("wrong");
    }
}

我使用实用函数来生成 DOM 元素(tag() 函数)

https://gist.github.com/victornpb/11201998