By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,844 Members | 1,859 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,844 IT Pros & Developers. It's quick & easy.

multiple-choice exam using a form with radio buttons and redirect after sum values

P: 2
How can I do build a multiple-choice exam using a form with radio buttons.

question No. 1
Answers: yes: value=2 maybe: value=1 No: value=0

question No. 2
Answers: yes: value=2 maybe: value=1 No: value=0

question No. 3
Answers: yes: value=2 maybe: value=1 No: value=0

On submit, it should sum the values from all the quetions and then, depending in the total added, redirect to a diferent page, for example: If total value = 6, redirect to page "6.html" else if total value = 5, redirect to page "5.html" and so on.

Thank you so much.
falonso
Jul 26 '10 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
Post your code so far.

What have you managed so far? What's not working?
Jul 27 '10 #2

P: 2
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Quick Quiz</title>

<link href="Styles/Simple/Style.css" type="text/css" rel="stylesheet">
<script src="redirect.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
function validate_form(theForm)
{
var radioSelected = false;
for (i = 0; i < theForm.q1.length; i++)
{
if (theForm.q1[i].checked)
radioSelected = true;
}
if (!radioSelected)
{
alert("Pls answer question No. 1");
return (false);
}

var radioSelected = false;
for (i = 0; i < theForm.q2.length; i++)
{
if (theForm.q2[i].checked)
radioSelected = true;
}
if (!radioSelected)
{
alert("Pls answer question No. 2");
return (false);
}

var radioSelected = false;
for (i = 0; i < theForm.q3.length; i++)
{
if (theForm.q3[i].checked)
radioSelected = true;
}
if (!radioSelected)
{
alert("Pls answer question No. 3");
return (false);
}

var radioSelected = false;
for (i = 0; i < theForm.q4.length; i++)
{
if (theForm.q4[i].checked)
radioSelected = true;
}
if (!radioSelected)
{
alert("Pls answer question No. 4");
return (false);
}

var radioSelected = false;
for (i = 0; i < theForm.q5.length; i++)
{
if (theForm.q5[i].checked)
radioSelected = true;
}
if (!radioSelected)
{
alert("Pls answer question No. 5");
return (false);
}

return (true);
return redirect();
}
</script>


</head>
<body style="MARGIN-TOP: 0px; MARGIN-LEFT: 0px; FONT-FAMILY: trebuchet ms">
<div align="center">
<center>
<table style="BORDER-LEFT-COLOR: #111111; BORDER-BOTTOM-COLOR: #111111; WIDTH: 500px; BORDER-TOP-COLOR: #111111;

BORDER-COLLAPSE: collapse; BORDER-RIGHT-COLOR: #111111" cellspacing="0" cellpadding="4" border="0">

</table>
</center>
</div>


<form name="poll" onsubmit="return validate_form(this);addUp();" method="post" action="" target="_top">


<div align="center">
<center>
<table bordercolor="#00659c" cellspacing="0" width="542" border="1" frame="box">
<tr>
<td align="center" bgcolor="#00659c" colspan="4"><b><font color="#ffffff" size="3">Quick Quiz</font></b></td>
</tr>

<tr>
<td align="center" width="452"><font size="3"></font></td>
<td align="center" width="30"><b><font size="2">Yes</font></b></td>
<td align="center" width="30"><b><font size="1">Maybe</font></b></td>
<td align="center" width="30"><b><font size="2">No</font></b></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA">Question No. 1&nbsp;</td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="2" name="q1"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="1" name="q1"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="0" name="q1"></td>
</tr>

<tr>
<td align="right">Question No. 2&nbsp;</td>
<td align="center"><input tabindex="2" type="radio" value="2" name="q2"></td>
<td align="center"><input tabindex="2" type="radio" value="1" name="q2"></td>
<td align="center"><input tabindex="2" type="radio" value="0" name="q2"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA">Question No. 3&nbsp;</td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="2" name="q3"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="1" name="q3"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="0" name="q3"></td>
</tr>

<tr>
<td align="right">Question No. 4&nbsp;</td>
<td align="center"><input tabindex="4" type="radio" value="2" name="q4"></td>
<td align="center"><input tabindex="4" type="radio" value="1" name="q4"></td>
<td align="center"><input tabindex="4" type="radio" value="0" name="q4"></td>
</tr>

<tr>
<td align="right" bgcolor="#DDE4FA">Question No. 5&nbsp;</td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="2" name="q5"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="1" name="q5"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="5" type="radio" value="0" name="q5"></td>
</tr>
</table>
</center>
</div>

<table style="WIDTH: 480px" cellspacing="0" cellpadding="5" align="center" border="0">

<tr>
<td colspan="2"></td>
</tr>

<tr>
<td style="TEXT-ALIGN: center" align="center" colspan="2">
<br>
<input id="poll" type="submit" value="Score it!" name="total">&nbsp;&nbsp;

</tr>
</table>
</form>
<br>
</body>
</html>

::::::::::::::::::::::::::::::::::::::::::::
and the redirect.js file code is as follows:
::::::::::::::::::::::::::::::::::::::::::::

function round(number,X) {
// rounds number to X decimal places, defaults to 2
X = (!X ? 2 : X);
return Math.round(number*Math.pow(10,X))/Math.pow(10,X);
}

function addUp(){
total = 0;
for(x=0; x<document.poll.elements.length; x++){
if(document.poll.elements[x].checked == true){
total += parseFloat(document.poll.elements[x].value);

document.poll.total.value = round(total,2);

}
if(round(total,2)!= ""){
location.href=round(total,2)+".htm"

}
}
}


--- END ---

Thank you
Jul 28 '10 #3

P: 1
This is perfect....
I have another question, i have basically the same form that i need. The difference is the answers are actually values 1-5. And at the end i just need the sum under the whole table not on another page. Im also not sure how i should put the values for it...

Column 1 has the value 1, column 2-2, etc...
I put this:
<tr>
<td align="center" width="560"><font size="3"></font></td>
<td align="center" width="30"><b><font size="2">1</font></b></td>
<td align="center" width="30"><b><font size="2">2</font></b></td>
<td align="center" width="30"><b><font size="2">3</font></b></td>
<td align="center" width="30"><b><font size="2">4</font></b></td>
<td align="center" width="30"><b><font size="2">5</font></b></td>
</tr>

<tr>
<td align="left" bgcolor="#DDE4FA">5 Being the most, how cooperative is this artist in selling aftercare?&nbsp;</td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="1" name="q1"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="2" name="q1"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="3" name="q1"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="4" name="q1"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="1" type="radio" value="5" name="q1"></td>
</tr>

<tr>
<td align="left">5 being the most, how cooperative is this artist with staff?&nbsp;</td>
<td align="center"><input tabindex="2" type="radio" value="1" name="q2"></td>
<td align="center"><input tabindex="2" type="radio" value="2" name="q2"></td>
<td align="center"><input tabindex="2" type="radio" value="3" name="q2"></td>
<td align="center"><input tabindex="2" type="radio" value="4" name="q2"></td>
<td align="center"><input tabindex="2" type="radio" value="5" name="q2"></td>
</tr>

<tr>
<td align="left" bgcolor="#DDE4FA">5 being the most, how cooperative this artist is with customers?&nbsp;</td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="1" name="q3"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="2" name="q3"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="3" name="q3"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="4" name="q3"></td>
<td align="center" bgcolor="#DDE4FA"><input tabindex="3" type="radio" value="5" name="q3"></td>

But im not sure if that will work, cause im not sure how to make that sum appear on the bottom...

Thank you
Sep 9 '10 #4

Post your reply

Sign in to post your reply or Sign up for a free account.