www.webdeveloper.com
Results 1 to 11 of 11

Thread: How to make a javascript quiz to choose 10 random questions from 100 questions?

Hybrid View

  1. #1
    Join Date
    Nov 2013
    Posts
    15

    How to make a javascript quiz to choose 10 random questions from 100 questions?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script LANGUAGE="JavaScript">
    function scoreme()
    {
    <!--
     
    var total=10                
    var correct=total;         
     
     sa01 = document.FXY1.NA01.value.toUpperCase(); sb01 = document.FXY1.NB01.value.toUpperCase();
     
     if(sa01!=sb01) { document.FXY1.NB01.value="INCORRECT!"; correct=correct-1;}
     
     sa02 = document.FXY1.NA02.value.toUpperCase(); sb02 = document.FXY1.NB02.value.toUpperCase();
     if(sa02!=sb02) { document.FXY1.NB02.value="INCORRECT!"; correct=correct-1;}
     
     sa03 = document.FXY1.NA03.value.toUpperCase(); sb03 = document.FXY1.NB03.value.toUpperCase();
     if(sa03!=sb03) { document.FXY1.NB03.value="INCORRECT!"; correct=correct-1;}
     
     sa04 = document.FXY1.NA04.value.toUpperCase(); sb04 = document.FXY1.NB04.value.toUpperCase();
     if(sa04!=sb04) { document.FXY1.NB04.value="INCORRECT!"; correct=correct-1;}
     
     sa05 = document.FXY1.NA05.value.toUpperCase(); sb05 = document.FXY1.NB05.value.toUpperCase();
     if(sa05!=sb05) { document.FXY1.NB05.value="INCORRECT!"; correct=correct-1;}
     
     sa06 = document.FXY1.NA06.value.toUpperCase(); sb06 = document.FXY1.NB06.value.toUpperCase();
     if(sa06!=sb06) { document.FXY1.NB06.value="INCORRECT!"; correct=correct-1;}
     
     sa07 = document.FXY1.NA07.value.toUpperCase(); sb07 = document.FXY1.NB07.value.toUpperCase();
     if(sa07!=sb07) { document.FXY1.NB07.value="INCORRECT!"; correct=correct-1;}
     
     sa08 = document.FXY1.NA08.value.toUpperCase(); sb08 = document.FXY1.NB08.value.toUpperCase();
     if(sa08!=sb08) { document.FXY1.NB08.value="INCORRECT!"; correct=correct-1;}
     
     sa09 = document.FXY1.NA09.value.toUpperCase(); sb09 = document.FXY1.NB09.value.toUpperCase();
     if(sa09!=sb09) { document.FXY1.NB09.value="INCORRECT!"; correct=correct-1;}
     
     sa10 = document.FXY1.NA10.value.toUpperCase(); sb10 = document.FXY1.NB10.value.toUpperCase();
     if(sa10!=sb10) { document.FXY1.NB10.value="INCORRECT!"; correct=correct-1;}
     
     document.FXY1.ovrXX.value="You got " + correct + " out of " + total + " correct.";
     
    -->
    }
    </script>
    
    </head>
    
    <body>
    
    <FONT face=arial>
     
    
    <BR><BR><hr>
    <FORM name=FXY1>
     
    Question 1
    <INPUT value="answer1" name=NA01 type=hidden><INPUT class=ipxa value="" name=NB01 type=text size=15>
    <BR><BR>
    
    Question 2
    
    <INPUT value="answer2" name=NA02 type=hidden><INPUT class=ipxa value="" name=NB02 type=text size=15>
     <BR><BR>
    
    Question 3
     
    <INPUT value="answer3" name=NA03 type=hidden><INPUT class=ipxa value="" name=NB03 type=text size=15>
     <BR><BR>
    
    Question 4
     
    <INPUT value="answer4" name=NA04 type=hidden><INPUT class=ipxa value="" name=NB04 type=text size=15>
    <BR><BR>
    
    Question 5
    
    <INPUT value="answer5" name=NA05 type=hidden><INPUT class=ipxa value="" name=NB05 type=text size=15>
     <BR><BR>
    
    Question 6
     
    <INPUT value="answer6" name=NA06 type=hidden><INPUT class=ipxa value="" name=NB06 type=text size=15>
     <BR><BR>
    
    Question 7
     
    <INPUT value="answer7" name=NA07 type=hidden><INPUT class=ipxa value="" name=NB07 type=text size=15>,
     <BR><BR>
    
    Question 8
     
    <INPUT value="answer8" name=NA08 type=hidden><INPUT class=ipxa value="" name=NB08 type=text size=15>
     <BR><BR>
    
    Question 9
     
    <INPUT value="answer9" name=NA09 type=hidden><INPUT class=ipxa value="" name=NB09 type=text size=15>
    <BR><BR>
    
    Question 10
    
    <INPUT value="answer10" name=NA10 type=hidden><INPUT class=ipxa value="" name=NB10 type=text size=15>.
      
    <BR><BR>
     
    <INPUT value="CHECK ALL" name=check type=button onclick=scoreme()> <INPUT class=ipxx value name=ovrXX type=text size=28>
    </FORM>
     
    <br></font>
    
    </body>
    </html>

  2. #2
    Join Date
    Nov 2013
    Posts
    15
    This quiz have 10 question and are displayed 10 questions.
    I want to make quiz with 100+ question and randomly display 10 question.

    Thank you!

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    Are all the questions of the style "fill-in-the-blank"? The user can see the correct response currently with just a right-click and "view source" action.

    What are the correct responses for any of the questions? As it is, you have just hard-coded the questions and answers into the HTML.
    How do you expect to have the 10 questions and answers formatted when they are chosen from a group of 100?

    Will any of the questions be multiple-choice or matching? Will any have images associated with them?

    How you design your script will depend upon some of these answers.
    Have you searched this forum for many examples of how a quiz can be generated with random questions and checked against correct answers?
    Last edited by JMRKER; 11-14-2013 at 01:52 PM.

  4. #4
    Join Date
    Nov 2013
    Posts
    15
    Ty for trying to help me.

    1. yes
    2. i type them in <INPUT value="answer1" name=NA01 type=hidden><INPUT class=ipxa value="" name=NB01 type=text size=15>
    3. no

    this is the sample of the code i write

    http://www.saiubesti.ro/download/quizenglish.html

    I whant to add more questions and answers and when i start the test to randomize only 10 question.

  5. #5
    Join Date
    Nov 2013
    Posts
    15
    I am a beginer in javascript so i want to make things as simple is posible. I dont care if is posible to "view source" because i use it in self education purpose.

    I want to have 10 random "fill-in-the-blank" questions (they are chosen randomly from a group of 100) when i press "Start" button.
    Also like the example above i need a score button.

    That is all i need.

    I tried many software but it's display only one question after another.

    Thank you for help!

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Wink

    This is only a template of what kind of questions/responses you can create.
    Add more as needed. It currently is 25 questions with 5 randomly displayed at a time.
    It is my best guess as to your needs as you seem to not want to provide any examples.
    It can be contracted or expanded to pairs above and below 100.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    <script type="text/javascript">
    // For:
    // http://www.webdeveloper.com/forum/showthread.php?286477
    // -How-to-make-a-javascript-quiz-to-choose-10-random-questions-from-100-questions&p=1296827#post1296827
    
    var QuesResp = [
      ['Dog','Cat'],     ['King','Queen'],  ['TV','Radio'],     ['Flashlight','Candle'], ['Book','Tablet'],
      ['Desk','Chair'],  ['Guitar','Banjo'],['Jester','Clown'], ['Coffee','Tea'],        ['Coat','Pants'],
      ['Clock','Watch'], ['Rain','Snow'],   ['Rats','Mice'],    ['Tie','Scarf'],         ['Hat','Cap'],
      ['Loafers','Wingtips'],  ['Phamphlet','Magazine'],        ['Cup','Pint'],          ['Gallon','Liter'],  ['Keyboard','Stylus'],
      ['Chair','Table'], ['Pen','Pencil'],  ['Box','Circle'],   ['Triangle','Rectangle'],['Gun','Knife'] // no comma after last entry
    ];
    </script>
    
    </head>
    <body>
    <div id="QuestionsResponses"></div>
    
    <script type="text/javascript">
    var maxQues = 5;
    var QRpointers = [];
    
    function randOrd() { return (Math.round(Math.random())-0.5); } // quick and dirty randomizer (not the best)
    
    window.onload = function() {
      for (var i=0; i<QuesResp.length; i++) { QRpointers.push(i); }
      QRpointers.sort(randOrd);                                    // better randomizers are available
    
      var str = '<h1>Enter common associations</h1>';
      for (var Q=0; Q<maxQues; Q++) {
        str += 'Question #'+(Q+1)+'<br>';
        str += QuesResp[QRpointers[Q]][0];
    //    str += ' <input type="text" id="R'+Q+'" value="' +QuesResp[QRpointers[Q]][1]+ '"><p>';
        str += ' <input type="text" id="R'+Q+'"><p>';
      }
      str += '<INPUT value="CHECK ALL" type="button" onclick="scoreme()">';
      str += '<INPUT id="score" type="text" size="8">';
      document.getElementById('QuestionsResponses').innerHTML = str;
    }
    function scoreme() {
      var sum = 0;  var total=maxQues;
      var corr, resp;
      var sel = document.getElementById('QuestionsResponses').getElementsByTagName('input');  
      for (var i=0; i<sel.length-1; i++) {
        corr = QuesResp[QRpointers[i]][1];
        resp = sel[i].value;
        if (resp != '') {
          if ( (corr.toLowerCase().indexOf(resp.toLowerCase()) ) != -1) { sum++; }  // for part match
    //      if (corr.toLowerCase() == resp.toLowerCase()) { sum++; }                  // for EXACT match
    //      if (corr == resp) { sum++; }                                              // for EXACT CASE match
        }
      }
      document.getElementById('score').value = ((sum/maxQues)*100).toFixed(0)+'%';
    }
    </script>
    
    </body>
    </html>
    Note 1: There are better ways to randomize. This one is for example only.
    Note 2: You will need to add your own logic to display the correct answer if user enters incorrectly.
    This version just gives the percentage of correct responses.
    Note 3: Kind of matches for correct response can be altered. (see comments in code)
    Note 4: I see this as only a form of "flash-card" quiz presentation. Would not use for a real grade.

  7. #7
    Join Date
    Nov 2013
    Posts
    15
    I have this code, but i have some questions who need math formula (fractions) and i cant add them.

    Code:
    <html>
    <head>
       <style>
          .corect {color:green;}
          .incorect {color:red;}
       </style>
       <script src="http://code.jquery.com/jquery-latest.min.js"
            type="text/javascript"></script>
       <script>
          function shuffle(array) {
             var currentIndex = array.length, temporaryValue, randomIndex;
    
             // While there remain elements to shuffle...
             while (0 !== currentIndex) {
                // Pick a remaining element...
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;
    
                // And swap it with the current element.
                temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
             }
    
             return array;
          }
          
          var array_intrebari = new Array();
          array_intrebari [0] = {question : "Number 1" , answer: "1"};
          array_intrebari [1] = {question : "Number 2" , answer: "2"};
          array_intrebari [2] = {question : "Number 3" , answer: "3"};
          array_intrebari [3] = {question : "Number 4" , answer: "4"};
          array_intrebari [4] = {question : "Number 5" , answer: "5"};
          array_intrebari [5] = {question : "Number 6" , answer: "6"};
          array_intrebari [6] = {question : "Number 7" , answer: "7"};
          array_intrebari [7] = {question : "Number 8" , answer: "8"};
          array_intrebari [8] = {question : "Number 9" , answer: "9"};
          array_intrebari [9] = {question : "Number 10" , answer: "10"};
          array_intrebari [10] = {question : "Number 11" , answer: "11"};
          array_intrebari [11] = {question : "Number 12" , answer: "12"};
          array_intrebari [12] = {question : "Number 13" , answer: "13"};
          array_intrebari [13] = {question : "Number 14" , answer: "14"};
          array_intrebari [14] = {question : "Number 15" , answer: "15"};
          
          
          //console.log(array_intrebari);
          array_intrebari = shuffle(array_intrebari);
          $(document).ready(function(){
             for (var i = 0 ; i <=10; i++)
                $("#quiztable").append("<tr><td>"+array_intrebari[i]['question']+"</td><td><input type='text' class='answer' /><span class='label'></span></td></tr>");
                
             $("#quiztable").append("<tr><td></td><td><input type='button' id='checkAnswers' value='Verifica!' /></td></tr>");
          
             $("#checkAnswers").click(function(){
                i = 0;
                $(".answer").each(function(){
                   if ($(this).val() == array_intrebari[i]['answer'])
                      $(this).closest("tr").find("span").removeClass("incorect").addClass("corect").html("Corect!");
                   else 
                      $(this).closest("tr").find("span").removeClass("corect").addClass("incorect").html("Incorect!");
                   i++;
                });
             });
          
          });
          
          
          
       </script>
    </head>
    <body>
       <div id="quiz">
          <table id="quiztable">
          </table>
       </div>
    </body>
    </html>

  8. #8
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    This is another randomizer if you find it useful... Store questions in an array and use randomizer to pick up (n) number of random questions from array.

    Code:
    function getNumbers(n,range) { // n = number of unique numbers from specified range
    		var nums = [], tmpNum;
    				
    		tmpNum = Math.floor((Math.random() * range) +1);
    				
    		for (var i = 0; i < n; i++) {
    			if (i > 0) {
    				if (nums.indexOf(tmpNum) > -1) {
    					while (nums.indexOf(tmpNum) > -1) {
    						tmpNum = Math.floor((Math.random() * range) +1);
    					}
    				}
    			}
    			nums[i] = tmpNum;
    		}
    		return nums;
    }
    Last edited by tech_soul8; 11-15-2013 at 03:11 AM.

  9. #9
    Join Date
    Nov 2013
    Posts
    15
    I think i should put images of questions instead of text.

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    Quote Originally Posted by alex05ok View Post
    I think i should put images of questions instead of text.
    This and post #7 are the reasons I asked all those questions in post #3!

    You should think about and design for the requirements before you start any coding.

  11. #11
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    i always wonder who takes all these quizes?!

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