title: How do I highlight a random word from a list
body: <p>I am creating a <strong>drag and drop</strong> word game. This part of the script dynamically creates a table from <strong>12 random words</strong> pulled from the <strong>listOfWords.</strong> I need a word in the table to be highlighted with the given CSS until it is completed to show the user which word to spell. It would then randomly choose another word in the table to spell and so on until all the words are complete....</p>
  
  <p>I have tried various different ways but can't get it working, please help</p>
  
  <pre><code>var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog", "log", "pan", "can", "man", "pin", "gag", "sat", "pat", "tap", "sap", "tag", "gig", "gap", "nag", "sag", "gas", "pig", "dig", "got", "not", "top", "pop", "god", "mog", "cot", "cop", "cap", "cod", "kid", "kit", "get", "pet", "ten", "net", "pen", "peg", "met", "men", "mum", "run", "mug", "cup", "sun", "mud", "rim", "ram", "rat", "rip", "rag", "rug", "rot", "dad", "sad", "dim", "dip", "did", "mam", "map", "nip", "tin", "tan", "nap", "sit", "tip", "pip", "sip", "had", "him", "his", "hot", "hut", "hop", "hum", "hit", "hat", "has", "hug", "but", "big", "bet", "bad", "bad", "bed", "bud", "beg", "bug", "bun", "bus", "bat", "bit", "fit", "fin", "fun", "fig", "fan", "fat", "lap", "lot", "let", "leg", "lit"];
  
  var guesses = {};
  
  var shuffledWords = listOfWords.slice(0).sort(function() {
  return 0.5 - Math.random();
  }).slice(0, 12);
  
  var tbl = document.createElement('table');
  tbl.className = 'tablestyle';
  var wordsPerRow = 2;
  
  for (var i = 0; i &lt; shuffledWords.length; 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').attr('data-word', word);
          cell.textContent = word[k];
          // IF FIREFOX USE cell.textContent = word[j]; INSTEAD
          row.appendChild(cell);
          }
     }
      tbl.appendChild(row);
  }
  
  document.body.appendChild(tbl);
  </code></pre>
  
  <p>Here is the <strong>CSS</strong> i want to apply to the word needed to spell...</p>
  
  <pre><code>.spellword {
  
      -webkit-box-shadow: inset 0px 0px 10px 5px #176BC9;
      box-shadow: inset 0px 0px 10px 5px #176BC9;
  
  }
  </code></pre>
  
  <p>I think it would be something along these lines...</p>
  
  <pre><code>var wordToSpell = shuffledWords.slice(0).sort(function() {
  return Math.round(Math.random())-0.5
  $("wordToSpell").addClass("spellword");
    }).slice(0,1);
  </code></pre>
  
  <p>I have also tried this, but no joy...</p>
  
  <pre><code>$(document).ready(function() {
   var wordToSpell = [
       &lt;c:forEach var="word" items="${listOfWords}"&gt;'${word}', &lt;/c:forEach&gt; // JSP : server-side
   ];  
   for (var i = 0; i &lt; wordToSpell.length; i++) {
       $('td').highlight(wordToSpell[i]);
   }
  });
  </code></pre>