我正在写一个简单的在线quizz。有四个单选按钮作为选择。最初，脚本只填充第一个问题的选项。之后，用户应选择下一个并单击按钮。如果答案与正确答案匹配，则总增量。否则，下一个问题已加载。提交第10个问题时，会加载结果。问题从一个数组加载，其中有十个对象称为＆＃34; pitanja＆＃34;。 quNo是问题编号，opt1到opt 4是选项文本，corrNo是正确的选项编号。
但是如果用户没有选择任何东西，那就有条件，但它不会起作用。 quizz只是继续前进，每次都设置第四个选择。即使选择了其他东西，下一个默认仍然是四个。也许那个也是......另外，它总是说成功率是30％，相当于正确的10个中的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>
我知道有些名字不是英文，但我认为我不得不寻求帮助，此时我不敢改变它们:)希望评论能帮助...
答案 0 :(得分：1)
问题出在你的currentChoice if语句中。你应该改变它：
if ($("#opt1").prop("checked")) {
currentChoice = 1
};
而不是
if ($("#opt1").prop("checked", true)) {
currentChoice = 1
};
您只需将所有选项设置为checked .prop("checked", true)即可。现在，它检查选项。如果已选中，currentChoice会更新，您的用户将无法在不回答当前问题的情况下转到下一个问题。
要使功能更强大，您需要在用户选择选项时删除错误消息。所以我在按钮点击事件的else语句中添加了$("#quizz-warn").text("Molimo izaberite odgovor :)");。要重置选项，只需将其添加到相同的else语句中：
$("input").prop("checked",false);