我正在尝试自学代码，目前我正处于一个我正在研究的迷你项目中。我相信我已经制定了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. What is the capitol of Michigan?<br />
<div class="tab">
<input type="radio" name="question" value="A" /> Lansing<br />
<input type="radio" name="question" value="B" /> Richmond<br />
<input type="radio" name="question" value="C" /> Austin<br />
<input type="radio" name="question" value="D" /> Columbus<br />
</div>
</p>
</div>
</form>
<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
<p id="two">2. What is the capitol of Virginia?<br />
<div class="tab">
<input type="radio" name="question" value="A" /> Lansing<br />
<input type="radio" name="question" value="B" /> Richmond<br />
<input type="radio" name="question" value="C" /> Lincoln<br />
<input type="radio" name="question" value="D" /> Reno<br />
</div>
</p>
</div>
</form>
<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
<p id="three">3. What is the capitol of Arkansas?<br />
<div class="tab">
<input type="radio" name="question" value="A" /> Dallas<br />
<input type="radio" name="question" value="B" /> Lincoln<br />
<input type="radio" name="question" value="C" /> Little Rock<br />
<input type="radio" name="question" value="D" /> Cheyene<br />
</div>
</p>
</div>
</form>
<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
<p id="four">4. What is the capitol of Arizona?<br />
<div class="tab">
<input type="radio" name="question" value="A" /> Juneau<br />
<input type="radio" name="question" value="B" /> Honolulu<br />
<input type="radio" name="question" value="C" /> Pheonix<br />
<input type="radio" name="question" value="D" /> Toledo<br />
</div>
</p>
</div>
</form>
<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
<p id="five">5. What is the capitol of Florida?<br />
<div class="tab">
<input type="radio" name="question" value="A" /> Oakland<br />
<input type="radio" name="question" value="B" /> Kansas City<br />
<input type="radio" name="question" value="C" /> Tallahassee<br />
<input type="radio" name="question" value="D" /> Miami<br />
</div>
</p>
</div>
</form>
<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
<p id="six">6. What is the capitol of Nebraska?<br />
<div class="tab">
<input type="radio" name="question" value="A" /> Omaha<br />
<input type="radio" name="question" value="B" /> Lincoln<br />
<input type="radio" name="question" value="C" /> Sacramento<br />
<input type="radio" name="question" value="D" /> 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. What is the capitol of Texas?<br />
<div class="tab">
<input type="radio" name="question" value="A" /> Fortworth<br />
<input type="radio" name="question" value="B" /> Richmond<br />
<input type="radio" name="question" value="C" /> Austin<br />
<input type="radio" name="question" value="D" /> Las Vegas<br />
</div>
</p>
</div>
</form>
<form action="quiz.html" class="container">
<div class="blank">
<p id="eight">8. What is the capitol of Alaska?<br />
<div class="tab">
<input type="radio" name="question" value="A" /> Tulsa<br />
<input type="radio" name="question" value="B" /> Oaklahoma City<br />
<input type="radio" name="question" value="C" /> Austin<br />
<input type="radio" name="question" value="D" /> Juneau<br />
</div>
</p>
</div>
</form>
<form action="quiz.html" class="container">
<div class="blank">
<p id="nine">9. What is the capitol of Hawaii?<br />
<div class="tab">
<input type="radio" name="question" value="A" /> Paris<br />
<input type="radio" name="question" value="B" /> Honolulu<br />
<input type="radio" name="question" value="C" /> Austin<br />
<input type="radio" name="question" value="D" /> Cadilac<br />
</div>
</p>
</div>
</form>
<form action="quiz.html" class="container">
<div class="blank">
<p id="ten">10. What is the capitol of Ohio?<br />
<div class="tab">
<input type="radio" name="question" value="A" /> Cleveland<br />
<input type="radio" name="question" value="B" /> Green Bay<br />
<input type="radio" name="question" value="C" /> Austin<br />
<input type="radio" name="question" value="D" /> 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 + "%";
var corrAnswers = "";
for(i = 1; i <numQues; i++){
corrAnswers += i + "." + answers [i - 1] + "\r\n;"
}
form.solutions.value = corrAnswers/numQues * 100 + "%";}
});
});
由于
答案 0 :(得分：4)
这是一种使用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/。提示：它使用有序列表自动编号排序的问题列表。