Question

我正在写一个简单的在线quizz。有四个单选按钮作为选择。最初，脚本只填充第一个问题的选项。之后，用户应选择下一个并单击按钮。如果答案与正确答案匹配，则总增量。否则，下一个问题已加载。提交第10个问题时，会加载结果。问题从一个数组加载，其中有十个对象称为＆＃34; pitanja＆＃34;。 quNo是问题编号，opt1到opt 4是选项文本，corrNo是正确的选项编号。

但是如果用户没有选择任何东西，那就有条件，但它不会起作用。 quizz只是继续前进，每次都设置第四个选择。即使选择了其他东西，下一个默认仍然是四个。也许那个也是......另外，它总是说成功率是30％，相当于正确的10个中的3个......

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

＆＃13;

$(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)
});

＆＃13;

<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>

＆＃13;

我知道有些名字不是英文，但我认为我不得不寻求帮助，此时我不敢改变它们:)希望评论能帮助...

小提琴：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会更新，您的用户将无法在不回答当前问题的情况下转到下一个问题。

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

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

在JSFIDDLE

中查看

jQuery quizz与radiobuttons行为不端

1 个答案: