Question

I am trying to achieve an effect where the correctly entered text will result in the image changing, letting the user know he typed it in correctly. The only problem I am having is if the person types the first two characters correctly, even if the third is incorrect it still stays changed.

Example: Take the word “ate” for instance.

If the user types in ” aate ” with two A’s the image still remains highlighted/changed.

Is it possible to make it somehow stay exact to what the correct text needs to be ?

JSFIDDLE here with google images for example:

http://jsfiddle.net/japaneselanguagefriend/wjx6b/

p.s. I hope I explained things cleary! I have been up and at this for hours and I could use a helping hand. Thanks so much guys!

Answer 1

What you need is to check on the index

$("#test").on('keyup', function() {
    var typed = this.value;
    $.each(text, function(index, item) {
        if (typed[index] == text[index]) {
            $('li', 'ul').eq(index).find('img').attr('src', happy[index]);
        }else{
            $('li', 'ul').eq(index).find('img').attr('src', grumpy[index]);
        }
    });
});

http://jsfiddle.net/wjx6b/2/

Or exact match would need to compare the the current text with the array letters combined

$("#test").on('keyup', function() {
    var typed = this.value;
    var theWord = ''
    for(i=0;i<typed.length;i++){
        theWord += text[i];
    }
    $.each(text, function(index, item) {            
        if (typed[index] == text[index] && typed == theWord) {
            $('li', 'ul').eq(index).find('img').attr('src', happy[index]);
        }else{
            $('li', 'ul').eq(index).find('img').attr('src', grumpy[index]);
        }
    });
});

http://jsfiddle.net/wjx6b/4/
​