I am building a small quiz game (just for the sake of learning). The big picture of what I'm trying to do is determine if the end user has chosen the right answer based on what index value the gameBegin array represents.
I am currently giving me the answer “right” to select the right switch on the first question, and then on the next question, when I select the same switch, it will say “right” and “wrong”. On the third question, if I select the same switch, it will say “right”, “wrong” and “wrong”, etc.
Edit: this is actually the answer, but I don’t like how my comment got formatting (I thought it was harder to read for people reading this topic), so I just edited my post.
"As soon as each question loads, it adds more click handlers to answerChoices."
Do you know why more click handlers are added to answerChoices when each question is loaded? In my opinion, it checks whether the value of "gameBeginValue" corresponds to a certain value, if the function performs, if so, and then proceeds to check and check if it is equal to another value and runs this function if it is not.
Here is my code:
HTML:
<body>
<section class="headingIntroduction">
<div class="headingTitle">
<h2>Welcome to the Halloween Quiz Game!</h2>
<hr/>
<p></p>
<hr/>
</div>
<div class="formInput">
<form>
<input type="radio" id="answerChoice0" name="answerChoice" value="answerChoice0"/><span></span>
<input type="radio" id="answerChoice1" name="answerChoice" value="answerChoice1"/><span></span>
<input type="radio" id="answerChoice2" name="answerChoice" value="answerChoice2"/><span></span>
<input type="radio" id="answerChoice3" name="answerChoice" value="answerChoice3"/><span></span>
<hr/>
</form>
</div>
<div class="submitButton">
<input type="submit" id="submitButton" value="Click Here to Begin!"/>
<br/>
</div>
<div class="userScore">
<h3>Score:</h3>
</div>
</section>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/script.js"></script>
JQuery
$(document).ready(function(){
$('form').hide()
var gameBegin = [
{
question: 'Welcome to the Game Instructions Page!',
instructions:' You will be presented with several questions. Below each question are a set of answers. Select the answer that you think is correct and then click the "Submit" button to see if your answer is correct. At the end of the game, you will see your final score to let you know how you did.Choose carefully! Once you move onto the next question, you cannot go back!',
choice: '',
correctAnswer: '',
buttonValue: 'Start Game!'
},
{
question: 'What Film Series is Freddy Krueger From?',
instructions: 'Question 1 out of 5',
choice: ['A Nightmare on Elm Street', 'Simpsons Treehouse of Horror', '28 Days Later', 'The Texas Chainsaw Massacre'],
correctAnswer: 0,
buttonValue: 'Submit Answer'
},
{
question: 'Which Terrifying Villian Uses a Chainsaw to Murder His Victims?',
instructions: 'Question 2 out of 5',
choice: ['Jason Voorhees', 'Dracula', 'Frankenstein', 'Leatherface'],
correctAnswer: 3,
buttonValue: 'Submit Answer'
},
{
question: 'What is the Occupation of Sweeney Todd?',
instructions: 'Question 3 out of 5',
choice: ['Teacher', 'Priest', 'Barber', 'Doctor'],
correctAnswer: 2,
buttonValue: 'Submit Answer'
},
{
question: 'Who are the villians in the 1993 film "Hocus Pocus?"',
instructions: 'Question 4 out of 5',
choice: ['The Sanderson Sisters', 'Vlad the Impaler', 'Jigsaw', 'The Blair Witch'],
correctAnswer: 0,
buttonValue: 'Submit Answer'
},
{
question: 'Which Serial Killer is Leatherface Based On?',
instructions: 'Question 5 out of 5',
choice: ['Ted Bundy', 'Ed Gein', 'Charles Manson', 'Jack the Ripper'],
correctAnswer: 1,
buttonValue: 'Submit Answer'
},
{
question: 'Congratulations! You Finished The Halloween Quiz Game!',
instructions: 'To play again, click the button below.',
choice: '',
correctAnswer: '',
buttonValue: 'Start New Game'
}
]
var gameBeginValue = 0;
var zero = "answerChoice0";
var one = "answerChoice1";
var two = "answerChoice2";
var three = "answerChoice3";
$('#submitButton').on('click',function(){
if(gameBeginValue > 6){
gameBeginValue = 0;
} else if ((gameBeginValue < 1) || (gameBeginValue > 5)) {
$('form').hide();
}else{
$('form').show();
}
var questionTitle = $('h2');
questionTitle[0].textContent = gameBegin[gameBeginValue].question;
var gameInformation = $('p');
gameInformation[0].textContent = gameBegin[gameBeginValue].instructions;
var questionChoice =$('span');
questionChoice[0].textContent = gameBegin[gameBeginValue].choice[0];
questionChoice[1].textContent = gameBegin[gameBeginValue].choice[1];
questionChoice[2].textContent = gameBegin[gameBeginValue].choice[2];
questionChoice[3].textContent = gameBegin[gameBeginValue].choice[3];
var buttonDescription = $("#submitButton");
buttonDescription[0].value = gameBegin[gameBeginValue].buttonValue;
if (gameBeginValue==1){
question1();
}else if (gameBeginValue==2){
question2();
}else{
}
$("input[type=radio]").attr('disabled', false);
gameBeginValue++;
$('#answerChoice0').prop('checked',false);
$('#answerChoice1').prop('checked',false);
$('#answerChoice2').prop('checked',false);
$('#answerChoice3').prop('checked',false);
})
function question1(){
$('#answerChoice0').on('click',function(){
alert('correct!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice1').on('click',function(){
alert('wrong');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice2').on('click',function(){
alert('wrong');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice3').on('click',function(){
alert('wrong');
$("input[type=radio]").attr('disabled', true);
})
}
function question2(){
$('#answerChoice0').on('click',function(){
alert('wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice1').on('click',function(){
alert('wrong');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice2').on('click',function(){
alert('correct');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice3').on('click',function(){
alert('wrong');
$("input[type=radio]").attr('disabled', true);
})
}
})