How to get JSON objects randomly in a javascript array

Question

I am currently making a simple picture quiz in JS with Jquery.

I store my questions and answers in a JSON file.

The whole system work fine but I would like the order of the questions to be random, not ordered.

It's my first time working with JSON and I can't seem to find how to do that.

Here's my controller.js:

$(document).ready(function () {

var questionNumber=0;
var questionBank=new Array();
var stage="#game1";
var description="#description";
var stage2=new Object;
var questionLock=false;
var numberOfQuestions;
var score=0;

$.getJSON('activity.json', function(data) {

for(i=0;i<data.quizlist.length;i++){ 
questionBank[i]=new Array;
questionBank[i][0]=data.quizlist[i].question;
questionBank[i][1]=data.quizlist[i].option1;
questionBank[i][2]=data.quizlist[i].option2;
questionBank[i][3]=data.quizlist[i].option3;
questionBank[i][4]=data.quizlist[i].description;
}
numberOfQuestions=questionBank.length; 


displayQuestion();
})//gtjson
function displayQuestion(){
var rnd=Math.random()*3;
rnd=Math.ceil(rnd);
var q1;
var q2;
var q3;
var des;

if(rnd==1){q1=questionBank[questionNumber][1];q2=questionBank[questionNumber][2];q3=questionBank[questionNumber][3];}
if(rnd==2){q2=questionBank[questionNumber][1];q3=questionBank[questionNumber][2];q1=questionBank[questionNumber][3];}
if(rnd==3){q3=questionBank[questionNumber][1];q1=questionBank[questionNumber][2];q2=questionBank[questionNumber][3];}

des = questionBank[questionNumber][4];

$(stage).append('<div  class="questionText">'+questionBank[questionNumber][0]+'</div><div id="1" class="pix"><img src="img/'+q1+'"></div><div id="2" class="pix"><img src="img/'+q2+'"></div><div id="3" class="pix"><img src="img/'+q3+'"></div>');

$('.pix').click(function(){
if(questionLock==false){questionLock=true;  
//correct answer
if(this.id==rnd){
$(stage).append('<div class="feedback1">Bien joué ! :D</div>');
$(stage).append('<input type="button" value="=>" id="nxtQuestion" >');
$(description).append(des);
$('#nxtQuestion').click(function(){
   changeQuestion();

});
score++;
}
//wrong answer  
if(this.id!=rnd){
$(stage).append('<div class="feedback2">Mauvaise réponse ! :(</div>');
$(stage).append('<input type="button" value="=>" id="nxtQuestion" >');
$(description).append(des);
$('#nxtQuestion').click(function(){
   changeQuestion();

});  
}
//setTimeout(function(){changeQuestion()},1000);
}})
}//display question


fillDB();

function changeQuestion(){

    questionNumber++;
$(description).empty();
if(stage=="#game1"){stage2="#game1";stage="#game2";}
    else{stage2="#game2";stage="#game1";}

if(questionNumber<numberOfQuestions){displayQuestion();}else{displayFinalSlide();}

 $(stage2).animate({"right": "+=1000px"},"slow", function() {$(stage2).css('right','-1000px');$(stage2).empty();});
 $(stage).animate({"right": "+=1000px"},"slow", function() {questionLock=false;});
}//change question




function displayFinalSlide(){

    $(stage).append('<div class="questionText">Vous êtes arrivés au bout du quiz!<br><br>Total de questions: '+numberOfQuestions+'<br>Réponses correctes: '+score+'</div>');

}//display final slide







});//doc ready

And here's the JSON file:

{"quizlist":[

{
"question":"Quelle image montre un Abelia?",
"option1":"abelia-grandiflora.jpg",
"option2":"acer-negundo-flamingo.jpg",
"option3":"acer-palmatum-atropurpureum.jpg",
"description":"<strong>Floraison:</strong> 7-8 mois<br><strong>Taille:</strong>1m<br><strong>Description:</strong>Arbuste vigoureux, à branches arquées. Profusion de fleurs blanc rosé, parfumées. Intéressant pour sa longue floraison."  
},
{
"question":"Quelle image montre un acer?",
"option1":"acer-negundo-flamingo.jpg",
"option2":"abelia-grandiflora.jpg",
"option3":"amelanchier-lamarckii.jpg",
"description":"<strong>Floraison:</strong> 7-8 mois<br><strong>Taille:</strong>1m<br><strong>Description:</strong>Arbuste vigoureux, à branches arquées. Profusion de fleurs blanc rosé, parfumées. Intéressant pour sa longue floraison."
},
{
"question":"Quelle image montre un Amelanchier?",
"option1":"amelanchier-lamarckii.jpg",
"option2":"acer-palmatum-atropurpureum.jpg",
"option3":"abelia-grandiflora.jpg",
"description":"<strong>Floraison:</strong> 7-8 mois<br><strong>Taille:</strong>1m<br><strong>Description:</strong>Arbuste vigoureux, à branches arquées. Profusion de fleurs blanc rosé, parfumées. Intéressant pour sa longue floraison."
}

]
}

If anyone could even point me in the right direction, I would greatly appreciate it. Many thanks.

Answer 1

I'd recommend changing the JSON structure, instead of option1/2/3 use an array:

{
    "quizlist": [
        {
            "question": "Quelle image montre un Abelia?",
            "options": [
                "abelia-grandiflora.jpg",
                "acer-negundo-flamingo.jpg",
                "acer-palmatum-atropurpureum.jpg"
            ],
            "description": "<strong>Floraison:</strong> 7-8 mois<br><strong>Taille:</strong>1m<br><strong>Description:</strong>Arbuste vigoureux, à branches arquées. Profusion de fleurs blanc rosé, parfumées. Intéressant pour sa longue floraison."
        },
        {
            "question": "Quelle image montre un acer?",
            "options": [
                "acer-negundo-flamingo.jpg",
                "abelia-grandiflora.jpg",
                "amelanchier-lamarckii.jpg"
            ],
            "description": "<strong>Floraison:</strong> 7-8 mois<br><strong>Taille:</strong>1m<br><strong>Description:</strong>Arbuste vigoureux, à branches arquées. Profusion de fleurs blanc rosé, parfumées. Intéressant pour sa longue floraison."
        },
        {
            "question": "Quelle image montre un Amelanchier?",
            "options": [
                "amelanchier-lamarckii.jpg",
                "acer-palmatum-atropurpureum.jpg",
                "abelia-grandiflora.jpg"
            ],
            "description": "<strong>Floraison:</strong> 7-8 mois<br><strong>Taille:</strong>1m<br><strong>Description:</strong>Arbuste vigoureux, à branches arquées. Profusion de fleurs blanc rosé, parfumées. Intéressant pour sa longue floraison."
        }
    ]
}

Only now you can use any array shuffle code you want, like this one: https://stackoverflow.com/a/12646864/3356679

 /**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
}

Sad note: JSON.parse still require removing the last comma from the array (sometimes it feels like we're still in 1990).