My quiz has a textbox, mcq and checkbox.
At first, the checkAnswer() worked when I did not input the show() function to my javascript. It showed my overall score.
But after I input that show() function to display 1 question at a time, my score is always 5/7 or less.
Please do tell what is wrong with my code and if you have any recommendations. Please do tell.
Here is the demo. Click Here
<body>
<div id="container" >
<div id="start" >
<div id="ready">
<button onclick="show('q1')"><h1>START NOW</h1></button>
</div>
</div>
<div id="quiz">
<form name="quizForm" >
<div id="q1" style="display:none;" >
<!--QUESTION 1-->
<div class="question">
<h1 >WHO WAS HE?</h1>
<div>
<ul>
<li><input type="radio" name="q1" value="wrong"/>Ted</li>
<li><input type="radio" name="q1" value="correct"/>Jack</li>
<li><input type="radio" name="q1" value="wrong"/>John</li>
</ul>
</div>
</div>
<button onclick="show('q2')"><h1>NEXT</h1></button>
</div>
<div id="q2" style="display:none;">
<!--QUESTION 2-->
<h1>TYPE HOW MANY VICTIMS</h1>
<div>
<input onkeyup=" var start = this.selectionStart;var end = this.selectionEnd;this.value = this.value.toUpperCase(); this.setSelectionRange(start, end);" id="q2" type="text" name="q2" />
</div>
<button onclick="show('q3')"><h1>NEXT</h1></button>
</div>
<div id="q3" style="display:none;">
<!--QUESTION 3-->
<h1>WHICH MOVIES WERE AN ADAPTATION?<br>pick more than 1</h1>
<div>
<ul>
<li><input type="checkbox" name="q3" value="correct"/>Psycho (1960)</li>
<li><input type="checkbox" name="q3" value="wrong"/>Kickass (2010)</li>
<li><input type="checkbox" name="q3" value="correct"/>American Psycho (2000)</li>
<li><input type="checkbox" name="q3" value="correct"/>Zodiac (2007)</li>
<li><input type="checkbox" name="q3" value="wrong"/>Perfume: The Story of a Murderer (2006)</li>
<li><input type="checkbox" name="q3" value="correct"/>Halloween (1978)</li>
<li><input type="checkbox" name="q3" value="correct"/>The Texas Chainsaw Massacre (1974)</li>
</ul>
</div>
<button type="submit" onclick="checkAnswers()"><h1>FINISHED</h1></button>
</div>
</form>
</div>
</div>
</body>Here is my javascript ^^;
function show(param_div_id) {
document.getElementById('start').innerHTML = document.getElementById(param_div_id).innerHTML;
}
//FORCE UPPERCASE
document.getElementById("field1").addEventListener("keypress", forceKeyPressUppercase, false);
document.getElementById("field2").addEventListener("keypress", forceKeyPressUppercase, false);
function retake() {
location.reload();
}
//VALIDATE ANSWERS AND SCORE
function checkAnswers(){
var number = 0;
var numCorrect = 0;
var totalQuestions = 3
var q1 = document.forms['quizForm']['q1'].value.toString();
var q2 = document.forms['quizForm']['q2'].value.toString();
var q3 = document.forms['quizForm']['q3'].value.toString();
var numCorrect=0;
if(q1=="correct"){
numCorrect++;
}
if((q2=="5") || (q2=="FIVE")){
numCorrect++;
}
var checkboxes = document.getElementsByName("q3");
var checkboxChecked = [];
for(var i = 0; i < checkboxes.length; i++) {
if(checkboxes[i].checked && (checkboxes[i].value === "correct")) {
checkboxChecked.push(checkboxes[i]);
numCorrect++;
}
}
alert("You got " +numCorrect+ " out of 7 correct");
}