javascript - 文字が正しく入力されると画像が点灯・変化する

Question

ウェブサイトに語学学習用のセクションを作成しています。ユーザーには「でんき」という単語が表示されます。誰かが各記号に一致する正しいテキストを入力すると、そのうちの 1 つが点灯します。どうすればこれを達成できますか？

これが私のサイトのプレビュー画像です: http://imageshack.us/photo/my-images/827/hiraganaquiz2.jpg/

Answer 1

通常の入力フィールドの例を次に示します。

<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 2

HTML

<div class="question">
    <span data-answer="correctAnswerOne">で&lt;/span>
    <span data-answer="correctAnswerTwo">ん&lt;/span>
    <span data-answer="correctAnswerThree">き&lt;/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;   
}

Answer 3

ミックスに追加する別のものがここにあります。簡単な答えは、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;   
}
​

Answer 4

簡単な方法は次のとおりです。

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

デモ： http： //jsfiddle.net/MTVtM/1/（「カーボート」と入力してみてください）