我正在开发一个使用javascript和json的html5鸟测验。用户必须通过点击右边的图片来识别鸟。为了奖励用户,给定的鸟的YouTube视频被自动播放。我的问题在于,正确的视频没有被播放,例如即使问题一的正确答案是鹦鹉,也播放了Quetzal的视频。我想要正确的问题播放正确的视频。JSON Javascript问答游戏
这是我的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
});
而不是使用'新Array'的,使用'[]'。将'new Object'更改为'{}' –
问题仍然存在。它仍然只打开格查尔的视频链接。 –
如果你写道你使用phonegap/cordova会更好 - 如果你删除了'New Media'和'Materialize.toast'东西 – gus27