Question

我的问题很简单，在选择正确的输入时，我有几行代码可以统计我的总分。但是，我似乎无法将得分变为0而不是0.这是代码：

$(document).ready(main);

function main(){
    $("input").hide();
    $("h1").on('click', function(){
        $('h1').css("background-color", "red")

    });

    var questions = [
        {
            question: "What is the capital of Washington?", choices: ["Salem", "Seattle",
            "Helena", "Olympia"], correctanswer: "Olympia"
        },
        {
            question: "How many countries are in Europe?", choices: ["15", "46", "27",
            "51"], correctanswer: "51"
        },

        {
            question: "What is the population of Mexico City?", choices: ["3.3 Million", "800 Thousand", "15.1 Million",
            "8.9 Million"], correctanswer: "8.9 Million"
        },

        {
            question: "Who is the current leader of Russia?", choices: ["Boris Yelstin", "Dmitry Medvedev",
            "Nikolai Bulganin", "Vladimir Putin"], correctanswer: "Vladimir Putin"
        },

        {
            question: "How large is the state of California?", choices: ["85,115 square miles", "130,919 square miles",
            "215,355 sqaure miles", "163,696 square miles"], correctanswer: "163,696 square miles"
        }
    ];

    $("#start").on('click', function() {
        $("#start").hide();
        $("input").show();
        quiz();

    } );


    total=0;
    number=0;

    function quiz(){
        $("#question").text(questions[number].question);
        $("#answer1").text(questions[number].choices[0]);
        $("#answer2").text(questions[number].choices[1]);
        $("#answer3").text(questions[number].choices[2]);
        $("#answer4").text(questions[number].choices[3]);
    }


 $("#submit").on('click', function(){
     var chosen;
     chosen = ($("input[name='choice']:checked").val());
     if (chosen == questions[number].correctanswer) {
         total++;
         $("#score").text("Score: " + total);
     } else {
         $("#score").text("Score: " + total);
     }
     number++;
     quiz();

 });

}

.btns{height:50px; width:80px; background-color:blue;
}

#answers{
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Simple Quiz</h1>
<div id="question"></div>
<div id=answers>
    <input type="radio"  name="choice" value="1"><label id="answer1"></label><br>
    <input type="radio"  name="choice" value="2"><label id="answer2"></label><br>
    <input type="radio"  name="choice" value="3"><label id="answer3"></label><br>
    <input type="radio"  name="choice" value="4"><label id="answer4"></label><br>
</div>


<div id="btns">
    <button id="start">Start</button>
    <button id="submit">Submit</button>
</div>
<div id="score"><p></p></div>

因此，就代码而言，它非常简单，对我来说它看起来应该可行，但显然不是这样，任何帮助都是值得赞赏的。谢谢！这是git repository。

Answer 1

quiz()函数更新每个单选按钮的文本，但不更新其值。因此chosen只是1到4之间的数字，并且不会与.correctanswer属性匹配。将该值用作choices数组的索引并与之进行比较。我已将单选按钮的值更改为从0开始，以匹配数组索引。

修复它的另一种方法是将correctanswer属性更改为只包含正确答案的索引，而不是其文本。

＆＃13;

$(document).ready(main);

function main() {
  $("input").hide();
  $("h1").on('click', function() {
    $('h1').css("background-color", "red")

  });

  var questions = [{
      question: "What is the capital of Washington?",
      choices: ["Salem", "Seattle", "Helena", "Olympia"],
      correctanswer: "Olympia"
    }, {
      question: "How many countries are in Europe?",
      choices: ["15", "46", "27", "51"],
      correctanswer: "51"
    },

    {
      question: "What is the population of Mexico City?",
      choices: ["3.3 Million", "800 Thousand", "15.1 Million", "8.9 Million"],
      correctanswer: "8.9 Million"
    },

    {
      question: "Who is the current leader of Russia?",
      choices: ["Boris Yelstin", "Dmitry Medvedev", "Nikolai Bulganin", "Vladimir Putin"],
      correctanswer: "Vladimir Putin"
    },

    {
      question: "How large is the state of California?",
      choices: ["85,115 square miles", "130,919 square miles", "215,355 sqaure miles", "163,696 square miles"],
      correctanswer: "163,696 square miles"
    }
  ];

  $("#start").on('click', function() {
    $("#start").hide();
    $("input").show();
    quiz();
  });

  total = 0;
  number = 0;

  function quiz() {
    $("#question").text(questions[number].question);
    $("#answer1").text(questions[number].choices[0]);
    $("#answer2").text(questions[number].choices[1]);
    $("#answer3").text(questions[number].choices[2]);
    $("#answer4").text(questions[number].choices[3]);
    $("input[name='choice']:checked").prop("checked", false); // Clear the previous selection
  }

  $("#submit").on('click', function() {
    var chosen;
    chosen = questions[number].choices[$("input[name='choice']:checked").val()];
    if (chosen == questions[number].correctanswer) {
      total++;
      $("#score").text("Score: " + total);
    } else {
      $("#score").text("Score: " + total);
    }
    number++;
    quiz();
  });
}

＆＃13;

#btns {
  height: 50px;
  width: 80px;
  background-color: blue;
}
#answers {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Simple Quiz</h1>
<div id="question"></div>
<div id=answers>
  <input type="radio" name="choice" value="0">
  <label id="answer1"></label>
  <br>
  <input type="radio" name="choice" value="1">
  <label id="answer2"></label>
  <br>
  <input type="radio" name="choice" value="2">
  <label id="answer3"></label>
  <br>
  <input type="radio" name="choice" value="3">
  <label id="answer4"></label>
  <br>
</div>


<div id="btns">
  <button id="start">Start</button>
  <button id="submit">Submit</button>
</div>
<div id="score">
  <p></p>
</div>

＆＃13;

Answer 2

单选按钮的值属性为1..4，因此该行的计算结果为1..4：

chosen = ($("input[name='choice']:checked").val());

然后，您将1..4与数组中的字符串值（例如Olympia）进行比较：

if (chosen == questions[number].correctanswer) {

整数永远不会等于字符串，所以这个条件永远不会计算为true来增加你的计数器：

if (chosen == questions[number].correctanswer) {
total++;

要将字符串值与字符串值（而不是其索引）进行比较，您需要这样：

chosen = ($("input[name='choice']:checked").val());
chosen = chosen - 1;
chosen = questions[number].choices[chosen];

这是一个以这种方式工作的jsfiddle： https://jsfiddle.net/79rfjz04/

为什么我的功能不能正确计算得分？

2 个答案: