Insert div using JSON data to populate another div in html

Question

this is a quiz where I am trying to populate each question with a word from a JSON file.

activity.json are the questions words.json are the words

Can someone help me? It's bringing undefined.

The Id of the div I want to populate the word is #words

I've got lost and can't find a way to show them.

$(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;

      $.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;
          }

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

            for (i = 0; i < data.quizlist.length; i++) {
              wordsBank[i] = new Array;
              wordsBank[i] = data.quizlist[0].words1;
              wordsBank[i] = data.quizlist[1].words2;
            }
            numberOfWords = wordsBank.length;
          })
          numberOfQuestions = questionBank.length;

          displayQuestion();
        }) //gtjson

      function displayQuestion() {
          var q1;
          var q2;
          var q3;
          var q4;
          var q5;
          var rnd = Math.random() * 3;
          rnd = Math.ceil(rnd);

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

          $(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;
              $('#words').append('<div class="word-pt bluedark_txt">' + q5 + '</div><div id="1" class="words word-en bluish_txt">' + q4 + '</div>');

              //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

If you create a [jsFiddle](https://jsfiddle.net/), the users on this site will be more likely to assist you. — Almond, Oct 17 '16 at 23:59
What is quizlist? I see you referring to it in your for loop but you don't have it defined anywhere. — Dan Zuzevich, Oct 18 '16 at 00:02
[Quiz on jsFiddle](https://jsfiddle.net/matheusloures/2mcs4d9x/1/) Thank you for the tip @Almond — spaceman, Oct 18 '16 at 21:35

score -1 · Answer 1 · answered Oct 18 '16 at 15:31

Try this ;)

Try this code for getjson;

$.getJSON('activity.json', function(data){
  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);
  }      

  $.getJSON('words.json', function(data){
    numberOfWords = data.quizlist.length;
    for(i = 0; i < numberOfWords; i++){
      wordsBank[i] = [];
      wordsBank[i].push(data.quizlist[0].words1);
      wordsBank[i].push(data.quizlist[1].words2);
    }        
    displayQuestion();
  });
}) //gtjson

Thanks for that @itzmukeshy7 but it still didn't work. I've uploaded it all [on fiddleJS](https://jsfiddle.net/matheusloures/2mcs4d9x/1/) — spaceman, Oct 18 '16 at 21:37
@MathLoures what is not working for you check console and share errors you are getting there; — itzmukeshy7, Oct 19 '16 at 03:38

score -1 · Accepted Answer · edited May 23 '17 at 10:27

First things first. If you press F12 in any modern browser it will bring up the developer tools and they are quite useful for debugging errors. Not sure if you are aware of that, just thought I'd let you know.

I had an issue with how you set up the fiddle to access the json, jsfiddle was blocking the requests so I just made your json a local variable. (This is why you cant make a request to your json from jsFiddle. jQuery xml error ' No 'Access-Control-Allow-Origin' header is present on the requested resource.')
There were some issues with closing brackets as well.
There are also two variables, q4 and q5, that you use but never define. I just gave them a value, though I'm not sure what you intended them to be.

Here's a new jsFiddle. https://jsfiddle.net/AlmondSeason/xd71kwyg/

And I'll post the javascript for StackOverflow's sake.

$(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",
        "wordsEN": "two",
        "wordsPT": "dois"
      }, {
        "question": "Selecione a sentença correta",
        "option1": "I am a person",
        "option2": "I is a person",
        "option3": "I are a person",
        "wordsEN": "people",
        "wordsPT": "pessoas"
      }, {
        "question": "Select the correct form in the interrogative",
        "option1": "Are you a student?",
        "option2": "Is you a student?",
        "option3": "You are a student?",
        "wordsEN": "teacher",
        "wordsPT": "professor(a)"
      }, {
        "question": "How much is one minus one?",
        "option1": "Zero",
        "option2": "Two",
        "option3": "Four",
        "wordsEN": "ten",
        "wordsPT": "dez"
      }, {
        "question": "He / She / It usam o verbo To Be ...",
        "option1": "is",
        "option2": "are",
        "option3": "am",
        "wordsEN": "Two",
        "wordsPT": "Dois"
      }, {
        "question": "Selecione a frase correta na afirmativa",
        "option1": "We are here.",
        "option2": "Are we here.",
        "option3": "We are not here.",
        "wordsEN": "Two",
        "wordsPT": "Dois"
      }, {
        "question": "Selecione a forma correta na negativa",
        "option1": "He is not here.",
        "option2": "He is not here?",
        "option3": "He are not here.",
        "wordsEN": "Two",
        "wordsPT": "Dois"
      }, {
        "question": "You / We / They usam o Verbo To Be ...",
        "option1": "are",
        "option2": "am",
        "option3": "is",
        "wordsEN": "Two",
        "wordsPT": "Dois"
      }

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



  data = {
    "quizlist": [

      {
        "wordsEN": "two",
        "wordsPT": "three"
      }, {
        "wordsEN": "people",
        "wordsPT": "person"
      }, {
        "wordsEN": "teacher",
        "wordsPT": "teachers"
      }, {

        "wordsEN": "ten",
        "wordsPT": "eleven"
      }, {

        "wordsEN": "Five",
        "wordsPT": "Two"
      }, {

        "wordsEN": "Seven",
        "wordsPT": "One"
      }, {

        "wordsEN": "Five",
        "wordsPT": "Three"
      }, {

        "wordsEN": "house",
        "wordsPT": "bathroom"
      }

    ]
  };
  numberOfWords = data.quizlist.length;
  for (i = 0; i < numberOfWords; i++) {
    wordsBank[i] = [];
    wordsBank[i].push(data.quizlist[0].words1);
    wordsBank[i].push(data.quizlist[1].words2);
  }
  displayQuestion();
  //gtjson



  //Display question and word, if correct
  function displayQuestion() {
    var q5 = "What is q5 supposed to be";
    var q4 = "What is q4 supposed to be";
    //separate div that is the container of words.json
    var wordsShow = $('<div class= "center_txt"><div id="1">' + q5 + '</div><div id="2">' + q4 + '</div></div>')

    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

        //show the word from words.json
        $("#words").append(wordsShow);

        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

Edit:

Change your DOM so the words div is not a child of the game div. When you append to the game div, you're destroying all the children of that div, including the words div.

Change this:

<div id="game1">
 <div id="words1"></div>
</div>
<div id="game2">
 <div id="words2"></div>
</div>

To this:

<div id="game1"></div>
<div id="words"></div>

<div id="game2"></div>
<div id="words2"></div>

Here's another fiddle to check. https://jsfiddle.net/xd71kwyg/2/ I'll let you figure out when you want to destroy the other divs or how you want to go about that.

Thank you @Almond . Yes i'm aware of Developer tools. Actually it was working on my pc but since it was the first time i was using JSfiddle i was not sure. Anyways. q4 and q5 is the words that will populate the .words div on html when the user click on an answer. I was doing that using **$('#words').append('
' + q5 + '
' + q4 + '
');** but it wasn't retrieving the words value on the div. — spaceman, Oct 19 '16 at 22:14
Hey @Almond ! Thanks for that. By the way, the q5 and q4 are the data I needed to retrieve from the JSON file. I've discovered that I misstyped the name of the variable of the JSON file and found the other errors missing, that's why I was getting Undefined. THANK YOU for the tips, and the separation of the divs made a difference! All solved. — spaceman, Oct 21 '16 at 06:29
Hey @Almond The answer was not 100% correct. I added the values for q4 and q5. Now the real purpose of my question is solved. There is a word appearing every time I click on the correct answer. — spaceman, Oct 31 '16 at 06:24

Insert div using JSON data to populate another div in html

2 Answers2