title: javascript multiple choice script
body: <p>I have the following multiple choice javascript quiz which I would like to modify to help give me more detailed information about a test-taker's performance. I would like to change the script such that instead of giving me a single composite score I would like the output to include a list of subscores that reflect how I classify the questions. In order to do so, I would need to break the existing arrays down into array subsets some of which include overlapping questions in them. For example, I would like to group questions #1-3 under "javascript" but #3 under WindowsOS while #1&amp;#5 under basic programming, etc. How would I do this? Thank you very much in advance!</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;The JavaScript Source: Miscellaneous : Multiple Choice Quiz&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  &lt;!--
  .question {
    color:darkblue;
    font-size:14px;
    font-weight:bold;
  }
  --&gt;
  &lt;/style&gt;&lt;script type="text/javascript"&gt;
  
  var useranswers = new Array();
  var answered = 0;
  
  function renderQuiz() {
    for(i=0;i&lt;questions.length;i++) {
      document.writeln('&lt;p class="question"&gt;' + questions[i] + ' &lt;span id="result_' + i + '"&gt;&lt;img src="blank.bmp" style="border:0" alt="" /&gt;&lt;/span&gt;&lt;/p&gt;');
      for(j=0;j&lt;choices[i].length;j++) {
        document.writeln('&lt;input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /&gt;&lt;label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"&gt; ' + choices[i][j] + '&lt;/label&gt;&lt;br /&gt;');
      }
    }
    document.writeln('&lt;p&gt;&lt;input type="submit" value="Show Score" onclick="showScore()" /&gt; &lt;input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /&gt;&lt;/p&gt;&lt;p style="display:none"&gt;&lt;img src="correct.bmp" style="border:0" alt="Correct!" /&gt;&lt;img src="incorrect.bmp" style="border:0" alt="Incorrect!" /&gt;&lt;/p&gt;');
  }
  function resetQuiz(showConfirm) {
    if(showConfirm)
      if(!confirm("Are you sure you want to reset your answers and start from the beginning?"))
        return false;
    document.location = document.location;
  }
  function submitAnswer(questionId, obj, classId, labelId) {
    useranswers[questionId] = obj.value;
    document.getElementById(labelId).style.fontWeight = "bold";
    disableQuestion(classId);
    showResult(questionId);
    answered++;
  }
  function showResult(questionId) {
    if(answers[questionId] == useranswers[questionId]) {
      document.getElementById('result_' + questionId).innerHTML = '&lt;img src="correct.bmp" style="border:0" alt="Correct!" /&gt;';
    } else {
      document.getElementById('result_' + questionId).innerHTML = '&lt;img src="incorrect.bmp" style="border:0" alt="Incorrect!" /&gt;';
    }
  }
  function showScore() {
    if(answered != answers.length) {
      alert("You have not answered all of the questions yet!");
      return false;
    }
    questionCount = answers.length;
    correct = 0;
    incorrect = 0;
    for(i=0;i&lt;questionCount;i++) {
      if(useranswers[i] == answers[i])
        correct++;
      else
        incorrect++;
    }
    pc = Math.round((correct / questionCount) * 100);
    alertMsg = "You scored " + correct + " out of " + questionCount + "\n\n";
    alertMsg += "You correctly answered " + pc + "% of the questions! \n\n";
    if(pc == 100)
      alertMsg += response[0];
    else if(pc &gt;= 90)
      alertMsg += response[1];
    else if(pc &gt;= 70)
      alertMsg += response[2];
    else if(pc &gt; 50)
      alertMsg += response[3];
    else if(pc &gt;= 40)
      alertMsg += response[4];
    else if(pc &gt;= 20)
      alertMsg += response[5];
    else if(pc &gt;= 10)
      alertMsg += response[6];
    else
      alertMsg += response[7];
    if(pc &lt; 100) {
      if(confirm(alertMsg))
        resetQuiz(false);
      else
        return false;
    } else {
      alert(alertMsg);
    }
  }
  function disableQuestion(classId) {
    var alltags=document.all? document.all : document.getElementsByTagName("*")
    for (i=0; i&lt;alltags.length; i++) {
      if (alltags[i].className == classId) {
        alltags[i].disabled = true;
      }
    }
  }
  
  var questions = new Array();
  var choices = new Array();
  var answers = new Array();
  var response = new Array();
  
  // To add more questions, just follow the format below.
  
  questions[0] = "1) JavaScript is ...";
  choices[0] = new Array();
  choices[0][0] = "the same as Java";
  choices[0][1] = "kind of like Java";
  choices[0][2] = "different than Java";
  choices[0][3] = "ther written part of Java";
  answers[0] = choices[0][2];
  
  questions[1] = "2) JavaScript is ...";
  choices[1] = new Array();
  choices[1][0] = "subjective";
  choices[1][1] = "objective";
  choices[1][2] = "evil";
  choices[1][3] = "object based";
  answers[1] = choices[1][3];
  
  questions[2] = "3) To comment out a line in JavaScript ...";
  choices[2] = new Array();
  choices[2][0] = "Precede it with two forward slashes, i.e. '//'";
  choices[2][1] = "Precede it with an asterisk and a forward slash, i.e. '*/'";
  choices[2][2] = "Precede it with an asterisk, i.e. '*'";
  choices[2][3] = "Precede it with a forward slash and an asterisk, i.e. '/*'";
  answers[2] = choices[2][0];
  
  questions[3] = "4) JavaScript can only run on Windows";
  choices[3] = new Array();
  choices[3][0] = "True";
  choices[3][1] = "False";
  answers[3] = choices[3][1];
  
  questions[4] = "5) Semicolons are optional at the end of a JavaScript statement.";
  choices[4] = new Array();
  choices[4][0] = "True";
  choices[4][1] = "False";
  answers[4] = choices[4][0];
  
  questions[5] = "6) The four basic data types are:";
  choices[5] = new Array();
  choices[5][0] = "strings, numbers, BooBoos, and nulls";
  choices[5][1] = "strings, text, Booleans, and nulls";
  choices[5][2] = "strings, numbers, Booleans, and nulls";
  choices[5][3] = "strings, numbers, Booleans, and zeros";
  answers[5] = choices[5][2];
  
  // response for getting 100%
  response[0] = "Excellent, top marks!";
  // response for getting 90% or more
  response[1] = "Excellent, try again to get 100%!"
  // response for getting 70% or more
  response[2] = "Well done, that is a good score, can you do better?";
  // response for getting over 50%
  response[3] = "Nice one, you got more than half of the questions right, can you do better?";
  // response for getting 40% or more
  response[4] = "You got some questions right, you can do better!";
  // response for getting 20% or more
  response[5] = "You didn't do too well, why not try again!?";
  // response for getting 10% or more
  response[6] = "That was pretty poor!  Try again to improve!";
  // response for getting 9% or less
  response[7] = "Oh dear, I think you need to go back to school (or try again)!";
  
  //--&gt;
  &lt;/script&gt;
  
  &lt;link id="noteanywherecss" media="screen" type="text/css" rel="stylesheet" href="data:text/css,.note-anywhere%20.closebutton%7Bbackground-image%3A%20url%28chrome-extension%3A//bohahkiiknkelflnjjlipnaeapefmjbh/asset/deleteButton.png%29%3B%7D%0A"&gt;&lt;/head&gt;
  &lt;body bgcolor="#ffffff" vlink="#0000ff"&gt;
  
  
  &lt;br&gt;
  &lt;center&gt;
  &lt;script language="JavaScript" type="text/javascript"&gt;&lt;!--
  function openDescription(ID) {
  var url = "http://www.ppcforhosts.com/public/util/description.cfm?id=" + ID;
  link = window.open(url,"newWin","directories=0,height=250,location=0,menubar=0,resizable=1,scrollbars=1,status=0,toolbar=0,width=450");
  }
  //--&gt;&lt;/script&gt;
  &lt;table cellpadding="10" cellspacing="0" border="0" width="100%"&gt;
     &lt;tbody&gt;&lt;tr&gt;&lt;td align="center"&gt;
  &lt;!-- cdXpo code --&gt;
  
  
  &lt;center&gt;
   &lt;span class="quad_R"&gt;
  href="http://o1.qnsr.com/cgi/r?;n=203;c=662698/662688/662676/662675/581034;s=10665;x=7936;f=38775509;u=j;z=20110808154704" target="_blank"&amp;gt;
  &amp;lt;img border="0" width="0" height="0" src="http://o1.qnsr.com/cgi/x?;n=203;c=662698/662688/662676/662675/581034;s=10665;x=7936;f=38775509;u=j;z=20110808154704" alt="Click here"&amp;gt;&amp;lt;/a&amp;gt;
  &lt;/noscript&gt;
  &lt;/span&gt;
  </code></pre>