so, I am creating a css animation for my degree, and I have the quiz setup so that it cycles through questions with specific answers, the quiz is working fully functional etc…however, I have noticed that when the correct answer is pressed more than once, the score increases, even if the answer has already been selected and initial score increase has been added. it begins with a screen that has text on it offering a narative to the game we are creating, and this works as intended also.
It is a single page set-up where all pages are inside of one parent container and to cylce pages it calls on a child container.
code that is being used it all JQuery and HTML with CSS to style it.
// --------------------------Multiple Choice Page------------------------//
$("#start-button").click(function() {
$("#beginning-screen").remove();
;})
$("#start-button-quiz").click(function() {
$("#beginning-screen-quiz").remove();
;})
$('#answer1').click(function(){
$(this).addClass("selected");
setTimeout(function() {
checkAnswer(1);
},1000);
});
$('#answer2').click(function(){
$(this).addClass("selected")
setTimeout(function() {
checkAnswer(2);
},1000);
});
$('#answer3').click(function(){
$(this).addClass("selected")
setTimeout(function() {
checkAnswer(3);
},1000);
});
$('#next-btn').click(function(){
nextQuestion();
});
nextQuestion();
});
// --------------------------- Multiple Choice Page functions and variables -------------------------------------
// Study Page
var currentBox = 1;
var numBoxes = $('.text-box').length;
// variables here
var quizData = [
{question:"If the size of a battery in a complete circuit is increased:",
answers:["the current decreases","the current increases","the voltage stays the same"],
correctAnswer:2,
feedback:"An increase in voltage will increase the current flowing in a circuit (if nothing else is changed) Click to next page find out more."
},
{question:"The current in a series circuit containing two bulbs:",
answers:["is the same at every place in the circuit","is larger nearer the battery","is larger between the bulbs"],
correctAnswer:1,
feedback:"This is an important point to remember about a series circuit. Click to next page find out more."
},
{question:"Two identical bulbs are in parallel in a complete circuit. If one breaks:",
answers:["the other stays on","the other goes off","the other bulb is brighter"],
correctAnswer:1,
feedback:"This is a benefit of a parallel circuit, it is usually easier to find out which component has broken as the rest still work"
},
{question:"Wires are usually coated in plastic because:",
answers:["plastic is an insulator","plastic can be lots of different colours","plastic helps the wires conduct electricity"],
correctAnswer:1,
feedback:"Wires used to be covered with rubber as an insulator but rubber perishes faster than plastic."
},
{question:"Which of the following statements is true?",
answers:["A voltmeter is connected in series to measure voltage.","Different sized bulbs in parallel have the same current flowing through them.","In a parallel circuit with four identical bulbs, the current is shared equally between them."],
correctAnswer:3,
feedback:"If the four bulbs were NOT identical, the current would still be shared out, but not equally."
},
{question:"Wires are normally made from copper. This is because:",
answers:["copper has a high resistance","copper is cheap","copper is a very good conductor of electricity"],
correctAnswer:3,
feedback: "It is also very malleable and can therefore easily be bent to go round corners."
},
{question:"Two identical bulbs are in parallel in a complete circuit. A third identical bulb is connected in parallel. What happens?",
answers:["All the bulbs are dimmer","All the bulbs are the same brightness","The third bulb is brighter"],
correctAnswer:2,
feedback:"Adding identical bulbs in parallel uses more current but brightness stays the same."
},
];
var currentQuestion = 0;
var totalQuestions = quizData.length;
var score = 0;
function showQuestion(){
$("#question").html(quizData[currentQuestion-1].question);
$("#answer1").html(quizData[currentQuestion-1].answers[0]);
$("#answer2").html(quizData[currentQuestion-1].answers[1]);
$("#answer3").html(quizData[currentQuestion-1].answers[2]);
$("#feedback").html(quizData[currentQuestion-1].feedback);
}
function nextQuestion(){
currentQuestion++;
if(score >= 60){
$("#answersAndFeedback").addClass('hidden');
$("#question").addClass('hidden');
$("#game-over").removeClass('hidden');
$('.p2-button').removeClass('hidden');
$("#next-btn").addClass("hidden");
return;
}
if(currentQuestion > totalQuestions){
// end of quiz
$("#game-over").removeClass('hidden');
return;
}
showQuestion();
// hide feedback and next button
$("#next-btn").addClass("hidden");
$("#feedback").addClass("hidden");
// remove all incorrect, correct classes on answer buttons
$('.answer-box').removeClass("correct incorrect");
// add restart button if score is under 60
if(score < 60){
$("#feedback").append('<button id="restart-btn" onclick="location.reload();">Restart Quiz</button>');
$('.p2-button').addClass('hidden');
}
}
function checkAnswer(selectedAnswer){
var theCorrectAnswer = quizData[currentQuestion-1].correctAnswer;
// remove the grey selected class
$('.answer-box').removeClass("selected");
// turn the boxes red or green depending on if they are the correct answer
$( ".answer-box" ).each(function( index ) {
if((index+1)==theCorrectAnswer){
$( this ).addClass("correct");
} else {
$( this ).addClass("incorrect");
}
});
if(selectedAnswer==theCorrectAnswer){
// got it correct
score += 10;
$(".score").html(score);
} else {
// got it wrong so do nothing
}
// show feedback and next button
$("#next-btn").removeClass("hidden");
$("#feedback").removeClass("hidden");
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Multiple Choice Page -->
<div class="page-multiple-choice">
<div id="beginning-screen-quiz">
<h1 id="heading-quiz">Oh no! it looks like you have been locked out of the computer system. You will have to take this quiz in order to regain access, you must get a score of 60 in order to bypass the security system.</h1>
<button id="start-button-quiz">Hack into security</button>
</div>
<h1>Multiple Choice Quiz</h1>
<div class="p2-button button">
Fix the circuit
</div>
<div class="p-menu-button button">
Go back to menu
</div>
<div id="wrapper">
<div id="question">Sample question here</div>
<div id="answersAndFeedback">
<div id="answer1" class="answer-box">Answer 1</div>
<div id="answer2" class="answer-box">Answer 2</div>
<div id="answer3" class="answer-box">Answer 3</div>
<div id="feedback" class="hidden">Feedback goes here</div>
</div>
<div class="score">0</div>
<div id="next-btn" class="hidden">next</div>
<div id="game-over" class="hidden">Congratulations! Continue to the next page!</div>
</div>
</div>any explanation how to fix this would be greatly appreciated, although the bug may not be found by users, I would still like to cover all basis and make sure it is fixed for the integrity of the game design.
I tried by adding:
// Disable all answer boxes to prevent further selection
$('.answer-box').prop('disabled', true);
however, an error came up in developer mode on google, so I removed that, but it would still not stop the issue I was having and then that also created more issues by not allowing me to press the next button and would completely disable the selection process after the first correct answer was pressed.
2
Answers
I think you have to iterate through your answer-boxes.
Adapting the example of this question and the following answers (jQuery to loop through elements with the same class), you should change your JS-code to:
Here I have added calculated class when score increased
Try this JSFiddle
And add in start of
nextQuestion()