我試圖找出腳本中的錯誤,希望有人能夠告訴我錯誤的位置。它是基於JS/Jquery(javascriptissexy練習)創建測驗的嘗試。JQuery:檢查/取消選中單選按鈕
到目前爲止它工作正常,除了:我想使用一個後退按鈕,回顧用戶給出的以前的答案,並相應地設置單選按鈕。該腳本不會回來,即使我點擊前進,它也不會給我帶來任何錯誤,這將有助於我找出問題所在。
再次,我真的很抱歉,我不能縮小範圍,因爲我真的不知道哪些部分是相關/不相關的。如果任何人有一些建議如何以更好的方式提出這些「我即將放棄,因爲我不知道如何查明問題」問題,我會很樂意這樣做。
的HTML單選按鈕都構造是這樣的:
<input type="radio" name="radio" id="Option0" value="Option0" />
<label for ="Option0">Option0</label>
的JS/Jquery的:
$(document).ready(function() {
var allQuestions = [
{question: "Who is Prime Minister of the United Kingdom?",
choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
correctAnswer: 0},
{question: "Which color has the sky?",
choices: ["Grey", "Black", "Blue", "Green"],
correctAnswer: 2},
{question: "What's on the chain?",
choices: ["Monster", "Magician", "Bull", "Skull"],
correctAnswer: 3}
];
var counter = 0; // Question No currently processed
var points = 0; // Total points currently reached by the player
var answers = new Array(); // Array of the choices the player made eg Q1:0
// Back button in a function
function back() {
if (counter > 0) //Checks if there is at least one question already answered
{
//Goes back one question
$("#back").show().on('click', function() {
counter = counter--;
quiz();
}); //Executes quiz loading
}
else {
$("#back").hide(); //If there is no previous question existing the back button is deactivated
}
}
function qload(counter) {
$("title").text("Question No ");
$("#question").text(allQuestions[counter].question);
back();
for (var i = 0; i < allQuestions[counter].choices.length; i++) {
$('label[for=Option' + i + ']').html(allQuestions[counter].choices[i]);
if (answers["Q" + i]) {
$("#Option" + i).attr("checked","checked");
}
else {
$("#Option" + i).removeAttr('checked');
}
}
};
//this is the result screen giving the final amount of points
function result() {
$("title").text("Your Results");
for (var i = 0; i < allQuestions.length; i++) {
if (allQuestions[i].correctAnswer == answers["Q" + i]) {
points++;
}
$("#result").show().text("CONGRATULATIONS! You answered " + points + " out of " + allQuestions.length + " correct!");
$(".qbox").hide();
console.log(answers);
}
}
function welcome() {
// this is the welcome screen inviting to start the quizz
$("title").text("Welcome to the JQuery QuizY");
$(".qbox").hide();
$("#result").append().html("Random");
$("#result").append().html("<p id='start'>Start</p>");
$("#start").on('click', function() {
quiz();
});
}
function quiz() {
$("#start, #result").hide();
$(".qbox").show();
qload(counter);
$("#next").on('click', function() {
// this checks that one question is selected before processing
if ($('#Option0').is(':checked')) {
answers["Q" + counter] = 0;
counter++;
}
else if ($('#Option1').is(':checked')) {
answers["Q" + counter] = 1;
counter++;
}
else if ($('#Option2').is(':checked')) {
answers["Q" + counter] = 2;
counter++;
}
else if ($('#Option3').is(':checked')) {
answers["Q" + counter] = 3;
counter++;
}
else {
alert("Please make your selection before continuing!");
}
// this checks if there are any questions left, otherwise it goes to the result screen
if (allQuestions[counter]) {
qload(counter);
}
else {
result();
}
});
}
welcome();
});
你什麼時候觸發back()函數? – JSP64
當用戶點擊[下一個]時,它向前移動一個問題,在[返回]時它向後移動。當用戶點擊返回時觸發後退功能。 – Peter