...

View Full Version : Help with form input types not working with script



mobimad
11-09-2010, 09:51 PM
Hello,

I am trying to add radio buttons in this quiz script that i'm using, but when i change the drop down box to radio buttons the quiz script stops working, i.e it will not calculate the correct answers / percentage.

I dont think i am correctly adding the input type "radio" and the script cannot recognise the value properly as i'am trying to make custom radio buttons from javascript / css.

here is the script thats stopped working but how do i make the radio buttons send the correct value to the quiz script?

Hope someone can help, i can add the css file if need be..





<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
<TITLE>Seventies Trivia Quizzes & Games</TITLE>
<link rel="stylesheet" type="text/css" href="style.css" />




<script language=Javascript>

<!--
function stopErrors(){
return true;
}
window.onerror=stopErrors;
// -->
</script>

<script language="JavaScript1.1">
<!-- Hide from old browsers

function quiz(form) {
var i = 0
var result1=document.form1.answer1.selectedIndex
var result2=document.form2.answer2.selectedIndex
var result3=document.form3.answer3.selectedIndex
var result4=document.form4.answer4.selectedIndex
var result5=document.form5.answer5.selectedIndex
var result6=document.form6.answer6.selectedIndex
var result7=document.form7.answer7.selectedIndex
var result8=document.form8.answer8.selectedIndex



if (result1==0){
alert("Question #1 was not answered");}
if (result2==0){
alert("Question #2 was not answered");}
if (result3==0){
alert("Question #3 was not answered");}
if (result4==0){
alert("Question #4 was not answered");}
if (result5==0){
alert("Question #5 was not answered");}
if (result6==0){
alert("Question #6 was not answered");}
if (result7==0){
alert("Question #7 was not answered");}
if (result8==0){
alert("Question #8 was not answered");}



else {
if (result1==3){i++}
if (result2==3){i++}
if (result3==1){i++}
if (result4==4){i++}
if (result5==3){i++}
if (result6==1){i++}
if (result7==1){i++}
if (result8==2){i++}



document.total.score.value = i
var per = Math.round((i / 20) * 100)
document.total.percent.value = per

if (result1 != 3){document.form1.check1.checked = true}
else {document.form1.check1.checked = false}
if (result2 != 3){document.form2.check2.checked = true}
else {document.form2.check2.checked = false}
if (result3 != 1){document.form3.check3.checked = true}
else {document.form3.check3.checked = false}
if (result4 != 4){document.form4.check4.checked = true}
else {document.form4.check4.checked = false}
if (result5 != 3){document.form5.check5.checked = true}
else {document.form5.check5.checked = false}
if (result6 != 1){document.form6.check6.checked = true}
else {document.form6.check6.checked = false}
if (result7 != 1){document.form7.check7.checked = true}
else {document.form7.check7.checked = false}
if (result8 != 2){document.form8.check8.checked = true}
else {document.form8.check8.checked = false}

}
}
//-->
</SCRIPT>

<style type="text/css">
<!--
body {
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
-->
</style></HEAD>
<BODY>



<FORM NAME="form1"><INPUT TYPE="hidden" NAME="check1">
<b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
<input type="hidden" SELECT NAME="answer1" SIZE=1>
<fieldset class="radios">

<label class="label_radio" for="sample-radio-1a0">
<input name="sample-radio" id="sample-radio-1a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
CHOOSE AN ANSWER</label>

<label class="label_radio" for="sample-radio-1a1">
<input name="sample-radio" id="sample-radio-1a1" NAME="radio" type="radio" VALUE="1" />
Randy Meisner</label>

<label class="label_radio" for="sample-radio-1a2">
<input name="sample-radio" id="sample-radio-1a2" NAME="radio" type="radio" VALUE="2" />
J.D. Souther</label>

<label class="label_radio" for="sample-radio-1a3">
<input name="sample-radio" id="sample-radio-1a3" NAME="radio" type="radio" VALUE="3" />
Jackson Browne & Glenn Frey</label>

<label class="label_radio" for="sample-radio-1a4">
<input name="sample-radio" id="sample-radio-1a4" NAME="radio" type="radio" VALUE="4" />
Don Henley</label>

</fieldset>
</SELECT></FORM>

<BR>




<FORM NAME="form2"><INPUT TYPE="hidden" NAME="check2">
<b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
<input type="hidden" SELECT NAME="answer2" SIZE=1>
<fieldset class="radios">

<label class="label_radio" for="sample-radio-2a0">
<input name="sample-radio" id="sample-radio-2a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
CHOOSE AN ANSWER</label>

<label class="label_radio" for="sample-radio-2a1">
<input name="sample-radio" id="sample-radio-2a1" NAME="radio" type="radio" VALUE="1" />
Randy Meisner</label>

<label class="label_radio" for="sample-radio-2a2">
<input name="sample-radio" id="sample-radio-2a2" NAME="radio" type="radio" VALUE="2" />
J.D. Souther</label>

<label class="label_radio" for="sample-radio-2a3">
<input name="sample-radio" id="sample-radio-2a3" NAME="radio" type="radio" VALUE="3" />
Jackson Browne & Glenn Frey</label>

<label class="label_radio" for="sample-radio-2a4">
<input name="sample-radio" id="sample-radio-2a4" NAME="radio" type="radio" VALUE="4" />
Don Henley</label>

</fieldset>
</SELECT></FORM>

<BR>


<FORM NAME="form3"><INPUT TYPE="hidden" NAME="check3">
<b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
<input type="hidden" SELECT NAME="answer3" SIZE=1>
<fieldset class="radios">

<label class="label_radio" for="sample-radio-3a0">
<input name="sample-radio" id="sample-radio-3a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
CHOOSE AN ANSWER</label>

<label class="label_radio" for="sample-radio-3a1">
<input name="sample-radio" id="sample-radio-3a1" NAME="radio" type="radio" VALUE="1" />
Randy Meisner</label>

<label class="label_radio" for="sample-radio-3a2">
<input name="sample-radio" id="sample-radio-3a2" NAME="radio" type="radio" VALUE="2" />
J.D. Souther</label>

<label class="label_radio" for="sample-radio-3a3">
<input name="sample-radio" id="sample-radio-3a3" NAME="radio" type="radio" VALUE="3" />
Jackson Browne & Glenn Frey</label>

<label class="label_radio" for="sample-radio-3a4">
<input name="sample-radio" id="sample-radio-3a4" NAME="radio" type="radio" VALUE="4" />
Don Henley</label>

</fieldset>
</SELECT></FORM>

<BR>


<FORM NAME="form4"><INPUT TYPE="hidden" NAME="check4">
<b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
<input type="hidden" SELECT NAME="answer4" SIZE=1>
<fieldset class="radios">

<label class="label_radio" for="sample-radio-4a0">
<input name="sample-radio" id="sample-radio-4a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
CHOOSE AN ANSWER</label>

<label class="label_radio" for="sample-radio-4a1">
<input name="sample-radio" id="sample-radio-4a1" NAME="radio" type="radio" VALUE="1" />
Randy Meisner</label>

<label class="label_radio" for="sample-radio-4a2">
<input name="sample-radio" id="sample-radio-4a2" NAME="radio" type="radio" VALUE="2" />
J.D. Souther</label>

<label class="label_radio" for="sample-radio-4a3">
<input name="sample-radio" id="sample-radio-4a3" NAME="radio" type="radio" VALUE="3" />
Jackson Browne & Glenn Frey</label>

<label class="label_radio" for="sample-radio-4a4">
<input name="sample-radio" id="sample-radio-4a4" NAME="radio" type="radio" VALUE="4" />
Don Henley</label>

</fieldset>
</SELECT></FORM>

<BR>


<FORM NAME="form5"><INPUT TYPE="hidden" NAME="check5">
<b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
<input type="hidden" SELECT NAME="answer5" SIZE=1>
<fieldset class="radios">

<label class="label_radio" for="sample-radio-5a0">
<input name="sample-radio" id="sample-radio-5a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
CHOOSE AN ANSWER</label>

<label class="label_radio" for="sample-radio-5a1">
<input name="sample-radio" id="sample-radio-5a1" NAME="radio" type="radio" VALUE="1" />
Randy Meisner</label>

<label class="label_radio" for="sample-radio-5a2">
<input name="sample-radio" id="sample-radio-5a2" NAME="radio" type="radio" VALUE="2" />
J.D. Souther</label>

<label class="label_radio" for="sample-radio-5a3">
<input name="sample-radio" id="sample-radio-5a3" NAME="radio" type="radio" VALUE="3" />
Jackson Browne & Glenn Frey</label>

<label class="label_radio" for="sample-radio-5a4">
<input name="sample-radio" id="sample-radio-5a4" NAME="radio" type="radio" VALUE="4" />
Don Henley</label>

</fieldset>
</SELECT></FORM>

<BR>


<FORM NAME="form6"><INPUT TYPE="hidden" NAME="check6">
<b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
<input type="hidden" SELECT NAME="answer6" SIZE=1>
<fieldset class="radios">

<label class="label_radio" for="sample-radio-6a0">
<input name="sample-radio" id="sample-radio-6a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
CHOOSE AN ANSWER</label>

<label class="label_radio" for="sample-radio-6a1">
<input name="sample-radio" id="sample-radio-6a1" NAME="radio" type="radio" VALUE="1" />
Randy Meisner</label>

<label class="label_radio" for="sample-radio-6a2">
<input name="sample-radio" id="sample-radio-6a2" NAME="radio" type="radio" VALUE="2" />
J.D. Souther</label>

<label class="label_radio" for="sample-radio-6a3">
<input name="sample-radio" id="sample-radio-6a3" NAME="radio" type="radio" VALUE="3" />
Jackson Browne & Glenn Frey</label>

<label class="label_radio" for="sample-radio-6a4">
<input name="sample-radio" id="sample-radio-6a4" NAME="radio" type="radio" VALUE="4" />
Don Henley</label>

</fieldset>
</SELECT></FORM>

<BR>


<FORM NAME="form7"><INPUT TYPE="hidden" NAME="check7">
<b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
<input type="hidden" SELECT NAME="answer7" SIZE=1>
<fieldset class="radios">

<label class="label_radio" for="sample-radio-7a0">
<input name="sample-radio" id="sample-radio-7a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
CHOOSE AN ANSWER</label>

<label class="label_radio" for="sample-radio-7a1">
<input name="sample-radio" id="sample-radio-7a1" NAME="radio" type="radio" VALUE="1" />
Randy Meisner</label>

<label class="label_radio" for="sample-radio-7a2">
<input name="sample-radio" id="sample-radio-7a2" NAME="radio" type="radio" VALUE="2" />
J.D. Souther</label>

<label class="label_radio" for="sample-radio-7a3">
<input name="sample-radio" id="sample-radio-7a3" NAME="radio" type="radio" VALUE="3" />
Jackson Browne & Glenn Frey</label>

<label class="label_radio" for="sample-radio-7a4">
<input name="sample-radio" id="sample-radio-7a4" NAME="radio" type="radio" VALUE="4" />
Don Henley</label>

</fieldset>
</SELECT></FORM>

<BR>


<FORM NAME="form8"><INPUT TYPE="hidden" NAME="check8">
<b>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</b><BR><BR>
<input type="hidden" SELECT NAME="answer8" SIZE=1>
<fieldset class="radios">

<label class="label_radio" for="sample-radio-8a0">
<input name="sample-radio" id="sample-radio-8a0" NAME="radio" type="radio" SELECTED VALUE="0"/>
CHOOSE AN ANSWER</label>

<label class="label_radio" for="sample-radio-8a1">
<input name="sample-radio" id="sample-radio-8a1" NAME="radio" type="radio" VALUE="1" />
Randy Meisner</label>

<label class="label_radio" for="sample-radio-8a2">
<input name="sample-radio" id="sample-radio-8a2" NAME="radio" type="radio" VALUE="2" />
J.D. Souther</label>

<label class="label_radio" for="sample-radio-8a3">
<input name="sample-radio" id="sample-radio-8a3" NAME="radio" type="radio" VALUE="3" />
Jackson Browne & Glenn Frey</label>

<label class="label_radio" for="sample-radio-8a4">
<input name="sample-radio" id="sample-radio-8a4" NAME="radio" type="radio" VALUE="4" />
Don Henley</label>

</fieldset>
</SELECT></FORM>


<BR>

<BR><BR><HR>
<P>That's it! Now click the "Submit" button to grade your Seventies music knowledge.<BR>

<form name="total">
<INPUT TYPE="BUTTON" VALUE="Submit" onClick="quiz()"> <INPUT TYPE="button" VALUE="Reload Quiz" onClick='parent.location="javascript:location.reload()"'><BR><HR><BR>Results:<BR><BR>
You scored <INPUT TYPE="TEXT" NAME="score" VALUE="" SIZE=5> out of
<INPUT TYPE="TEXT" NAME="outof" VALUE="8" SIZE=5> questions correct.<BR><BR>
Your Score: <INPUT TYPE="TEXT" NAME="percent" VALUE="" SIZE=3> %<BR><BR>
<HR>

</FORM>
<script>
var d = document;
var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
onload = function() {

var body = gebtn(d,'body')[0];
body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';

if (!d.getElementById || !d.createTextNode) return;
var ls = gebtn(d,'label');
for (var i = 0; i < ls.length; i++) {
var l = ls[i];
if (l.className.indexOf('label_') == -1) continue;
var inp = gebtn(l,'input')[0];
if (l.className == 'label_check') {
l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
l.onclick = check_it;
};
if (l.className == 'label_radio') {
l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
l.onclick = turn_radio;
};
};
};
var check_it = function() {
var inp = gebtn(this,'input')[0];
if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
this.className = 'label_check c_on';
if (safari) inp.click();
} else {
this.className = 'label_check c_off';
if (safari) inp.click();
};
};
var turn_radio = function() {
var inp = gebtn(this,'input')[0];
if (this.className == 'label_radio r_off' || inp.checked) {
var ls = gebtn(this.parentNode,'label');
for (var i = 0; i < ls.length; i++) {
var l = ls[i];
if (l.className.indexOf('label_radio') == -1) continue;
l.className = 'label_radio r_off';
};
this.className = 'label_radio r_on';
if (safari) inp.click();
} else {
this.className = 'label_radio r_off';
if (safari) inp.click();
};
};
</script>




<P>Ratings:<br><br>

90-100% - "I Just Want To Celebrate"<br>
&nbsp;80-89% - "I Want To Take You Higher"<br>
&nbsp;70-79% - "One Toke Over The Line"<br>
&nbsp;60-69% - "What's Going On"<br>
&nbsp;50-59% - "Stuck In The Middle With You"<br>
&nbsp;&nbsp;0-49% - "Ball of Confusion"<br>



</blockquote>


</BODY>
</HTML>

Old Pedant
11-09-2010, 09:59 PM
(1) selectedIndex is *ONLY* a property of <select> elements. No others.

(2) Your original code apparently had *ONE* <form> with multiple questions (<select>s) in the form. Your new code has each question in its own <form>. WHY?

(3) On top of everything else... Your original code apparently had <select>s named "question1", "question2", etc. In your new code all your radio buttons have the same name: "sample_radio".

In short, you've changed everything on the page *except* the JavaScript, so of course the JS will no longer do anything at all.

Old Pedant
11-09-2010, 10:01 PM
Oops...I take it back...even the original code had one question per form. Why?

mobimad
11-09-2010, 10:08 PM
Hi Old Pedant

The original form which does work looks like this, its the only part i have changed, i will change and add questions accordlingly later once i can get the radio button selections working, hope you can help further.

I suppose my question is how do i change the working form below to display radio buttons instead of a drop down list, been at it for hours, sorry newbie behind the wheel here!

Working code for the forms



<FORM NAME="form1">
<INPUT TYPE="CHECKBOX" NAME="check1">
<STRONG>1. Who wrote the Eagles' 1972 hit "Take It Easy"?</STRONG><BR>
<SELECT NAME="answer1" SIZE=1>
<OPTION SELECTED VALUE="0">-- Choose an answer --
<OPTION VALUE="1">Randy Meisner
<OPTION VALUE="2">J.D. Souther
<OPTION VALUE="3">Jackson Browne & Glenn Frey
<OPTION VALUE="4">Don Henley
</SELECT></FORM>

<FORM NAME="form2"><INPUT TYPE="CHECKBOX" NAME="check2">
<STRONG>2. Which members of CSN&Y were formerly in Buffalo Springfield?</STRONG><BR>
<SELECT NAME="answer2" SIZE=1>
<OPTION SELECTED VALUE="0">-- Choose an answer --
<OPTION VALUE="1">Crosby and Young
<OPTION VALUE="2">Stills and Nash
<OPTION VALUE="3">Stills and Young
<OPTION VALUE="4">all four of them
</SELECT></FORM>
<FORM NAME="form3"><INPUT TYPE="CHECKBOX" NAME="check3">
<STRONG>3. Bob Seger's "Still The Same" came from what smash album?</STRONG><BR>
<SELECT NAME="answer3" SIZE=1>
<OPTION SELECTED VALUE="0">-- Choose an answer --
<OPTION VALUE="1">Stranger In Town
<OPTION VALUE="2">Night Moves
<OPTION VALUE="3">Against The Wind
<OPTION VALUE="4">Nine Tonight
</SELECT></FORM>
<FORM NAME="form4"><INPUT TYPE="CHECKBOX" NAME="check4">
<STRONG>4. Who was the first musical guest on <em>Saturday Night Live</em>?</STRONG><BR>
<SELECT NAME="answer4" SIZE=1>
<OPTION SELECTED VALUE="0">-- Choose an answer --
<OPTION VALUE="1">Paul Simon
<OPTION VALUE="2">Art Garfunkel
<OPTION VALUE="3">Judy Collins
<OPTION VALUE="4">Janis Ian
</SELECT></FORM>

Old Pedant
11-09-2010, 10:33 PM
Here...a simple, radio-button-based quiz. Add as many or as few questions as you like. It computes the score and percentage for you.


<html>
<head>
<script type="text/javascript">
function quiz( form )
{
var qcount = 0;
var score = 0;
for ( a = 1; a < 9999; ++a )
{
var rbs = form["answer" +a];
if ( rbs == null || rbs.length == null ) break;

++qcount;
var q = document.getElementById("question" + a);
q.style.color = "#FF0000";
for ( var r = 0; r < rbs.length; ++r )
{
var rb = rbs[r];
if ( rb.checked && rb.className == "correct" )
{
++score;
q.style.color = "#00FF00";
break;
}
}
}
document.getElementById("scoring").innerHTML =
"You got " + score + " right out of " + qcount + " questions.";
document.getElementById("rating").innerHTML =
"Your score: " + ( score * 100 / qcount ).toFixed(1) + "%";
}
</script>
<style type="text/css">
div#Questions span {
color: blue;
font-weight: bold;
}
div#Questions label {
color: black;
font-style: italic;
}
div#rating, div#scoring {
font-size: large;
}
</style>
</head>
<body>
<div id="Questions">
<form>
<span id="question1">
1. What state has the highest per capita income?
</span><br/>
<label><input name="answer1" type="radio">New York</label>
<label><input name="answer1" type="radio" class="correct">Connecticut</label>
<label><input name="answer1" type="radio">California</label>
<label><input name="answer1" type="radio">Confusion</label>
<br/><br/>
<span id="question2">
2. Who is buried in Grant's tomb?
</span><br/>
<label><input name="answer2" type="radio">Ulysses Simpson Grant</label>
<label><input name="answer2" type="radio">U. S. Grant</label>
<label><input name="answer2" type="radio" class="correct">Ulysses S Grant</label>
<label><input name="answer2" type="radio">George Washington</label>
<br/><br/>
<input type="button" value="How did I do?" onclick="quiz(this.form);" />
<br>
<div id="scoring"></div>
<div id="rating"></div>
</form>
</div>
</body>
</html>

mobimad
11-09-2010, 10:54 PM
Hi Old Penant

Thankyou for the code, wow, much easier to deal with, there is one thing i'm stuck on, i would like to have each question set in a seperate form, and for it to still work.

This is just so can can break each question/answer set up in a seperate box via css.

Also how to have the script tell how many questions were right out of 20 for example

:)

Thanks
Jenna

Old Pedant
11-09-2010, 10:58 PM
We *could* do that, but there is still no reason for separate <form>s.

Just put each question inside its own <div> and style the <div>.

Styling a <form> is actually a bad idea.

If you really think you *MUST* have multiple forms, it's doable. Just seems pointless to me.

Old Pedant
11-09-2010, 11:02 PM
Simple example:


<html>
<head>
<script type="text/javascript">
function quiz( form )
{
var qcount = 0;
var score = 0;
for ( a = 1; a < 9999; ++a )
{
var rbs = form["answer" +a];
if ( rbs == null || rbs.length == null ) break;

++qcount;
var q = document.getElementById("question" + a);
q.style.color = "#FF0000";
for ( var r = 0; r < rbs.length; ++r )
{
var rb = rbs[r];
if ( rb.checked && rb.className == "correct" )
{
++score;
q.style.color = "#00FF00";
break;
}
}
}
document.getElementById("scoring").innerHTML =
"You got " + score + " right out of " + qcount + " questions.";
document.getElementById("rating").innerHTML =
"Your score: " + ( score * 100 / qcount ).toFixed(1) + "%";
}
</script>
<style type="text/css">
div#Questions span {
color: blue;
font-weight: bold;
}
div#Questions label {
color: black;
font-style: italic;
}
div#rating, div#scoring {
font-size: large;
}
div.OneQ {
position: relative;
width: 60%;
border: solid blue 3px;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="Questions">
<form>
<div class="OneQ">
<span id="question1">
1. What state has the highest per capita income?
</span><br/>
<label><input name="answer1" type="radio">New York</label>
<label><input name="answer1" type="radio" class="correct">Connecticut</label>
<label><input name="answer1" type="radio">California</label>
<label><input name="answer1" type="radio">Confusion</label>
<br/>
</div>
<div class="OneQ">
<span id="question2">
2. Who is buried in Grant's tomb?
</span><br/>
<label><input name="answer2" type="radio">Ulysses Simpson Grant</label>
<label><input name="answer2" type="radio">U. S. Grant</label>
<label><input name="answer2" type="radio" class="correct">Ulysses S Grant</label>
<label><input name="answer2" type="radio">George Washington</label>
<br/>
</div>
<input type="button" value="How did I do?" onclick="quiz(this.form);" />
<br>
<div id="scoring"></div>
<div id="rating"></div>
</form>
</div>
</body>
</html>

mobimad
11-09-2010, 11:18 PM
Thanks so much,

1 more thing i promise, :) could you show me how it would work with seperate forms for each question/answers

Very much appreciated
Jenna

Old Pedant
11-09-2010, 11:31 PM
*SIGH*

I still say you are making a mistake, especially if you ever want to change this to be a *REAL* quiz. (I hope you are aware that this is a "toy": Anybody who is smarter than a rock can simply view the source code to see all the right answers. That was true with your original quiz, as well, of course.) You can ONLY submit a SINGLE form to server-side processing that would be needed to make this a real quiz.

But okay...


<html>
<head>
<script type="text/javascript">
function quiz( )
{
var qcount = 0;
var score = 0;
for ( var f = 0; f < 9999; ++f )
{
var form = document.forms[f];
if ( form == null ) break;

var rbs = form.answer;
if ( rbs == null || rbs.length == null ) break;

++qcount;
var q = document.getElementById("question" + qcount);
q.style.color = "#FF0000";
for ( var r = 0; r < rbs.length; ++r )
{
var rb = rbs[r];
if ( rb.checked && rb.className == "correct" )
{
++score;
q.style.color = "#00FF00";
break;
}
}
}
document.getElementById("scoring").innerHTML =
"You got " + score + " right out of " + qcount + " questions.";
document.getElementById("rating").innerHTML =
"Your score: " + ( score * 100 / qcount ).toFixed(1) + "%";
}
</script>
<style type="text/css">
div#Questions span {
color: blue;
font-weight: bold;
}
div#Questions label {
color: black;
font-style: italic;
}
div#rating, div#scoring {
font-size: large;
}
div.OneQ {
position: relative;
width: 60%;
border: solid blue 3px;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="Questions">
<form>
<div class="OneQ">
<span id="question1">
1. What state has the highest per capita income?
</span><br/>
<label><input name="answer" type="radio">New York</label>
<label><input name="answer" type="radio" class="correct">Connecticut</label>
<label><input name="answer" type="radio">California</label>
<label><input name="answer" type="radio">Confusion</label>
<br/>
</div>
</form><form>
<div class="OneQ">
<span id="question2">
2. Who is buried in Grant's tomb?
</span><br/>
<label><input name="answer" type="radio">Ulysses Simpson Grant</label>
<label><input name="answer" type="radio">U. S. Grant</label>
<label><input name="answer" type="radio" class="correct">Ulysses S Grant</label>
<label><input name="answer" type="radio">George Washington</label>
<br/>
</div>
</form><form><!-- *** OPTIONAL: Separate form for the next button: *** -->
<input type="button" value="How did I do?" onclick="quiz( );" />
<br>
<div id="scoring"></div>
<div id="rating"></div>
</form>
</div>
</body>
</html>

Note that the "How did I do?" button can either be in the last <form> or in its own <form>.

mobimad
11-09-2010, 11:52 PM
Thanks so much
will bear in mind what you suggest.
Jenna



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum