Reading Game

Revised- Ebufiddle Credit- cmcculloh

by Ebuka Chibueze

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div id="choices">
</div>
<div class="row">
    <div id="word" class="col-md-4 col-md-offset-4"></div>
</div>
<div class="row 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

#word{
    font-size: 3em;
}
.wordImg img {
    max-width: 100px;
    max-height: 100px;
    margin-top: 25px;
}



#word{
    text-align: center;
}

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

JavaScript

/*
Revised- Ebufiddle
Credit- cmcculloh

Test
- reading
- speed
*/

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
    },
    {
        "name":"girl",
        "img":"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSLd6-BygSC-wYEDcoDcz7JW5eJ8MSKFkew4zuIdPoJqunKf_-P",
        "tries": 0
    },
    {
        "name": "goo",
        "img":"http://heidelblog.net/wp-content/uploads/2014/06/goo.jpg",
        "tries": 0
    },
    {
        "name": "God",
        "img":"https://upload.wikimedia.org/wikipedia/commons/7/7c/Cima_da_Conegliano%2C_God_the_Father.jpg",
        "tries": 0
    },
    {
        "name": "green",
        "img":"http://homemadehalloween.org/wp-content/uploads/2012/10/minecraft-creeper2.png",
        "tries": 0
    },
    {
        "name": "cow",
        "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/CH_cow_2_cropped.jpg/250px-CH_cow_2_cropped.jpg",
        "tries": 0
    },
    { "name": "egg", "img":"http://upload.wikimedia.org/wikipedia/commons/0/02/Fried_egg,_sunny_side_up.jpg", tries:0},
];

_.each(words, function(word, i, words){
    var html = '';
    console.log(i%3);
    if(i%3 === 0){$('#choices').prepend('<div class="row"></div>');}
    html += '<div class="wordImg col-xs-4"><img data-name="' + word.name + '" src="' + word.img + '" /></div>'
    $('#choices .row:first').append(html);
});
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 ===...