Question

我正在尝试显示测验的最终得分，例如“你有5分中有1个正确”我将如何做到这一点？

块引用

$(document).ready(function() {
  var counter = 0;
  var score = 0;

  var quizQuestions = [{
    question: "In what year was America founded ?",
    choices: ["1775", "1776", "1801", "1492"],
    answer: 1
  }, {
    question: "Who did not sign the Declaration of Independence ?",
    choices: ["George Wasington", "Ben Franklin", "John Hancock", "Thomas Jefferson"],
    answer: 0
  }, {
    question: "Who was the only president to serve more than two terms?",
    choices: ["George Washington", "Woodrow Wilson", "Franklin Delano Roosevelt", "James Madison"],
    answer: 2
  }, {
    question: "In what year did America land on the moon ?",
    choices: ["1969", "1965", "1970", "1968"],
    answer: 0
  }, {
    question: "Which country did America buy the Louisiana Purchase from ?",
    choices: ["England", "Spain", "Germany", "France"],
    answer: 3
  }]

  $("#start").click(function() {
    $("#start").hide()
    $("#next").show()
  });

  $("#next").on("click", function() {

    $(".choices, .questions").empty();

    function incrementCounter() {
      $("#count").text(counter);
    };

    $(".questions").append("<h2>" + quizQuestions[counter].question + "</h2>")

    for (var i = 0; i < quizQuestions[counter].choices.length; i += 1) {
      $(".choices").append("<ul>" + "<input type='radio' name='radio'/>" + quizQuestions[counter].choices[i] + "</ul>")
    }

    incrementCounter();
    counter++

  })

  $("body").on("click", "input", function() {

    $(".choices").closest("li");

    $("input[type='radio']:checked").val();

    var $selectedText = $("input[type='radio']:checked").val();

    if ($selectedText === quizQuestions[counter].answers) {
      score++;
    }

    if () {


    }

  })

});

body {
  background-image: url("../img/american-flag.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
html,
body {
  min-height: 100%;
}
.quiz-app {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: white;
  border-style: solid;
  margin: 0 auto;
  top: 200px;
  text-align: center;
}
h1 {
  color: orange;
}
#start {
  margin-top: 70px;
  width: 70px;
  border-radius: 5px;
  bottom: 150px;
}
#next {
  display: none;
  margin-top: 70px;
  width: 70px;
  border-radius: 5px;
  bottom: 150px;
}
.questions {
  text-align: center;
  margin-left: 25px;
  margin: 0 auto;
  bottom: 120px;
  color: red;
}
.choices {
  display: block;
  bottom: 100px;
}
#count {
  width: 50px;
  height: 20px;
  text-align: bottom;
}
#score {
  display: block;
  text-align: center;
  margin-left: 30px;
  width: 70px;
}

<html>

<head>
  <meta charset="UTF-8">
  <title>Quiz Time</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js" charset="utf-8"></script>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/app.js"></script>
  <link rel="stylesheet" href="css/app.css">
</head>

<body>
  <!--______________________________________________________BEGIN APP-->
  <div class="quiz-app">
    <h1 class="title">History Quiz</h1>

    <div class="questions"></div>

    <ul class="choices">
      <li></li>
    </ul>

    <button id="start">Start</button>
    <button id="next">Next</button>
    <span id="count"></span>
    <div id="score"></div>
  </div>


</body>
<!--______________________________________________________END APP-->

</html>

我将如何显示测验的最终得分？例如“你有5分中有1分正确”。

如何在javascript测验中显示最终得分？

0 个答案: