带有单选按钮的jQuery测验行为异常

Question

我正在写一个简单的在线测验。 有四个单选按钮可供选择。 最初，脚本只是填充第一个问题的选择。 之后，用户应选择下一个，然后单击按钮。 如果答案与正确答案相符，则总增量。 否则，下一个问题已加载。 提交第十个问题时，将加载结果。 从具有十个称为“ pitanja”的对象的数组中加载问题。 quNo是问题编号，opt1至opt 4是选项文本，而corrNo是正确的选项编号。

但是，如果用户没有选择任何东西，则存在条件，但是它将不起作用。 测验只是继续进行，每次都设置第四个选择。 即使选择了其他选项，默认情况下下一个仍然是四个。 也许也是。。。它总是说成功率是30％，相当于10个正确d中的3个。

我知道这根本不复杂，但是我在这里很困惑...我哪里出错了？

 $(document).ready(function() { var pitanja = [{ "quNo": 1, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrNo": 2 }, { "quNo": 2, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrNo": 4 }, { "quNo": 3, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrNo": 2 }, { "quNo": 4, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrNo": 4 }, { "quNo": 5, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrNo": 1 }, { "quNo": 6, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrNo": 3 }, { "quNo": 7, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrNo": 2 }, { "quNo": 8, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrNo": 1 }, { "quNo": 9, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrNo": 4 }, { "quNo": 10, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrNo": 3 }]; //****************************************************// var corrTotal = 0; // total correct answers var qNumber = 0; // current question number var currentChoice = 0; //current answer choice function popuniPitanja(qNumber) { var qu = pitanja[qNumber]; //current question, by array index $("#quizz-question-no").text("Question " + qu["quNo"]); $("#label1").text(qu["opt1"]); $("#label2").text(qu["opt2"]); $("#label3").text(qu["opt3"]); $("#label4").text(qu["opt4"]); } function proveriOdgovor(choice, corr) { // choice is the selected value, corr is the current question correct value if (parseInt(choice) === corr) { corrTotal++; } //if selected and correct value match, increment total correct } function sacuvajIzbor() { //save user choice if ($("#opt1").prop("checked", true)) { currentChoice = 1 }; if ($("#opt2").prop("checked", true)) { currentChoice = 2 }; if ($("#opt3").prop("checked", true)) { currentChoice = 3 }; if ($("#opt4").prop("checked", true)) { currentChoice = 4 }; } function ucitajRezultate() { // loads quizz results var average = corrTotal * 10; // divide by total (10 questions) and multiply by a 100 for percents $("#quizz-warn").hide(); $("#quizz-form").html("Broj tačnih odgovora: " + corrTotal + ", što je: " + average + "%"); //erase quizz form and display results } $("button").click(function() { //handle user submit var correctAnswer = pitanja[qNumber]["corrNo"]; //save the number of curent correct answer sacuvajIzbor(); //save user choice if (currentChoice < 1 || currentChoice > 4) { //if choice isn't 1 or 2 or 3 or 4, user didn't choose at all $("#quizz-warn").text("Molimo izaberite odgovor :)"); //warn user to choose an answer } else { proveriOdgovor(currentChoice, correctAnswer); //check user answer and act accordingly if (qNumber === 9) { //if question number is 9, it is 10th question, so display results ucitajRezultate(); //display results } else { //if it's not, move on to the next question popuniPitanja(++qNumber); //load next question currentChoice = 0; //reset current choice to 0 } } }); popuniPitanja(qNumber); //initially, load the first question (qNumber is 0 by default) }); 

 <html lang="sr"> <head> <meta charset="utf-8"> <title>The quizz</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head> <div id="quizz-form"> <span id="quizz-title">Quizz text: </span> <p id="quizz-question-no"></p> <form> <input type="radio" name="quizz-opt" id="opt1" value="1"> <label class="opt-txt" for="opt1" id="label1"></label> <br> <!--option 1 end--> <input type="radio" name="quizz-opt" id="opt2" value="2"> <label class="opt-txt" for="opt2" id="label2"></label> <br> <!--option 2 end--> <input type="radio" name="quizz-opt" id="opt3" value="3"> <label class="opt-txt" for="opt3" id="label3"></label> <br> <!--option 3 end--> <input type="radio" name="quizz-opt" id="opt4" value="4"> <label class="opt-txt" for="opt4" id="label4"></label> <br> <!--option 4 end--> <button type="button">Dalje</button> </form> <div id="quizz-warn"></div> </div> <script src="kviz.js"></script> </body> </html> 

我知道有些名字不是英文的，但我认为我不必寻求帮助，在这一点上，我担心将它们全部更改：)希望注释有所帮助...

小提琴： https : //jsfiddle.net/dzenesiz/2uxba6sz/

Answer 1

问题出在您的currentChoice if语句中。 您应该像这样更改它：

if ($("#opt1").prop("checked")) {
     currentChoice = 1
};

代替

if ($("#opt1").prop("checked", true)) {
    currentChoice = 1
};

简单来说，您将所有选项都设置为checked .prop("checked", true) 。 现在，它检查选项。 如果选择此选项，那么currentChoice会更新，并且您的用户将无法转到下一个问题而不回答当前问题。

为了使其功能更强大，您需要在用户选择一个选项时删除错误消息。 所以我加了$("#quizz-warn").text("Molimo izaberite odgovor :)"); 到按钮单击事件的其他声明。 为了重置选项，只需将其添加到相同的else语句中：

$("input").prop("checked",false);

在JSFIDDLE中签出