使用JSON數據插入div來填充html中的另一個div

Question

這是一個測驗，我試圖用JSON文件中的單詞填充每個問題。

Here is the JSFiddle

activity.json是問題 words.json都寫着

有人能幫助我嗎？它帶來了不確定性。

我想填充字格的ID是#words

我迷路了，找不到一種方式來顯示它們。

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

Answer 1

第一件事第一件事。如果您在任何現代瀏覽器中按F12，它都會顯示開發人員工具，它們對於調試錯誤非常有用。不知道你是否意識到這一點，只是想我會讓你知道。

1. ，我與你是如何設置的小提琴來訪問JSON的問題，的jsfiddle擋住的要求，所以我只是做你的JSON的局部變量。 （這就是爲什麼你不能讓你的JSON從的jsfiddle的請求。 jQuery xml error ' No 'Access-Control-Allow-Origin' header is present on the requested resource.'）

2. 有一些問題，右括號爲好。

3. 還有兩個變量，q4和q5，你使用但從未定義。我只是給了他們一個價值，儘管我不確定你的意圖是什麼。

這是一個新的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 

編輯：

更改您的DOM所以DIV是不是遊戲DIV的孩子的話。當你追加到遊戲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> 

這裏的另一個小提琴檢查。 https://jsfiddle.net/xd71kwyg/2/ 我會讓你弄清楚什麼時候你想摧毀其他divs或者你想怎麼去做。

Answer 2

嘗試此）

試用的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