使用JavaScript选择题测验 [英] Multiple choice quiz using javascript
问题描述
我创建了一个选择题测验，给出了一个百分比结果是工作，但所占比例一直不正确。不知道如何完全正确的这一点，因为我已经试过各种方法，并似乎没有任何工作。
I have created a multiple choice quiz that gives a percentage result that works but the percentage is consistently incorrect. Not sure how to correct this exactly, as I've tried various approaches and nothing seems to work.
Script:
var numQues = 5;
var numChoi = 3;
var answers = new Array(5);
answers[0] = "David Bowie";
answers[1] = "AM";
answers[2] = "Australia";
answers[3] = "Boneface";
answers[4] = "Sound City";
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.percentage.value = score + "%";
var correctAnswers = "";
for (i=1; i<=numQues; i++) {
correctAnswers += i + ". " + answers[i-1] + "\r\n";
}
form.solutions.value = correctAnswers;
}
HTML:
<center>
<h1>Test your music knowledge!</h1>
<p>
<form name="quiz">
<p>
<b>1. Who supplied a cameo vocal for the Arcade Fire song, "Reflektor"?<br></b>
<blockquote>
<input type="radio" name="q1" value="Elton John">Elton John<br>
<input type="radio" name="q1" value="David Bowie">David Bowie<br>
<input type="radio" name="q1" value="Leonard Cohen">Leonard Cohen<br>
</blockquote>
<p><b>
2. What is the title of Arctic Monkeys 2013 album?<br></b>
<blockquote>
<input type="radio" name="q2" value="AM">AM<br>
<input type="radio" name="q2" value="AM I?">AM I?<br>
<input type="radio" name="q2" value="SAM I AM">SAM I AM<br>
</blockquote>
<p><b>
3. Where do psychedelic rockers Tame Impala hail from?<br></b>
<blockquote>
<input type="radio" name="q3" value="Australia">Australia<br>
<input type="radio" name="q3" value="New Zealand">New Zealand<br>
<input type="radio" name="q3" value="America">America<br>
</blockquote>
<p><b>
4. Which artist designed Queens Of The Stone Ages "...Like Clockwork" album artwork?<br></b>
<blockquote>
<input type="radio" name="q4" value="Banksy">Banksy<br>
<input type="radio" name="q4" value="Bono">Bono<br>
<input type="radio" name="q4" value="Boneface">Boneface<br>
</blockquote>
<p><b>
5. What was the name of Dave Grohls 2013 rockumentary?<br></b>
<blockquote>
<input type="radio" name="q5" value="Sin City">Sin City<br>
<input type="radio" name="q5" value="Sound City">Sound City<br>
<input type="radio" name="q5" value="Oh, I'm just so PRETTY.">Oh, I'm just so PRETTY<br>
</blockquote>
<p><b>
<input type="button" value="Get score" onClick="getScore(this.form)">
<input type="reset" value="Clear"><p>
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br></font>
<textarea name="solutions" wrap="virtual" rows="4" cols="25"></textarea>
</form>
<p>
任何帮助AP preciated！
Any help appreciated!
推荐答案
由于您发布的小提琴 ...
Given your posted fiddle...
有技术上的两个问题（但有一个真正简单的修复）。
There are technically two problems (but one's a real simple fix).
在小提琴中的JavaScript设置为运行的onload 。这使得在全球范围内不确定您的职能的jsfiddle包装这一个匿名函数的window.onload =函数（）{...您的code ...} 。这样做的真正简单的修复方法是：
The JavaScript in the fiddle is set to run onload. This leaves your functions undefined in a global scope as jsFiddle wraps this in an anonymous function window.onload=function(){... your code ...}. The real simple fix for this is to either:
- 不使用
VAR关键字来定义你的全局变量（不可以
推荐）。 - 将的jsfiddle运行的JavaScript无论是在
无或
包装 - 上述＆lt; HEAD＆GT;不循环 - 上述＆lt;身体GT;（推荐）
- Not use the
varkeyword to define your global variables (not recommended). - Set the jsFiddle to run the JavaScript either in
No wrap - in <head>orNo wrap - in <body>(recommended).
真正的问题是如何您是通过双循环访问表单元素：
The real problem is how you're accessing the form elements via the double loop:
for (i = 0; i < numQues; i++) { // where numQues = 5
currElt = i * numChoi; // where numChoi = 3
for (j = 0; j < numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
break;
}
}
}
}
当你是如何定义的组合形式元素（参见内嵌注释）：
when combined with how you've defined the form elements (see inline comments):
<input type="text" name="numbers" ...> // currSelection = 0, numQues = 0, numChoi = 0, answer[i] = "David Bowie"
<button type="button" onclick="">Off you go!</button> // currSelection = 1, numQues = 0, numChoi = 1, answer[i] = "David Bowie"
<input type="radio" name="q1" value="Elton John"> // currSelection = 2, numQues = 0, numChoi = 2, answer[i] = "David Bowie"
<input type="radio" name="q1" value="David Bowie"> // currSelection = 3, numQues = 1, numChoi = 0, answer[i] = "AM"
<input type="radio" name="q1" value="Leonard Cohen"> // currSelection = 4, numQues = 1, numChoi = 1, answer[i] = "AM"
<input type="radio" name="q2" value="AM"> // currSelection = 5, numQues = 1, numChoi = 2, answer[i] = "AM"
<input type="radio" name="q2" value="AM I?"> // currSelection = 6, numQues = 2, numChoi = 0, answer[i] = "Australia"
<input type="radio" name="q2" value="SAM I AM"> // currSelection = 7, numQues = 2, numChoi = 1, answer[i] = "Australia"
<input type="radio" name="q3" value="Australia"> // currSelection = 8, numQues = 2, numChoi = 2, answer[i] = "Australia"
<input type="radio" name="q3" value="New Zealand"> // currSelection = 9, numQues = 3, numChoi = 0, answer[i] = "Boneface"
<input type="radio" name="q3" value="America"> // currSelection = 11, numQues = 3, numChoi = 1, answer[i] = "Boneface"
<input type="radio" name="q4" value="Banksy"> // currSelection = 12, numQues = 3, numChoi = 2, answer[i] = "Boneface"
<input type="radio" name="q4" value="Bono"> // currSelection = 13, numQues = 4, numChoi = 0, answer[i] = "Sound City"
<input type="radio" name="q4" value="Boneface"> // currSelection = 14, numQues = 4, numChoi = 1, answer[i] = "Sound City"
<input type="radio" name="q5" value="Sin City"> // currSelection = 14, numQues = 4, numChoi = 2, answer[i] = "Sound City"; Looping ends
<input type="radio" name="q5" value="Sound City">
<input type="radio" name="q5" value="Oh, I'm just so PRETTY.">
<input type="button" value="Get score" onclick="getScore(this.form)">
<input type="reset" value="Clear">
<input type="text" size="15" name="percentage">
<textarea name="solutions" wrap="virtual" rows="4" cols="25"></textarea>
这导致第一问题是有效地跳过，并且最后一个问题，以从未是正确的，所以用户只能获得60％的最高得分。对于这个问题的多种解决方案。
This causes the first question to be effectively skipped and the last question to never be correct, so the user can only obtain a maximum score of 60%. There are multiple solutions to this problem.
- 更改您的标记，这样的仅您的答案的投入都在
形成。这种方式的双回路将工作。 -
不要使用双回路，其中单回路会做什么：
- Change your markup so that only your "answer" inputs are in the form. This way the double-loop will work.
Don't use a double-loop where a single-loop will do:
有关（i = 0; I＆LT; form.elements.length;我++）{//这是工作，无论有多少元素的形式。
currSelection = form.elements [I]
如果（currSelection.checked）{
如果（answers.indexOf（currSelection.value）> -1）{
得分++;
}
}
}
for (i = 0; i < form.elements.length; i++) { // this is work regardless of how many elements are in the form. currSelection = form.elements[i]; if (currSelection.checked) { if (answers.indexOf(currSelection.value) > -1) { score++; } } }
至于其他的解决方案，他们都归结为改变你都标记和你的JavaScript，使他们发挥更多好听在一起（和也许更具可读性）。我会去的，但后来这个答案顺利您最初的问题的范围。
As for other solutions, they all boil down to "change both your markup and your JavaScript so that they play more nicely together (and are perhaps more readable)". I would go on, but then this answer go well outside the scope of your initial question.
我放在一起的怎么一些例子同时更改您的标记和你的JavaScript，使他们发挥更多好听在一起（和也许更具可读性）在的 http://jsfiddle.net/C2Bqh/1/ 和 http://jsfiddle.net/C2Bqh/2/ 。
I put together some examples of how to "change both your markup and your JavaScript so that they play more nicely together (and are perhaps more readable)" at http://jsfiddle.net/C2Bqh/1/ and http://jsfiddle.net/C2Bqh/2/.
这篇关于使用JavaScript选择题测验的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
