logo

A Radio Button Quiz

This example is going be a little quiz using Radio-Buttons and JavaScript (not a quiz about radio-buttons as the title may suggest). It is not that I thought of this as a useful application, more that the techniques used are quite handy. What's more, if it were really a quiz, you could cheat buy viewing the source-code.

The principles demonstrated are that of Multi-Dimensional JavaScript Arrays and of working with Radio-Buttons in JavaScript functions.

Let's get started with the quiz:

Question 1 (Muliple Choice) What is 4 squared?

12 14 16 18

Question 2 (Muliple Choice) Which is the best browser?

Internet Explorer Netscape Navigator Opera

Question 3 (Muliple Choice) What is the best description of domino?

A pizza delivery company
A powerful, yet misused, internet application server
The effect of pushing the first of a line of bicycles over

Question 4 (Boolean) Jake is really cool ?

True False

Mark My Answers

Percentage:


So, how did you do? Before you start to mail me with complaints, a couple of the answers are just my opinion. Sorry.

So let's look at the function that is called by the "Mark Answers" link:

function getScore( form ) {

var AnswersAndObjects = new Array();
AnswersAndObjects[0] = ["16", form.question1];
AnswersAndObjects[1] = ["IE", form.question2];
AnswersAndObjects[2] = ["AS", form.question3];
AnswersAndObjects[3] = ["T", form.question4];

var theScore = 0;

for (i=0; i < AnswersAndObjects.length; i++) {
currQuestionObject = AnswersAndObjects[i][1];
for (j=0; j<currQuestionObject.length; j++){
if (currQuestionObject[j].checked && currQuestionObject[j].value == AnswersAndObjects[i][0] ) {
theScore++;
break;
}
}
}

theScore = Math.round( theScore/AnswersAndObjects.length*100 );

form.percentage.value = theScore + "%";
}


What does it do?

First thing is to build an Array that has 4 elements, one for each of the questions. In turn, each of these contain two more elements, one for the correct answer and one for the radio-group object reference.

With the array of the question's answers and objects, the function now loops through each question, getting a hold on the object, looping through all the possible answers and comparing them to the stored one. Whenever an answer is found to be correct the "score" variable is increased by one.

The last thing to do is to convert this score in to a percentage, by dividing by the number of question and multiplying by a hundred. All we need do then is to use the answer. In this case it is placed in to an input field, called "percentage".

Feedback

  1. Netscape!!!

    hey jake, it's great work . But have you ever tried to look at the pages through Netscape 4.x? Man does it look ugly. yes I know , you want all browsers to be current and latest. But what the heck, my organiztaion has standardized on Netscape. So this just doesn't apply. By the way a part of being "Web devloper" or "Internet Developer" would be to make sure your pages work in all the browsers. You too would agree I am sure otherwise you woudn't have asked a question on an obscure browser like "opera".

    1. Re: Netscape!!!

      They may look "ugly" in Netscape but they WORK. I haven't got the time or the patience to even bother starting to worry about why.

      Netscape is a pain in the ass and the sooner it dies the better....

      Jake

      Hide the rest of this thread

      1. I agree, but disagree...Re: Netscape!!!

        yes, netscape is as you say. but do you really want IE to be the only game in town? Netscape warned us all long ago that nothing is really free. IE was only made free in order to kill Netscape, and they succeeded, even though it took them until v. 5 to have a good product (while Netscape stagnated miserably).

        Personally I love opera, and use it along with IE, but Opera doesn't currently show any sign of beating IE in the market.

        The real solution would be for Netscape to stop sucking. (I'm told v. 6 has done so, but since it always crashes on me I'm waiting a while.)

        1. Don't get me started...

          I don't care if there is one or ten browsers on the market or who makes them. All I care about is that I can do my job without the need to worry about petty little things like cross-browser functionality.

          I don't like IE because it's MS I like it becasue it's a bloody good browser. The things you can do with can't even *nearly* be matched by other browsers.

          I love Opera too. I've used it since version 4 and it's also my mail client for non-codestore (private) mail. Try doing a day's surfing with /just/ Opera though!! You can't... its JS support is too lousy - you'll soon find yourself switching in to IE to carry on surfing.

          Netscape 6 isn't much better either. Having "used" it for a while now I still hold it in the same regard as its predecessor.....

          I am an IE man because that's what my job requires. All the work I do is for Intranets and they are IE based. Partly I imagine because most corporations nowadays are "Microsoft shops" and partly because the IT decision makers know enough to know it's the only one capable of performing in situations where client-like functionality needs to be reproduced.

          Anyway, this could go on forever and this type of argument's boring so that's it from me.....

        • avatar
        • Ike
        • Wed 29 May 2002

        Re: Netscape!!!

        Hear, hear!

        • avatar
        • ok
        • Tue 25 Nov 2003

        Re: Netscape!!!

        really? I.E. rocks. It has the most conpatible with js, and because all the rest of the browswers suck, like netscape....... need i go on? no.

  2. quiz

    Couldnt you reference the source of the javascript to another file on the server so as not to disclose the answers on the main page.

      • avatar
      • Jake Howlett
      • Mon 1 Aug 2005

      Re: quiz

      I could Derek, but why would I?

  3. Radio Buttons

    It works just what i was looking for. Now i just need to make it work in my program. Thanks.

  4. Pass Score Value to next page?

    How would you go about passing theScore value to another page?

    thanks,

  5. Thank you

    Thank you very much. I'm so glad with this information.

    • avatar
    • sally
    • Tue 7 Dec 2010

    this doesnt help at all unless i know how you wrote the code for your questions and answers. i have no idea how the form links up with the function you show here

      • avatar
      • Chef
      • Thu 3 Mar 2011

      View source?

    • avatar
    • Rohit Hake
    • Fri 14 Sep 2012

    Can we add this type of quiz on blog ?

    And isn't it possible showing msg telling "you are right" or "you are wrong" just after clicking on a option ?

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "JavaScript"

« Previous Article Next Article »
JavaScript @Now Equivalent   Advanced Form Validation Made a Little Easier

About This Article

Author: Jake Howlett
Category: JavaScript
Keywords: radio; array; math;

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »