Magic Words Game

Quick little game to learn your magic words

by tsdexter

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-xs-12">
            <button id="again" class="btn btn-lg btn-warning">Say Again</button>    
        </div>
        <div class="col-sm-6 col-xs-12">
            <button id="new" class="btn btn-lg btn-success">New Word</button>
        </div>
    </div>
    <div class="row" id="results">
        <div id="right" class="col-xs-6">
             <span class="wrap"><span data-size="15" style="font-size: 15px" class="fa fa-thumbs-up correct" aria-hidden="true"></span></span> x<span id="rightcount">0</span>          
        </div>
        <div id="wrong" class="col-xs-6">
             <span class="wrap"><span data-size="15" style="font-size: 15px" class="fa fa-thumbs-down incorrect" aria-hidden="true"></span></span> x<span id="wrongcount">0</span>          
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3 col-xs-4">
            <button class="answer btn btn-lg" data-say="eh">a</button>
        </div>
        <div class="col-sm-3 col-xs-4">
            <button class="answer btn btn-lg">and</button>
        </div>    
        <div class="col-sm-3 col-xs-4">
            <button class="answer btn btn-lg" data-say="bee">be</button>
        </div>
        <div class="col-sm-3 col-xs-4">
            <button class="answer btn btn-lg" data-say="eye">I</button>
        </div>
        <div class="col-sm-3 col-xs-4">
            <button class="answer btn btn-lg" data-say="inn">in</button>
        </div>
        <div class="col-sm-3 col-xs-4">
            <button class="answer btn btn-lg">is</button>
        </div>    
        <div class="col-sm-3 col-xs-4">
            <button...

CSS

body {
    text-align: center;
}
.btn {
    width: 100%;
    line-height: 40px;
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
}
#again, #new {
    font-size: 35px;
}
#results {    
    margin-bottom: 30px;
}
#results span {
    font-size: 16px;
    color: blue;
    padding: 5px;
}
#results #wrong span {
    color: red;
}
button.answer.btn.btn-lg.btn-danger:before {
    content: "\e014";
    font-family: 'Glyphicons Halflings';
    position: absolute;
    font-size: 120px;
    top: 0;
    left: 0;
    line-height: 130px;
    bottom: 0;
    right: 0;
    vertical-align: middle;
}
button.answer.btn.btn-lg.btn-success:before {
    content: "\e013";
    font-family: 'Glyphicons Halflings';
    position: absolute;
    font-size: 120px;
    top: 0;
    left: 0;
    line-height: 130px;
    bottom: 0;
    right: 0;
    vertical-align: middle;
}
@media (min-width: 767px){
    .btn {
        width: 100%;
        line-height: 1.5;
        margin-bottom: 30px;
        font-size: 70px;
        font-weight: bold;
    }
}

JavaScript

$(document).ready(function(){
    // wait on voices to be loaded before fetching list
    var voices = window.speechSynthesis.getVoices();
    window.thename = "Jack";
    window.speechSynthesis.onvoiceschanged = function() {
		window.words = new Array();
        window.theword = "";        
        say("Hello "+window.thename+"!");
        $('.answer').on('click', function(){
            var text = $(this).attr('data-say') || $(this).text();
            say(text);
            if (text == window.theword) {
                var prize = ["fart head!", "poopy face", "poopity pooo ooo ooo ooop", "Jack the stinky head", "stinky face poo jack", "jacky poo poop", "farty fart fart fart fart... ... ... fart", "MOMMY STINKS!"];
                var min = 1;
                var max = prize.length;
                var num = Math.floor(Math.random() * (max - min) + min) - 1;
				window.thename = prize[num];
                say("GREAT JOB "+window.thename+"!");				
                $(this).addClass('btn-success');
                plusOne();
                window.setTimeout(askForWord, 1000);                  
            } else {   
                say("WRONG!");
				minusOne();
                $(this).addClass('btn-danger');
            }            
        });   

        $('#again').on('click', function(){
            say('The word you are looking for is ... ' + window.theword);
        });

        $('#new').on('click', function(){
            askForWord();
        });
        
        $(window).on('keydown', function (ev) {
          var key;
          var isShift;
          if (window.event) {
            key = window.event.keyCode;
            isShift = !!window.event.shiftKey; // typecast to boolean
          } else {
            key = ev.which;
            isShift = !!ev.shiftKey;
          }
          if ( isShift ) {
            switch (key) {
              case 87: // ignore shift key
                changeWords();
                break;
              case 78:
     ...