使用javascript進行多項選擇測驗
[英]Multiple choice quiz using javascript
問題描述
我創建了一個多項選擇測驗，它給出了有效的百分比結果，但百分比始終不正確。 不確定如何糾正這一點，因為我嘗試了各種方法，似乎沒有任何工作。
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>
任何幫助贊賞！
2 個解決方案
解決方案1
1 2013-11-23 21:01:53
您需要做的就是獲得正確答案的數量並乘以20。
Percentage = ( 100 / Number of questions ) * Number of right answers
編輯 ：
我剛剛測試了你的代碼，它有效嗎？
解決方案2
1 2013-11-24 18:55:04
鑒於你發布的小提琴 ......
技術上有兩個問題（但一個是一個非常簡單的修復）。
小提琴中的JavaScript設置為運行onload 。 這使得函數在全局范圍內未定義，因為jsFiddle將其包裝在匿名函數window.onload=function(){... your code ...} 。 對此的真正簡單修復是：
- 不使用
var關鍵字來定義全局變量（ 不推薦）。 - 設置jsFiddle以在
No wrap - in <head>或No wrap - in <body>（推薦）中運行JavaScript。
真正的問題是你如何通過雙循環訪問表單元素：
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;
}
}
}
}
與您如何定義表單元素結合使用時（請參閱內聯注釋）：
<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％的最高分數。 這個問題有多種解決方案。
- 更改您的標記，以便只有您的“答案”輸入在表單中。 這樣雙循環就可以了。
不要使用單循環執行的雙循環：
for（i = 0; i <form.elements.length; i ++）{//無論表單中有多少元素，這都是可行的。 currSelection = form.elements [i]; if（currSelection.checked）{if（answers.indexOf（currSelection.value）> -1）{score ++; }}}
至於其他解決方案，它們都歸結為“改變你的標記和你的JavaScript，以便它們更好地一起播放（並且可能更具可讀性）”。 我會繼續，但是這個答案遠遠超出了你最初問題的范圍。
我在http://jsfiddle.net/C2Bqh/1/和http：// jsfiddle中匯總了一些如何“改變你的標記和你的JavaScript，以便它們在一起更好地發揮（並且可能更具可讀性）”的一些例子。 .net / C2Bqh / 2 / 。
使用HTML + Javascript進行多項選擇測驗：重新：使用數組對象和屬性更新分數（幫助分析代碼）
[英]Multiple choice quiz using HTML + Javascript: re: updating the score using array objects and properties (Help analyzing code)
HTML / JavaScript多項選擇測驗：設置標題和答案選擇功能
[英]HTML / JavaScript multiple choice quiz: setting header and answer choices functions
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.