0
ラジオボタンが押されたときに正しい答えを集めるために複数のことを試みましたが、ゲームが終了した後でも私は5のうち0を取得します。 これ以外に何をしてこのことに固執していますかしばらくの間。どんな助けでも大歓迎です！私のトリビアゲームでユーザーの正しい選択を収集するにはどうすればよいですか？
$(document).ready(function() {
$("#clickStart").click(function() {
$('#questions').show(600);
$('#clock').show(700);
$('#hide').hide(500);
});
(function() {
var questions = [{
question: "The great Victoria Desert is located in?",
choices: ['Canada', 'West Africa', 'Australia', 'North America'],
correctAnswer: 'Australia'
},
{
question: "The intersecting lines drawn on maps and globes are?",
choices: ['lattitudes', 'longitudes', 'geographic grids', 'none of the above'],
correctAnswer: 'geographic gird'
},
{
question: "The landmass of which of the following continents is the least?",
choices: ['Africa', 'Asia', 'Australia', 'Europe'],
correctAnswer: 'Australia'
},
{
question: "Without ____ the equator would be much hotter than it is while the poles would be much cooler",
choices: ['Lattitude of redistribution of heat', 'Cycle of air circulation', 'Global wind pattern', 'All are similiar'],
correctAnswer: 'All are simliar'
},
{
question: "The habitats valuable for commercially harvested species are called?",
choices: ['Coral reefs', 'Sea grass bed', 'hot spots', 'None of the above'],
correctAnswer: 'Sea grass bed'
}
];
var questionCounter = 0; //Tracks question number
var selections = []; //Array containing user choices
var quiz = $("#quiz"); //Quiz div object
// Display initial question
displayNext();
// 'next' button
$("#next").on("click", function(e) {
e.preventDefault();
// Suspend click listener during fade animation
if (quiz.is(":animated")) {
return false;
}
choose();
// If no user selection, progress is stopped
if (isNaN(selections[questionCounter])) {
alert("Please make a selection!");
} else {
questionCounter++;
displayNext();
}
});
// 'prev' button
$("#prev").on("click", function(e) {
e.preventDefault();
if (quiz.is(":animated")) {
return false;
}
choose();
questionCounter--;
displayNext();
});
// 'Start Over' button
$("#start").on("click", function(e) {
e.preventDefault();
if (quiz.is(":animated")) {
return false;
}
questionCounter = 0;
selections = [];
displayNext();
$("#start").hide();
});
// Animates buttons on hover
$(".button").on("mouseenter", function() {
$(this).addClass("active");
});
$(".button").on("mouseleave", function() {
$(this).removeClass("active");
});
// Creates and returns the div that contains the questions and
// the answer selections
function createQuestionElement(index) {
var qElement = $("<div>", {
id: "question"
});
var header = $("<h2>Question " + (index + 1) + ":</h2>");
qElement.append(header);
var question = $("<p>").append(questions[index].question);
qElement.append(question);
var radioButtons = createRadios(index);
qElement.append(radioButtons);
return qElement;
}
// Creates a list of the answer choices as radio inputs
function createRadios(index) {
var radioList = $("<ul>");
var item;
var input = "";
for (var i = 0; i < questions[index].choices.length; i++) {
item = $("<li>");
input = '<input type="radio" name="answer" value=' + i + " />";
input += questions[index].choices[i];
item.append(input);
radioList.append(item);
}
return radioList;
}
// Reads the user selection and pushes the value to an array
function choose() {
selections[questionCounter] = +$('input[name="answer"]:checked').val();
}
// Displays next requested element
function displayNext() {
quiz.fadeOut(function() {
$("#question").remove();
if (questionCounter < questions.length) {
var nextQuestion = createQuestionElement(questionCounter);
quiz.append(nextQuestion).fadeIn();
if (!isNaN(selections[questionCounter])) {
$("input[value=" + selections[questionCounter] + "]").prop(
"checked",
true
);
}
// Controls display of 'prev' button
if (questionCounter === 1) {
$("#prev").show();
} else if (questionCounter === 0) {
$("#prev").hide();
$("#next").show();
}
} else {
var scoreElem = displayScore();
quiz.append(scoreElem).fadeIn();
$("#next").hide();
$("#prev").hide();
$("#start").show();
}
});
}
// Computes score and returns a paragraph element to be displayed
function displayScore() {
var score = $("<p>", {
id: "question"
});
var numCorrect = 0;
for (var i = 0; i < selections.length; i++) {
if (selections[i] === questions[i].correctAnswer) {
numCorrect++;
}
}
score.append(
"You got " +
numCorrect +
" questions out of " +
questions.length +
" right!!!"
);
return score;
}
})();
});body {
padding: 0;
margin: 0;
width: 100%;
background: url(../images/background.png);
height: 1vh;
background-repeat: no-repeat;
}
h1 {
font-family: sans-serif;
font-size: 3em;
font-weight: 700;
color: #fff;
text-align: center;
}
#title {
text-decoration: underline;
}
#header {
text-align: center;
font-size: 30px;
font-weight: 700px;
color: #fff;
width: 100%;
height: 200px;
padding: 7%;
}
.start-button {
background-color: rgba(0, 0, 0, .7);
margin-top: 5%;
width: 300px;
height: 100px;
}
.start-button:hover {
background-color: #0246e2;
color: #f5684f;
font-size: 50px;
}
button {
text-align: center;
}
#clock {
display: none;
color: #fff;
font-size: 100px;
z-index: 1000;
}
#quiz {
text-indent: 10px;
}
.button {
border: 4px solid;
border-radius: 5px;
width: 40px;
padding-left: 5px;
padding-right: 5px;
position: relative;
float: right;
background-color: #DCDCDC;
color: black;
margin: 0 2px 0 2px;
}
.button.active {
background-color: #F8F8FF;
color: #525252;
}
#questions {
display: none;
padding-top: 10%;
width: 100%;
height: auto;
}
.button a {
text-decoration: none;
color: black;
}
#content {
width: 100%;
margin: auto;
padding: 0 25px 40px 10px;
background-color: rgba(0, 0, 0, .7);
border: 4px solid #B0E0E6;
border-radius: 5px;
color: #FFFFFF;
font-weight: bold;
box-shadow: 5px 5px 5px #888;
height: 500px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#prev {
display: none;
}
#start {
display: none;
width: 90px;
}<!DOCTYPE html>
<html>
<head>
<title>Trivia Game</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./assets/css/style.css">
</head>
<body>
<body>
<div class="container">
<div id="hide" class="row">
<div id="header" class="text-center col-12-lg">
<h1>How Well Do You Know Your Geography?</h1>
<p>You have 2 min to guess all the questions...Good Luck!</p>
<button id="clickStart" class="start-button">Start!</button>
</div>
</div>
<div id="clock" class="row">
<div class="col-12-lg text-center" id="display">
<h3>00:00</h3>
</div>
</div>
<div id="questions" class="row">
<div class="col-12-lg">
<div id='content'>
<br/>
<div id='quiz'></div>
<div class='button' id='next'><a href='#'>Next</a></div>
<div class='button' id='prev'><a href='#'>Prev</a></div>
<div class='button' id='start'> <a href='#'>Start Over</a></div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="./assets/js/app.js"></script>
</body>
</html>