Making sure words do not repeat when populating grid
===

When my grid is created it is supposed to have 6 unique words in, but at the moment it generates 6 words that are sometimes duplicated.

I need someone to help me write a function to get around this problem.

Here I have the fiddle... http://jsfiddle.net/qBzPx/

Here is the list of words with sounds and images attached...

    <ul style="display:none;" id="wordlist">
      <li data-word="mum" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png"></li>
      <li data-word="cat" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/c/9/9/5/119543969236915703Gerald_G_Cartoon_Cat_Face.svg.med.png"></li>
      <li data-word="dog" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/e/9/4/1/1195440435939167766Gerald_G_Dog_Face_Cartoon_-_World_Label_1.svg.med.png"></li>
      <li data-word="bug" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/4/b/4/2/1216180545881311858laurent_scarabe.svg.med.png"></li>
      <li data-word="rat" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png"></li>
      <li data-word="dad" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/H/I/n/C/p/Z/bald-man-face-with-a-mustache-md.png"></li>
  </ul>

Lastly here is the script....

            var listOfWords = [];

    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")
          });
      }
   
    console.log(listOfWords);

    var chosenWords = [];

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

        }

    console.log(chosenWords);
    var shuffledWords = [];
    shuffledWords = chosenWords.sort(function() { return 0.5 - Math.random() });
                                                  
    var guesses = {};
    console.log(shuffledWords);
    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');
        console.log(shuffledWords);
       for (var j = i; j < i + wordsPerRow; ++j) {
            var word = shuffledWords[j];
            console.log(j);
            console.log(word);
            guesses[word] = [];

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

                $(cell).addClass('drop').attr('data-word', word);
                cell.textContent = word[k];
            
                row.appendChild(cell);
            }
        }
        tbl.appendChild(row);
    }

    document.body.appendChild(tbl);

    