Stopping overlap for bigger words
<p>In my spelling game at the moment, the grid is designed for 3 letter words. I can add bigger words into the "wordList" (which creates the grid dynamically), but the size of the grid changes and overlaps on the rows where the bigger words are.</p>

<p>At the moment when a four letter word is added for example, the grid will add an extra cell to the end of that row rather than judging that the word will not fit on that line and take another position in the grid that works.</p>

<p>Basically I need the grid to stay the same size, and when words are randomly placed, determine a position that allows the grid to stay 6x6 rather than going out the edges when they do not fit in position. Obviously when words bigger than 6 letters are added this will not work, because it is a 6x6, but this shouldn't be a problem as I do not think we will stretch to words that big.</p>

<p>Words are added through the html like this...</p>

<pre><code>&lt;ul style="display:none;" id="wordlist"&gt;
    &lt;li data-word="rat" 
        data-audio="http://www.wav-sounds.com/cartoon/bugsbunny1.wav" 
        data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png"&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Then the grid is dynamically created from the list like this...</p>

<pre><code>var listOfWords = [];
var rndWord = [];
var counter = 0;
var ul = document.getElementById("wordlist");
var i;

for (i = 0; i &lt; ul.children.length; ++i) {

    listOfWords.push({
        "name": ul.children[i].getAttribute("data-word"),
        "pic": ul.children[i].getAttribute("data-pic"),
        "audio": ul.children[i].getAttribute("data-audio")
     });
}

var chosenWords = [];
var copylist = listOfWords.slice();

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

}

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

var guesses = {};
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;

for (var i = 0; i &lt; shuffledWords.length - 1; i += wordsPerRow) {

    var row = document.createElement('tr');
    for (var j = i; j &lt; i + wordsPerRow; ++j) {
        var word = shuffledWords[j];
        guesses[word] = [];

        for (var k = 0; k &lt; word.length; ++k) {
            var cell = document.createElement('td');


            $(cell).addClass('drop-box').attr('data-word', word).attr('data-letter', word[k]);
            cell.textContent = word[k];

            row.appendChild(cell);
         }
    }

    tbl.appendChild(row);
}

$(".container").append(tbl);
</code></pre>

<p>Here is a fiddle to show exactly what I mean. I have added two 4 letter words into the "wordList" to show what I mean. <a href="http://jsfiddle.net/cTGGA/18/" rel="nofollow">http://jsfiddle.net/cTGGA/18/</a></p>

<p>EDIT</p>

<p>Once I have adapted larger words into the grid what will I say in this statement to prepare it.</p>

<pre><code>var completeLetters = $('.wordglow2').length;
var completeWords = (completeLetters / 3);
$('.counter').html(completeWords + '/6');
</code></pre>
