New Topic/Question
Reply
,i have to set up a Javascript Test which has five questions in the form of radio buttons.It has to show feedback on the answers checked and the correct answers when i press getScore, so that a new page gets displayed with the all answers given a tick or a cross to each. If this isn't exactly clear please let me know,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test.html</title>
<style type="text/css">
<!--
.batang
{
font-family: Batang, BatangChe, "Bauhaus 93", "Bell MT";
font-size: 16px;
color: #000000;
font-style: normal;
background-color: #FFF;
border-top-color: #600;
border-right-color: #600;
border-bottom-color: #600;
border-left-color: #600;
border-top-width: thin;
border-color: #600;
font-weight: bolder;
}
.batang #form1 p
{
text-align: left;
}
.frmborder
{
border: thin solid #600;
color: #600;
border-top-color: #600;
border-right-color: #600;
border-bottom-color: #600;
border-left-color: #600;
border-color: #600;
margin: 1em;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
<script type = "text/javascript"><!-- Begin
// Insert number of questions
var numQuestions = 5;
// Insert number of choices in each question
var numChoice = 4;
var answers = new Array(5);
answers[0] = "Quantum Particle";
answers[1] = "Lines of Force within a field around a Proton";
answers[2] = "How often a wave cycle occurs within a unit of time";
answers[3] = "Radio wave";
answers[4] = "Gamma Ray";
function getScore(form)
{
var score = 0;
var currElement;
var currSelection;
for (i=0; i<numQuestions; i++)
{
currElement = i * numChoice;
for (j=0; j<numChoice; j++)
{
currSelection = form.elements[currElement + j];
if (currSelection.checked)
{
if (currSelection.value == answers[i])
{
score++;
break;
}
}
}
}
score = Math.round(score/numQues * 100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i=1; i<=numQues; i++)
{
correctAnswers += i + ". " + answers[i-1] + "\r\n";
}
form.solutions.value = correctAnswers;
}
// End -->
</script>
</head>
<body class="batang">
<p><img src="ReviseWise.html_clip_image001.gif" width="125" height="120" alt="RW" /></p>
<center>
<h1>Test Yourself -Electromagnetism </h1></center>
<form action="" method="post" enctype="multipart/form-data" name="test" class="frmborder" id="form1">
<p> </p>
<p><u> Name:</u>
<input type="text" name="Name" id="textfield" />
</p>
<p><u>Password:</u>
<label>
<input type="text" name="Password" id="textfield2" />
</label>
</p><!-- STEP TWO: Copy this code into the BODY of your HTML document -->
</p>
<p> </p>
<p><u> Question 1</u></p>
<p>What is a Photon? </p>
<p>
<label>
<input type="radio" name="RadioGroup1" value="Quantum Particle" id="RadioGroup1_0" />
Quantum Particle</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="Wave" id="RadioGroup1_1" />
Wave</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="Electron" id="RadioGroup1_2" />
Electron </label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="All of the above" id="RadioGroup1_3" />
All of the above</label>
</p>
<p> </p>
<p><u> Question 2</u></p>
<p> What is the Line of Force?</p>
<p>
<label>
<input type="radio" name="RadioGroup2" value="radio" id="RadioGroup2_0" /> A force field</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="radio" id="RadioGroup2_1" /> A electronic wave</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="radio" id="RadioGroup2_2" />
Lines of force within a field around a Proton</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="radio" id="RadioGroup2_3" />
A positively charged field around a Proton</label>
<br />
</p>
<p><img src="_notes/lowFrequency.gif" width="280" height="231" alt="photon" /> </p>
<p><u>Question 3</u> -study the diagram above then answer the question.</p>
<p>What does a Wavelength Frequency represent?</p>
<p>
<label>
<input type="radio" name="RadioGroup3" value="radio" id="RadioGroup3_0" />
How often a wave cycle occurs in a unit of time</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="radio" id="RadioGroup3_1" />
The amount of electrons in a wave</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="radio" id="RadioGroup3_2" />
The measurement from one wave crest to another</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="radio" id="RadioGroup3_3" />
The speed of light multiplied by a wavelength</label>
<br />
</p>
<p> </p>
<p><u>Question 4</u></p>
<p>What is the longest wavelength on the electromagnetic spectrum?</p>
<p>
<label>
<input type="radio" name="RadioGroup4" value="radio" id="RadioGroup4_0" />
Radio wave</label>
<br />
<label>
<input type="radio" name="RadioGroup4" value="radio" id="RadioGroup4_1" />
Gamma ray</label>
<br />
<label>
<input type="radio" name="RadioGroup4" value="radio" id="RadioGroup4_2" />
Infared</label>
<br />
<label>
<input type="radio" name="RadioGroup4" value="radio" id="RadioGroup4_3" />
Sunlight</label>
<br />
</p>
<p> </p>
<p><u>Question 5</u></p>
<p>What is the shortest wavelength?</p>
<p>
<label>
<input type="radio" name="Radiogroup5" value="radio" id="Radiogroup5_0" />
Sunlight</label>
<br />
<label>
<input type="radio" name="Radiogroup5" value="radio" id="Radiogroup5_1" />
Microwave</label>
<br />
<label>
<input type="radio" name="Radiogroup5" value="radio" id="Radiogroup5_2" />
Radioactive wave</label>
<br />
<label>
<input type="radio" name="Radiogroup5" value="radio" id="Radiogroup5_3" />
Gamma Ray</label>
<br />
</p>
<p></p>
<p> </p>
<p>
<input type="submit" name="onclick" id="onclick" value="Submit" />
<input type="reset" value="Clear answers" />
<input type="button" value="Get score" onclick="getScore(this.form)" />
</p>
<p> </p>
<p> </p>
</form>
</body>
</html>
MultiQuote
| 