JSONデータを使用してdivを挿入し、htmlに別のdivを入力します

まず最初に。最新のブラウザでF12キーを押すと、開発者ツールが表示され、エラーのデバッグに非常に役立ちます。あなたがそれを知っているかどうかわからない、ただ私があなたに知らせたいと思った。

1. jsonにアクセスするためのフィドルの設定方法に問題がありました。jsfiddleがリクエストをブロックしていたため、jsonをローカル変数にしました。（これが、jsFiddleからjsonにリクエストを送信できない理由です。jQueryxmlエラー 'いいえ' Access-Control-Allow-Origin 'ヘッダーがリクエストされたリソースに存在します。'）

2. 角かっこを閉じる際にもいくつかの問題がありました。

3. また、q4とq5の2つの変数があります。これらは使用しますが、定義することはありません。あなたが彼らに何を意図していたのかはわかりませんが、私は彼らに価値を与えただけです。

これが新しいjsFiddleです。https://jsfiddle.net/AlmondSeason/xd71kwyg/

そして、StackOverflowのためにJavaScriptを投稿します。

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

編集：

単語divがゲームdivの子にならないようにDOMを変更します。ゲームdivに追加すると、divという単語を含め、そのdivのすべての子が破棄されます。

これを変える：

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

これに：

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

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

確認すべきもう1つのフィドルがあります。https://jsfiddle.net/xd71kwyg/2/他のdivをいつ破棄するか、またはどのように処理するかを説明します。