Enabling the user after three attempts

Question

In my writing game there is a grid filled with words. Words are hidden, and the goal of the game is to record a word highlighted with sound and image.

To select a word, click the "Next" button. At the moment, if you pronounce the word correctly, it says “well done”, and you can move on to the next word, but if you pronounce it incorrectly, you should continue to try the word until it is completed.

Since the game is for children, I don’t think this is the best approach, so I would like to make it possible for you to advance after three wrong attempts.

I played with the script so much, trying to set the counters on the wrong attempts, and then activate the button, but cannot make it 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 used if the word is spelled correctly. Here is a fiddle to help you understand ... http://jsfiddle.net/smilburn/ZAfVZ/4/

Answer 1

What you can do is use the jQuery.data () function to attach a counter to each TR. If the attempt fails, increase the counter and decide whether to disable or enable the button based on this. I changed the sent jsfiddle and added this behavior. Take a look at the line (you can do Ctrl + F to find it) that has a comment // Edits here

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

Answer 2

Add a global variable to the script

 var numberOfTries = 0; 

Next, in the listener callback (<. W1040>) in your answer ('click') you have an if statement that defines the right or wrong word:

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

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

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

This will count the number of attempts, and after the third attempt will turn on the "Next" button. As soon as the user receives the correct word, he will reset the variable to 0.