我能够使用 javascript 和 html 创建测验。这是一个包含 5 个问题的简单测验，目前当用户错误时，只会出现第一个问题的解决方案，我尝试为其他问题添加一个函数，但它不会运行，我想知道如何循环遍历所有问题在用户给出的每个错误答案的底部提供五个问题的解决方案。
<HEAD>
<style type="text/css">
<!--
.bgclr {background-color: white; color: black; font-weight: bold;}
-->
.hidden {
display: none;
}
.visible {
display: block;
}
</style>
<script language="JavaScript">
// Insert scooter questions number of questions
var numQues = 5;
// Insert number of choices in each question
var numChoi = 3;
// Insert number of questions displayed in answer area
var answers = new Array(5);
// Insert answers to questions
answers[0] = "Keep to the left side of the road far as is safe.";
answers[1] = "Road which cross.";
answers[2] = "When a traffic officer order you to do so.";
answers[3] = "Traffic circle where right of way is applicable.";
answers[4] = "(i), (ii) and (iii)";
answers[5] = "A marked pedestrian crossing ahead.";
function getScore(form) {
showCorrectAnswers();
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;
}
function showCorrectAnswers() {
var q1Inputs = document.querySelectorAll('.q1-inputs input');
var correctAnswer = document.querySelector('.q1-inputs span');
var correct = correctAnswer.textContent;
q1Inputs.forEach(function(element) {
if (element.checked) {
if (element.value !== correct) {
correctAnswer.classList.remove('hidden');
} else {
correctAnswer.classList.add('hidden');
}
}
});
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<h3>Scooter quiz by johnson</h3>
<form name="quiz">
1. Which rule is considered the most important RULE OF THE ROAD in South Africa?
<ul class="q1-inputs" style="margin-top: 1pt">
<li><input type="radio" name="q1" value="Always be courteous and considerate towards fellow road users.">Always be courteous and considerate towards fellow road users.</li>
<li><input type="radio" name="q1" value="Do not exceed the speed limit.">Do not exceed the speed limit.</li>
<li><input type="radio" name="q1" value="Keep to the left side of the road far as is safe.">Keep to the left side of the road far as is safe.</li>
<span class="hidden" style="color:red;">Keep to the left side of the road far as is safe.</span>
</ul>
2. Sign L9 warns you about... ahead.
<ul style="margin-top: 1pt">
<li><input type="radio" name="q2" value="Where you are also not allowed to park."> Where you are also not allowed to park..</li>
<li><input type="radio" name="q2" value="A railway crossing">A railway crossing</li>
<li><input type="radio" name="q2" value="Road which cross">Road which cross</li>
</ul>
3.Under what circumstances, if any, are you allowed to drive your motor motor vehicle on the right-hand side of a public road with traffic moving in both directions?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q3" value="When you switch the emergency lights of your vehicle on.">When you switch the emergency lights of your vehicle on.</li>
<li><input type="radio" name="q3" value="When a traffic officer order you to do so.">When a traffic officer order you to do so.</li>
<li><input type="radio" name="q3" value="Under no circumstance.">Under no circumstance.</li>
</ul>
4.Sign CC9 is found at ..
<ul style="margin-top: 1pt">
<li><input type="radio" name="q4" value="Traffic circle where right of way is applicable.">Traffic circle where right of way is applicable.</li>
<li><input type="radio" name="q4" value="Dangerous place where roadwork is being done.">Dangerous place where roadwork is being done.</li>
<li><input type="radio" name="q4" value="Sharp curve to the right.">Sharp curve to the right.</li>
</ul>
5.You may not obtain a learner’s license if...
<ul style="margin-top: 1pt">
<li><input type="radio" name="q5" value="A first-aid post."> A first-aid post.</li>
<li><input type="radio" name="q5" value="A railway crossing">A railway crossing</li>
<li><input type="radio" name="q5" value="Road which cross">Road which cross</li>
</ul>
<input type="button" value="Get score" onClick="getScore(this.form)">
<input type="reset" value="Clear answers">
<p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br>
Correct answers:<br>
<textarea class="bgclr" name="solutions" wrap="virtual" rows="10" cols="100" disabled>
</textarea>
</form>最佳答案
JavaScript 更新
var getScoreButton = document.getElementById("getScore"),
quizSections = document.getElementById("quizForm").querySelectorAll("ul"),
quizScore = document.getElementById("percentage"),
quizSolutions = document.getElementById("solutions"),
answers = new Array(5),
score = 0,
solutions = '';
// Insert answers to questions
answers[0] = "Keep to the left side of the road far as is safe.";
answers[1] = "Road which cross.";
answers[2] = "When a traffic officer order you to do so.";
answers[3] = "Traffic circle where right of way is applicable.";
answers[4] = "(i), (ii) and (iii)";
answers[5] = "A marked pedestrian crossing ahead.";
function checkAnswers(source) {
source.forEach(function(section, index){
var selectedAnswer = section.querySelector("input:checked");
if(selectedAnswer){
if(answers[index] === selectedAnswer.value){
score+=1;
}else{
solutions+= (index+1) + '. ' + answers[index] + "\n";
}
}else{
solutions+= (index+1) + '. ' + answers[index] + "\n";
}
});
quizScore.value = score;
quizSolutions.value = solutions;
score = 0;
solutions = '';
}
getScoreButton.addEventListener("click", function(){
checkAnswers(quizSections);
});
HTML 更新(添加了一些 ID)
<input type="button" value="Get score" id="getScore">
<input type="reset" value="Clear answers">
<p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" id="percentage" disabled></strong><br><br>
Correct answers:<br>
<textarea class="bgclr" name="solutions" id="solutions" wrap="virtual" rows="10" cols="100" disabled>
关于javascript - 如何在 JavaScript 测验中使用循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39995494/