Question

I am building a section on my website for language learning. The user will see the word でんき (Japanese word). When someone enters in the correct text that matches each symbol, one of them will light up. How could I achieve this?

Here is a preview image of my site: http://imageshack.us/photo/my-images/827/hiraganaquiz2.jpg/

Answer 1

Here’s a simple way:

<span data-value="Car">{character that means Car}</span>
<span data-value="Boat">{character that means Boat}</span>
<span data-value="Plane">{character that means Plane}</span>
<input>

$('input').keyup(function(){
    var val = $(this).val();
    $('[data-value]').removeClass('highlight');
    $('[data-value="'+val+'"]').addClass('highlight');
});

Explanation:

The data-value will hold the English text of your character. When the user types a value that matches it, it will add the highlight class to all elements that have a data-value matching the text. Just apply your “lighting up” styles to the class.

Demo: http://jsfiddle.net/MTVtM/

To work with multiple words just split the value by a space and check each piece:

$('input').keyup(function(){
    var val = $(this).val();
    $('[data-value]').removeClass('highlight');
    val.split(' ').forEach(function(v) {
      $('[data-value="'+v+'"]').addClass('highlight');
    });
});

Demo: http://jsfiddle.net/MTVtM/1/ (Try entering “Car Boat”)