I have been at this quiz for ages now and just can't get it to work on my webpage. What is the error?
The HTML:
<body>
<div id="content1">
<div class="position">
<div class="form">
<h3>Quiz</h3>
<form name="myForm">
Question 1: Which of these is a letter?<br>
<input type="radio" name="q1" value="correct">A<br>
<input type="radio" name="q1">1<br>
<input type="radio" name="q1">#<br>
<input type="radio" name="q1">None of the Above<br>
<br>
Question 2: Which of these is a number?<br>
<input type="radio" name="q2">A<br>
<input type="radio" name="q2" value="correct">1<br>
<input type="radio" name="q2">#<br>
<input type="radio" name="q2">None of the Above<br>
<br>
etc...
<input name="button" type="Submit" onClick="onclick=return checkAnswers()" />
</form>
</div>
</div>
</div>
</body>
The JavaScript code:
<head>
<script language="JavaScript">
//Put all the question sets into this array.
var allQuestions = new Array(document.myForm.q1,
document.myForm.q2,
document.myForm.q3,
document.myForm.q4);
//Redirects if 75% or greater, returns false otherwise.
function checkAnswers(){
var totalScore = 0; //initialize to 0
//Go through each question set.
for (var i in allQuestions) {
var temp = allQuestions[i];
//Go through each radio button in the current question set.
for (var j = 0; j < temp.length; j++) {
//If the correct one is chosen then add 1 to total score.
if (temp[j].value == "correct" && temp[j].checked == true) {
totalScore++;
}
}
}
//If the total percentage is more than 75%.
if ((totalScore/allQuestions.length) >= .75) {
//Alert and move on.
alert("Congratulations! Your score of " + totalScore +
" out of " + allQuestions.length + " is good enough to proceed!");
else{
//Otherwise alert and return false.
alert("You must get at least 75% correct to move on!");
return false;
}
}
</script>
</head>
You access the form elements before they exist
You missed a curly bracket before the else. I eliminated it.
Here is an update showing recommended ways to run such a script
window.addEventListener("load", () => {
// when page has loaded
const resultDiv = document.getElementById("result")
document.getElementById("myForm").addEventListener('submit', (e) => {
// when the form is submitted
e.preventDefault() // we will handle the submission
const form = e.target;
resultDiv.textContent = ""
// convert the collection to array
const allRadioButtons = Array.from(
form.querySelectorAll('input[type="radio"][name^="q"]'),
)
const questionNames = new Set(allRadioButtons.map((rad) => rad.name));
const nofQuestions = questionNames.size; // Sets have size
// --- Using filter to count correct answers ---
const totalScore = allRadioButtons.filter(rad =>
rad.checked && rad.value === "correct"
).length;
console.log(totalScore,totalScore , nofQuestions,totalScore / nofQuestions)
//redirects if 75% or greater, returns false otherwise
if (totalScore / nofQuestions >= 0.75) { console.log('yes')
// we must have at least one question or you will get a division with 0 here
//alert and move on
resultDiv.textContent = `Congratulations! Your score of ${totalScore} out of ${nofQuestions} is good enough to proceed!`
setTimeout(() => form.submit(), 2000);
}
// otherwise show message
else resultDiv.textContent = "You must get at least 75% correct to move on!"
});
}); <div id="content1">
<div class="position">
<div class="form">
<h3>Quiz</h3>
<form id="myForm">
Question 1: Which of these is a letter?<br>
<input type="radio" name="q1" value="correct">A<br>
<input type="radio" name="q1">1<br>
<input type="radio" name="q1">#<br>
<input type="radio" name="q1">None of the Above<br>
<br>
Question 2: Which of these is a number?<br>
<input type="radio" name="q2">A<br>
<input type="radio" name="q2" value="correct">1<br>
<input type="radio" name="q2">#<br>
<input type="radio" name="q2">None of the Above<br>
<br>
etc...
<input name="button" type="Submit" />
</form>
<div id="result"></div>
</div>
</div>
</div>