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

Help with a multiple choice quiz.

P: n/a
Hi all,

I have been asked (nay told!) to do a quiz for a webpage at work, now
I can do the basic things like getting the radio boxes up there and
assign values to them but here is what they want:

5 options (done that)

You can only select 2 of the 5 options (dont know how to do that)

click on submit (done that button!)

Depending on which 2 choices they have selected they are shown an few
sentences of relevant text, ie option 1 and 3 will show the text
assigned to each option (dont know how to do this either!)

Does anyone know how to do this? oif not can someone please point me
to a decent website/book?

Many many thanks
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Dave Parrin-Bull wrote:
Hi all,

I have been asked (nay told!) to do a quiz for a webpage at work, now
I can do the basic things like getting the radio boxes up there and
assign values to them but here is what they want:

5 options (done that)

You can only select 2 of the 5 options (dont know how to do that)

click on submit (done that button!)

Depending on which 2 choices they have selected they are shown an few
sentences of relevant text, ie option 1 and 3 will show the text
assigned to each option (dont know how to do this either!)

Does anyone know how to do this? oif not can someone please point me
to a decent website/book?

Many many thanks

Well, Radio buttons are never meant to be multiply selected. This is
why you cannot choose a MULTIPLE option on a radio group. You can do it
with check boxes, but it can be messy.

Take a look at the following code. It is a good starter for what you
want to do, using radio buttons. It is not close to complete, but it is
useful for a clean code solution. To get this working, you need to
maintain an array of the last two checks for the question. When the
function is called, uncheck the one selected two times ago, and rotate
the data.

You can also use the SELECT box, multiple options, and stop them from
choosing more, but that is not what it sounds like you want.

To dynamically change text, use the SPAN tag, and change the innerText
value for any field you wish to change in the function. For this text,
you will either need to keep another array, or pass it as a function
parameter, or use the VALUE variable in the INPUT checkbox tag.

Will this be sent to a server backend for processing? If so, each
checkbox will show up as a variable. You might want to catch an
onSubmit event, and build up a hidden value string with the final answer
set, based on your checked array.

Hope this helps you get on your way...
Brian

<HTML>

<HEAD>
<SCRIPT type="text/javascript" src="records.js"></SCRIPT>
</HEAD>

<BODY>

<SCRIPT type="text/javascript">

function ac( obj )
{
var info = obj.name.split("-");
alert("Ques : " + info[0] + " Ans : " + info[1] + " " + obj.checked);
}

</SCRIPT>

<FORM action="submit.asp">
<INPUT TYPE=checkbox name=Q1-A1 onClick="ac(this)">Answer 1<BR>
<INPUT TYPE=checkbox name=Q1-A2 onClick="ac(this)">Answer 2<BR>
<INPUT TYPE=checkbox name=Q1-A3 onClick="ac(this)">Answer 3<BR>
<INPUT TYPE=checkbox name=Q1-A4 onClick="ac(this)">Answer 4<BR>
<INPUT TYPE=checkbox name=Q1-A5 onClick="ac(this)">Answer 5<BR>
</FORM>
</BODY>
</HTML>
Jul 23 '05 #2

P: n/a
Brian Genisio wrote:

<HEAD>
<SCRIPT type="text/javascript" src="records.js"></SCRIPT>
</HEAD>


Woops... cut this out. It was from a different page that I had modified
slightly. This was not supposed to be there for you.

Brian

Jul 23 '05 #3

P: n/a
Thanks Brian, your help is appreciated and very very useful!

"Brian Genisio" <Br**********@yahoo.com> wrote in message
news:40********@10.10.0.241...
Dave Parrin-Bull wrote:
Hi all,

I have been asked (nay told!) to do a quiz for a webpage at work, now
I can do the basic things like getting the radio boxes up there and
assign values to them but here is what they want:

5 options (done that)

You can only select 2 of the 5 options (dont know how to do that)

click on submit (done that button!)

Depending on which 2 choices they have selected they are shown an few
sentences of relevant text, ie option 1 and 3 will show the text
assigned to each option (dont know how to do this either!)

Does anyone know how to do this? oif not can someone please point me
to a decent website/book?

Many many thanks

Well, Radio buttons are never meant to be multiply selected. This is
why you cannot choose a MULTIPLE option on a radio group. You can do it
with check boxes, but it can be messy.

Take a look at the following code. It is a good starter for what you
want to do, using radio buttons. It is not close to complete, but it is
useful for a clean code solution. To get this working, you need to
maintain an array of the last two checks for the question. When the
function is called, uncheck the one selected two times ago, and rotate
the data.

You can also use the SELECT box, multiple options, and stop them from
choosing more, but that is not what it sounds like you want.

To dynamically change text, use the SPAN tag, and change the innerText
value for any field you wish to change in the function. For this text,
you will either need to keep another array, or pass it as a function
parameter, or use the VALUE variable in the INPUT checkbox tag.

Will this be sent to a server backend for processing? If so, each
checkbox will show up as a variable. You might want to catch an
onSubmit event, and build up a hidden value string with the final answer
set, based on your checked array.

Hope this helps you get on your way...
Brian

<HTML>

<HEAD>
<SCRIPT type="text/javascript" src="records.js"></SCRIPT>
</HEAD>

<BODY>

<SCRIPT type="text/javascript">

function ac( obj )
{
var info = obj.name.split("-");
alert("Ques : " + info[0] + " Ans : " + info[1] + " " + obj.checked);
}

</SCRIPT>

<FORM action="submit.asp">
<INPUT TYPE=checkbox name=Q1-A1 onClick="ac(this)">Answer 1<BR>
<INPUT TYPE=checkbox name=Q1-A2 onClick="ac(this)">Answer 2<BR>
<INPUT TYPE=checkbox name=Q1-A3 onClick="ac(this)">Answer 3<BR>
<INPUT TYPE=checkbox name=Q1-A4 onClick="ac(this)">Answer 4<BR>
<INPUT TYPE=checkbox name=Q1-A5 onClick="ac(this)">Answer 5<BR>
</FORM>
</BODY>
</HTML>

Jul 23 '05 #4

P: n/a
Dave Parrin-Bull wrote:
Hi all,

I have been asked (nay told!) to do a quiz for a webpage at work, now
I can do the basic things like getting the radio boxes up there and
assign values to them but here is what they want:

5 options (done that)

You can only select 2 of the 5 options (dont know how to do that)

click on submit (done that button!)

Depending on which 2 choices they have selected they are shown an few
sentences of relevant text, ie option 1 and 3 will show the text
assigned to each option (dont know how to do this either!)

Does anyone know how to do this? oif not can someone please point me
to a decent website/book?

Many many thanks

Why reinvent the wheel. There are plenty of quiz scripts out there.
Here is client side solution:
www.klproductions.com/klquiz.html

--
Vladdy
http://www.klproductions.com
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.