Stopping overlap for bigger words

Question

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.

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.

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.

Words are added through the html like this...

<ul style="display:none;" id="wordlist">
    <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">
    </li>
</ul>

Then the grid is dynamically created from the list like this...

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

for (i = 0; i < 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 < ul.children.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 guesses = {};
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;

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

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

        for (var k = 0; k < 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);

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. http://jsfiddle.net/cTGGA/18/

EDIT

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

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

Answer 1

I think you either need to make the word selection from the shuffledword list a function that returns the next unused word that fits the space remaining in the row.

or have the rows be 2x the longest word if you want 2 words per row and fill with blanks to the end of the row after picking one or 2 words from the list.