Letting user carry on after three attempts

Question

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/

Answer 1

Add a global variable to your script

var numberOfTries = 0;

Next, in your $('.drag').on('click') listener callback, you have an if statement that determines the word being correct or incorrect:

if (!$('.drop-box.spellword:not(.occupied)').length)

Inside the if statement, reset numberOfTries to 0. Inside the else statement, you will put:

numberOfTries++;
if (numberOfTries >= 3)
{
    $('.minibutton').prop('disabled', false);
}

This will count the number of tries, and after the third try, will enable the "next" button. Once the user gets a word correct, it will reset the variable to 0.

Answer 2

What you can do is use jQuery's .data() function to attach a counter to each TR. On an unsuccessful attempt, increment the counter and make the decision whether to disable or enable the button based off of that. I've modified the jsfiddle you sent and added this behavior. Take a look at the line (You can do a Ctrl+F to find it) that has the comment // Edits here

http://jsfiddle.net/dflor003/ZAfVZ/7/