我正在制作一个简单的测验应用。我正在使用JQuery,但我的第一个问题是没有加载页面加载。但是,如果我单击清除(重置)按钮,那么它加载页面很好。
//On Submit Button
$("button#answer").on("click",function(){
checkAnswer();
questionNumber++;
if(questionNumber === questions.length){
$(this).css("display","none");
$("#clear").css("display","block");
}
else {
nextQuestion();
};
});
完整的工作代码在这个JS小提琴 - http://jsfiddle.net/dQgbs/
中我没有把我的图像加载到小提琴中,但是当你运行它时你会看到你只看到按钮,但当你点击答案按钮时,你会得到第二个问题。
答案 0 :(得分:3)
尝试在文档准备中调用nextQuestion();
这是demo
答案 1 :(得分:2)
在html代码中,我添加了一个按钮 - 开始
<nav class="nav-bar">
<div class="nav-hold"> <a href="#" class="nav-logo">Qu<span id="blink">:</span>z Time - Guess this person</a>
<a href="#" class="nav-status" id="quiz_status"></a>
</div>
</nav>
<div class="wrap_container">
<div class="firstContainer">
<img id="question_image" src="" alt="" />
</div>
<div class="secondContainer">
<div class="answers"></div>
</div>
<div class="action">
<button id="answer">Answer</button>
<button id="start">Start</button>
<button id="clear">Clear</button>
</div>
</div>
在css中 -
#start{
margin-left:50%;
}
在脚本中 -
$(document).ready(function () {
$("button#answer").css("display", "none");
$("button#clear").css("display","none");
//Global Variables
var questionNumber = 0,
correctAnswers = 0,
counter = 0,
userAnswers = new Array(),
questions = [{
question: "Images/img1.jpg",
choices: ["img1", "img2", "img3", "img4", "img5"],
quesNum: 1,
correctAns: 0
},
{
question: "Images/img2.jpg",
choices: ["img1", "img2", "img3", "img4", "img5"],
quesNum: 2,
correctAns: 1
},
{
question: "Images/img3.jpg",
choices: ["img1", "img2", "img3", "img4", "img5"],
quesNum: 3,
correctAns: 3
},
{
question: "Images/img4.jpg",
choices: ["img1", "img2", "img3", "img4", "img5"],
quesNum: 4,
correctAns: 2
},
{
question: "Images/img5.jpg",
choices: ["img1", "img2", "img3", "img4", "img5"],
quesNum: 5,
correctAns: 4
}];
//Question Number
$("#quiz_status").text("Question " + questions[0].quesNum + " of " + questions.length);
/**********my code**************/
$("button#start").on("click", function(){
$("button#answer").css("display","block");
$("button#clear").css("display","block");
$("button#start").css("display","none");
checkAnswer();
if (questionNumber === questions.length) {
$(this).css("display", "none");
$("#clear").css("display", "block");
} else {
nextQuestion();
};
});
/**********my code**************/
//On Submit Button
$("button#answer").on("click", function () {
alert("second");
checkAnswer();
questionNumber++;
if (questionNumber === questions.length) {
$(this).css("display", "none");
$("#clear").css("display", "block");
} else {
nextQuestion();
};
});
//On Clear Quiz Button
$("button#clear").on("click", function () {
restart();
nextQuestion();
});
//Move to next question - update question & answers
function nextQuestion() {
$("#quiz_status").text("Question " + questions[questionNumber].quesNum + " of " + questions.length);
$("#question_image").attr({
src: questions[questionNumber].question,
alt: 'Picture'
}).height(200).width(200);
var multChoice = $.each(questions[questionNumber].choices, function (index, value) {
value
});
$("div.answers label").remove();
$.each(multChoice, function (index, value) {
$("div.answers").append("<label class='radio'><input type='radio' name='check' data-ans=" + index + ">" + value + "</label>");
});
}
//Check user answer against correct answer - store user answer & keep count for right or wrong answers
function checkAnswer() {
var userAns = $("input[type=radio]:checked").data("ans");
userAnswers.push(userAns);
if (userAns === questions[counter].correctAns) {
correctAnswers++;
}
counter++;
}
$(correctAnswers).appendTo('quiz_status');
//Restart Quiz
function restart() {
questionNumber = 0;
correctAnswers = 0;
counter = 0;
userAnswers = new Array();
$("#answer").css("display", "block");
$("#clear").css("display", "none");
}
// Function to create a BLINK TEXT effect
function blink(selector) {
$(selector).animate({
opacity: 0
}, 50, "linear", function () {
$(this).delay(800);
$(this).animate({
opacity: 1
}, 50, function () {
blink(this);
});
$(this).delay(800);
});
}
blink("a #blink"); //Call blink text function
});