我正在使用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
答案 0 :(得分:0)
您按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];
[...]
}