如何在javascript測驗末尾顯示/指示對與錯的答案
[英]How to display/indicate the right and wrong answers at the end of javascript quiz
問題描述
如標題所示，我需要有關如何在JavaScript測驗末尾顯示正確和錯誤答案的幫助。 我嘗試了各種方法，但似乎都沒有用。 我嘗試突出顯示，在分數旁邊書寫並在分數下方顯示，但是我嘗試的任何方法似乎都無效。 任何指導，不勝感激，謝謝x
var total_seconds = 30 * 1; var c_minutes = parseInt(total_seconds / 60); var c_seconds = parseInt(total_seconds % 60); var timer; function CheckTime() { document.getElementById("quiz-time-left").innerHTML = "Time Left: " + c_minutes + " minutes " + c_seconds + " seconds "; if (total_seconds <= 0) { score(); } else { total_seconds = total_seconds - 1; c_minutes = parseInt(total_seconds / 60); c_seconds = parseInt(total_seconds % 60); timer = setTimeout(CheckTime, 1000); } } timer = setTimeout(CheckTime, 1000); function highlightAnswerWithClass(question, answer, className) { var answers = document.forms.form[question]; for (var index = 0; index < answers.length; index++) { if (answers[index].value === answer) { answers[index].classList.add(className); } } } function score() { // stop timer clearInterval(timer); //Referencing the value of the questions var q1 = document.forms.form.q1.value; var q2 = document.forms.form.q2.value; var q3 = document.forms.form.q3.value; var q4 = document.forms.form.q4.value; var q5 = document.forms.form.q5.value; var q6 = document.forms.form.q6.value; // disable form var elements = document.getElementById("questions").elements; for (var i = 0, len = elements.length; i < len; ++i) { elements[i].disabled = true; } //Array for the questions var questions = [q1, q2, q3, q4, q5, q6]; //Answers for each question var answers = ["b", "b", "b", "b", "b", "b"]; //variable to keep track of the points var points = 0; var total = 6; //max score //Making use of a for loop to iterate over the questions and answers arrays for (var i = 0; i < total; i++) { if (questions[i] == answers[i]) { points = points + 2; //Increment the score by 2 for every correct answer given alert(points); highlightAnswerWithClass(i + 2, questions[i], "correct"); } else { points = points - 1; alert(points); highlightAnswerWithClass(i + 2, questions[i], "incorrect"); highlightAnswerWithClass(i + 2, answers[i], "correct"); } } //CSS for questions if (points >= 4) { document.body.style.backgroundColor = "rgba(0,255,0,0.2)"; } else { document.body.style.backgroundColor = "rgba(255,0,0,0.1)"; } var q = document.getElementById("p"); q.style.fontSize = "40px"; q.style.textAlign = "center"; q.innerHTML = "You got " + points + " out of " + total + "<br />" + "you used " + (29 - Math.floor(total_seconds)) + " seconds"; return false; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body bgcolor="lightblue"> <div id="quiz-time-left"></div> <form name="form" id="questions" onsubmit="return false;"> <h3>1. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q1" value="a" />a. 1<br /> <input type="radio" name="q1" value="b" />b. 2<br /> <input type="radio" name="q1" value="c" />c. 3<br /> <input type="radio" name="q1" value="d" />d. 4<br /> <h3>2. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q2" value="a" />a. 1<br /> <input type="radio" name="q2" value="b" />b. 2<br /> <input type="radio" name="q2" value="c" />c. 3<br /> <input type="radio" name="q2" value="d" />d. 4<br /> <h3>3. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q3" value="a" />a. 1<br /> <input type="radio" name="q3" value="b" />b. 2<br /> <input type="radio" name="q3" value="c" />c. 3<br /> <input type="radio" name="q3" value="d" />d. 4<br /> <h3>4. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q4" value="a" />a. 1<br /> <input type="radio" name="q4" value="b" />b. 2<br /> <input type="radio" name="q4" value="c" />c. 3<br /> <input type="radio" name="q4" value="d" />d. 4<br /> <h3>5. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q5" value="a" />a. 1<br /> <input type="radio" name="q5" value="b" />b. 2<br /> <input type="radio" name="q5" value="c" />c. 3<br /> <input type="radio" name="q5" value="d" />d. 4<br /> <h3>6. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q6" value="a" />a. 1<br /> <input type="radio" name="q6" value="b" />b. 2<br /> <input type="radio" name="q6" value="c" />c. 3<br /> <input type="radio" name="q6" value="d" />d. 4<br /> <br /> <input type="submit" id="sendA" value="Submit" onclick="score();" /> <br /> <p id="p"></p> </form> </body> </html>
3 個解決方案
解決方案1
1 2019-03-14 16:12:06
您應該將值包裝為標簽值，並使用nextSibling設置標簽顏色。
我更新了所有正確答案。
answers[index].nextSibling.style.backgroundColor = "red";
var total_seconds = 30 * 1; var c_minutes = parseInt(total_seconds / 60); var c_seconds = parseInt(total_seconds % 60); var timer; function CheckTime() { document.getElementById("quiz-time-left").innerHTML = "Time Left: " + c_minutes + " minutes " + c_seconds + " seconds "; if (total_seconds <= 0) { score(); } else { total_seconds = total_seconds - 1; c_minutes = parseInt(total_seconds / 60); c_seconds = parseInt(total_seconds % 60); timer = setTimeout(CheckTime, 1000); } } timer = setTimeout(CheckTime, 1000); function highlightAnswerWithClass(question, answer, className) { var answers = document.forms.form['q'+question]; if(answers == undefined) return; for (var index = 0; index < answers.length; index++) { if (answers[index] != null && answers[index].value === answer) { answers[index].classList.add(className); if(answers[index].nextSibling.style != undefined) answers[index].nextSibling.style.backgroundColor = "red"; } } } function score() { // stop timer clearInterval(timer); //Referencing the value of the questions var q1 = document.forms.form.q1.value; var q2 = document.forms.form.q2.value; var q3 = document.forms.form.q3.value; var q4 = document.forms.form.q4.value; var q5 = document.forms.form.q5.value; var q6 = document.forms.form.q6.value; // disable form var elements = document.getElementById("questions").elements; for (var i = 0, len = elements.length; i < len; ++i) { elements[i].disabled = true; } //Array for the questions var questions = [q1, q2, q3, q4, q5, q6]; //Answers for each question var answers = ["b", "b", "b", "b", "b", "b"]; //variable to keep track of the points var points = 0; var total = 6; //max score //Making use of a for loop to iterate over the questions and answers arrays for (var i = 0; i < total; i++) { if (questions[i] == answers[i]) { points = points + 2; //Increment the score by 2 for every correct answer given //alert(points); highlightAnswerWithClass(i + 1, questions[i], "correct"); } else { points = points - 1; //alert(points); highlightAnswerWithClass(i + 1, questions[i], "incorrect"); highlightAnswerWithClass(i + 1, answers[i], "correct"); } } //CSS for questions if (points >= 4) { document.body.style.backgroundColor = "rgba(0,255,0,0.2)"; } else { document.body.style.backgroundColor = "rgba(255,0,0,0.1)"; } var q = document.getElementById("p"); q.style.fontSize = "40px"; q.style.textAlign = "center"; q.innerHTML = "You got " + points + " out of " + total + "<br />" + "you used " + (29 - Math.floor(total_seconds)) + " seconds"; return false; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> .correct{ border: 1px solid red; background-color:red; } </style> </head> <body bgcolor="lightblue"> <div id="quiz-time-left"></div> <form name="form" id="questions" onsubmit="return false;"> <h3>1. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q1" value="a" />a. 1<br /> <input type="radio" name="q1" value="b" /><label>b. 2</label><br /> <input type="radio" name="q1" value="c" />c. 3<br /> <input type="radio" name="q1" value="d" />d. 4<br /> <h3>2. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q2" value="a" />a. 1<br /> <input type="radio" name="q2" value="b" /><label>b. 2</label><br /> <input type="radio" name="q2" value="c" />c. 3<br /> <input type="radio" name="q2" value="d" />d. 4<br /> <h3>3. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q3" value="a" />a. 1<br /> <input type="radio" name="q3" value="b" /><label>b. 2</label><br /> <input type="radio" name="q3" value="c" />c. 3<br /> <input type="radio" name="q3" value="d" />d. 4<br /> <h3>4. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q4" value="a" />a. 1<br /> <input type="radio" name="q4" value="b" /><label>b. 2</label><br /> <input type="radio" name="q4" value="c" />c. 3<br /> <input type="radio" name="q4" value="d" />d. 4<br /> <h3>5. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q5" value="a" />a. 1<br /> <input type="radio" name="q5" value="b" /><label>b. 2</label><br /> <input type="radio" name="q5" value="c" />c. 3<br /> <input type="radio" name="q5" value="d" />d. 4<br /> <h3>6. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q6" value="a" />a. 1<br /> <input type="radio" name="q6" value="b" /><label>b. 2</label><br /> <input type="radio" name="q6" value="c" />c. 3<br /> <input type="radio" name="q6" value="d" />d. 4<br /> <br /> <input type="submit" id="sendA" value="Submit" onclick="score();" /> <br /> <p id="p"></p> </form> </body> </html>
解決方案2
0 2019-03-14 15:58:13
好的，所以我運行了代碼段，這是控制台中的錯誤：
Error: {
"message": "Uncaught ReferenceError: Invalid left-hand side expression in prefix operation",
"filename": "https://stacksnippets.net/js",
"lineno": 132,
"colno": 25
}
錯誤發生在第132行和第25列。
因此，我認為您應該在詢問堆棧溢出之前檢查代碼，而不僅僅是將整個代碼粘貼到這里。 取出您認為有問題的零件，然后詢問我們。
在這里，我取出了我認為有錯誤的代碼。 祝好運！
if (points >= 4) {
document.body.style.backgroundColor = "rgba(0,255,0,0.2)";
} else {
document.body.style.backgroundColor = "rgba(255,0,0,0.1)";
}
解決方案3
0 2019-03-14 16:33:59
您在highlightAnswerWithClass answers中的索引不正確。 answers是表格中所有輸入的數組，未按問題分組。 由於每個問題有4個可能的答案，因此特定問題的答案的索引為Question question*4至question*4+3 。
我不確定為什么在調用該函數時要在問題編號上加2。
我更改了HTML，以在每個答案的文本周圍加一個跨度。 然后，我使用CSS更改顏色的背景。
var total_seconds = 30 * 1; var c_minutes = parseInt(total_seconds / 60); var c_seconds = parseInt(total_seconds % 60); var timer; function CheckTime() { document.getElementById("quiz-time-left").innerHTML = "Time Left: " + c_minutes + " minutes " + c_seconds + " seconds "; if (total_seconds <= 0) { score(); } else { total_seconds = total_seconds - 1; c_minutes = parseInt(total_seconds / 60); c_seconds = parseInt(total_seconds % 60); timer = setTimeout(CheckTime, 1000); } } timer = setTimeout(CheckTime, 1000); function highlightAnswerWithClass(question, answer, className) { var answers = document.forms.form; for (var index = question*4; index < question*4 + 4; index++) { if (answers[index].value === answer) { answers[index].classList.add(className); } } } function score() { // stop timer clearInterval(timer); //Referencing the value of the questions var q1 = document.forms.form.q1.value; var q2 = document.forms.form.q2.value; var q3 = document.forms.form.q3.value; var q4 = document.forms.form.q4.value; var q5 = document.forms.form.q5.value; var q6 = document.forms.form.q6.value; // disable form var elements = document.getElementById("questions").elements; for (var i = 0, len = elements.length; i < len; ++i) { elements[i].disabled = true; } //Array for the questions var questions = [q1, q2, q3, q4, q5, q6]; //Answers for each question var answers = ["b", "b", "b", "b", "b", "b"]; //variable to keep track of the points var points = 0; var total = 6; //max score //Making use of a for loop to iterate over the questions and answers arrays for (var i = 0; i < total; i++) { if (questions[i] == answers[i]) { points = points + 2; //Increment the score by 2 for every correct answer given highlightAnswerWithClass(i, questions[i], "correct"); } else { points = points - 1; highlightAnswerWithClass(i, questions[i], "incorrect"); highlightAnswerWithClass(i, answers[i], "correct"); } } //CSS for questions if (points >= 4) { document.body.style.backgroundColor = "rgba(0,255,0,0.2)"; } else { document.body.style.backgroundColor = "rgba(255,0,0,0.1)"; } var q = document.getElementById("p"); q.style.fontSize = "40px"; q.style.textAlign = "center"; q.innerHTML = "You got " + points + " out of " + total + "<br />" + "you used " + (29 - Math.floor(total_seconds)) + " seconds"; return false; }
.correct + span { background-color: green; } .incorrect + span { background-color: red; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body bgcolor="lightblue"> <div id="quiz-time-left"></div> <form name="form" id="questions" onsubmit="return false;"> <h3>1. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q1" value="a" /><span>a. 1</span><br /> <input type="radio" name="q1" value="b" /><span>b. 2</span><br /> <input type="radio" name="q1" value="c" /><span>c. 3</span><br /> <input type="radio" name="q1" value="d" /><span>d. 4</span><br /> <h3>2. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q2" value="a" /><span>a. 1</span><br /> <input type="radio" name="q2" value="b" /><span>b. 2</span><br /> <input type="radio" name="q2" value="c" /><span>c. 3</span><br /> <input type="radio" name="q2" value="d" /><span>d. 4</span><br /> <h3>3. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q3" value="a" /><span>a. 1</span><br /> <input type="radio" name="q3" value="b" /><span>b. 2</span><br /> <input type="radio" name="q3" value="c" /><span>c. 3</span><br /> <input type="radio" name="q3" value="d" /><span>d. 4</span><br /> <h3>4. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q4" value="a" /><span>a. 1</span><br /> <input type="radio" name="q4" value="b" /><span>b. 2</span><br /> <input type="radio" name="q4" value="c" /><span>c. 3</span><br /> <input type="radio" name="q4" value="d" /><span>d. 4</span><br /> <h3>5. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q5" value="a" /><span>a. 1</span><br /> <input type="radio" name="q5" value="b" /><span>b. 2</span><br /> <input type="radio" name="q5" value="c" /><span>c. 3</span><br /> <input type="radio" name="q5" value="d" /><span>d. 4</span><br /> <h3>6. How many yellow cards equal a red card in football?</h3> <input type="radio" name="q6" value="a" /><span>a. 1</span><br /> <input type="radio" name="q6" value="b" /><span>b. 2</span><br /> <input type="radio" name="q6" value="c" /><span>c. 3</span><br /> <input type="radio" name="q6" value="d" /><span>d. 4</span><br /> <span> </span><br /> <input type="submit" id="sendA" value="Submit" onclick="score();" /> <br /> <p id="p"></p> </form> </body> </html>
如何在javascript中將提交的測驗答案數組與正確答案數組進行比較
[英]How to compare an array of submitted quiz answers with an array of correct answers in javascript
為什么我的 javascript 測驗的所有答案都是錯誤的？
[英]Why are all the answers for my javascript quiz come back as wrong?
Javascript 在 html 上正確顯示問題和答案並加載測驗的下一個問題
[英]Javascript display questions and answers on html correctly and load next question of a quiz
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.