Question

Help writing an online quiz that implements a simple quiz? Every time I click the button...

Help writing an online quiz that implements a simple quiz?

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

Below is my code.

<!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 0
Add a comment Improve this question Transcribed image text
Answer #1

Just replace the code.

  1. I have removed the form tag, which was causing the page to reload, whenever we were clicking on the submit button.
  2. added id to button tag.

<!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">

<fieldset>

<img src="http://www.yogacards.com/yoga-postures-2/yoga-cards/Supta-Virasana.jpg" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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 id="form1">Submit</button>

</fieldset>

  

<p>Your grade is: <span id="grade">__</span></p>

</div>

<script>

  

document.getElementById("form1").onclick=function() {

var virasana = parseInt(document.querySelector('input[name = "virasana"]:checked').value);

var yoga = parseInt(document.querySelector('input[name="yoga"]:checked').value);

var comsci = parseInt(document.querySelector('input[name="comsci"]:checked').value);

  

var answer = parseInt(document.querySelector('input[name="answer"]:checked').value);

var pose = parseInt(document.querySelector('input[name="pose"]:checked').value);

var question = parseInt(document.querySelector('input[name="question"]:checked').value);

var quiz = parseInt(document.querySelector('input[name="quiz"]:checked').value);

var badd = parseInt(document.querySelector('input[name = "badd"]:checked').value);

var warr = parseInt(document.querySelector('input[name = "warr"]:checked').value);

var heads = parseInt(document.querySelector('input[name = "heads"]:checked').value);

  

  

var 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>

Add a comment
Know the answer?
Add Answer to:
Help writing an online quiz that implements a simple quiz? Every time I click the button...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en">...

    How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2> <center> Average: </h2> <h3> <center> Rate the following: </h2> <h3> <center> Rating Criteria: <br> Developing (0-5), Competent (6-10), Accomplished (10-15); </h3> <center> Judge Name: <input type="text" id="judge"> <br> <br> <center> 1. Articulate requirements and design of the project: <input type="text" id="num1"> <br> <br> 2. Plan the solution and implement the project: <input type="text" id="num2"> <br> <br> 3....

  • I am trying to make it so that radio buttons when clicked execute a javascript file....

    I am trying to make it so that radio buttons when clicked execute a javascript file. I have to to have the exercises in external files. Here is what I have so far. I am reusing a script that was used to make radio buttons switch CSS files so I think I have to change the set attribute options. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p> 4.2 Output: The first 20 Fibonacci numbers, which are...

  • the is my HTML and CSS code. I didn't attach the image or the CSS file...

    the is my HTML and CSS code. I didn't attach the image or the CSS file because of the space limit. two things I wanted to incorporate on this page are to make "MY TOP 3 MUSIC GENRES" blink using javascript and to make the video links autoplay using javascript both should be using javascript requirement: our professor told us not to use <div> or alert. thank you for your help <!DOCTYPE html> <!-- I used w3school for the formatting...

  • I can't figure this one out at all. Any help would be appreciated. Here's the question:...

    I can't figure this one out at all. Any help would be appreciated. Here's the question: You will need to complete the functions to Toggle the Fries and Drinks sections by adding or removing the 'hide' CSS class I created. I have already created the function to Toggle Burgers and you can use that as an example to build out the full functionality. I have also made created the function to reset the form. Finally, to calculate the total, you...

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

  • Below is the code created for a previous assignment. I now need to create functions to...

    Below is the code created for a previous assignment. I now need to create functions to validate the name, age, and item selection in an external JavaScript file. Specifically, check for the following: The user has entered a name Age is a number between 18 and 110 An item is selected Ensure that a handler returns true if the input is acceptable and false otherwise. Add an onSubmit attribute to the form tag so that a validation failure prevents the...

  • for Javascript, JQuery When the page is first opened a user will see the name field...

    for Javascript, JQuery When the page is first opened a user will see the name field and the three vacation images to the left of the page. The page should behave according to the following rules. 1. When a user's mouse pointer goes over any image, that image's border will change to be "outset 10px" and when the mouse pointer leaves that image it's border will change to "none". 2. When the user clicks a "Vacation" image on the left,...

  • I am trying to create a slide show using JavaScript. This is what I have so...

    I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • i need the code that goes within the <script> opening and closing following the insturctions of...

    i need the code that goes within the <script> opening and closing following the insturctions of the insturctions of the pasted assignment screen shots please. <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 3 Hands-on Project 3-1 Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Hands-on Project 3-1</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 3-1 </h1> </header> <article> <h2>Lunch selections</h2> <form> <input type="checkbox" id="item1" value="8" /> <label for="item1">Fried chicken ($8.00)</label> <input type="checkbox"...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT