Question

我正在使用javascript和json在html5中开发一个鸟类测验。用户必须通过单击右图来识别该鸟。为了奖励用户，将自动播放给定鸟的YouTube视频。我的问题是，正确的视频没有被播放，例如即使问题1的正确答案是鹦鹉，也会播放Quetzal的视频。我希望通过正确的问题播放正确的视频。

这是我的json内容。

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

});

这是我的javascript代码

config --get core.ignorecase

Answer 1

您按window.open(vidURL, '_system');打开视频，但全局vidURL变量在for getJSON循环中初始化。因此它始终包含data.quizlist[i].videoURL的最后一个值 - 它始终是Quetzal视频的URL。

以下是如何使这项工作的一种方式：

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

JSON Javascript测验游戏

1 个答案: