How to validate my quiz answers till the end to show a full score?

JavaScript
1

Hi, I am new here! xD
Need help for my assignment. TT-TT
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.
And I think the score 5/7 is only for the checkbox. Question 1 and 2 is ignored by the checkAnswers().
Please do tell what is wrong with my code and if you have any recommendations. Please do tell.
Here is the demo

Below 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");
}

Here is my HTML

 <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>
Last edited: Today at 2:07 AM
Reply CommentReport Edit
2

Hi,

The problem is how you are displaying / hiding the sections of the quiz. This function:

function show(param_div_id) {
  document.getElementById('start').innerHTML = document.getElementById(param_div_id).innerHTML;
}

is removing the user’s answers from the DOM, so that when you come to check the scores, you have no reference as to what they entered for questions 1 & 2.

A better way would be to change the visibility of elements, not remove them entirely.

Here’s an article explaining how to do that.

1 Like
3

Thank you for pointing it out and also sharing an article about it. I’ll try to take note and change that show() function. :smiley:

4

No worries :slight_smile: Let us know if you run into any other problems.

1 Like
5

Alright :grin: Thanks again!

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.