Converting Javascript Text-Field Quiz to Radio Button Quiz

Posted on 2004-11-09
Last Modified: 2012-06-27

I'm using a simple quiz script with text-fields, if the user's answer matches an array of answers they get scored appropriately.

I'd like to use this same system, but with radio buttons instead. Users click on a multiple-choice answer radio button, if it matches the corresponding item in an array of answers (answer "a"/"b"/"c" for example) they get scored appropriately. Here's my script using text-fields:

<SCRIPT language=JavaScript>
var numQues = 10;
var answers = new Array(10);
answers[0] = "a";
answers[1] = "b";
answers[2] = "a";
answers[3] = "a";
answers[4] = "b";
answers[5] = "b";
answers[6] = "a";
answers[7] = "a";
answers[8] = "b";
answers[9] = "b";

function getScore(form) {
  var score = 0;

  for (i=0; i<numQues; i++) {
    if (form.elements[i].value == answers[i]) {

  score = Math.round(score/numQues*100);
  form.percentage.value = score + "%";
  var correctAnswers = "";
  for (i=1; i<=numQues; i++) {
    correctAnswers += i + ". " + answers[i-1] + "\r\n";
  } = correctAnswers;

// -->

The HTML form goes like this:
<FORM name=quiz>
<input type="text" name="q1" size="25">
<input type="text" name="q2" size="25">
<input type="text" name="q3" size="25">

... and so on up to question 10 ...

<INPUT size=5 name=percentage>
<TEXTAREA name=solutions rows=13 wrap=virtual cols=30></TEXTAREA>
<input onClick=getScore(this.form) type=button value="Grade Me" name="button">
<INPUT type=reset value=Clear>

Please provide the script to have this quiz work with multiple-choice radio buttons with answers a, b, c. Thankyou!

Best Regards,

Question by:jeremymgp
    LVL 63

    Accepted Solution

    Here an example:

    <SCRIPT language=JavaScript>
    var answers = ["a", "b", "a", "a", "b", "b", "a", "a", "b", "b"];
    var numQues = answers.length;
    function getScore(theBtn) {
      theForm = theBtn.form;
      var score = 0;
      for(var i=0; i<numQues; i++) {
        var q = theForm["q"+(i+1)];
        qVal = "";
        for(var j=0;j<q.length;j++){
            qVal = q[j].value;
        if (qVal == answers[i]) {

      score = Math.round(score/numQues*100);
      theForm.percentage.value = score + "%";
      var correctAnswers = "";
      for (var i=1; i<=numQues; i++) {
        correctAnswers += i + ". " + answers[i-1] + "\r\n";
      } = correctAnswers;

    // -->

    <FORM name=quiz>
    <input type="radio" name="q1" value="a"> a
    <input type="radio" name="q1" value="b"> b
    <input type="radio" name="q1" value="c"> c<br>
    <input type="radio" name="q2" value="a"> a
    <input type="radio" name="q2" value="b"> b
    <input type="radio" name="q2" value="c"> c<br>
    <input type="radio" name="q3" value="a"> a
    <input type="radio" name="q3" value="b"> b
    <input type="radio" name="q3" value="c"> c<br>
    <input type="radio" name="q4" value="a"> a
    <input type="radio" name="q4" value="b"> b
    <input type="radio" name="q4" value="c"> c<br>
    <input type="radio" name="q5" value="a"> a
    <input type="radio" name="q5" value="b"> b
    <input type="radio" name="q5" value="c"> c<br>
    <input type="radio" name="q6" value="a"> a
    <input type="radio" name="q6" value="b"> b
    <input type="radio" name="q6" value="c"> c<br>
    <input type="radio" name="q7" value="a"> a
    <input type="radio" name="q7" value="b"> b
    <input type="radio" name="q7" value="c"> c<br>
    <input type="radio" name="q8" value="a"> a
    <input type="radio" name="q8" value="b"> b
    <input type="radio" name="q8" value="c"> c<br>
    <input type="radio" name="q9" value="a"> a
    <input type="radio" name="q9" value="b"> b
    <input type="radio" name="q9" value="c"> c<br>
    <input type="radio" name="q10" value="a"> a
    <input type="radio" name="q10" value="b"> b
    <input type="radio" name="q10" value="c"> c<br>

    <INPUT size=5 name=percentage><br>
    <TEXTAREA name=solutions rows=13 wrap=virtual cols=30></TEXTAREA><br>
    <input onClick=getScore(this) type=button value="Grade Me" name="button">
    <INPUT type=reset value=Clear>


    Author Comment

    Hi Zvonko,

    That does it! Thx :)

    Best regards,


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (, typical array handling might look like this: (CODE) B…
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now