Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Why My Quiz Web App Not Displaying Result on Submit?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 52
    Answer it

    Every time I click the button to submit my answers the page refreshes and no grade is shown and I don't know why.

     

    Any help would be greatly appreciated.

     

    My code is below:

    <!DOCTYPE html>
    <html>
    <head>
    <h1>All images gotten from http://www.yogacards.com/yoga-pose-cards.html</h1>
    <style>
    body {
    background-color: black;
    font-family: Helvetica;
    }

    #main {
    width: 80%;
    max-width: 950px;
    border: 1px gray solid;
    margin: auto;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    }

    #header {
    margin-top: 0;
    border: 2px solid black;
    padding: 5px;
    height: 248px;
    background: beige;
    background-image: url("https://media.proprofs.com/images/QM/user_images/2140957/1503686397.png");
    color: white;
    }

    label {
    display: block;
    }

    input {
    width: 30px;
    margin-left: 20px;
    }

    h2 {
    clear: both;
    padding-top: 20px;
    }

    button {
    width: 100px;
    margin-top: 20px;
    }

    </style>

    <script>

    function setCookie(cname,cvalue,exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

    function checkCookie() {
        var user=getCookie("username");
        if (user != "") {
            alert("Welcome back " + user);
        } else {
           user = prompt("Please enter your name:","");
           if (user != "" && user != null) {
               setCookie("username", user, 30);
           }
        }
    }

    </script>

     


    </head>
    <body onload="checkCookie()">
    <div id="main">

    <form id="form1">
    <fieldset>

     

    <img src="http://www.yogacards.com/yoga-postures-2/yoga-cards/Supta-Virasana.jpg" alt="Supta-Virasana" width="250" height="280">
    <h2>What is the name of this pose in English?</h2>
    <label for="vir_string"><input type="radio" name="virasana" value="0"  />Bharadvajasana</label>
    <label for="vir_join"><input type="radio" name="virasana" value="0" />Padangusthasana</label>
    <label for="vir_info"><input type="radio" name="virasana" value="0" />Nirvana</label>
    <label for="vir_condition"><input type="radio" name="virasana" value="10" />None of the above</label>
        
    <img src="http://www.yogacards.com/yoga-postures-2/yoga-cards/shoulderstand.jpg" alt="shoulderstand" width="250" height="280">    
    <h2>What is this pose called in Sanskrit?</h2>
    <label for="yog_string"><input type="radio" name="yoga" value="0"  />Ustrasana</label>
    <label for="yog_join"><input type="radio" name="yoga" value="0"  />Balasana</label>
    <label for="yog_info"><input type="radio" name="yoga" value="10" />Salamba Sarvangasana</label>
    <label for="yog_condition"><input type="radio" name="yoga" value="0" />None of the above</label>

    <img src="http://www.yogacards.com/yoga-postures-2/yoga-cards/Anantasana.jpg" alt="Anantasana" width="250" height="280">
    <h2>Which is this pose's name in English?</h2>
    <label for="cs_string"><input type="radio" name="comsci" value="0"  />Arda Pada</label>
    <label for="cs_join"><input type="radio" name="comsci" value="10"  />Ardha Padma</label>
    <label for="cs_info"><input type="radio" name="comsci" value="0" />Artha Prada</label>
    <label for="cs_condition"><input type="radio" name="comsci" value="0" />None of the above</label>

    <img src="http://www.yogacards.com/yoga-postures-2/yoga-cards/boat.jpg" alt="boat" width="250" height="280">
    <h2>What do we call this pose in Sanskrit?</h2>
    <label for="ans_string"><input type="radio" name="answer" value="0"  />Navasanna</label>
    <label for="ans_join"><input type="radio" name="answer" value="0" />Navassana</label>
    <label for="ans_info"><input type="radio" name="answer" value="10" />Navasana</label>
    <label for="ans_condition"><input type="radio" name="answer" value="0" />None of the above</label>

    <img src="http://www.yogacards.com/yoga-postures-2/yoga-cards/Locust-Pose.jpg" alt="Locust Pose" width="250" height="280">
    <h2>What do we call this pose in English?</h2>
    <label for="ps_string"><input type="radio" name="pose" value="0"  />Mosquito Pose</label>
    <label for="ps_join"><input type="radio" name="pose" value="0"  />Cricket Pose</label>
    <label for="ps_info"><input type="radio" name="pose" value="10"  />Locust Pose</label>
    <label for="ps_condition"><input type="radio" name="pose" value="0" />None of the above</label>

    <img src="http://www.yogacards.com/yoga-postures-2/yoga-cards/camel.jpg" alt="camel" width="250" height="280    ">
    <h2>What is the Sanskrit name of this pose?</h2>
    <label for="q_string"><input type="radio" name="question" value="0" />Ustrassana</label>
    <label for="q_join"><input type="radio" name="question" value="0" />Ustrasanna</label>
    <label for="q_info"><input type="radio" name="question" value="10"  />Ustrasana</label>
    <label for="q_condition"><input type="radio" name="question" value="0" />I don't know</label>


    <img src="http://www.yogacards.com/yoga-postures-2/yoga-cards/Corpse-Pose.jpg" alt="Corpse Pose" width="250" height="280">
    <h2>What is the English word for this pose?</h2>
    <label for="qz_string"><input type="radio" name="quiz" value="10"  />Corpse Pose</label>
    <label for="qz_join"><input type="radio" name="quiz" value="0" /> Playing Dead</label>
    <label for="qz_info"><input type="radio" name="quiz" value="0"  />Feigning Death</label>
    <label for="qz_condition"><input type="radio" name="quiz" value="0" />I don't know</label>

    <img src="http://www.yogacards.com/yoga-postures-2/yoga-cards/baddhakona.jpg" alt="baddhakona" width="250" height="280">
    <h2>What is this pose called in Sanskrit?</h2>
    <label for="bad_string"><input type="radio" name="badd" value="0" />Buddha Konasana</label>
    <label for="bad_join"><input type="radio" name="badd" value="10" />Baddha Konasana</label>
    <label for="bad_info"><input type="radio" name="badd" value="0" />Badda Konasana</label>
    <label for="bad_condition"><input type="radio" name="badd" value="0"  />I don't know</label>

    <img src="http://www.yogacards.com/yoga-postures-2/yoga-cards/warrior2-up.jpg" alt="Upward Warrior 2" width="250" height="280">
    <h2>Which of the following is the correct name for this pose in English?</h2>
    <label for="war_string"><input type="radio" name="warr" value="0"  />Aligned with the Heavens</label>
    <label for="war_join"><input type="radio" name="warr" value="10"  />Upward Warrior 2</label>
    <label for="war_info"><input type="radio" name="warr" value="0"  />Tilted Lotus</label>
    <label for="war_condition"><input type="radio" name="warr" value="0"  />I don't know</label>

    <img src="http://www.yogacards.com/yoga-postures-2/yoga-cards/headstand-side.jpg" alt="Headstand" width="250" height="280">
    <h2>What is a side headstand called in Sanskrit?</h2>
    <label for="head_string"><input type="radio" name="heads" value="0" />Side Sirsasana</label>
    <label for="head_join"><input type="radio" name="heads" value="0"  />Parsva Headstand</label>
    <label for="head_info"><input type="radio" name="heads" value="0" />Parsva Sirsasana</label>
    <label for="head_condition"><input type="radio" name="heads"  value="10" />Ommmmmmmm</label>

    <button type="submit" value="Submit">Submit</button>
    </fieldset>
    </form>
        
    <p>Your grade is: <span id="grade">__</span></p>


     

     


    </div>
    <script>
        

    document.getElementById("form1").onsubmit=function() {
           virasana = parseInt(document.querySelector('input[name = "virasana"]:checked').value);
           yoga = parseInt(document.querySelector('input[name="yoga"]:checked').value);
           comsci = parseInt(document.querySelector('input[name="cs"]:checked').value);
           answer = parseInt(document.querySelector('input[name="answer"]:checked').value);
           pose = parseInt(document.querySelector('input[name="pose"]:checked').value);
           question = parseInt(document.querySelector('input[name="question"]:checked').value);
           quiz = parseInt(document.querySelector('input[name="quiz"]:checked').value);
           badd = parseInt(document.querySelector('input[name = "badd"]:checked').value);
           warr = parseInt(document.querySelector('input[name = "warr"]:checked').value);
           heads = parseInt(document.querySelector('input[name = "heads"]:checked').value);
          
           
           
          
           
           
           result = virasana + yoga + comsci + answer + pose + question + quiz + badd + warr + heads;
           
        document.getElementById("grade").innerHTML = result;

     


    return false; //stops the submit function
    }

     

     

    </script>

     

     


    </body>
    </html>

     

 0 Answer(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: