JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

<div class="container">
<div id="choices">

</div>
<div id="word"></div>
<div class="progress">
  <div id="score" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 1%;">
    <span class="sr-only"></span>
  </div>
</div>
</div>


<audio id="success" src="http://www.storiesinflight.com/html5/audio/piano_chord.wav" preload="auto"></audio>
<audio id="error" src="http://www.storiesinflight.com/html5/audio/synth_vox.wav" preload="auto"></audio>

CSS

img {
    width: 100px;
    height: 100px;
    margin-left: 60px;
}

#word{
    text-align: center;
}

#container, #word, #progress { margin: 10px; }

JavaScript

//http://www.storiesinflight.com/html5/audio.html

var words = [
    {
        "name": "boy",
        "img": "http://images.clipartpanda.com/boy-20clip-20art-RiAykqLLT.jpeg",
        "tries": 0
    },
    {
        "name":"bee",
        "img": "http://bee-stings.net/bee_logo2.jpg",
        "tries": 0
    },
    {
        "name":"baby",
        "img": "http://www.eonline.com/resize/500/500//eol_images/Entire_Site/2015021/rs_300x300-150121185511-600.New-Gerber-Baby.ms.012115.jpg",
        "tries": 0
    }
];

_.each(words, function(word, i, words){
    $('#choices').append('<img data-name="' + word.name + '" src="' + word.img + '" />');
});
var $challengeWord = $('#word');
var score = 1;
var penalty = 3;
var $score = $('#score');
var lastWord = '';
$('img').on('click', function(e) {
    var choice = $(e.currentTarget).data('name');
    if(choice === $challengeWord.text()){
        $score.addClass('progress-bar-success').removeClass('progress-bar-danger');
        score+=10;
        penalty = 3;
        playSuccess();
    }else{
        $score.removeClass('progress-bar-success').addClass('progress-bar-danger');
        score-=penalty;
        penalty = penalty * 2;
        playError();
    }
    
    if(score < 1){
        score = 1;
    }
    $('#score').width(score + "%");
    chooseWord();
});

var chooseWord = function chooseWord() {
    var nextWord = _.shuffle(words)[0].name;

    if(nextWord === lastWord){
        chooseWord();
    }else{
        lastWord = nextWord;
        $challengeWord.text(lastWord);
    }
}
chooseWord();

var playSuccess = function playSuccess() {
    play_multi_sound('success');
}

var playError = function playError() {
    play_multi_sound('error');
}

	var channel_max = 10;										// number of channels
	audiochannels = new Array();
	for (a=0;a<channel_max;a++) {									// prepare the channels
		audiochannels[a] = new Array();
		audiochannels[a]['channel'] = new Audio();						// create a new audio...