# Generating random questions in Javascript



## owenb1 (Oct 17, 2002)

Hi guys/girls

I hope somebody can help me with this...

I am trying to create a website to help with my kids revision on various subjects at school.

On my website I want to create a quiz that generates 10 random questions from a bank of 20. Once the quiz is completed I would like it to display the questions along with whether they got the answer correct and where they got it wrong , display the correct answer and a score out of 10.

Is this possible? I allready have the questions but unsure of the correct code for the above.


----------



## bpmurray (Jun 3, 2003)

In short, yes, it's possible and reasonably simple. You have to select the question in the range 0-19 using Math.round(20 * Math.random()); To prevent showing the same question multiple times, you'll need an array that indicates if the question has been displayed.


----------



## owenb1 (Oct 17, 2002)

Thanks for the quick response

don't suppose you could give an example with just 1 question of how i woulld set it out?


----------



## bpmurray (Jun 3, 2003)

Try this ....


```
function DisplayQuestions() {
   var Questions = new Array(20);
   Questions[0] = "Question #1";
   Questions[1] = "Question #2";
   Questions[2] = "Question #3";
   Questions[3] = "Question #4";
   Questions[4] = "Question #5";
   Questions[5] = "Question #6";
   Questions[6] = "Question #7";
   Questions[7] = "Question #8";
   Questions[8] = "Question #9";
   Questions[9] = "Question #10";
   Questions[10] = "Question #11";
   Questions[11] = "Question #12";
   Questions[12] = "Question #13";
   Questions[13] = "Question #14";
   Questions[14] = "Question #15";
   Questions[15] = "Question #16";
   Questions[16] = "Question #17";
   Questions[17] = "Question #18";
   Questions[18] = "Question #19";
   Questions[19] = "Question #20";
   var QCount = 0;

   while (QCount < 20) {
      QNumber = Math.round(20 * Math.random());
      if (null != Questions[QNumber]) {
	 alert("Question number " + QCount + " = " + Questions[QNumber]);
	 QCount++;
	 Questions[QNumber] = null; // Dump this question - it's been displayed
      }
   }
}
```


----------



## owenb1 (Oct 17, 2002)

Sorry for being a pain and thanks for your help.

So far i have the following except obviously i have only 10 questions but have the four multiple choice answers.

*QUESTION #1: What is the capital of Norway?*

-- Choose an answer --
Bergen
Trondheim
Oslo
Haugesund

*QUESTION #2: What is the capital of Hungary?*

-- Choose an answer --
Warsaw
Budapest
Bucharest
Vienna

*QUESTION #3: What is the capital of Cyprus?*

-- Choose an answer --
Crete
Nicosia
Athens
Saloniki

*QUESTION #4: What is the capital of Libya?*

-- Choose an answer --
Tehran
Cairo
Tripoli
Baghdad

*QUESTION #5: What is the capital of Kenya?*

-- Choose an answer --
Nairobi
Mombasa
Zanzibar
Kampala

*QUESTION #6: What is the capital of Nigeria?*

-- Choose an answer --
Laos
Harare
Douala
Lagos

*QUESTION #7: What is the capital of Columbia?*

-- Choose an answer --
Bogota
Cali
Medellin
Panama

*QUESTION #8: What is the capital of Barbados?*

-- Choose an answer --
Havana
Bridgetown
Kingston
Montego Bay

*QUESTION #9 What is the capital of Australia?*

-- Choose an answer --
Sydney
Brisbane
Melbourne
Canberra

*QUESTION #10: What is the capital of Pakistan*

-- Choose an answer --
Kabul
Karachi
Islamabad
New Delhi

You got out of 
correct.

Your Score: %


----------



## owenb1 (Oct 17, 2002)

What I'm asking is where do i put the random statement and do i need to remove some of my code?


----------



## bpmurray (Jun 3, 2003)

Try this ....


```
<html><head>
<script type="text/JavaScript">
function Questions(divname) {
   this.QText   = new Array(20); // The questions
   this.QAnswer = new Array(20); // The correct answers
   this.QChoice = new Array(80); // The possible multi-choice values
   this.thisAns = new Array(10); // The answers for this page
   this.Answer  = new Array(10); // The user's answers
   this.anchor = document.getElementById(divname);

   // OK, set the questions
   this.QText[0] = "What is the capital of Norway";
   this.QText[1] = "What is the capital of Hungary";
   this.QText[2] = "What is the capital of Cyprus";
   this.QText[3] = "What is the capital of Libya";
   this.QText[4] = "What is the capital of Kenya";
   this.QText[5] = "What is the capital of Nigeria";
   this.QText[6] = "What is the capital of Columbia";
   this.QText[7] = "What is the capital of Barbados";
   this.QText[8] = "What is the capital of Australia";
   this.QText[9] = "What is the capital of Pakistan";
   this.QText[10] = "What is the capital of Spain";
   this.QText[11] = "What is the capital of England";
   this.QText[12] = "What is the capital of Ireland";
   this.QText[13] = "What is the capital of Sweden";
   this.QText[14] = "What is the capital of Denmark";
   this.QText[15] = "What is the capital of Poland";
   this.QText[16] = "What is the capital of Italy";
   this.QText[17] = "What is the capital of India";
   this.QText[18] = "What is the capital of Canada";
   this.QText[19] = "What is the capital of Portugal";

   // Now, set the possible choices
   this.QChoice[0] = "Bergen";
   this.QChoice[1] = "Trondheim";
   this.QChoice[2] = "Oslo";
   this.QChoice[3] = "Haugesund";
   this.QChoice[4] = "Warsaw";
   this.QChoice[5] = "Budapest";
   this.QChoice[6] = "Bucharest";
   this.QChoice[7] = "Vienna";
   this.QChoice[8] = "Crete";
   this.QChoice[9] = "Nicosia";
   this.QChoice[10] = "Athens";
   this.QChoice[11] = "Saloniki";
   this.QChoice[12] = "Tehran";
   this.QChoice[13] = "Cairo";
   this.QChoice[14] = "Tripoli";
   this.QChoice[15] = "Baghdad";
   this.QChoice[16] = "Nairobi";
   this.QChoice[17] = "Mombasa";
   this.QChoice[18] = "Zanzibar";
   this.QChoice[19] = "Kampala";
   this.QChoice[20] = "Laos";
   this.QChoice[21] = "Harare";
   this.QChoice[22] = "Douala";
   this.QChoice[23] = "Lagos";
   this.QChoice[24] = "Bogota";
   this.QChoice[25] = "Cali";
   this.QChoice[26] = "Medellin";
   this.QChoice[27] = "Panama";
   this.QChoice[28] = "Havana";
   this.QChoice[29] = "Bridgetown";
   this.QChoice[30] = "Kingston";
   this.QChoice[31] = "Montego Bay";
   this.QChoice[32] = "Sydney";
   this.QChoice[33] = "Brisbane";
   this.QChoice[34] = "Melbourne";
   this.QChoice[35] = "Canberra";
   this.QChoice[36] = "Kabul";
   this.QChoice[37] = "Karachi";
   this.QChoice[38] = "Islamabad";
   this.QChoice[39] = "New Delhi";
   this.QChoice[40] = "Bergen";
   this.QChoice[41] = "Madrid";
   this.QChoice[42] = "Oslo";
   this.QChoice[43] = "Haugesund";
   this.QChoice[44] = "London";
   this.QChoice[45] = "Budapest";
   this.QChoice[46] = "Bucharest";
   this.QChoice[47] = "Vienna";
   this.QChoice[48] = "Crete";
   this.QChoice[49] = "Dublin";
   this.QChoice[50] = "Athens";
   this.QChoice[51] = "Saloniki";
   this.QChoice[52] = "Tehran";
   this.QChoice[53] = "Stockholm";
   this.QChoice[54] = "Tripoli";
   this.QChoice[55] = "Baghdad";
   this.QChoice[56] = "Nairobi";
   this.QChoice[57] = "Mombasa";
   this.QChoice[58] = "Copenhagen";
   this.QChoice[59] = "Kampala";
   this.QChoice[60] = "Warsaw";
   this.QChoice[61] = "Harare";
   this.QChoice[62] = "Douala";
   this.QChoice[63] = "Lagos";
   this.QChoice[64] = "Bogota";
   this.QChoice[65] = "Cali";
   this.QChoice[66] = "Medellin";
   this.QChoice[67] = "Rome";
   this.QChoice[68] = "New Delhi";
   this.QChoice[69] = "Bridgetown";
   this.QChoice[70] = "Kingston";
   this.QChoice[71] = "Montego Bay";
   this.QChoice[72] = "Sydney";
   this.QChoice[73] = "Brisbane";
   this.QChoice[74] = "Ottawa";
   this.QChoice[75] = "Canberra";
   this.QChoice[76] = "Kabul";
   this.QChoice[77] = "Karachi";
   this.QChoice[78] = "Islamabad";
   this.QChoice[79] = "Lisbon";

   // Set the correct answers
   this.QAnswer[0] = 3;
   this.QAnswer[1] = 2;
   this.QAnswer[2] = 2;
   this.QAnswer[3] = 3;
   this.QAnswer[4] = 1;
   this.QAnswer[5] = 4;
   this.QAnswer[6] = 1;
   this.QAnswer[7] = 2;
   this.QAnswer[8] = 4;
   this.QAnswer[9] = 3;
   this.QAnswer[10] = 3; // these answers are wrong - check them yourself!
   this.QAnswer[11] = 2;
   this.QAnswer[12] = 2;
   this.QAnswer[13] = 3;
   this.QAnswer[14] = 1;
   this.QAnswer[15] = 4;
   this.QAnswer[16] = 1;
   this.QAnswer[17] = 2;
   this.QAnswer[18] = 4;
   this.QAnswer[19] = 3;

}

Questions.prototype.generateQuiz = function() {
   var QCount = 0;
   var QNumber = 0;

   // Initialise the "questions available" table
   var QUsed = new Array(20);
   for (QCount=0; QCount<20; QCount++) {
      QUsed[QCount] = 1; // Marked as available
   }

   // Delete any existing questions
   //this.nukeExistingQuiz();
   this.anchor.innerHTML = "";

   var HTMLBlob = "<table>";

   // Build up the questions
   for (QCount=0; QCount<10; ) {
      QNumber = Math.floor(20 * Math.random());
      if (1 == QUsed[QNumber]) { // Still available?
	 HTMLBlob += this.AddQuestion(QNumber, QCount);
	 QCount++;
         QUsed[QNumber] = 0; // Marked as unavailable
      }
   }
   HTMLBlob += "</table>";
   this.anchor.innerHTML = HTMLBlob;
}

// This removes any existing quiz on the page
Questions.prototype.nukeExistingQuiz = function() {
   if (null != this.anchor && null != this.anchor.childCount) {
      while (this.anchor.childCount > 0) {
         this.anchor.removeChild(this.anchor.childNodes[0]);
      }
   }
}

// Add this to the DOM
Questions.prototype.AddQuestion = function(QNum, EntryNum) {
   // This is really naughty: you should use DOM stuff, and not
   // non-standard innerHtml ...
   var Ix;
   var HTMLBlob = "<tr><td><input type=\"checkbox\" id=\"check" + EntryNum + "\" checked=\"checked\"></td><td>"
                       + "Question #" + QNum + ":</td><td>"
                       + "<strong>" + this.QText[QNum] + "</strong></td><td><select id=\"answer" + EntryNum + "\" size=\"1\">"
                       + "<option selected=\"selected\" value=\"0\">-- Select an answer --</option>"
   for (Ix=0; Ix<4; Ix++) {
      HTMLBlob = HTMLBlob + "<option value=\"" + Ix + "\">" + this.QChoice[QNum*4+Ix] + "</option>";
   }
   HTMLBlob = HTMLBlob + "</select></td></tr>";
   
   this.thisAns[EntryNum] = this.QAnswer[QNum];
   return HTMLBlob;
}


// Verify that all questions have been answered
Questions.prototype.AreQuestionsAnswered = function() {
   var unanswered = 0;
   for (var Ix=0; Ix<10; Ix++) {
      this.Answer[Ix] = document.getElementById("answer" + Ix).selectedIndex;
      if (this.Answer[Ix] == 0) {
         unanswered++;
      }
   }
   return unanswered;
}

// Score the results
Questions.prototype.ScoreIt = function() {
   var count = this.AreQuestionsAnswered();
   if (count > 0) {
      alert("You didn't answer " + count + " questions. Please try again.");
      count = 0;
   } else {
      for (var Ix=0; Ix<10; Ix++) {
         if (this.Answer[Ix] == this.thisAns[Ix]) {
            document.getElementById("check" + Ix).checked = false;
            count++;
         } else {
            document.getElementById("check" + Ix).checked = true;
         }
      }
      alert("You got " + count + " correct.");
   }
   return count;
}
</script>
</head><body>

   <div id="quizblock"></div>

   <script type="text/JavaScript">
      var MyQuiz = new Questions("quizblock");
      MyQuiz.generateQuiz();
   </script>

   <input type="button" onclick="MyQuiz.ScoreIt();" value="Done">

</body></html>
```
It's not complete, of course, but it should work OK.


----------

