JSFiddle - React, Tailwind, and code Playground

by davestein

HTML

<h1>Javascript as English</h1>

<div class="js-level-one">
<h3>Level One</h3>

I want to set my name

<ul class="options clearfix js-level-one-options code">
    <li class="js-a">var blooop = Dave;</li>
    <li class="js-b">var myname = 'Dave';</li>
    <li class="js-c">var myname <> 'Dave';</li>
</ul>
<div class="js-level-one-answer hide">
    <ul class="explanation">
        <li><span class="code">var</span>: tells the computer browser you want to save something</li>
        <li><span class="code">myname</span>: is the variable to use later. It can be any set of letters along with underscores and numbers.</li>
        <li><span class="code">'Dave'</span>: is the value of the variable. Being in quotes means it's a string - more on that later</li>
    </ul>
    
    <input type="button" value="Next level" />
</div>
</div>




<div class="js-level-two hide">
<h3>Level Two</h3>

Pick the ways to set a name

<ul class="options clearfix js-level-two-options code">
    <li class="js-a"><input type="checkbox" />var myName = 'Bob';</li>
    <li class="js-b"><input type="checkbox" />var myname = 'Dave';</li>
    <li class="js-c"><input type="checkbox" />var my_name = 'Mike';</li>
    <li class="js-d"><input type="checkbox" />var 999 = 'Mike';</li>
    <li class="js-e"><input type="checkbox" />var _999 = 'Mike';</li>
</ul>
    <input type="button" value="Am I right? [ not working yet ]" />
<div class="js-level-two-answer hide">
    <ul class="explanation">
        <li><span class="code">var</span>: tells the computer browser you want to save something</li>

    </ul>
    

</div>
</div>

CSS

.options {
    display: block;
}

li {
    list-style: none;
}
.options li {
    float: left;
    border: solid 1px #CCC;
    padding: 10px;
    margin-right: 10px;
}

.code {
    font-family: 'Courier New';
}

.options li:hover {
    cursor: pointer;
    background-color: #EFEFEF;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.options li:hover.correct,
.options .correct {
     background-color: #EEFFEE;   
}

.options li:hover.incorrect,
.options .incorrect {
     background-color: #FFEEEE;   
}

.hide {
    display: none;   
}
}

JavaScript

$('.js-level-one-options li').on( 'click', function() {
    var correct = 'b',
        klass = ($(this).hasClass('js-'+correct))
                ? 'correct' : 'incorrect';
    
    $(this).removeClass('correct')
    .removeClass('incorrect')
    .addClass(klass);
    
    if (klass === 'correct') {
        $('.js-level-one-answer').removeClass('hide');
    }
    else {
        alert('Try again [ show explanation of why its bad ]');   
    }
    
    $('.js-level-one input[type=button]').on('click', function() {
       $('.js-level-one').addClass('hide');
        $('.js-level-two').removeClass('hide');
    });
});