Quiz answer highlighting both options

Question

I am building an employability quiz at university and each question has a Yes and a No answer.

If I click the Yes answer, it highlights green and shows an answer below.

If I click the No answer however, it highlights red, and it also highlights the Yes answer box green even though it hasn't been clicked.

This is Question 1 HTML:

    $(document).ready(function() {
      //get total 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 of ' + $questionNumber + '! </p>';
          $('.resultContainer').append(resultText);
          $('#halfText').append('<p>Wow, you are a good one!</p>');
          $('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
        } else if ($totalScore >= 3 && $totalScore < $questionNumber) {
          resultText += 'You got ' + $totalScore + ' out of ' + $questionNumber + '! </p>';
          $('.resultContainer').append(resultText);
          $('#halfText').append('<p>Thats pretty good, but there is still more you could do.</p>');
          $('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
        } else if ($totalScore < 3) {
          resultText += 'You got ' + $totalScore + ' out of ' + $questionNumber + ' </p>';
          $('.resultContainer').append(resultText);
          $('#halfText').append('<p>Dont worry, the Careers team are here to get you back on track!</p>');
          $('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
        }

      }; //end function

      //final score
      $('ul').last().click(function() {
        //prevent further clicks on this
        $(this).off('click');
        //show result after last li is clicked
        var $height = $('.finalResult').height();
        printResult();
        $('.finalResult').show();
        $('html, body').animate({
            scrollTop: $(document).height() - $height
          },
          1400);
      });

    }); //end dom ready

body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
}
.container {
  width: 100%;
}
.inner {
  width: 60%;
  margin: 0 auto;
}
ul {
  list-style-type: none;
  margin-left: -40px;
}
h2 {
  margin-top: 50px;
}
/*********************** LIST ***********************/

.simpleListAnswer:hover {
  /*background:#fff195;*/
  cursor: pointer;
}
.simpleListAnswer,
.quizzAnswer {
  width: 100%;
  background: #f2f2f2;
  padding: 9px;
  margin-top: 12px;
  border: 1px solid #d8d8d8;
}
.simpleListText {
  margin-left: 8px;
  font-size: 19px;
  color: #3d3d3d;
}
/***************************ANSWER REVEAL******************/

.quizzAnswerC,
.quizzAnswerF,
.finalResult {
  background: #fefefe;
  border: 1px solid #ddd;
  width: 100%;
}
.answerReveal {
  display: none;
  width: 100%;
}
.answerHeader div {
  color: #84f272;
  margin-top: 10px;
}
#bravo,
#sorry {
  width: 100%;
  margin-left: 10px;
  margin-top: 15px;
  margin-right: 10px;
  font-size: 15px;
}
.answerHeader {
  margin-left: 20px;
  width: 100%;
}
h3.correctMessage {
  color: #88f078;
  font-size: 30px;
}
h3.wrongMessage {
  color: #ff1f1f;
  font-size: 30px;
}
.fa.fa-check-circle,
.fa.fa-times-circle {
  padding-right: 10px;
}
.correctAnswer {
  background: #88f078;
}
.wrongAnswer {
  background: #ff1f1f;
}
.fade {
  opacity: .6;
  cursor: default;
}

<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>
    <!--end answer header-->
    <div class="answerText">
      <p id="bravo">Well done!</p>
    </div>
    <!--end asnwerText-->
  </div>
  <!--end quizzAnswerC-->

  <div class="quizzAnswerF">
    <div class="answerHeader">
      <!--<h3 class="wrongMessage"><i class="fa fa-times-circle"></i>Oops!</h3>-->
    </div>
    <!--end answer header-->
    <div class="answerText">
      <p id="sorry">You can find more information on this in Room 014</p>
    </div>
    <!--end asnwerText-->
  </div>
  <!--end quizzAnswerF-->
</div>
<!--end answerReveal-->

Any assistance in stopping this double-selection from happening would be greatly appreciated as I can't work out why it's happening!

Answer 1

Fine script. Thank you!

---

For this script how to add anwers reset function without page reload?

Example, I have script for Scroll To Top:

<a href="#" title="Scroll UP" class="scrollup">Scroll UP</a>
<script type="text/javascript">
    $(document).ready(function() {

        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        });

        $('.scrollup').click(function() {
            $("html, body").animate({
                scrollTop: 0
            }, 600);
            return false;
        });

    });
</script>

And need "Answer reset" function if I click on Up script.

Answer 2

You should remove this line:

$parent.find('.correct').addClass('correctAnswer');

from the else section of your jQuery. It's simply selecting the correct answer and highlighting it -- which it shouldn't.

jsFiddle example