JSON Javascript問答遊戲

Question

我正在開發一個使用javascript和json的html5鳥測驗。用戶必須通過點擊右邊的圖片來識別鳥。爲了獎勵用戶，給定的鳥的YouTube視頻被自動播放。我的問題在於，正確的視頻沒有被播放，例如即使問題一的正確答案是鸚鵡，也播放了Quetzal的視頻。我想要正確的問題播放正確的視頻。

這是我的json內容。

{ 
    "quizlist":[ 
    { 
    "question":"Which picture shows a Parrot?", 
    "option1":"Parrot.png", 
    "option2":"Cardinal.png", 
    "option3":"Toucan.png", 
    "option4":"Owl.png", 
    "videoURL" : "https://www.youtube.com/watch?v=RfXxh0Eff_w" 
    }, 
    { 
    "question":"Which picture shows a Peacock?", 
    "option1":"Peacock.png", 
    "option2":"Flamingo.png", 
    "option3":"Quetzal.png", 
    "option4":"Penguin.png", 
    "videoURL" : "https://www.youtube.com/watch?v=jz-tjJhFH1k" 
    }, 
    { 
     "question":"Which picture shows a Cockatoo?", 
     "option1":"Cockatoo.png", 
     "option2":"Turkey.png", 
     "option3":"Duck.png", 
     "option4":"Penguin.png", 
     "videoURL" : "https://www.youtube.com/watch?v=TTb77syQjMg" 
    }, 
    { 
    "question":"Which picture shows a Toucan?", 
    "option1":"Toucan.png", 
    "option2":"Falcon.png", 
    "option3":"Hummingbird.png", 
    "option4":"Penguin.png", 
    "videoURL" : "https://www.youtube.com/watch?v=WAYntcQTm5A" 
    }, 
    { 
     "question":"Which picture shows a Quetzal?", 
     "option1":"Quetzal.png", 
     "option2":"Cardinal.png", 
     "option3":"Flamingo.png", 
     "option4":"Owl.png", 
     "videoURL" : "https://www.youtube.com/watch?v=IhSCnjr3-MY" 
    } 
    ] 
} 

這是我的javascript代碼

$(document).ready(function() { 
    var questionNumber=0; 
    var questionBank=new Array(); 
    var stage="#game1"; 
    var stage2=new Object; 
    var questionLock=false; 
    var numberOfQuestions; 
    var score=0; 
    var vidURL; 


    $.getJSON('js/activity.json', function(data) { 
     console.log(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].option4; 
      //questionBank[i][5] = data.quizlist[i].videoURL; 
      vidURL = data.quizlist[i].videoURL; 
      console.log(vidURL); 
     } 

     numberOfQuestions=questionBank.length; 

     displayQuestion(); 
     console.log('Display Questions Ran'); 
    })//gtjson 

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


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



     $(stage).append(
      '<ul class="collection"> <li class="collection-item active black">' + questionBank[questionNumber][0] + '</li></ul>' + 
      '<hr style="margin-bottom: 20px">' + 
      '<div id="1" class="col s6 pix"><img src="img/'+q1+'" width="30%"></div>' + 
      '<div id="2" class="col s6 pix"><img src="img/'+q2+'" width="30%"></div>' + 
      '<div id="3" class="col s6 pix"><img src="img/'+q3+'" width="30%"></div>' + 
      '<div id="4" class="col s6 pix"><img src="img/'+q4+'" width="30%"></div>' 
     ); 

     $('.pix').click(function(){ 
      if(questionLock==false){questionLock=true; 
       //correct answer 
       if(this.id==rnd){ 

        var $toastContent = $('<span>Correct</span>'); 
        var myMedia = new Media("http://soundbible.com/grab.php?id=1974&type=mp3") 
        myMedia.play() 

        Materialize.toast($toastContent, 6000); 
         window.open(vidURL, '_system'); 

        score++; 
       } 
       //wrong answer 
       if(this.id!=rnd){ 

        var $toastContent = $('<div class="center-align"><span>Wrong</span></div>'); 
        var myMedia = new Media("http://soundbible.com/grab.php?id=1495&type=mp3") 
        myMedia.play() 
        Materialize.toast($toastContent, 2000); 

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


    function changeQuestion(){ 

     questionNumber++; 

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

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

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

    function displayFinalSlide(){ 

     $(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'</div>'); 

    }//display final slide 

}); 

Answer 1

您可以通過window.open(vidURL, '_system');打開視頻但全球vidURL變量在for循環getJSON初始化。因此，它始終包含data.quizlist[i].videoURL的最後一個值 - 它始終是Quetzal視頻的網址。

下面是關於如何使這項工作的一種方式：

[...] 
var vidURL; 
var videoBank = []; 
$.getJSON(...) { 
    [...] 
    for(i=0;i<data.quizlist.length;i++){ 
     [...] 
     videoBank[i] = data.quizlist[i].videoURL; 
    } 
    [...] 
} 
function displayQuestion(){ 
    [...] 
    var vidURL = videoBank[questionNumber]; 
    [...] 
}