1

I am trying to generate a quiz that will display three random questions, from an array of 6, when ever the page is reloaded.

The quiz works but displays all of the questions in the same order and I am looking to have only 3 random questions

The code I am using is as follows:

  var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;

  var questions = [
    ["Question 1", "1", "2", "3", "C"],
    ["Question 2", "X", "Y", "Z", "B"],
    ["Question 3", "4", "5", "6", "C"],
    ["Question 4", "A", "B", "C", "A"],
    ["Question 5", "7", "8", "9", "B"],
    ["Question 6", "M", "N", "O", "A"]
  ];

  function get(x){
    return document. getElementById(x);
  }
  function renderQuestion(){
    test = get("test");
    if(pos >= questions.length){
      test.innerHTML = "You got " +correct+ " of "+questions.length+" questions correct";
      get("test_status").innerHTML = "Test Completed";
      pos = 0;
      correct = 0;
      return false;
    }
    get("test_status").innerHTML = "Question " + (pos+1) + " of " + questions.length;
    question = questions[pos] [0];
    chA = questions[pos][1];
    chB = questions[pos][2];
    chC = questions[pos][3];
    test.innerHTML = "" +question+" <br>";
    test.innerHTML += "<input type='radio' name ='choices' value ='A'> " +chA+"<br>";
    test.innerHTML += "<input type='radio' name ='choices' value ='B'> " +chB+"<br>";
    test.innerHTML += "<input type='radio' name ='choices' value ='C'> " +chC+"<br><br>";
    test.innerHTML += "<button onclick='checkAnswer()' >Submit Answer</button>";
  }
  function checkAnswer(){
    choices = document.getElementsByName('choices');
      for (var i = 0; i < choices.length; i++) {
        if(choices[i].checked){
          choice = choices[i].value;
        }
      }
      if (choice == questions [pos][4]) {
        correct++;
      }
      pos++;
      renderQuestion();
  }
  window.addEventListener("load", renderQuestion, false);

2 Answers2

1

You can try something like this:

var questions = [
  ["Question 1", "1", "2", "3", "C"],
  ["Question 2", "X", "Y", "Z", "B"],
  ["Question 3", "4", "5", "6", "C"],
  ["Question 4", "A", "B", "C", "A"],
  ["Question 5", "7", "8", "9", "B"],
  ["Question 6", "M", "N", "O", "A"]
];

var display = getRandomValues(questions,3);

print(display);

function getRandomValues(arr, count){
  // Create a copy so you do not modify original array
  var _tmp = arr.slice();
  var result = [];
  
  // Loop based on count
  for(var i=0; i<count; i++){
    
    // Calculate a random number and round it. Take Mod based on array.length
    var random = Math.floor(Math.random() * 10) % _tmp.length;
    
    // Push necessary item in array to be returned.
    result.push(_tmp[random]);
    
    // Remove item that has been added to prevent duplicate entries
    _tmp.splice(random,1);
  }
  return result;
}

function print(arr){
  document.write("<pre>" +JSON.stringify(arr,0,4)+ "</pre>");
}

Also I would suggest you to use Array of objects instead of array of array

var questions = [
  {title:"Question 1", options:["1", "2", "3", "C"]},
  {title:"Question 2", options:["X", "Y", "Z", "B"]},
  {title:"Question 3", options:["4", "5", "6", "C"]},
  {title:"Question 4", options:["A", "B", "C", "A"]},
  {title:"Question 5", options:["7", "8", "9", "B"]},
  {title:"Question 6", options:["M", "N", "O", "A"]}
];
Rajesh
  • 24,354
  • 5
  • 48
  • 79
  • This is just the logic to get random elements from array. You will then have to create elements based on formulated array. – Rajesh Mar 29 '16 at 18:08
0

Maybe this can be of use to generate a random number. You would probably want to generate one between 0 and 5, but still. Then you need to keep track of which questions have been asked of course if you don't want the same question twice.

Community
  • 1
  • 1