dimanche 30 octobre 2016

How to randomize data from JSON list to Jquery

How are you?

I am working on a Quiz and am trying to shuffle my JSON data to randomly show the questions of a quiz.

I retrieve the JSON data, then show the question to the user, I tried searching but only found something similar to this but couldn't get it working. (Actually couldn't understand how to use it.)

    numberOfQuestions[Math.floor( Math.floor(Math.random()*numberOfQuestions.length))];

Can you help me?

Here is the fiddle

JS:

         $(document).ready(function() {

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

              var data = {
                "quizlist": [

                  {
                    "question": "How much is two plus two?",
                    "option1": "Four",
                    "option2": "Five",
                    "option3": "Two",
                  }, {
                    "question": "Selecione a sentença correta",
                    "option1": "I am a person",
                    "option2": "I is a person",
                    "option3": "I are a person",

                  }, {
                    "question": "Select the correct form in the interrogative",
                    "option1": "Are you a student?",
                    "option2": "Is you a student?",
                    "option3": "You are a student?",

                  }, {
                    "question": "How much is one minus one?",
                    "option1": "Zero",
                    "option2": "Two",
                    "option3": "Four",
                  }, {
                    "question": "He / She / It usam o verbo To Be ...",
                    "option1": "is",
                    "option2": "are",
                    "option3": "am",
                  }, {
                    "question": "Selecione a frase correta na afirmativa",
                    "option1": "We are here.",
                    "option2": "Are we here.",
                    "option3": "We are not here.",
                  }, {
                    "question": "Selecione a forma correta na negativa",
                    "option1": "He is not here.",
                    "option2": "He is not here?",
                    "option3": "He are not here.",
                  }, {
                    "question": "You / We / They usam o Verbo To Be ...",
                    "option1": "are",
                    "option2": "am",
                    "option3": "is",
                  }

                ]
              };
              numberOfQuestions = data.quizlist.length;
              for (i = 0; i < numberOfQuestions; i++) {
                questionBank[i] = [];
                questionBank[i].push(data.quizlist[i].question);
                questionBank[i].push(data.quizlist[i].option1);
                questionBank[i].push(data.quizlist[i].option2);
                questionBank[i].push(data.quizlist[i].option3);
              }



              displayQuestion();
              //gtjson



              //Display question and word, if correct
              function displayQuestion() {


                var rnd = Math.random() * 3;
                rnd = Math.ceil(rnd);
                var q1;
                var q2;
                var q3;

                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];
                }

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

                $('.option').click(function() {
                  if (questionLock == false) {
                    questionLock = true;
                    //correct answer
                    if (this.id == rnd) {
                      $(stage).append('<div class="feedback1">CORRECT</div>');
                      score++;
                    }
                    //wrong answer  
                    if (this.id != rnd) {
                      $(stage).append('<div class="feedback2">WRONG</div>');
                    }
                    setTimeout(function() {
                      changeQuestion()
                    }, 1000);
                  }
                })
              } //display question






              function changeQuestion() {

                questionNumber++;

                if (stage == "#game1") {
                  stage2 = "#game1";
                  stage = "#game2";
                } else {
                  stage2 = "#game2";
                  stage = "#game1";
                }

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

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



            //doc ready

Thanks!




Aucun commentaire:

Enregistrer un commentaire