Question

Currently this script takes the words from the list and generates a grid, giving the words random positions each time. When the words are generated I want them to be split into individual characters, into cells next to each other – how do I do this?

  var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog", "log", "pan", "can",  "man", ];
  var shuffledWords = listOfWords.slice(0, 12);
  shuffledWords.sort(function() {
  return 0.5 - Math.random();
});

 var table = $('<table class="tablestyle">');
 var rows = 6;
 var cols = 2;
 var tr;
 var index;

for (var row = 0; row < rows; row++) {
tr = $('<tr>');
for (var col = 0; col < cols; col++) {
    index = (row * cols) + col;
    $('<td>').text(shuffledWords[index]).appendTo(tr);
}
tr.appendTo(table);
}

 table.appendTo('body');

 $('<table>' + innerTable + '</table>').appendTo('body');

Answer 1

Try sorting the list randomly before slicing it. Like this

listOfWords.sort(function() {
  return 0.5 - Math.random();
});
var shuffledWords = listOfWords.slice(0, 12);