-2
我一直在这个工作了一段时间，我只是无法得到它。我正在尝试添加正确答案并在最后显示它们。有人可以看看我的代码，请让我知道这样做的最佳方式？为什么我不能得分加起来并显示？
$(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() {
$("input[type='radio']:checked").val();
var $selectedText = $("input[type='radio']:checked").val();
if ($selectedText === quizQuestions[counter].answer) {
score += 1;
}
if (counter === quizQuestions.length) {
}
})
});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: inline-block;
text-align: right;
left: 100px;
width: 70px;
}<!DOCTYPE html>
<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>
<span id="score"></span>
</div>
</body>
<!--______________________________________________________END APP-->
</html>我现在面临的问题是，我想在显示测验结束时的比分。我希望它举例说：“5分之1正确”或其他影响。
你能解释一下你实际面临的问题吗？ –
你好，我面临的问题是我想在测验结束时显示分数。我想让它说，例如：“5的正确”或其他影响。谢谢 – excelsiorone