Question

I am creating a word spelling, drag and drop game. When the letters are dragged onto the words in the table, a style is triggered depending on whether the spelling is right or wrong. If it is right the word fades away to reveal the picture behind. If it is wrong the letters glow red as set by the style.

My problem is that the letters stay red throughout the rest of the game, meaning the image behind cannot be completed because you it wont allow you to spell the words glowing red. I need the style to go when the next turn happens and allow you to have another go at spelling that word, can anyone help me with this?

Here is the script that triggers the CSS…

$(".drop").droppable({ 

hoverClass: 'drophover',
drop: function(event, ui) {
    word = $(this).data('word');

    guesses[word].push($(ui.draggable).attr('data-letter'));

    console.log(guesses);

    if (guesses[word].length == 3) {
        if (guesses[word].join('') == word) {
            $('td[data-word=' + word + ']').addClass("wordglow2");


        } else {
            $('td[data-word=' + word + ']').addClass("wordglow");

        }
    }
}
});

Here is the CSS for this is…

.wordglow {
    -webkit-box-shadow: inset 20px 0px 10px 5px #ff0000;
    box-shadow: inset 0px 0px 10px 5px #ff0000;

}

.drop.wordglow2 {

    -webkit-box-shadow: inset 0px 0px 10px 5px #22ff22;
    box-shadow: inset 0px 0px 10px 5px #22ff22;
    visibility: hidden;
    opacity: 0;


}

I have tried this to enable the wrong answer to be spellable again..

$('td[data-word=' + word + ']').addClass("wordglow").removeAttr('disabled');;

Answer 1

You can remove the class on the activate event. So when an object is glowing red, the red disappears when you start dragging it to a next position again!

$(".drop").droppable({ 
    hoverClass: 'drophover',
    drop: function(event, ui) {
        word = $(this).data('word');

        guesses[word].push($(ui.draggable).attr('data-letter'));

        console.log(guesses);

        if (guesses[word].length == 3) {
            if (guesses[word].join('') == word) {
                $('td[data-word=' + word + ']').addClass("wordglow2");
            } else {
                $('td[data-word=' + word + ']').addClass("wordglow");
            }
        }
    },

    // this event is triggered when a draggable object is activated
    activate: function(event, ui) {
        word = $(this).data('word');

        // try to remove the class
        $('td[data-word=' + word + ']').removeClass('wordglow');
    }
});