I'm doing a dynamic quiz because I want to learn javascript, jquery, html and css.
My quiz is supposed to add 1 pt to the score variable each time the answer is correct. It seems to work correctly but when I answer the 10 questions correctly its displays 9 correct answers.
I'll appreciate if someone could help me.
This is my html:
<body>
<header>
<hgroup>
<h1>This is my Dynamic Quiz</h1>
<h2>Using html5 / css / javascript</h2>
</hgruop>
</header>
<section id='description'>
<p>This quiz is compossed by 10 questions, you have to answer at least 7 from 10 to pass the exam.</p>
<h2>Lets start!</h2>
</section>
<div id='questions-number'>
<p>Question <span id='current-question'>1</span> of <span>10</span> </p>
</div>
<section id='questions'>
<p id='question'></p>
<form id='myForm'>
<input type='radio' name='quiz' id='0' value='0'/><label id='answer0'>answer0</label></li></br>
<input type='radio' name='quiz' id='1' value='1'/><label id='answer1'>answer1</label></br>
<input type='radio' name='quiz' id='2' value='2'/><label id='answer2'>answer2</label></br>
<input type='radio' name='quiz' id='3' value='3'/><label id='answer3'>answer3</label></br>
</form>
</section>
<div id='score'></div>
<div id='back'>
back
</div>
<div id='next'>
next
</div>
and this is my js file
$(document).on('ready', ready);
function ready(){
var allQuestions =
[
{
question: "Whats my real name?",
choices: ["Jhonnatan", "Alberto", "Tatan","Jaime"],
answer: 0
},
{
question: "Who is Colombia's president?",
choices: ["Alvaro Uribe", "Andres Pastrana", "Juan Manuel Santos","Tatan"],
answer: 2
},
{
question: "My favorite super heroe?",
choices: ["Batman", "Flash", "Tatan","Javascript"],
answer: 3
},
{
question: "Wich sports do i practice?",
choices: ["Climbing", "Swimming", "Programming","Running"],
answer: 0
},
{
question: "Whats my dad's name?",
choices: ["Alberto", "Jorge", "Javier","Jose"],
answer: 1
},
{
question: "Whats my favorite color?",
choices: ["Red", "Purple", "Blue","All"],
answer: 2
},
{
question: "My favorite alcoholic drink",
choices: ["Vodka", "Aguardiente", "Rum","Tekila"],
answer: 3
},
{
question: "Whats my favorite kind of music?",
choices: ["Hardcore", "Reggaeton", "Salsa","Programming"],
answer: 0
},
{
question: "How many qestions has this quiz??",
choices: ["20", "8", "10","12"],
answer: 2
},
{
question: "My favorite programming lenguage?",
choices: ["Ruby", "Arduino", "Python","Javascript"],
answer: 3
}
];
var score = 0;
var number=0;
var question = $('#question');
var choice1 = $('#answer0');
var choice2 = $('#answer1');
var choice3 = $('#answer2');
var choice4 = $('#answer3');
var next = $('#next');
var back = $('#back');
var currentQuestion = $('#current-question');
next.on('click', changeQuestion);
addQuestionAndAnswers();
back.on('click', backQuestion);
function addQuestionAndAnswers() {
currentQuestion.text(number + 1);
question.text(allQuestions[number].question);
choice1.text(allQuestions[number].choices[0]);
choice2.text(allQuestions[number].choices[1]);
choice3.text(allQuestions[number].choices[2]);
choice4.text(allQuestions[number].choices[3]);
console.log('funcionando!');
}
function changeQuestion(){
if($("#myForm input[type='radio']:checked").length == 1){
if(number<9){
if($("#myForm input[type='radio']:checked").val() == allQuestions[number].answer){
number = number +1;
score ++;
addQuestionAndAnswers();
}else{
number = number +1;
addQuestionAndAnswers();
}
}else{
displayResult();
}
console.log('checked answer');
}else{
alert('please select an answer before proceed');
}
function displayResult(){
currentQuestion.text('10');
$('#myForm').css('display', 'none');
$('#question').css('display', 'none');
$('#next').css('display', 'none');
$('#score').css('display', 'inline-block');
$('#score').text('Your score is: ' + score + 'pts');
}
}
function backQuestion(){
if(number > 0){
number = number -1;
addQuestionAndAnswers();
}
}
}
if (number < 9) {
if ($("#myForm input[type='radio']:checked").val() == allQuestions[number].answer) {
number = number + 1;
score++; // only gets incremented here!!!
addQuestionAndAnswers();
} else {
number = number + 1;
addQuestionAndAnswers();
}
} else {
displayResult();
}
So when you submit the last question, it doesn't check the answer. You should re-arrange this part of the code, perhaps like this:
// first, check answer
if ($("#myForm input[type='radio']:checked").val() == allQuestions[number].answer) {
score++; // increment score for correct answer
}
// then, move to next question OR show results
if (number < 9) {
number = number + 1;
addQuestionAndAnswers();
} else {
displayResult();
}
You have another bug too: if you answer a question correctly, then go back to it, then click next, it adds to your total score again! So you can get infinite points if you want.