...

View Full Version : js quiz - after submit to go to new page if all correct



stellar
09-06-2011, 12:45 PM
i am making a simple multiple choice quiz and if user gets all correct i need it to automatically go to a new page rather than having a manual button for that so they cant move on until all questons are answered correctly.
Most reatful for anyhelp!!!!!!
Thanks


<SCRIPT Language ="JavaScript">
function ValidateForm(){
result = new Array();
count = 0;

if (!document.forms[0].one[3].checked == true) {
result[count] = "Question 1. The correct answer is " + document.forms[0].one[3].value + ".";
count++;
}

if (!document.forms[0].two[0].checked == true) {
result[count] = "Question 2. The correct anwser is " + document.forms[0].two[0].value + ".";
count++;
}

if (!document.forms[0].three[3].checked == true) {
result[count] = "Question 3. The correct answer is " + document.forms[0].three[3].value + ".";
count++;
}

if (!document.forms[0].four[3].checked == true) {
result[count] = "Question 4. The correct answer is " + document.forms[0].four[3].value + ".";
count++;
}

if (result.length > 0) {
var vString = "";
for (var i=0; i<result.length; i++) {
vString = vString + result[i] + "\n";
}
alert(result.length + " incorrect answers:\n" + vString);
return(false);
}
else {
alert("All of the questions were answered correctly.");
return(true);
}
}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

</SCRIPT>

Old Pedant
09-06-2011, 06:32 PM
...
else {
alert("All of the questions were answered correctly.");
location.href = "nameOfYourNextPage.html";
}

stellar
09-06-2011, 11:13 PM
thank you for help...unfortunately i tried that code with and without the second alert message - also without the return true thingy but still no moving on to the next page which will be page5.html.

Old Pedant
09-06-2011, 11:24 PM
Then show your complete, LIVE page. That is, give us a URL to your page.

Old Pedant
09-06-2011, 11:35 PM
The code, as it is, is overly complex. But not wrong. Except that language="javascript" is pretty long obsolescent.

How about KISS?


<script type="text/javascrip">
function ValidateForm()
{
result = [];
var form = document.forms[0];
if (! form.one[3].checked ) {
result.push("Question 1. The correct answer is " + forms.one[3].value);
}
if (! form.two[0].checked) {
result.push("Question 2. The correct anwser is " + form.two[0].value);
}
if (! form.three[3].checked ) {
result.push("Question 3. The correct answer is " + form.three[3].value);
}
if (! form.four[3].checked ) {
result.push("Question 4. The correct answer is " + form.four[3].value);
}
if (result.length > 0) {
alert( result.length + " incorrect answer(s):\n" + result.join(".\n") + "." );
return false;
}
alert("All of the questions were answered correctly.");
location.href = "page5.html";
return false; // this should NOT be needed, but probably a good idea
}
</script>

And kill that horrible MM_goToURL function (or replace it if you really think it's needed).

stellar
09-07-2011, 12:32 AM
Thanks again for your time. Much appreciated - I do not write js and tend to use bits i have picked up around the traps so have no idea what is and isnt supposed to be there :)
maybe i should just leave it to the users to be honest? but it irks me that i cannot get it to work! *grins*

stellar
09-07-2011, 01:19 AM
thanks so much. i am actually a nurse and have to train some of the staff in hand hygiene. i am making the cd as many of them do not have internet access at work .


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<SCRIPT Language ="JavaScript">
function ValidateForm(){
result = new Array();
count = 0;

if (!document.forms[0].one[3].checked == true) {
result[count] = "Question 1. The correct answer is " + document.forms[0].one[3].value + ".";
count++;
}

if (!document.forms[0].two[0].checked == true) {
result[count] = "Question 2. The correct anwser is " + document.forms[0].two[0].value + ".";
count++;
}

if (!document.forms[0].three[3].checked == true) {
result[count] = "Question 3. The correct answer is " + document.forms[0].three[3].value + ".";
count++;
}

if (!document.forms[0].four[3].checked == true) {
result[count] = "Question 4. The correct answer is " + document.forms[0].four[3].value + ".";
count++;
}

if (result.length > 0) {
var vString = "";
for (var i=0; i<result.length; i++) {
vString = vString + result[i] + "\n";
}
alert(result.length + " incorrect answers:\n" + vString);
return(false);
}
else {
alert("All of the questions were answered correctly.");
return(true);
}
}
</SCRIPT>

<link href="hh.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-color: #030;
}
</style>
</head>
<body>
<table width="700" border="0" align="center" cellpadding="2">
<tr>
<th bgcolor="#FFFFFF" scope="col"><form>
<center>
<h1><b>Nursing section A</b> Questions</h1>
<p align="left">Please click the circle next to the correct answer then press the submit button. </p>
</center>
<p align="left"> Question 1: <b>What is Hand Hygiene?</b><br />
<input type="radio" name="one" value="Using Alcohol based hand rub (ABHR)" />
Using Alcohol based hand rub (ABHR) <br />
<input type="radio" name="one" value="Using Soap and Water" />
Using Soap and Water <br />
<input type="radio" name="one" value="Using Water Only" />
Using Water Only <br />
<input type="radio" name="one" value="A &amp; B" />
A &amp; B </p>
<p align="left"> Question 2: <b>When do you need to perform Hand Hygiene?</b><br />
<input type="radio" name="two" value="On entering the patient zone" />
On entering the patient zone <br />
<input type="radio" name="two" value="Before checking your pager" />
Before checking your pager <br />
<input type="radio" name="two" value=" After you have washed your hands" />
After you have washed your hands <br />
<input type="radio" name="two" value="Before checking the computer" />
Before checking the computer </p>
<p align="left"> Question 3: <b>When do you need to perform Hand Hygiene?</b><br />
<input type="radio" name="three" value="On entering the patient zone " />
On entering the patient zone <br />
<input type="radio" name="three" value="Before touching a patient" />
Before touching a patient <br />
<input type="radio" name="three" value="Before touching a critical site" />
Before touching a critical site <br />
<input type="radio" name="three" value="All of the above" />
All of the above </p>
<p align="left"> Question 4: <b>Why is Hand Hygiene so important?</b><br />
<input type="radio" name="four" value="Micoorganisms causing serious infection can easily be transferred via healthcare workers hands" />
Micoorganisms causing serious infection can easily be transferred via healthcare workers hands <br />
<input type="radio" name="four" value="Infections are a serious problem in healthcare facilities" />
Infections are a serious problem in healthcare facilities <br />
<input type="radio" name="four" value="It can reduce the number of microorganisms on hands" />
It can reduce the number of microorganisms on hands <br />
<input type="radio" name="four" value="All of the above" />
All of the above </p>
<center>
<p align="left"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="Submit" type="submit" onclick="ValidateForm()" value="Submit" />
<em>click here to check your answers </em> </p>
<p align="left"><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="button2" type="submit" id="button2" onclick="MM_goToURL('parent','page5.html');return document.MM_returnValue" value="If all correct, continue to Section B " />
</p>
</center>
</form>
<p>&nbsp;</p>
<div align="left"></div></th>
</tr>
</table>
</body>
</html>

Old Pedant
09-07-2011, 01:53 AM
AHA!

The real culprit is that you used <input type="submit"> instead of <input type="button">!!!

You could have gotten away with that *IF* you had then returned false from the onclick. But the easier answer is to just change it to type="button".

And here's my suggestion for *ONE WAY* to lighten your code load:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function ValidateForm(form)
{
result = new Array();
for ( var q = 1; q <= 4; ++q )
{
var rbs = form["q"+q];
var rb = null;
var okay = null;
for ( var r = 0; r < rbs.length; ++r )
{
if ( rbs[r].checked ) rb = rbs[r];
if ( rbs[r].value != "on" ) okay = rbs[r];
}
if ( rb == null )
{
result.push("You did not answer question " + q);
} else if ( rb != okay ) {
result.push("Question " + q + ": The correct answer is " + okay.value );
}
}
if ( result.length == 0 )
{
alert("All correct! Now try the next page...");
location.href = "junk1.html";
return;
}
alert( result.length + " questions wrong:\n" + result.join("\n") );
}
</script>

<link href="hh.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-color: #030;
}
</style>
</head>
<body>
<form>
<table width="700" border="0" align="center" cellpadding="2">
<tr>
<th bgcolor="#FFFFFF" scope="col">
<center>
<h1><b>Nursing section A</b> Questions</h1>
<p align="left">Please click the circle next to the correct answer then press the submit button. </p>
</center>
<p align="left"> Question 1: <b>What is Hand Hygiene?</b><br />
<label><input type="radio" name="q1" />Using Alcohol based hand rub (ABHR)</label><br />
<label><input type="radio" name="q1" />Using Soap and Water </label><br />
<label><input type="radio" name="q1" /></label>Using Water Only <br />
<label><input type="radio" name="q1" value="A &amp; B" /> A &amp; B </label></p>
<p align="left"> Question 2: <b>When do you need to perform Hand Hygiene?</b><br />
<label><input type="radio" name="q2" value="On entering the patient zone" />
On entering the patient zone </label><br />
<label><input type="radio" name="q2" />Before checking your pager </label><br />
<label><input type="radio" name="q2" />After you have washed your hands </label><br />
<label><input type="radio" name="q2" />Before checking the computer</label> </p>
<p align="left"> Question 3: <b>When do you need to perform Hand Hygiene?</b></label><br />
<label><input type="radio" name="q3"/>On entering the patient zone </label><br />
<label><input type="radio" name="q3" />Before touching a patient </label><br />
<label><input type="radio" name="q3" />Before touching a critical site </label><br />
<label><input type="radio" name="q3" value="All of the above" />All of the above</label> </p>
<p align="left"> Question 4: <b>Why is Hand Hygiene so important?</b></label><br />
<label><input type="radio" name="q4" />
Micoorganisms causing serious infection can easily be transferred via healthcare workers hands </label><br />
<label><input type="radio" name="q4" />
Infections are a serious problem in healthcare facilities </label><br />
<label><input type="radio" name="q4" />
It can reduce the number of microorganisms on hands </label><br />
<label><input type="radio" name="q4" value="All of the above" />All of the above</label></p>
<center>
<input name="Submit" type="button" onclick="ValidateForm(this.form)" value="Submit" />
<em>click here to check your answers </em> </p>
</center>
<p>&nbsp;</p>
</tr>
</table>
</form>
</body>
</html>

We can do much better than that, though.

One note: Unless you have a really good reason to do otherwise, I recommend putting your <form> right after your <body> and your </form> right before your </body>.

Old Pedant
09-07-2011, 02:30 AM
Here. Try this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
var Questions = [
[ "What is Hand Hygiene?",
"Using Alcohol based hand rub (ABHR)",
"Using Soap and Water",
"Using Water Only",
"$A and B" ]
,
[ "When do you need to perform Hand Hygiene?",
"$On entering the patient zone",
"Before checking your pager",
"After you have washed your hands",
"Before checking the computer" ]
,
[ "When do you need to perform Hand Hygiene?",
"On entering the patient zone",
"Before touching a patient",
"Before touching a critical site",
"Before eating hospital food",
"Before touching your left ear with your right elbow",
"Before you can say \"Jack Sprat!\"",
"$All of the above" ]
,
[ "Why is Hand Hygiene so important?",
"Micoorganisms causing serious infection can easily be transferred via healthcare workers hands",
"Infections are a serious problem in healthcare facilities",
"It can reduce the number of microorganisms on hands",
"$All of the above" ]
];


function ValidateForm(form)
{
result = new Array();
for ( var q = 0; q < Questions.length; ++q )
{
var qAndA = Questions[q];
var ans = null;
for ( var a = 1; a < qAndA.length; ++a )
{
if ( qAndA[a].charAt(0) == "$" ) ans = a;
}
var rbs = form["q"+q];
var rb = null;
for ( var r = 0; r < rbs.length; ++r )
{
if ( rbs[r].checked ) rb = r + 1;
}
if ( rb == null )
{
result.push("You did not answer question " + (q+1) );
} else if ( rb != ans ) {
result.push("Question " + (q+1) + ": The correct answer is " + qAndA[ans].substring(1) );
}
}
if ( result.length == 0 )
{
alert("All correct! Now try the next page...");
location.href = "junk1.html";
return;
}
alert( result.length + " questions wrong:\n" + result.join("\n") );
}
</script>

<link href="hh.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { color: white; }
body {
background-color: #030;
}
td.QUERY {
color: white;
font-weight: bold;
}
td.ANS {
color: white;
padding-left: 30px;
}
input.SUBMIT {
background-color: white;
color: black;
}
</style>
</head>
<body>
<form>
<table width="700" border="0" align="center" cellpadding="2">
<tr>
<th>
<h1><b>Nursing section A</b> Questions</h1>
Please click the correct answers. Press the submit button when you have answered all questions.
<br/><br/><br/>
</th>
</tr>
<script type="text/javascript">
for ( var qnum = 0; qnum < Questions.length; ++qnum )
{
var q = qnum + 1
var qAndA = Questions[qnum];
document.write( '<tr><td class="QUERY">Question ' + q + ': <b>' + qAndA[0] + '</td></tr>\n' );
for ( var a = 1; a < qAndA.length; ++a )
{
var ans = qAndA[a];
if ( ans.charAt(0) == "$" ) ans = ans.substring(1);
document.write('<tr><td class="ANS"><label><input type="radio" name="q' + qnum + '"/>'
+ ans + '</label></td></tr>\n' );
}
}
</script>
</table>
<center>
<input class="SUBMIT" type="button" onclick="ValidateForm(this.form)" value="Submit" />
<em>click here to check your answers </em> </p>
</center>
</form>
</body>
</html>
Now all you have to do to create a new page is change the array of questions.

Note that it is actually an array OF arrays.

Each question consists of an array, where the first element is the question and all the other elements (ANY NUMBER OF THEM! Look carefully at question 3) are answers. You simply put a $ as the first character of the correct answer and the code takes care of the rest.

No more hand coding each page.

stellar
09-07-2011, 04:22 AM
oh that is SO amazing - it actually worked!!!!!
NOW i will study the new code as i really have no clue what it all is :) butit works!!!!
Cheers and thanks again
is it possible to include images for each question????? for example an image with 4 choices then another image with four choices ? etc
just as a challenge :)

Old Pedant
09-07-2011, 05:27 AM
var Questions = [
[ '<img src="http://www.clearviewarts.com/thumbnails/shasta.jpg" style="float:right;"/>What kind of critter is this?',
"That is a cat.",
"That is a dog.",
"That is a banana.",
"$That is the one and only Shasta." ]
,
[ "When do you need to perform Hand Hygiene?",
"$On entering the patient zone",
"Before checking your pager",
"After you have washed your hands",
"Before checking the computer" ]
,
[ "When do you need to perform Hand Hygiene?",
"On entering the patient zone",
"Before touching a patient",
"Before touching a critical site",
"Before eating hospital food",
"Before touching your left ear with your right elbow",
"Before you can say \"Jack Sprat!\"",
"$All of the above" ]
,
[ "Why is Hand Hygiene so important?",
"Micoorganisms causing serious infection can easily be transferred via healthcare workers hands",
"Infections are a serious problem in healthcare facilities",
"It can reduce the number of microorganisms on hands",
"$All of the above" ]
];

Only the code in red is changed.

It could easily be improved. For example, the image could be floated to the right of the question *and* the answers.

But for a quick and dirty change, what do you think?

stellar
09-07-2011, 12:31 PM
i think i should really do some tutorials and actually learn how to do this stuff
Thank you again for all yourhelp
ps do wish to be acknowledged on the cd?
cheers

Old Pedant
09-07-2011, 04:38 PM
Oh, yeah...acknowledge "Old Pedant" on the CD! Half the people will think it's a bad word and the other half will think you meant "PeNdant". LOL. No, just have fun with it.

You want the code to make the image(s) show up to right of both question and answers?

Old Pedant
09-07-2011, 06:53 PM
What the heck...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
var Questions = [
[ "http://www.clearviewarts.com/thumbnails/shasta.jpg",
"What is this a picture of?",
"That is a cat.",
"That is a dog.",
"That is a banana.",
"$That is the one and only Shasta." ]
,
[ null,
"When do you need to perform Hand Hygiene?",
"$On entering the patient zone",
"Before checking your pager",
"After you have washed your hands",
"Before checking the computer" ]
,
[ null,
"When do you need to perform Hand Hygiene?",
"On entering the patient zone",
"Before touching a patient",
"Before touching a critical site",
"Before eating hospital food",
"Before touching your left ear with your right elbow",
"Before you can say \"Jack Sprat!\"",
"$All of the above" ]
,
[ "http://www.clearviewarts.com/thumbnails/TheRedChair2009.jpg",
"What is the title of this picture?",
"The nude guy with the Jay Leno chin",
"Barefoot in the park",
"$The Red Chair",
"None of the above" ]
,
[ null,
"Why is Hand Hygiene so important?",
"Micoorganisms causing serious infection can easily be transferred via healthcare workers hands",
"Infections are a serious problem in healthcare facilities",
"It can reduce the number of microorganisms on hands",
"$All of the above" ]
];


function ValidateForm(form)
{
result = new Array();
for ( var q = 0; q < Questions.length; ++q )
{
var qAndA = Questions[q];
var ans = null;
for ( var a = 1; a < qAndA.length; ++a )
{
if ( qAndA[a].charAt(0) == "$" ) ans = a;
}
var rbs = form["q"+q];
var rb = null;
for ( var r = 0; r < rbs.length; ++r )
{
if ( rbs[r].checked ) rb = r + 1;
}
if ( rb == null )
{
result.push("You did not answer question " + (q+1) );
} else if ( rb != ans-1 ) {
result.push("Question " + (q+1) + ": The correct answer is " + qAndA[ans].substring(1) );
}
}
if ( result.length == 0 )
{
alert("All correct! Now try the next page...");
location.href = "junk1.html";
return;
}
alert( result.length + " questions wrong:\n" + result.join("\n") );
}
</script>

<link href="hh.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { color: white; }
body {
background-color: #030;
}
td.QUERY {
color: white;
font-weight: bold;
}
td.ANS {
color: white;
padding-left: 30px;
}
input.SUBMIT {
background-color: white;
color: black;
}
</style>
</head>
<body>
<form>
<table width="700" border="0" align="center" cellpadding="2">
<tr>
<th>
<h1><b>Nursing section A</b> Questions</h1>
Please click the correct answers. Press the submit button when you have answered all questions.
<br/><br/><br/>
</th>
</tr>
<script type="text/javascript">
for ( var qnum = 0; qnum < Questions.length; ++qnum )
{
var q = qnum + 1
var qAndA = Questions[qnum];
document.write( '<tr><td class="QUERY">Question ' + q + ': <b>' + qAndA[1] + '</b></td>\n' );
if ( qAndA[0] != null )
{
document.write( '<td rowspan="' + ( qAndA.length - 1 ) + '">'
+ '<img src="' + qAndA[0] + '"/></td>' );
}
document.write( '</tr>\n' );
for ( var a = 2; a < qAndA.length; ++a )
{
var ans = qAndA[a];
if ( ans.charAt(0) == "$" ) ans = ans.substring(1);
document.write('<tr><td class="ANS"><label><input type="radio" name="q' + qnum + '"/>'
+ ans + '</label></td></tr>\n' );
}
document.write( '<tr><td colspan="2"><hr color="white"/></td></tr>\n');
}
</script>
</table>
<center>
<input class="SUBMIT" type="button" onclick="ValidateForm(this.form)" value="Submit" />
<em>click here to check your answers </em> </p>
</center>
</form>
</body>
</html>

Note that if you have a question that does *NOT* have an image, you need to put null as the first element of its question array. The URL to the image must always be the first element in each question, if it is present.

Since this will be on a CD, you need to use *relative* paths to the images.

Or, even simpler, just mix the images into the same directory on the CD with the HTML files. Then you can just use "xyz.jpg" as the image URL, with no path name(s) at all.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum