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


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 = 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".


  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....


      Show the rest of this thread

  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?


  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


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;


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 »