0
我试图找出脚本中的错误，希望有人能够告诉我错误的位置。它是基于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