javascript - 针对多项选择题

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>