www.webdeveloper.com
Results 1 to 9 of 9

Thread: Multiple Choice App

  1. #1
    Join Date
    Sep 2011
    Posts
    64

    Multiple Choice App

    Hello,

    I've written a multiple choice app. Well, now that the number of questions in my app has grown significantly, I'd like to rewrite the javascript funciton. You'll see why in a moment...

    Here is some HTML:

    1.) What does 7x5 equal?

    <table class='AnswerTable' id='Q1T' border='1'>
    <tr>
    <td><input type='radio' id='Q1A' name='MCQ1' value='No' onclick='CheckQ();' /></td>
    <td>A.</td>
    <td>30</td>
    </tr>
    <tr>
    <td><input type='radio' id='Q1B' name='MCQ1' value='Yes' onclick='CheckQ();' /></td>
    <td>B.</td>
    <td>35</td>
    </tr>
    <tr>
    <td><input type='radio' id='Q1C' name='MCQ1' value='No' onclick='CheckQ();' /></td>
    <td>C.</td>
    <td>32</td>
    </tr>
    <tr>
    <td><input type='radio' id='Q1D' name='MCQ1' value='No' onclick='CheckQ();' /></td>
    <td>D.</td>
    <td>40</td>
    </tr>
    <tr>
    <td class='AnswerCell' id='Answer1' colspan='3'></td>
    <tr>
    </table>

    Notice the empty cell at the end with id: 'Answer1' We will write to that cell in the following funciton:

    function CheckQ()
    {
    var rButA = document.getElementById('Q1A');
    var rButB = document.getElementById('Q1B');
    var rButC = document.getElementById('Q1C');
    var rButD = document.getElementById('Q1D');


    if (rButB.checked == true)
    {
    var AnswerCorrect = document.getElementById('Answer1');
    AnswerCorrect.innerHTML = 'Correct'
    AnswerCorrect.bgColor = '#00EE00'
    }
    else if (rButA.checked | rButC.checked | rButD.checked == true)
    {
    var AnswerWrong = document.getElementById('Answer1');
    AnswerWrong.innerHTML = "Incorrect"
    AnswerWrong.bgColor = '#EE0000'
    };
    }

    Ok, Ok, nothing wrong with this. I was using it. I was all proud of myself too, because I wrote it. lol But now that I am 84 questions in (and no, I am not writing an app to help me with my times tables, my example just makes things easier to type ), I do not want to have to write the same function 84 times just to go back and change the id's and which answer would be the correct one. I am sure there is a smarter way...

    So, I thought of using xml and making the app AJAX. Well, then I got to thinking even more and thought about adding a value='Yes' or value='No' which you see in the HTML up above. Initially, I had: value=''. I just left it blank because as you can see from my script, I really had no reason to set the value... or so I thought.

    Ok, so I need some help. Could we do something like:

    function CheckQ()
    {
    var hTag = document.getElementsByTagName('input')

    }

    And I will just say what I am thinking in English, because I have no idea about how to say it in code...

    ... if any input tag of type 'radio' gets checked
    ... if Tag.Value='Yes'
    ... var AnswerCorrect = document.getElementById('Answer1');
    ... AnswerCorrect.innerHTML = 'Correct'
    ... AnswerCorrect.bgColor = '#00EE00'
    ...else if Tag.Value='No'
    ...var AnswerWrong = document.getElementById('Answer1');
    ...AnswerWrong.innerHTML = "Incorrect"
    ...AnswerWrong.bgColor = '#EE0000'


    That way it gets all the radio buttons in the entire document and I don't have to specify the id for every sinle multiple choice option. Not to mention writing a separate function for every single freaking question

    Will someone please help me out with this? I appreciate it, bigtime! Thanks!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Lightbulb

    Seemed awfully complicated to me, so here is my simplified version.
    You can pretty it up some more with color correct/incorrect with some CSS code.
    Code:
    <html>
    <head>
    <title> Multiply Quiz </title>
    <style type='text/css'>
    li { list-style-type: lower-alpha }
    </style>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=259488
    
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
      return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
    //  return str;
    } 
    
    function checkAnswers() {
      var total = 0;
      var QN = '';
      var Qerr = [];
      var Qmax = questions.length;
      for (var i=0; i<Qmax; i++) {
        QN = 'Q'+i;
        if (getRBtnName(QN) == questions[i][5]) { total++; }
        else { Qerr.push(i+1); }
      }
      alert('Score: '+total+' of '+Qmax+'\nMissed questions: '+Qerr);
    }
    </script>
    </head>
    <body>
    <script type="text/javascript">
    var questions = [
      ['What does 7x5 equal?',30,32,35,40,2],
      ['What does 5x9 equal?',40,42,45,54,2],
      ['What does 3x8 equal?',24,28,35,40,0],
      ['What does 4x7 equal?',24,28,35,40,1]
    ];
    var str = '';
    for (var i=0; i<questions.length; i++) {
      str += 'Question #'+(i+1)+': '+questions[i][0];
      str += "<ol>";
      str += "<li><input type='radio' name='Q"+i+"' />"+questions[i][1]+"</li>";
      str += "<li><input type='radio' name='Q"+i+"' />"+questions[i][2]+"</li>";
      str += "<li><input type='radio' name='Q"+i+"' />"+questions[i][3]+"</li>";
      str += "<li><input type='radio' name='Q"+i+"' />"+questions[i][4]+"</li>";
      str += "</ol>";
    }
    document.write(str);
    </script>
    <button onclick="checkAnswers()">Check Answers</button>
    </body>
    </html>
    See if you can make sense of it for your needs.
    Post back if you have questions.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    If you don't like the use of document.write() in the earlier post,
    then replace with: document.body.innerHTML = str;

  4. #4
    Join Date
    Sep 2011
    Posts
    64
    Hello JMRKER,

    First of all, thank you very much for your reply. I like your little app, but it doesn't quite do what I was getting at. If I were to follow what you did with that particular app, I'd still have to type all 84 questions into the script:

    var questions = [
    ['What does 7x5 equal?',30,32,35,40,2],
    ['What does 5x9 equal?',40,42,45,54,2],
    ['What does 3x8 equal?',24,28,35,40,0],
    ['What does 4x7 equal?',24,28,35,40,1]
    ];

    ???

    You see, it is all the extra typing that I am trying to avoid. Also, I was planning on making the app available with 2 options. One option would be to take the entire test and grade the whole paper. Something similar to what you did with the alert function only I'd give a percentage, some color, and stuff in the HTML page.

    The other option, and the one I am currently working on would check each question as it is answered.

    Now, I was not familiar with getElementsByName. So that helps. I am planning on keeping the table. I'll go ahead and repost my code here in a minute...

    The HTML already has all the questions' options formatted in table cells with id's and values with the same format indicated in my code, above. I will iterate through my id names and explain the logic I was using when I designed the HTML:

    <input type='radio' id='Q1A' name='MCQ1' value='No' onclick='CheckQ();' />

    id='Q1A' Stands for Question #1, Option A
    name='MCQ1' Stands for Multiple Choice Question #1

    I did this so that only the number would change. I love my little script, but again, not as much when I have to copy and paste it 84 times just to go back and change all the function name numbers, id numbers, and so forth...

    onclick='CheckQ1();'

    function CheckQ1()
    {
    var rButA=document.getElementById("Q1A")
    var rButB=document.getElementById("Q1B")
    etc...
    etc...
    }

    onclick='CheckQ2();'

    function CheckQ2()
    {
    var rButA=document.getElementById('Q2A')
    var rButB=document.getElementById('Q2B')
    etc...
    etc...
    }

    And right on down the line. The empty table cell has id='Answer1'. Yup, you guessed it. So question #2 has an empty table cell with id='Answer2'

    Now, I suppose it really isn't that big of a deal. Really, I can go and paste like crazy the same function 84 times and run right down the line changing all the Question #'s for all the id's in the script. I already did it for ten of the questions. But then I stopped. Hey, why not exercise my brain? Right?!

    So after tossing around how I'd set up an xml document to use as an answer key, I realized I already had a database that I could use as the answer key. I could set the value of each radio button to: 'Yes' and 'No' Each question would have one radio button with 'Yes' and that one would be the correct answer.

    I just can't figure out how to get all the radio buttons for the entire page and when one of them is clicked, check the value for 'Yes' or 'No'. Of course, that is not all there is to it either because I would have to write to the table cell that corresponds to the group of buttons. I am sure there is some ingenious way of doing it. When I start to put it together in my head, I feel like I am getting close but then keep hitting a dead end that says: "No, you couldn't do it THAT way because of x,y, or z" ... If you catch my drift

    Ok, so here is the HTML again for ONE of the questions. Keep in mind that all 84 questions follow the same exact structure with only the question number changing for all of the id's:

    <table class='AnswerTable' id='Q1T' border='1'>
    <tr>
    <td><input type='radio' id='Q1A' name='MCQ1' value='No' onclick='CheckQ();' /></td>
    <td>A.</td>
    <td>30</td>
    </tr>
    <tr>
    <td><input type='radio' id='Q1B' name='MCQ1' value='Yes' onclick='CheckQ();' /></td>
    <td>B.</td>
    <td>35</td>
    </tr>
    <tr>
    <td><input type='radio' id='Q1C' name='MCQ1' value='No' onclick='CheckQ();' /></td>
    <td>C.</td>
    <td>32</td>
    </tr>
    <tr>
    <td><input type='radio' id='Q1D' name='MCQ1' value='No' onclick='CheckQ();' /></td>
    <td>D.</td>
    <td>40</td>
    </tr>
    <tr>
    <td class='AnswerCell' id='Answer1' colspan='3'></td>
    <tr>
    </table>

    Ok, now: onclick is set to: onclick='CheckQ();' because I was hoping to write only ONE Funciton instead of eighty four funcitons. Ok, so how would I do that?

    Well if I could get all of the radio buttons for the entire document...

    ... var docButtons = document.getElementsByTagName('input')

    And then say, if button.checked.value == 'Yes' then get the correct tablecell id that belongs to that button and do the appropriate innerHTML stuff that I already specified....

    hmmmmm or more like

    when any radio button is clicked, check it's own value for yes
    check it's parent element for the question number (ie: <table id='Q1T'> )

    function QuerryNum(qNum)
    {
    = get the parent of the radio button that was clicked and querry for the number that exists in the id.

    qNum = the number found in the id of the parent element
    }


    Therefore getElementById('Answer' + qNum)....

    IS WHAT I AM TRYING TO SAY, EVEN POSSIBLE?

    LOL

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Exclamation

    Quote Originally Posted by vb2java View Post
    ...
    Code:
    var questions = [
      ['What does 7x5 equal?',30,32,35,40,2],
      ['What does 5x9 equal?',40,42,45,54,2],
      ['What does 3x8 equal?',24,28,35,40,0],
      ['What does 4x7 equal?',24,28,35,40,1]
    ];
    ...
    Ok, so here is the HTML again for ONE of the questions. Keep in mind that all 84 questions follow the same exact structure with only the question number changing for all of the id's:
    Code:
    <table class='AnswerTable' id='Q1T' border='1'>
    <tr>
    <td><input type='radio' id='Q1A' name='MCQ1' value='No' onclick='CheckQ();' /></td>
    <td>A.</td>
    <td>30</td>
    </tr>
    <tr>
    <td><input type='radio' id='Q1B' name='MCQ1' value='Yes' onclick='CheckQ();' /></td>
    <td>B.</td>
    <td>35</td>
    </tr>
    <tr>
    <td><input type='radio' id='Q1C' name='MCQ1' value='No' onclick='CheckQ();' /></td>
    <td>C.</td>
    <td>32</td>
    </tr>
    <tr>
    <td><input type='radio' id='Q1D' name='MCQ1' value='No' onclick='CheckQ();' /></td>
    <td>D.</td>
    <td>40</td>
    </tr>
    <tr>
    <td class='AnswerCell' id='Answer1' colspan='3'></td>
    <tr>
    </table>
    ...

    Therefore getElementById('Answer' + qNum)....

    IS WHAT I AM TRYING TO SAY, EVEN POSSIBLE?

    LOL
    What you are asking is definitely possible, but I don't understand your rational.

    You have 25 lines of code to enter for one question with your code.
    I have 5 lines of code for 5 questions.
    If you multiply by 84 questions, you will be typing a lot longer with your code.

    If you ever wanted to randomize the presentation of the 84 questions, that would take an additional line or two of code.
    If you did that with your hard-coded solution, it would require a BUNCH of copy/paste operations.

    Note also, my solution does not require the use of the ID settings for each question. Again less typing!

    The <table> display can replace the <ul> and <li> display, but again why?
    What is so special about that display style? The alerts and colors can be added to either display.
    Note also, the <li> display will look cleaner if you use the code on a tablet computer in the future.

    Final note: The "getRBtnName(GrpName)" function can be modified to return the status of the value setting by doing this:
    Code:
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      return str;
    }

  6. #6
    Join Date
    Sep 2011
    Posts
    64
    JMRKER,

    My rationale is that I've ALREADY typed it all out in the HTML. The questions are actually word problems with lengthly A, B, C, and D options. AND, the tables are already laid out. Perhaps, I should have used lists. I don't know why using lists never really grapped me. It wasn't until I had already practiced using tables a great deal, that I read somewhere about downsides of using tables. It's just what I've used.

    I keep trying a test to try and alert the rButton.Value. I haven't yet gotten it to work:

    function chkValue()
    {
    var rButtons=document.getElementsByTagName("input")
    var chkdButton;
    var str = '';
    for (var i=0; i<docButtons.length; i++) {if (docButtons[i].checked == true) { docButtons[i].checked=chkdButton} }

    alert(chkdButton.Value)
    }

    Error: Unable to get value of the property 'Value': object is null or undefined

    Wow, I just went back and did it again via:

    var docButton=document.getElementById('Q1A')
    alert(docButton.Value)

    The alert says, "undefined" ! I've checked and rechecked my HTML.
    ... id='Q1A' value='NO'

    Why does the alert say 'undefined' instead of 'NO' ???

  7. #7
    Join Date
    Nov 2010
    Posts
    1,036
    maybe because Value is not the same as value?

  8. #8
    Join Date
    Sep 2011
    Posts
    64
    xelawho,

    yup, I am feeling like an idiot right about now

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Lightbulb More flexible, alternate, solution

    You could use JS to write the array for you...
    Code:
    <html>
    <head>
    <title> Create Multiply Array </title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=259488
    
    var questions = [];
    function createQuestions() {
      var info = '';
      for (var i=0; i<=10; i++) {
        for (var j=0; j<=10; j++) {
          info = '  ["What does '+i+'x'+j+' equal?",'+createAnswers(i,j)+'],';
          questions.push(info);
        }
      }
    }
    function createAnswers(x,y) {
      var tx, ty, tans;
      var tarr = [];
      tarr.push(x*y);
      for (var i=0; i<3; i++) {
       do {
        tx = Math.floor(Math.random()*10);
        while (tx == tarr[0]) { tx = Math.floor(Math.random()*10); }
        ty = Math.floor(Math.random()*10);
        while (ty == tarr[0]) { ty = Math.floor(Math.random()*10); }
        tans = tx * ty;
       } while (tarr.join(',').indexOf(tans) != -1);
       tarr.push(tans);
      }
      rnd = Math.floor(Math.random()*4);
      tx = tarr[rnd];
      ty = tarr[0];
      tarr[0] = tx;
      tarr[rnd] = ty;
      tarr.push(rnd);
      return tarr.join(',');
    }
    window.onload = function () {
      createQuestions();
      document.getElementById('TArea').value = questions.join('\n');
    }
    
    </script>
    </head>
    <body>
    <textarea id="TArea" rows=25 cols=40></textarea>
    <script type="text/javascript">
    /* sample array format
    var questions = [
      ['What does 7x5 equal?',30,32,35,40,2],
      ['What does 5x9 equal?',40,42,45,54,2],
      ['What does 3x8 equal?',24,28,35,40,0],
      ['What does 4x7 equal?',24,28,35,40,1]
    ];
    */
    </script>
    </body>
    </html>
    If you don't want to use zero as a possible multiplican, then change above to
    Code:
      for (var i=1; i<=10; i++) {
        for (var j=1; j<=10; j++) {
    If you want different multiplican ranges, then change above to something like ...
    Code:
      for (var i=100; i<=110; i++) {
        for (var j=200; j<=210; j++) {
    Then copy the results into the question array of the display program.
    Code:
    <html>
    <head>
    <title> Multiply Quiz </title>
    <style type='text/css'>
    li { list-style-type: lower-alpha }
    </style>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=259488
    
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
      return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
    //  return str;
    } 
    
    function checkAnswers() {
      var total = 0;
      var QN = '';
      var Qerr = [];
      var Qmax = maxQuestions;
      for (var i=0; i<Qmax; i++) {
        QN = 'Q'+i;
        if (getRBtnName(QN) == questions[i][5]) { total++; }
        else { Qerr.push(i+1); }
      }
      alert('Score: '+total+' of '+Qmax+'\nMissed questions: '+Qerr);
    }
    </script>
    </head>
    <body>
    <script type="text/javascript">
    var questions = [
      ["What does 0x0 equal?",48,56,12,0,3],
      ["What does 0x1 equal?",35,21,0,7,2],
      ["What does 0x2 equal?",0,15,4,12,0],
      ["What does 0x3 equal?",4,30,0,8,2],
      ["What does 0x4 equal?",0,10,7,4,0],
      ["What does 0x5 equal?",0,48,24,12,0],
      ["What does 0x6 equal?",15,20,0,8,2],
      ["What does 0x7 equal?",24,8,0,56,2],
      ["What does 0x8 equal?",0,20,28,32,0],
      ["What does 0x9 equal?",0,5,24,54,0],
      ["What does 0x10 equal?",36,24,54,0,3],
      ["What does 1x0 equal?",27,25,0,49,2],
      ["What does 1x1 equal?",1,20,18,16,0],
      ["What does 1x2 equal?",0,2,8,36,1],
      ["What does 1x3 equal?",6,3,4,0,1],
      ["What does 1x4 equal?",4,54,1,0,0],
      ["What does 1x5 equal?",7,5,0,72,1],
      ["What does 1x6 equal?",20,24,6,10,2],
      ["What does 1x7 equal?",4,7,0,20,1],
      ["What does 1x8 equal?",8,14,0,9,0],
      ["What does 1x9 equal?",0,9,4,28,1],
      ["What does 1x10 equal?",27,24,10,40,2],
      ["What does 2x0 equal?",36,40,0,10,2],
      ["What does 2x1 equal?",35,0,72,2,3],
      ["What does 2x2 equal?",4,0,10,24,0],
      ["What does 2x3 equal?",6,3,4,9,0],
      ["What does 2x4 equal?",49,8,18,2,1],
      ["What does 2x5 equal?",24,81,10,5,2],
      ["What does 2x6 equal?",20,40,36,12,3],
      ["What does 2x7 equal?",6,0,14,24,2],
      ["What does 2x8 equal?",63,0,20,16,3],
      ["What does 2x9 equal?",16,0,6,18,3],
      ["What does 2x10 equal?",36,20,28,4,1],
      ["What does 3x0 equal?",0,42,20,32,0],
      ["What does 3x1 equal?",8,3,54,14,1],
      ["What does 3x2 equal?",4,6,72,63,1],
      ["What does 3x3 equal?",9,0,10,4,0],
      ["What does 3x4 equal?",16,36,12,15,2],
      ["What does 3x5 equal?",15,18,35,54,0],
      ["What does 3x6 equal?",0,18,35,72,1],
      ["What does 3x7 equal?",0,21,30,54,1],
      ["What does 3x8 equal?",18,6,24,15,2],
      ["What does 3x9 equal?",35,0,27,20,2],
      ["What does 3x10 equal?",40,27,30,1,2],
      ["What does 4x0 equal?",54,6,0,18,2],
      ["What does 4x1 equal?",18,0,2,4,3],
      ["What does 4x2 equal?",5,7,18,8,3],
      ["What does 4x3 equal?",12,54,42,32,0],
      ["What does 4x4 equal?",12,16,18,7,1],
      ["What does 4x5 equal?",56,21,20,24,2],
      ["What does 4x6 equal?",14,0,24,25,2],
      ["What does 4x7 equal?",0,18,28,56,2],
      ["What does 4x8 equal?",0,7,9,32,3],
      ["What does 4x9 equal?",0,5,16,36,3],
      ["What does 4x10 equal?",40,36,14,5,0],
      ["What does 5x0 equal?",0,10,72,21,0],
      ["What does 5x1 equal?",0,6,5,14,2],
      ["What does 5x2 equal?",63,16,10,14,2],
      ["What does 5x3 equal?",15,28,20,81,0],
      ["What does 5x4 equal?",18,20,25,63,1],
      ["What does 5x5 equal?",16,7,6,25,3],
      ["What does 5x6 equal?",18,7,30,12,2],
      ["What does 5x7 equal?",40,35,6,45,1],
      ["What does 5x8 equal?",40,15,81,16,0],
      ["What does 5x9 equal?",20,18,72,45,3],
      ["What does 5x10 equal?",8,49,45,50,3],
      ["What does 6x0 equal?",7,0,24,30,1],
      ["What does 6x1 equal?",6,14,8,0,0],
      ["What does 6x2 equal?",63,12,32,0,1],
      ["What does 6x3 equal?",18,81,6,16,0],
      ["What does 6x4 equal?",18,0,15,24,3],
      ["What does 6x5 equal?",36,9,30,10,2],
      ["What does 6x6 equal?",16,0,36,12,2],
      ["What does 6x7 equal?",0,42,36,56,1],
      ["What does 6x8 equal?",48,45,63,24,0],
      ["What does 6x9 equal?",2,8,0,54,3],
      ["What does 6x10 equal?",60,28,20,18,0],
      ["What does 7x0 equal?",0,3,5,12,0],
      ["What does 7x1 equal?",5,3,10,7,3],
      ["What does 7x2 equal?",14,0,56,30,0],
      ["What does 7x3 equal?",28,27,35,21,3],
      ["What does 7x4 equal?",0,9,35,28,3],
      ["What does 7x5 equal?",35,56,0,1,0],
      ["What does 7x6 equal?",42,56,30,36,0],
      ["What does 7x7 equal?",49,0,54,12,0],
      ["What does 7x8 equal?",56,24,0,36,0],
      ["What does 7x9 equal?",35,0,24,63,3],
      ["What does 7x10 equal?",48,70,1,21,1],
      ["What does 8x0 equal?",27,2,18,0,3],
      ["What does 8x1 equal?",8,49,18,15,0],
      ["What does 8x2 equal?",16,12,0,24,0],
      ["What does 8x3 equal?",5,24,0,64,1],
      ["What does 8x4 equal?",4,16,20,32,3],
      ["What does 8x5 equal?",2,3,40,14,2],
      ["What does 8x6 equal?",42,36,18,48,3],
      ["What does 8x7 equal?",0,8,21,56,3],
      ["What does 8x8 equal?",64,14,12,0,0],
      ["What does 8x9 equal?",40,72,18,63,1],
      ["What does 8x10 equal?",80,18,21,5,0],
      ["What does 9x0 equal?",36,0,64,8,1],
      ["What does 9x1 equal?",0,16,35,9,3],
      ["What does 9x2 equal?",24,3,18,14,2],
      ["What does 9x3 equal?",27,0,4,12,0],
      ["What does 9x4 equal?",16,0,48,36,3],
      ["What does 9x5 equal?",12,16,45,24,2],
      ["What does 9x6 equal?",54,27,81,56,0],
      ["What does 9x7 equal?",63,64,24,72,0],
      ["What does 9x8 equal?",25,72,0,64,1],
      ["What does 9x9 equal?",40,0,81,18,2],
      ["What does 9x10 equal?",14,40,81,90,3],
      ["What does 10x0 equal?",72,15,8,0,3],
      ["What does 10x1 equal?",8,10,40,64,1],
      ["What does 10x2 equal?",20,16,56,27,0],
      ["What does 10x3 equal?",16,30,2,10,1],
      ["What does 10x4 equal?",40,18,16,3,0],
      ["What does 10x5 equal?",49,32,50,16,2],
      ["What does 10x6 equal?",60,8,64,48,0],
      ["What does 10x7 equal?",70,5,30,12,0],
      ["What does 10x8 equal?",80,10,64,56,0],
      ["What does 10x9 equal?",36,16,54,90,3],
      ["What does 10x10 equal?",16,100,14,30,1]  // No comma after final entry
    ];
    function shuffle() {
      return (Math.round(Math.random())-0.5);
    }
    
    questions = questions.sort(shuffle);
    
    var maxQuestions = 20;
    var str = '';
    for (var i=0; i<maxQuestions; i++) {
      str += 'Question #'+(i+1)+': '+questions[i][0];
      str += "<ol>";
      str += "<li><input type='radio' name='Q"+i+"' />"+questions[i][1]+"</li>";
      str += "<li><input type='radio' name='Q"+i+"' />"+questions[i][2]+"</li>";
      str += "<li><input type='radio' name='Q"+i+"' />"+questions[i][3]+"</li>";
      str += "<li><input type='radio' name='Q"+i+"' />"+questions[i][4]+"</li>";
      str += "</ol>";
    }
    document.write(str);
    </script>
    <button onclick="checkAnswers()">Check Answers</button>
    </body>
    </html>
    Change the 'maxQuestions' value to the number you desire to display.
    Want a different test, run it again as it creates a new display each time. See: shuffle() function.
    Alter the checkAnswers function for a different display that does not use the alert for more flexibility.
    Add some CSS to make it alter colors if desired.

    If you don't get set in your ways, you can plan ahead to allow more flexibility with the results.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles