Help with a multiple choice quiz.

Discussion in 'Javascript' started by Dave Parrin-Bull, Apr 22, 2004.

  1. 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
     
    Dave Parrin-Bull, Apr 22, 2004
    #1
    1. Advertising

  2. 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>
     
    Brian Genisio, Apr 22, 2004
    #2
    1. Advertising

  3. 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
     
    Brian Genisio, Apr 22, 2004
    #3
  4. Dave Parrin-Bull

    Big D Guest

    Thanks Brian, your help is appreciated and very very useful!

    "Brian Genisio" <> wrote in message
    news:4087e012$1@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>
    >
    >
     
    Big D, Apr 22, 2004
    #4
  5. Dave Parrin-Bull

    Vladdy Guest

    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
     
    Vladdy, Apr 22, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mickey Segal
    Replies:
    0
    Views:
    947
    Mickey Segal
    Feb 2, 2004
  2. Web Developer

    Quiz/multiple choice resources

    Web Developer, Jun 26, 2003, in forum: HTML
    Replies:
    0
    Views:
    1,301
    Web Developer
    Jun 26, 2003
  3. miles.jg
    Replies:
    16
    Views:
    926
    Alf P. Steinbach
    Nov 14, 2007
  4. Ruby Quiz

    [QUIZ] Animal Quiz (#15)

    Ruby Quiz, Jan 14, 2005, in forum: Ruby
    Replies:
    11
    Views:
    431
    James Edward Gray II
    Jan 18, 2005
  5. Vandana Rola

    Creating multiple choice quiz

    Vandana Rola, Jul 20, 2004, in forum: Javascript
    Replies:
    4
    Views:
    163
    Vandana Rola
    Jul 26, 2004
Loading...

Share This Page