所以我试图从数组和输入中进行多项选择测验。我已经达到了在点击上添加新问题的程度。我现在需要让每个特定的问题记录选择下一个时单击的输入，并添加到一个长度附加的数组以及单词“Correct：”。问题是我不知道如何决定点击天气这是正确的答案检查，然后它添加到阵列。感谢。
/*var correct = [""];
var other = [""];
if ('input[name="q1c"]:checked') {
correct.push ("I");
else {
other.push ("I")
}
}
var right = $(correct).length();
var wrong = $(other).length();
$(".score").append("correct:" + right + "/" + "Incorrect:" + wrong);*/
/*
Task 1 = Show choices in HTML
Task 2 = On click move to next question in array i++
Task 3 = Evaluate if question is correct using if , else. */
$(document).ready(function(){
var quiz = [
{
question:"How boring is this quiz?",
choices:["kinda","very","Too boring","Very fun"],
answer: "kinda"
},
{
question:"What color is Mace Windu's Lightsaber?",
choices:["purple", "blue", "green", "yellow"],
answer: "purple"
},
{
question:"Who purchased ATI in 2006?",
choices:['Asus', 'NZXT', 'AMD', 'HyperX'],
answer: "AMD"
},
{
question:"What is the rest of this Star Wars characters name? Jar Jar...",
choices:["Smith", "Ranks", "Banks", "Johnson"],
answer: "Banks"
},
{
question:"What color is C3PO?",
choices:["Golden", "Blue", "Orange", "Teal"],
answer: "Golden"
},
{
question:"What is missing from the quote? These are not the ____ you're looking for.",
choices:["Shirts", "Movies", "Computers", "Droids"],
answer: "Droids"
},
{
question:"What is the correct version of the characters name that starts with Jabba?",
choices:["jabba The Small", "Jabba Williams", "Jabba The Hutt", "Jabba The Clean"],
answer: "Jabba The Hutt"
},
{
question:"Which answer has the correct spelling of a characters name?",
choices:["Fiin", "Finn", "Fiinn", "Fin"],
answer: "Finn"
},
{
question:"Which of the following is not a character in Star Wars?",
choices:["Luke Skywalker", "Finn", "R2D2", "Morgan Skywalker"],
answer: "Morgan Skywalker"
},
{
question:"Is the word yes an answer for this question?",
choices:["yes", "This is the wrong answer", "This is the wrong answer", "This is the wrong answer"],
answer: "yes"
}
];
var title = document.getElementById('questionname');
var questions = document.getElementById('questions');
var i = 0;
var correct = [];
var amount = correct.length;
var quizQuestion = 0;
quizQuestion++;
var answer = quiz[quizQuestion].answer;
var btn = document.getElementById('new');
$('.score').html("Correct:" + amount);
$('.btn').click(function() {
event.preventDefault();
quizQuestion++;
i++;
if($("input:checked").val() == answer){
correct.push("l");
//$('.score').append("Correct:" + amount);
console.log(correct);
}
});
$('.btn').click(function() {
/*event.preventDefault();
i++;
if($("input:checked").val() == answer){
correct.push("l");
$('.score').html("Correct:" + amount);
console.log("Yo");
}*/
if(i>quiz.length -1) {
i=0;
}
fillQuestion(i);
i++;
console.log("Hi.");
$('.score').html("Correct:" + amount);
});
function fillQuestion(qNum){
var specificQuestion = quiz[i];
title.innerText = specificQuestion.question;
questions.innerHTML = "";
for(key in specificQuestion.choices){
var btnQuestion = "question"+i+"_choice";
var questionText = specificQuestion.choices[key];
questions.appendChild(createQuestion(btnQuestion,questionText)
);
}
}
/*for (var i = 0; i < choices.length; i++) {
$(title).text(quiz[0].question);
$('questions').append('<label><input type="radio" name="usernames" value="' + choices[i] + '" /> ' + choices[i] + '</label>');
}*/
function createQuestion(name, questionText) {
var e = document.createElement('li');
var questionHTML = '<input type="radio" name="' + name + '"';
questionHTML += '/>';
questionHTML += questionText;
e.innerHTML = questionHTML;
return e;
}
});
/*console.log(quiz[0].question)
$(title).text(quiz[0].question);
};
createQuestion();
});
});*/html, body {
margin:0px;
padding:0px;
background-color:#FFFAF0;
}
.container{
width:960px;
margin:0px;
padding:0px;
position:absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.title{
font-family:lato;
font-size:20px;
position:relative;
left:350px;
}
.question{
width: 300px;
height: 300px;
position:absolute;
top:50%;
left:50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
display:inline-block;
background-color:#008080;
padding:20px;
margin:30px;
border-radius:5%;
}
ul{
list-style:none;
}
.btn{
width:75px;
height:50px;
top:100px;
position:relative;
background-color:blue;
}
.hint{
font-size:10px;
position:relative;
left:200px;
top:100px;
margin:0;
}
.score{
margin:0px;
padding:5px;
outline:solid;
outline-color:black;
display:inline-block;
position:relative;
top:40px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="quiz.js"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<link rel="stylesheet" type="text/css" href="question1.css">
</head>
<body>
<div class="container">
<h2 class="title" id="questionname"></h2>
<div class="question" id="questionsarea">
<ul id="questions"></ul>
<ul class="answer">
</ul>
<div class="score"></div>
</div>
</div>
<button id="new" class="btn" value="Next"></button>
<p class="hint"> This quiz is kinda boring.</p>
</div>
</body>
</html>
答案 0 :(得分：3)
这将为你做到。希望它有所帮助！
更新了解决方案
var questions = [
{
question:"How boring is this quiz?",
choices:["kinda","very","Too boring","Very fun"],
correctAnswer: 0
},
{
question:"What color is Mace Windu's Lightsaber?",
choices:["purple", "blue", "green", "yellow"],
correctAnswer: 0
},
{
question:"Who purchased ATI in 2006?",
choices:['Asus', 'NZXT', 'AMD', 'HyperX'],
correctAnswer: 2
},
{
question:"What is the rest of this Star Wars characters name? Jar Jar...",
choices:["Smith", "Ranks", "Banks", "Johnson"],
correctAnswer: 2
},
{
question:"What color is C3PO?",
choices:["Golden", "Blue", "Orange", "Teal"],
correctAnswer: 0
},
{
question:"What is missing from the quote? These are not the ____ you're looking for.",
choices:["Shirts", "Movies", "Computers", "Droids"],
correctAnswer: 3
},
{
question:"What is the correct version of the characters name that starts with Jabba?",
choices:["jabba The Small", "Jabba Williams", "Jabba The Hutt", "Jabba The Clean"],
correctAnswer: 2
},
{
question:"Which answer has the correct spelling of a characters name?",
choices:["Fiin", "Finn", "Fiinn", "Fin"],
correctAnswer: 1
},
{
question:"Which of the following is not a character in Star Wars?",
choices:["Luke Skywalker", "Finn", "R2D2", "Morgan Skywalker"],
correctAnswer: 3
},
{
question:"Is the word yes an answer for this question?",
choices:["yes", "This is the wrong answer", "This is the wrong answer", "This is the wrong answer"],
correctAnswer: 0
}
];
$(document).ready(function(){
// var numCorrect = 0;
var myNumber = 0;
var questionCounter = 0; //Tracks question number
var selections = []; //Array containing user choices
var quiz = $('#quiz'); //Quiz div object
// Display initial question
displayNext();
// Click handler for the 'next' button
$('#next').on('click', function () {
// 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();
}
return false;
});
// Click handler for the 'prev' button
$('#prev').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
choose();
questionCounter--;
displayNext();
});
// Click handler for the 'Start Over' button
$('#start').on('click', function () {
if(quiz.is(':animated')) {
return false;
}
questionCounter = 0;
selections = [];
displayNext();
$('#start').hide();
return false;
});
// Creates and returns the div that contains the questions and
// the answer selections
function createQuestionElement(index) {
var qElement = $('<div>', {
id: 'question'
});
var header = $('<h3>Question ' + (index + 1) + ':</h3>');
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();
$("#info").html("Number of correct ones: " + correctOnes());
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();
}
});
}
function displayScore() {
var numCorrect = 0;
var score = $('<p>',{id: 'question'});
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;
}
function correctOnes() {
var numCorrect = 0;
var score = $('<p>',{id: 'question'});
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 numCorrect;
}
});a{
text-decoration: none;
}
h1 {
text-align: center;
font-size: 45px;
font-family: cursive;
color: teal;
text-shadow: 2px 1px black;
}
ul {
margin-right: auto;
margin-left: auto;
}
li {
list-style: none;
}
.radiochoices{
font-family: comic sans ms;
color: white;
font-size: 20px;
}
#container {
margin:auto;
width: 50%;
padding: 0px 0px 30px 0px;
background-color:#008080;
border:4px solid #B0E0E6;
border-radius: 13px;
color:#000000;
font-weight: bold;
box-shadow: 5px 5px 10px #888;
}
.center {
margin: 205px 40px 0px 245px
}
.reset {
display:none;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id='container'>
<div id='quiz'></div>
<button class="btn btn-info btn-large" id='next'><a href='#'>Next</a></button>
<button class="btn btn-warning btn-large reset" id='prev'><a href='#'>Prev</a></button>
<button class="btn btn-info btn-large" id='start'> <a href='#'>Start Over</a></button>
<div id = "info"></div>
</div>