JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<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-->

CSS

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;
}

JavaScript

$(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
            //...