hey guys!
So i'm new around here, and I've got a question
so the situation is: I'm a little bit experienced at programming html
but as a challenge of my teacher, I had to create a webquiz.
So i found a code that works perfectly.
But there's only 1 issue.
The reset button is missing (or doesn't work)
So what I want is:
when people finished the quiz, they can hit the reset button and start over if they wish.
But ... I don't know how I need to program this.
I searched on several sites and found several solutions, but none of them work.
so here's the code I've got (don't mind the language of the questions, need to adapt them)
-------------------------------------------------------------------------------------------------
<html>
<head>
<title>Example Quiz 1</title>
<script>
//highlight color of answer - can change this color to a hex code or recognized color name
var highlightColor = "#00ff00";
//this should not be changed
function checkQuestionDropDown(selectGroup) {
if (selectGroup[selectGroup.selectedIndex].value == "correct") {
return 1;
}
else {
return 0;
}
}
//this should not be changed
function checkQuestionRadio(radioGroup) {
//go through the radio group sent in and determine if radio button
//checked is "correct".
//return 1 for correct value, 0 for incorrect
for (i=0; i<radioGroup.length; i++) {
if (radioGroup[i].checked) {
if (radioGroup[i].value == "correct") {
return 1;
}
else {
return 0;
}
}
}
return 0;
}
//this should not be changed
function highlightCorrectButton(radioButton) {
document.getElementById(radioButton).style.backgroundColor = highlightColor;
}
function checkQuiz() {
//check each question to see if it's right.
//The orange highlighted code may need to be changed
//you will need to match these question types(Radio/DropDown)
//and names (q1, q2, ...) to the ones in your quiz
numCorrect = 0;
numCorrect += checkQuestionRadio( document.quiz.q1);
numCorrect += checkQuestionRadio( document.quiz.q2);
numCorrect += checkQuestionRadio( document.quiz.q3);
numCorrect += checkQuestionDropDown( document.quiz.q4);
//highlight correct answers from radio button groups...use span id name
highlightCorrectButton('correct1');
highlightCorrectButton('correct2');
highlightCorrectButton('correct3');
//produce output in textarea.
document.quiz.output.value +=
"You got " + numCorrect + " out of 4 questions correct.\n" +
"Your grade is " + Math.round(100*numCorrect/4) + "%\n" +
"The answer to question 1 is Stout\n" +
"The answer to question 2 is Jefferson City\n" +
"The answer to question 3 is talking\n" +
"The answer to question 4 is mass\n";
}
</script>
</head>
<body>
<form name="quiz">
<ol>
<li>An-sofie is:<br>
<input type="radio" name="q1" value="wrong">Voorspelbaar<br>
<input type="radio" name="q1" value="wrong">Saai<br>
<span id="correct1"><input type="radio" name="q1" value="correct">Stout</span><br>
<input type="radio" name="q1" value="wrong">Ambetant<br>
</li>
<li>The capital of Missourri is:
<input type="radio" name="q2" value="wrong">St. Louis
<span id="correct2"><input type="radio" name="q2" value="correct">Jefferson City</span>
<input type="radio" name="q2" value="wrong">Missourri City
<input type="radio" name="q2" value="wrong">Omaha
</li>
<li>
<span id="correct3"><input type="radio" name="q3" value="correct">A</span>
<input type="radio" name="q3" value="wrong">B
<input type="radio" name="q3" value="wrong">C
</li>
<li> The <select name="q4"> <option value="correct">mass <option value="wrong">weight <option value="wrong">velocity </select> of an object is the same anywhere in the universe. </li>
</ol>
<input type="button" onClick="checkQuiz()" value="check quiz">
<hr>
<textarea cols="80" rows="10" name="output"></textarea>
</form>
<form>
<input type="reset" onclick="score = 0;" value="Opnieuw">
</form>
</body>
</html>
-------------------------------------------------------------------------------------------------
If someone could help me with this, I would be so happy! Just can't figure it out!
So what the reset button needs to do is empty the textarea and uncheck all radiobuttons and reset the selectmenu to the first option (with other words: the original state of the site)
ty!!
Jorrex
