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

Instead hiding the Radio button DOM you are replacing those using the statement

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

  So reference of your DOM being vanished
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.