JSFiddle - React, Tailwind, and code Playground

by smilburn

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<head>      
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>  
</head>

<body> 
  <div class="main-container">
     <div class="container">
     <div class="end-message"></div>
     <img src="http://designbeep.designbeep.netdna-cdn.com/wp-content/uploads/2010/11/1.collection-of-character-mascot-illustrator-tutorial.jpg" alt="monster">
    
      
   <ul style="display:none;" id="wordlist">
     
        <li data-word="one" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="two" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="three" data-audio="" data-pic="">&nbsp;</li>
      
        <li data-word="four" data-audio="" data-pic="">&nbsp;</li>
      
        <li data-word="five" data-audio="" data-pic="">&nbsp;</li>
      
        <li data-word="six" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="seven" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="eight" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="nine" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="ten" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="black" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="blue" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="brown" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="grey" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="green" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="orange" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="pink" data-audio="" data-pic="">&nbsp;</li>
        
        <li data-word="purple" data-audio=""...

CSS

.drag {

    display:block;
    height:61px;
    line-height:25px;
    width:61px;
    text-align: center;
    background:#ddd;    
    float:left;  
    -webkit-transition: -webkit-transform 0.1s ease-in;

 
}

.drag :hover {

    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);  
    border: 2pt white solid;    
}

table {
    clear:both;
    line-height:25px;
     text-align:center;    
position: relative;
}

.drop {
   
    height:61.5px;
    width:61.5px;
    cursor: move;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    opacity: 1;
}
.main-container {
    
    width: 806px;
    border: solid 8pt lightgreen;
    -webkit-box-shadow: 4px 4px 4px green;
    -moz-box-shadow: 4px 4px 4px green;
    box-shadow: 4px 4px 4px green;  
    background: #cc66ff;  
    visibility: hidden;     
}

.container {
    height: 496px;
    position: relative;
    width: 1000px;
}

.container > img {
        
    height: 373px;
    position: absolute;
    width: 497px;
    cursor: move;
                  
}

table {
    margin: 0;
    padding: 0;
    line-height: 56px;
               
}
 
article, aside, figure, footer, header, hgroup,
menu, nav, section {
    
    display: block;    
}
  
table td {
    background: none repeat scroll 0 0 #CC66FF;
    border: 1px dashed white;
    cursor: move;
    float: left;
    min-height: 60px;
    min-width: 60.1px;
    position: relative;
    vertical-align: top;
}
    
.table-style{
  
    position: absolute;
    color: transparent;
    font-family: arial;
    font-size: 35pt;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

      
}


.highlight-problem {
 
    -webkit-box-shadow: inset 0px 0px 10px 5px purple;
    box-shadow: inset 0px 0px 10px 5px purple;
    
}

       
.tiles-wrapper {
    left: 0;
    position:...

JavaScript

var listOfWords = [];
var rndWord = [];
var score = {
    right: 0,
    wrong: 0
};

var wordlist = $("#wordlist");
var wordsData = [];
var tempWords = wordlist.find('li');
var amount = 6; // <- magic number
if (wordlist.find('li').length >= amount) {
    var indexs = [],
        index;
    while (amount) {
        index = Math.floor(Math.random() * tempWords.length);
        if ($.inArray(index, indexs) === -1) {
            indexs.push(index);
            wordsData.push(tempWords[index]);
            amount--;
        }
    }
}
else {
    wordsData = tempWords;
}

console.log(wordsData);
$(wordsData).each(function() {
    var elm = $(this);
    listOfWords.push({
        "name": elm.data("word"),
        "pic": elm.data("pic"),
        "audio": elm.data("audio")
    });
});

var chosenWords = $(wordsData).get().sort(function() {
    return Math.round(Math.random()) - 0.5
}).slice(0, 2);

var copylist = listOfWords.slice();

for (var x = 0; x < listOfWords.length; x++) {
    var rand = Math.floor(Math.random() * (copylist.length));
    chosenWords.push(copylist[rand].name);
    copylist.splice(rand, 1);
    if (chosenWords.length < 12) {
        chosenWords.push('   ');
    }
}

var shuffledWords = [];
shuffledWords = chosenWords.sort(function() {
    return 0.5 - Math.random()
});

var unusedShuffledWords = shuffledWords.slice();

function getXSpaces(numOfSpaces) {
    var answer = "";
    for (var i = 0; i < numOfSpaces; i++) {
        answer += " ";
    }
    return answer;
}

function getWordToFitIn(spaceAvail, wordlist) {
    var foundIndex = -1;

    var answer = _.find(wordlist, function(word, index) {
        if (word.length <= spaceAvail) {
            foundIndex = index;
            return true;
        }
    });

    if (foundIndex == -1) {
        answer = getXSpaces(spaceAvail);

        _.find(wordlist, function(word, index) {
            if (word[0] == " ") {
                foundIndex = index;
                return true;
            }
       ...