javascript - 编写代码来为我用 Javascript 创建的测验评分

Question

我正在尝试自学代码，目前我正忙于我正在从事的一个迷你项目。我相信我已经完成了 HTML 代码；但是，我很难让 Javascript/jQuery 做我想做的事情。

我希望 Javascript/jQuery 对我的测验进行评分并将分数打印在不同的页面上。我不确定我的语法是否错误，或者我是否打错电话或......？

这是HTML：

<body>

<div class="center">

<div id="questionContainer">

<div id="header">
<h1>State Capitol Quiz</h1>
</div>

<div id="left">

<form action="quiz.html" class="container">
<div class="blank">
<br />
    <br />
    <p id="one">1.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Michigan?<br />
        <div class="tab">
            <input type="radio" name="question" value="A" />&nbsp;Lansing<br />
            <input type="radio" name="question" value="B" />&nbsp;Richmond<br />
            <input type="radio" name="question" value="C" />&nbsp;Austin<br />
            <input type="radio" name="question" value="D" />&nbsp;Columbus<br />
        </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
    <p id="two">2.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Virginia?<br />
       <div class="tab">
        <input type="radio" name="question" value="A" />&nbsp;Lansing<br />
        <input type="radio" name="question" value="B" />&nbsp;Richmond<br />
        <input type="radio" name="question" value="C" />&nbsp;Lincoln<br />
        <input type="radio" name="question" value="D" />&nbsp;Reno<br />
      </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
    <p id="three">3.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Arkansas?<br />
        <div class="tab">  
            <input type="radio" name="question" value="A" />&nbsp;Dallas<br />
            <input type="radio" name="question" value="B" />&nbsp;Lincoln<br />
            <input type="radio" name="question" value="C" />&nbsp;Little Rock<br />
            <input type="radio" name="question" value="D" />&nbsp;Cheyene<br />
        </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
    <p id="four">4.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Arizona?<br />
        <div class="tab"> 
            <input type="radio" name="question" value="A" />&nbsp;Juneau<br />
            <input type="radio" name="question" value="B" />&nbsp;Honolulu<br />
            <input type="radio" name="question" value="C" />&nbsp;Pheonix<br />
            <input type="radio" name="question" value="D" />&nbsp;Toledo<br />
        </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
    <p id="five">5.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Florida?<br /> 
        <div class="tab"> 
            <input type="radio" name="question" value="A" />&nbsp;Oakland<br />
            <input type="radio" name="question" value="B" />&nbsp;Kansas City<br />
            <input type="radio" name="question" value="C" />&nbsp;Tallahassee<br />
            <input type="radio" name="question" value="D" />&nbsp;Miami<br />
    </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
    <p id="six">6.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Nebraska?<br />
        <div class="tab">  
            <input type="radio" name="question" value="A" />&nbsp;Omaha<br />
            <input type="radio" name="question" value="B" />&nbsp;Lincoln<br />
            <input type="radio" name="question" value="C" />&nbsp;Sacramento<br />
        <input type="radio" name="question" value="D" />&nbsp;Sab Diego<br />
        </div>
    </p>
</div>
</form>
</div>

<div id="right">
<form action="quiz.html" class="container">
<br />
<br />
<div class="blank">
    <p id="seven">7.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Texas?<br />
        <div class="tab">    
            <input type="radio" name="question" value="A" />&nbsp;Fortworth<br />
            <input type="radio" name="question" value="B" />&nbsp;Richmond<br />
            <input type="radio" name="question" value="C" />&nbsp;Austin<br />
            <input type="radio" name="question" value="D" />&nbsp;Las Vegas<br />
        </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
    <p id="eight">8.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Alaska?<br />
        <div class="tab">   
            <input type="radio" name="question" value="A" />&nbsp;Tulsa<br />
            <input type="radio" name="question" value="B" />&nbsp;Oaklahoma City<br />
            <input type="radio" name="question" value="C" />&nbsp;Austin<br />
        <input type="radio" name="question" value="D" />&nbsp;Juneau<br />
        </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
    <p id="nine">9.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Hawaii?<br /> 
        <div class="tab"> 
            <input type="radio" name="question" value="A" />&nbsp;Paris<br />
            <input type="radio" name="question" value="B" />&nbsp;Honolulu<br />
            <input type="radio" name="question" value="C" />&nbsp;Austin<br />
            <input type="radio" name="question" value="D" />&nbsp;Cadilac<br />
        </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
    <p id="ten">10.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Ohio?<br />
        <div class="tab">   
            <input type="radio" name="question" value="A" />&nbsp;Cleveland<br />
            <input type="radio" name="question" value="B" />&nbsp;Green Bay<br />
            <input type="radio" name="question" value="C" />&nbsp;Austin<br />
            <input type="radio" name="question" value="D" />&nbsp;Columbus<br />
        </div>
    </p>
</div>
</form>

<div id="buttonDiv">        
    <input type="button" id="button" value="submit" />
</div>


</div>

</div>

</div>

<div class="center">

<div id="answerSheet">
    <p id="score"><h1>Your Score!</h1></p>
    <br />
    <p>Results:</p>
 </div>

</div>

</body>

这是Javascript/jQuery：

$(document).ready(function(){
$("#button").click(function(){
$("#questionContainer").fadeOut("slow",function(){
    $("#answerSheet").fadeIn("slow",function(){
    });
});

var numQues= 10;
var numChoices= 4;
var answers = new Array(10);

answers[0] = "Lansing";
answers[1] = "Richmond";
answers[2] = "Little Rock";
answers[3] = "Pheonix";
answers[4] = "Tallahassee";
answers[5] = "Lincoln";
answers[6] = "Austin";
answers[7] = "Juneau";
answers[8] = "Honolulu";
answers[9] = "Columbus";

function getScore(form){
var score = 0;
var currElt;
var currSelection;
for(i = 0; i<numQues; i++){
    currElt = i * numChoi;
    for(j = 0; j<numChoi; j++){
        currSelection = form.elements[currElt + j];
        if(currSelection.checked){
            if(currSelection.value == answers[i]){
                score++;
                break;
            }
        }
    }
}

score = math.round(score/numQues * 100);
form.precentage.value = score + "&#37;";
var corrAnswers = "";
for(i = 1; i <numQues; i++){
    corrAnswers += i + "." + answers [i - 1] + "\r\n;"
}
form.solutions.value = corrAnswers/numQues * 100 + "%";}

});
});

谢谢

score 4 · Accepted Answer

这是一种使用 HTML 结构和 jQuery 来帮助您的方法：

工作演示：http: //jsfiddle.net/jfriend00/Dkdrh/

点击问题的答案（正确或错误），然后点击下面的“分数”按钮，让它为您计算分数。这是代码：

// text value and then question answer value
var answers = [
    "Lansing", "A",
    "Richmond", "B",
    "Little Rock", "C",
    "Phoenix", "C",
    "Tallahassee", "C",
    "Lincoln", "B",
    "Austin", "C",
    "Juneau", "D",
    "Honolulu", "B",
    "Columbus", "D"
];

function calcScore() {
    var results = {right: 0, wrong: 0, answered: [], unanswered: [], missed: []};
    $("form .tab").each(function(index) {
        var chosen = $(this).find("input:checked");
        if (chosen.length) {
            results.answered.push(index);
            if (chosen.val() == answers[(index * 2) + 1]) {
                results.right++;
                results.answered.push(index);
            } else {
                results.wrong++;
                results.missed.push(index);
            }
        } else {
            results.unanswered.push(index);
        }
    });
    return(results);
}

$("#buttonDiv").click(function() {
    var results = calcScore();
    var str = "Correct: " + results.right + ", Wrong: " + results.wrong + ", Unanswered: " + results.unanswered.length;
    $("#results").html(str);
});

关于代码的一些注释：

答案存储在一个包含文本值和字母值的数组中，以便于比较。您这样做是2 * index为了获得文本答案并(2 * index) + 1获得答案的字母值。
该calcScore()函数返回正确的数字、错误的数字、未回答的数字以及已回答正确、回答不正确和未回答的问题编号的数组。
该calcScore()函数使用 HTML 的结构来自动跟踪问题编号。

我没有完全按照您尝试对代码执行的操作，但我看到的一个大问题是您将答案数组中的文本值与单选按钮的值进行比较.value，但单选按钮的值设置为"A", "B","C"所以"D"他们永远不会匹配你在数组中的文本。

仅供参考，如果您想查看在 HTML 中使用更自然格式的不同方式，请在此处查看 HTML 和 CSS：http: //jsfiddle.net/jfriend00/H26c8/。提示：它使用一个有序列表来自动编号问题的有序列表。

javascript - 编写代码来为我用 Javascript 创建的测验评分

1 回答 1

Related

Reference