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)