Ensuring user completes given word before moving on

Question

In my drag and drop game, letters are dragged on to the words in the grid with the aim of completing them all and revealing the image behind. The user chooses a word to spell by clicking the "click me!" button. This then marks a word at random with a style called ".spellword".

I need it so that the letters revert away from other words, other than the one they are currently on - highlighted by the click me button.

Here is the script that makes the button choose a word at random and give it the ".spellword" style.

 $('#pickNext').click(function() {
// remove the class from all td's
$('td').removeClass('spellword');
// pick a random word
rndWord = shuffledWords.sort(function() {
    return 0.8 - Math.random();
})[0];
// apply class to all cells containing a letter from that word
$('td[data-word="' + rndWord + '"]').addClass('spellword');
});

Here is the revert I have applied to my draggables already...

$('.drag').draggable({

     helper: 'clone',
     snap: '.drop',
     grid: [60, 60],
     revert: function(droppable) {
         if (droppable === false) {
             return true;
         }

         else {

             return false;
         }
    }
});

Thanks!

Answer 1

http://jsfiddle.net/bmgonzal/uu99V/

This fiddle reverts the letter back unless it is dropped into the first cell of the word to be spelt and is the correct letter.

I have done it by creating the variable "validDrop" like so..

var validDrop = $('.drop-box.spellword[data-letter='+ $(this).attr('data-letter') +']');
        validDrop.addClass('drop');

Hope it helps