In my spelling game there is a grid that is populated with words. The words are hidden and the aim of the game is to spell the word that is highlighted with the aid of a sound and a picture.

To highlight a word you press the "next" button. At the moment if you spell the word correctly it says "well done" and you can advance to the next word, but if you spell it incorrectly you have to keep attempting the word until it is complete.

As the game is designed for children I do not think this is the best approach, so I would like to make it so you can advance after 3 incorrect attempts.

I have played around with the script so much trying to put counters on incorrect attempts and then making the button active but cannot seem to get it to work. Can someone please help me?

Here is the script for the button

var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
if (noExist) {
    $('.minibutton').click();

} else {
    $('.minibutton').click('disable');
    $("#mysoundclip").attr('src', listOfWords[rndWord].audio);
    audio.play();
    $("#mypic").attr('src', listOfWords[rndWord].pic);
    pic.show();
}
});

"wordglow2" is the style applied if the word is spelt correctly. Here is a fiddle to help understand... http://jsfiddle.net/smilburn/ZAfVZ/4/