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>
Just replace the 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">
<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>
Help writing an online quiz that implements a simple quiz? Every time I click the button...
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 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 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: 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 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 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 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 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 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 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"...