Member Avatar for huha2511

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");
}
Edited by huha2511
  • 2 Contributors
  • 1 Reply
  • 1K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Raja_2020

Dani AI

Generated

As noted, the problem comes from copying a question panel's HTML into the start container. Writing innerHTML produces a new set of inputs that are not the original inputs inside your form. The user fills the visible copies, but checkAnswers() reads the inputs that live in the original form (which remain hidden). That exactly explains why you keep getting the five checkbox points but not the radio/text answers.

Keep a single set of inputs and toggle which panel is visible instead of cloning markup. Also: make navigation buttons type="button" (so they do not submit the form), avoid duplicate IDs (an element and an input both named q2 will break lookups), and attach a submit handler that calls preventDefault() then validates. Example pattern:

function showQuestion(id) {
  var panels = document.querySelectorAll('form[name="quizForm"] > div[id]');
  panels.forEach(function(p){ p.style.display = 'none'; });
  document.getElementById(id).style.display = 'block';
}

document.querySelector('form[name="quizForm"]').addEventListener('submit', function(e){
  e.preventDefault();
  checkAnswers();
});

For checkbox scoring decide whether you want partial credit (count each correct checked) or full-credit-only (user must select exactly the correct set). A small helper can compare checked vs required items and award the point only on an exact match. Also avoid calling .toString() on possibly undefined form values — check for existence first. These changes will keep form controls intact so your original validation logic will read the real user inputs.

Member Avatar for Raja_2020

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
Edited by Raja_2020
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.