javascript - 来自变量的实时测验分数

Question

好的，在我的测验中，我使用等于 0 的变量从 if 语句和 else if 语句增加。一个变量应该在你做对问题时增加，另一个变量应该在你做错问题时增加。每当你答错一道题时，如果你答对了下一题，它就不再增加正确的变量。如果你得到一个不正确的变量，它不会增加不正确的变量。如果您摆脱第二个 .btn 点击监听器，它出于某种原因不会发布问题。我不想摆脱它，让它成为一个工作的听众。

$(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 = 0;
var incorrect = -1;
var quizQuestion = 0;
var answer = quiz[i].answer;
var btn = document.getElementById('new');
var selections = [];
//$('.score').html("Correct:" + amount);

$('.btn').click(function() {
	console.log('made it here')
	event.preventDefault();
	console.log(selections)
	//for (var i = 0; i < quiz.length; i++){
		/*console.log($("input:checked").val(),'$("input:checked").val()');
		console.log(quiz[quizQuestion].answer,'quiz[i].answer');
		console.log(amount,'amount');*/
	if($("input:checked").val() === quiz[quizQuestion].answer){
		correct++;
		$('.score').html("Correct:" + correct + " Incorrect:" + incorrect);
		console.log(correct);
		quizQuestion++;
		fillQuestion(quizQuestion);
	}
	else if ($("input:checked").val() !== quiz[quizQuestion].answer) {
		incorrect++;
	}


//}
	});
//fillQuestion(0);
$('.btn').click(function() {
	event.preventDefault();
	fillQuestion(i);
	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" value="'+questionText+'" name="' + name + '"';
	questionHTML += '/>';
	questionHTML += questionText;
	e.innerHTML = questionHTML;
	return e;
}
});

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:200px;
  left:100px;
position:relative;
background-color:olive;
}
.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">Next</button>
<p class="hint"></p>
</div>
</body>
</html>

Answer 1

您遇到了一些问题。不需要第二个 onclick 事件。可以删除一些开头未使用的变量。
当到达最后一个问题时，我添加了一个停止以防止超限问题。

if(quizQuestion >= quiz.length - 1) { return false; }

我添加了两个变量用于比较，没有它们我遇到了问题。 (可能是这个环境。)

var choice = $("input:checked").val();
var answer = quiz[quizQuestion].answer;

我将 quizQuestion 修复为在将其作为参数传递之前进行预递增。

fillQuestion(++quizQuestion);

fillQuestion() 函数中还有一些其他更改，jQuery 选择器不正确。

试试这个:

$(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 = 0;
var incorrect = -1;
var quizQuestion = 0;
var answer = quiz[i].answer;
var btn = document.getElementById('new');
var selections = [];

$('.btn').click(function(event) {
    if(quizQuestion >= quiz.length - 1) { return false; }
	event.preventDefault();
    var choice = $("input:checked").val();
    var answer = quiz[quizQuestion].answer;
    fillQuestion(quizQuestion);
  
    if(choice === answer){
      correct++;
    }
    else if (choice !== answer) {
      incorrect++;
    }
  $('.score').html("Correct:" + correct + " Incorrect:" + incorrect);
  fillQuestion(++quizQuestion);
});


function fillQuestion(qNum){
  console.log('in fillQuestion' + qNum);
  var specificQuestion = quiz[qNum];
  $('#questionname').html(specificQuestion.question);

  questions.innerHTML = "";
  for(key in specificQuestion.choices){
    var btnQuestion = "question"+key+"_choice";
    var questionText = specificQuestion.choices[key];
    questions.appendChild(createQuestion(btnQuestion,questionText));
  }
}


  function createQuestion(name, questionText) {
	var e = document.createElement('li');
	var questionHTML = '<input type="radio" value="'+questionText+'" name="' + name + '"';
	questionHTML += '/>';
	questionHTML += questionText;
	e.innerHTML = questionHTML;
	return e;
}
});

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:200px;
  left:100px;
position:relative;
background-color:olive;
}
.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;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.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">Next</button>
<p class="hint"></p>
</div>