个人中心
gpt4 book ai didi

javascript - 带有错误行为的单选按钮的 jQuery 测验

转载 作者：行者123 更新时间：2023-12-03 07:44:39 28 4
gpt4 key购买 nike

我正在写一个简单的在线测验。有四个单选按钮作为选择。最初，脚本仅填充第一个问题的选项。之后，用户应该选择下一个并单击按钮。如果答案与正确的匹配，则总数递增。否则，将加载下一个问题。提交第 10 个问题后，将加载结果。问题从包含十个名为“pitanja”的对象的数组中加载。 quNo 是问题编号，opt1 到 opt 4 是选项文本，corrNo 是正确的选项编号。

但是如果用户没有选择任何内容，则有一个条件，但它不会起作用。测验继续进行，每次都会设置第四个选择。即使选择其他内容，下一个默认情况下仍然是 4。也许也是那个...此外，它总是说成功率为 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>

我知道有些名字不是英文，但我不认为我必须寻求帮助，在这一点上我不敢全部更改:)希望评论有所帮助...

fiddle :https://jsfiddle.net/dzenesiz/2uxba6sz/

最佳答案

问题出在您的 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 语句中。要重置选项，只需将其添加到相同的 else 语句中:

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

查看JSFIDDLE

关于javascript - 带有错误行为的单选按钮的 jQuery 测验，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35261266/

28 4 0
文章推荐： javascript - 在服务器上运行时，检测网络摄像头的代码在 Chrome 上不起作用
文章推荐： javascript - 如何在JS中读取jsp(作为自定义HTML标签)onChange事件中打印的值
文章推荐： Javascript 游戏代码运行速度非常慢
文章推荐： javascript - 如何使用 JqLite 或 javascript 删除 HTML 元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com