针对多项选择题

Question

所以我正在尝试从数组和输入中进行多项选择测验。我已经做到了在点击时附加新问题的地步。我现在需要它让每个特定问题记录在选择下一个时单击的输入，并添加到一个数组中，该数组的长度与“正确：”一词一起附加。问题是我不知道如何让它决定点击天气它是正确的答案，然后将它添加到数组中。谢谢。

/*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>

Answer 1

这将为您完成。希望对您有所帮助！

更新的解决方案

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>