Correctly inputed text changes image

Question

I have been developing a script that when a user types in correctly entered text the images will change the letter, letting the user know they entered it in correctly.

Preview here: Example word is "ate". http://jsfiddle.net/wjx6b/2/

I made sure it was set to check the index by using

$.each(text, function(index, item)

My problem is when I try setting it to a foreign word like "taberu" which is Japanese, I have to have two letters in each of the var text boxes like this

var text = ['ta', 'be', 'ru'];

but when I set it to that nothing happens when I start to type. Thanks to anyone who can help!

Answer 1

An alternative which i like is with the use of regular expressions.

create a regex from the array:

var text = ['ta', 'ber', 'u'];
var regex = new RegExp('^' + $.map(text, function(val, i){ return '(.{'+val.length+'})?'; }).join(''),'i');

and match:

$("#test").on('keyup', function() {
    matches = $(this).val().match(regex);
    matches.shift();
    $.each(text, function(index, val){        
        if(val == matches[index]){
            $('li', 'ul').eq(index).find('img').attr('src', happy[index]);
        } 
        else {
            $('li', 'ul').eq(index).find('img').attr('src', grumpy[index]);
        }
    });
});
​

demo

Answer 2

here is the working Fiddle example for all cases, not using a fixed element size, it depends on size of each element in the set

var text = ['ta', 't', 'a', 'be', 'ru'];
var offset = 0;
var index = 0;

var happy = ['http://www.vendian.org/howbig/UnstableURLs/letter_a_poster.png',
             'http://chineseknotting.org/projects/knotty/T-carrick.jpg',
             'http://etc.usf.edu/presentations/extras/letters/varsity_letters/38/17/E-400.png',
             'http://chineseknotting.org/projects/knotty/T-carrick.jpg',
             'http://etc.usf.edu/presentations/extras/letters/varsity_letters/38/17/E-400.png'];

var grumpy = $('img').map(function(){ return this.src; }).get(); //gets the original images from the HTML

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

I have updated the logic of the script, updated version can be found here (thanks to Internal Server Error) ​

Answer 3

The values in the 'typed' array are accessed one by one, while in the text array you put the characters in pairs as one value. So you're comparing one character to a two character string in that case (comparing 'ta' to 't', 'be' to 'a', 'ru' to 'b'. Which will never be equal of course).

To account for that you have to take the 'stepsize' into account (that is, in how many characters the images are grouped). Using substring you can then compare typed text blocks of size 'stepsize' to the values from the text array.

working fiddle (you have to type aattee instead of ate now)

another fiddle, here you have to type 'taberu'

in this fiddle stepsize is based on the first item of the text array

this fiddle dynamically detects the stepsize in case the values in the text array do not have the same length (thanks to haynar for the suggestion)

Update: this is the code of the last example (thanks Bob):

var text = ['ta', 'ber', 'u'];

var happy = ['http://www.vendian.org/howbig/UnstableURLs/letter_a_poster.png',
         'http://chineseknotting.org/projects/knotty/T-carrick.jpg',
         'http://etc.usf.edu/presentations/extras/letters/varsity_letters/38/17/E-400.png'
        ];

var grumpy = $('img').map(function(){ return this.src; }).get(); //gets the original images from the HTML

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

        textOffset += stepsize;
    });
});