CODEWITHSUNDEEP
javascriptjquery
Miura-shi
Miura-shi

Reputation: 4519

When text is entered correctly, image lights up/changes

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/

Upvotes: 0

Views: 207

Answers (4)

Matthew Darnell
Matthew Darnell

Reputation: 4588

HTML

<div class="question">
    <span data-answer="correctAnswerOne">で</span>
    <span data-answer="correctAnswerTwo">ん</span>
    <span data-answer="correctAnswerThree">き</span>
<div>
<label for="answer">Enter your Answer</label>
<input id="answer" />

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

Upvotes: 2

Brandon J. Boone
Brandon J. Boone

Reputation: 16472

Here's another one to add to the mix. Short answer is use Javascript, HTML, and CSS to accomplish this.

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;   
}
​

Upvotes: 2

No Results Found
No Results Found

Reputation: 102814

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")

Upvotes: 1

Michael Taggart
Michael Taggart

Reputation: 815

Here's an example with a normal input field:

<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)" />

This is incredibly simplified, but you get the idea. onkeyup will be called whenever a key is pressed in a box or other editable field.

Upvotes: 2

Related Questions