Когда текст введен правильно, изображение загорается/изменяется

Question

Я создаю раздел на своем веб-сайте для изучения языка. Пользователь увидит слово で ん き (японское слово). Когда кто-то вводит правильный текст, соответствующий каждому символу, один из них загорается. Как я мог это достичь?

Вот изображение предварительного просмотра моего сайта: http://imageshack.us/photo/my-images/827/hiraganaquiz2.jpg/

Answer 1

Вот простой способ:

<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'); 
}); 

Объяснение:

data-value проведет английский текст вашего персонажа. Когда пользователь вводит значение, соответствующее ему, он добавит класс highlight ко всем элементам, которые имеют data-value, соответствующие тексту. Просто примените свои стили «освещения» к классу.

Демо: http://jsfiddle.net/MTVtM/

Для работы с несколькими словами просто split значение пробел и проверить каждую часть:

$('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/ (Попробуйте войти "Car Boat")

Answer 2

Вот пример с нормальным полем ввода:

<script type="text/javascript"> 
var answer = 'foo'; 
function checkMatch(val) { 
    if (val == answer) { 
     alert('CORRECT!'); 
    } 
} 
</script> 


<input type="text" id="word_box" value="" onkeyup="checkMatch(this.value)" /> 

Это невероятно упрощено, но вы получите идею. onkeyup будет вызываться всякий раз, когда нажата клавиша в поле или другом редактируемом поле.

Answer 3

HTML

Javascript

//Build an array of correct answers 
var answerArray = ""; 
var i = 0; 
$('.question span').each(function() { 
    answerArray[i] = this.attr('data-answer'); 
    i++; 
}); 

//On key up, get user input 
$('input').keyup(function(){ 
    $('.question span').removeClass('highlight'); 
    var userInput = $('#inputElementID'); 
    var userInputArray = string.split(' ');//Split the string into an array based on spaces (I assume you are looking for three separate words 
    var answerCount = array.length; 
    for (i=0;answerCount >= i;i=i+1) { 
     if (userInputArray[i] == answerArray[i]) { 
      $('span[data-answer=' + answerArray[i] + ']').addClass('highlight'); 
     } 
    } 
}); 

CSS

.highlight{ 
    background-color:yellow; 
} 

Answer 4

Вот еще один, чтобы добавить к смеси. Короткий ответ - использование Javascript, HTML и CSS для этого.

http://jsfiddle.net/BUxvx/1/

HTML

<span data-answer="cat" data-for="1">Symbol 1</span> 
<span data-answer="dog" data-for="2">Symbol 2</span> 
<span data-answer="chicken" data-for="3">Symbol 3</span> 
<br /> 
<input type="text" data-for="1" /> 
<input type="text" data-for="2" /> 
<input type="text" data-for="3" /> 
< - Type answers here 
<br /> 
<span>cat</span> 
<span>dog</span> 
<span>chicken</span>​ 

JavaScript

$('input').keyup(function(){ 
    $txt = $(this); 
    $span = $('span[data-for="' + $txt.attr('data-for') + '"]'); 
    if($(this).val() === $span.attr('data-answer')){ 
     $span.addClass('highlight'); 
    }else{ 
     $span.removeClass('highlight');   
    } 
}); ​ 

CSS

span{ 
display:inline-block; 
height:75px; 
width:75px; 
line-height:75px; 
text-align:center; 
border:1px solid black;  
} 

input{ 
width:75px;  
border:1px solid black; 
} 
.highlight{ 
background-color:yellow; 
} 
​