I am currently developing an employability quiz for my university project. Each question offers a choice between Yes and No answers.
If the user selects the Yes answer, it will be highlighted in green and display the correct answer below.
However, if the user selects the No answer, it gets highlighted in red while also incorrectly highlighting the Yes answer box in green even though it hasn't been selected.
This code snippet showcases Question 1's HTML structure:
$(document).ready(function() {
//get total number of questions
var $questionNumber = $('h2').length;
console.log($questionNumber);
//caching final score
var $totalScore = 0;
$('li').click(function() {
//caching variables
var $parent = $(this).parent();
var $span = $(this).find('.fa');
//deactivate options on click
$parent.find('li').off("click");
//check for .correct class
//if yes
if ($(this).hasClass('correct')) {
//add .correctAnswer class
$(this).addClass('correctAnswer');
//find next span and change icon
$span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
//reduce opacity of siblings
$(this).siblings().addClass('fade');
//show answer
var $answerReveal = $parent.next('.answerReveal').show();
var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
var $toShowFalse = $answerReveal.find('.quizzAnswerF');
$toShowCorrect.show();
$toShowFalse.remove();
//add 1 to total score
$totalScore += 1;
//console.log($totalScore);
} else {
//add .wrongAnswer class
$(this).addClass('wrongAnswer').addClass('fade');
//change icon
$span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
//reduce opacity of its siblings
$(this).siblings().addClass('fade');
//show wrong Message
var $answerReveal = $parent.next('.answerReveal').show();
var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
var $toShowFalse = $answerReveal.find('.quizzAnswerF');
$toShowCorrect.remove();
$toShowFalse.show();
//locate correct answer and highlight
$parent.find('.correct').addClass('correctAnswer');
};
}); //end click function
//print Results
function printResult() {
var resultText = '<p>';
if ($totalScore === $questionNumber) {
resultText += 'You got ' + $totalScore + ' out...';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>1. I know where/how to find out about work experience, internship and placement opportunities</h2>
<ul class="simpleList">
<li class="simpleListAnswer correct">
<span class="fa fa-square-o"></span>
<span class="simpleListText">Yes I know where to look.</span>
</li>
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">No I'm not sure.</span>
</li>
</ul>
<!--end simpleList-->
<div class="answerReveal">
<div class="quizzAnswerC">
<div class="answerHeader">
<h3 class="correctMessage"><i class="fa fa-check-circle "></i>Awesome!</h3>
</div>
<div class="answerText">
<p id="bravo">Well done!</p>
</div>
</div>
<div class="quizzAnswerF">
<div class="answerText">
<p id="sorry">You can find more information on this in Room 014</p>
</div>
</div>
</div>If anyone could offer assistance on resolving this issue of incorrect double-selection, your help would be highly appreciated as I am unable to identify the root cause!