William William - 10 days ago 5
CSS Question

Live quiz scores from variables

Ok so on my quiz I have it using variables equal to 0 that increase from an if statement, and an else if statement. One variable is supposed to increase whenever you get a question correct, and the other is supposed to increase whenever you get a question incorrect. Whenever you get a question wrong, it will no longer increase the correct variable, if you get the next one correct. It doesn't increase the incorrect variable if you get one incorrect. It for some reason won't post the question if you get rid of the 2nd .btn click listener. I wan't to get rid of it , and make it all one working listener.



$(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

You had a few issues. The second onclick event was not needed. Some of those unused variables at the beginning can be deleted.
I added a stop to prevent the overrun issue when that last question is reached.

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

I added two variables to use in the comparisons, I was having issues without them. (Could be this environment.)

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

I fixed quizQuestion to pre-increment before passing it as a parameter.

fillQuestion(++quizQuestion);

There were a few other changes in the fillQuestion() function, jQuery selectors were incorrect.

Try this:

$(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>