2013-05-27 32 views
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(); 

}); 
+0

你什么时候触发back()函数? – JSP64

+0

当用户点击[下一个]时,它向前移动一个问题,在[返回]时它向后移动。当用户点击返回时触发后退功能。 – Peter

回答

3

1)可以不通过使用一个字符串作为索引来引用数组的元素(答案[“Q”+ i])。您必须使用数字作为数组索引,或使用对象而不是数组。

2)不要使用.attr()方法修改DOM属性,如“checked”。改为使用.prop()方法。所以,你必须替换这个片段:

if (answers["Q" + i]) { 
    $("#Option" + i).attr("checked","checked"); 
} 

else { 
    $("#Option" + i).removeAttr('checked'); 
} 

下列要求:

$("#Option" + i).prop("checked", Boolean(answers["Q" + i])); 

3)你获得用户的回答值的方式是非常繁琐却又陌生。 此代码:

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!"); 
    } 

可能与下列取代:

var oEl = $('input:radio[name=radio]:checked'); 
if (oEl.length) { 
    answers[counter] = parseInt(oEl.val()); 
    counter++; 
} 
else { 
    alert("Please make your selection before continuing!"); 
} 

另外需要的单选按钮的HTML代码以下修正:

<input type="radio" name="radio" id="Option0" value="0" /> 
<label for ="Option0">Option0</label> 

加上一些其它的变化。 ..

所以总代码更新:

$(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 answers = new Array(); // Array of the choices the player made 

$('#back').click(function(){ 
    counter++; 
    quiz(); 
}); 

// update Back button appearance 
function updateBackBtn() { 
    if (counter > 0) 
     $("#back").show(); 
    else 
     $("#back").hide(); 
} 

// set current question 
function qload(counter) { 
    $("title").text("Question No "); 
    $("#question").text(allQuestions[counter].question); 
    updateBackBtn(); 
    for (var i = 0; i < allQuestions[counter].choices.length; i++) { 
     $('label[for=Option' + i + ']').html(allQuestions[counter].choices[i]); 

     $("#Option" + i).prop("checked", Boolean(answers[i])); 
    } 
}; 

// this is the result screen giving the final amount of points 
function result() { 
    $("title").text("Your Results"); 
     var points = 0; // Total points currently reached by the player 
    for (var i = 0; i < allQuestions.length; i++) { 
     if (allQuestions[i].correctAnswer == answers[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() { 
     // get an input element containing selected option (answer) 
     var oEl = $('input:radio[name=radio]:checked'); 
     // if such input element exists (any answer selected) 
     if (oEl.length) { 
      answers[counter] = parseInt(oEl.val()); 
      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 (counter < allQuestions.length) { 
      qload(counter); 
     } 
     else { 
      result(); 
     } 
    }); 
} 

welcome(); 

}); 
1

我已经通过了代码,并做了几个chagnes。

请查看以下更新代码。

$(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 
        { 
         $("#back").show(); 
        } 
        else { 
         $("#back").hide();   //If there is no previous question existing the back button is deactivated 
        } 
       } 

       $('#back').click(function(){ 
        counter = --counter; 
        quiz();//Executes quiz loading 
       }); 

       function qload(counter) { 
        $("#title").html("Question No "+counter); 
        $("#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" + counter] == i) { 
          $("#Option" + i).prop('checked',true); 
         } 

         else { 
          $("#Option" + i).removeAttr('checked'); 
         } 
        } 
       }; 

       //this is the result screen giving the final amount of points 
       function result() { 
        $("#title").html("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").html("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").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(); 

      }); 

我已经做出了上述变化,并在我的本地进行了测试,它的工作。

如果您遇到任何问题,请让我知道。