CODEWITHSUNDEEP
javascript
user9026955
user9026955

Reputation: 35

Javascript Quiz Game - Get four random questions from the eight in the array

I'm trying to create a javascript quiz. I followed this youtube tutorial: 1, 2. What I want to do is the questions asked to be 4 random of those 8 in the array. My javascript code is:

var currentQuestion = 0;
var score = 0;
var totQuestions = questions.length;

var container = document.getElementById("quizContainer");
var questionEl = document.getElementById("question");
var opt1 = document.getElementById("opt1");
var opt2 = document.getElementById("opt2");
var opt3 = document.getElementById("opt3");
var opt4 = document.getElementById("opt4");
var nextButton = document.getElementById("nextButton");
var resultCont = document.getElementById("result");

function loadQuestion (questionIndex) {
    var q = questions[questionIndex];
    questionEl.textContent = (questionIndex + 1) + ". " + q.question;
    opt1.textContent = q.option1;
    opt2.textContent = q.option2;
    opt3.textContent = q.option3;
    opt4.textContent = q.option4;
};

function loadNextQuestion () {
    var selectedOption = document.querySelector("input[type=radio]:checked");
    if(!selectedOption) {
        alert("Please select your answer!");
        return;
    }
    var answer = selectedOption.value;
    if(questions[currentQuestion].answer == answer) {
        score ++;
    }
    selectedOption.checked = false;
    currentQuestion++;
    if(currentQuestion == totQuestions - 1) {
        nextButton.textContent = "Finish";
    }
    if(currentQuestion == totQuestions) {
        container.style.display = "none";
        resultCont.style.display = "";
        resultCont.textContent = "Your Score: " + score;
        return;
    }
    loadQuestion(currentQuestion);
}

loadQuestion(currentQuestion);

I tried to use math.random() but the only thing I managed to do was to generate random numbers instead of random questions from the array.
The array with the questions looks like this: 

{
    "question": "This is question 3",
    "option1": "A",
    "option2": "B",
    "option3": "C",
    "option4": "D",
    "answer": "2"
},
{
    "question": "This is question 4",
    "option1": "A",
    "option2": "B",
    "option3": "C",
    "option4": "D",
    "answer": "1"
}

Thank you in advance.

Upvotes: 0

Views: 1385

Answers (2)

Chirag Ravindra
Chirag Ravindra

Reputation: 4830

The approach you have used may become a problem as all the previously asked questions are not considered when picking a new one. You may end up with duplicates.

My recommendation would be to first, generate a new array of valid indicies as your question set and iterating over that as needed everytime you want to load a new question

// I have used a simple array of strings for this demo but it will work for an array of objects too
var questions = ['q1','q2','q3','q4','q5','q6','q8']
function getRandomQuestionSet(number){
    var qSet = [];
    while(qSet.length < number){
        var randomIndex = Math.floor(Math.random()*questions.length);
        if(qSet.indexOf(randomIndex) === -1){
          qSet.push(randomIndex)
        }
    }
    
    return questions.filter(function(d,i){
      return qSet.indexOf(i) > -1;
    })
    
}

// This will have 4 random questions, iterate over this in your `loadQuestion` method
var questionSet = getRandomQuestionSet(4);
console.log(questionSet)

Upvotes: 0

Doruk
Doruk

Reputation: 912

Code below will get you a random item from your array:

var randomQ = questions[Math.round((Math.random()*questions.length)+1)];

Upvotes: 1

Related Questions