Question

我正在我的网站上建立一个语言学习部分。用户将看到单词でんき（日语单词）。当有人输入与每个符号匹配的正确文本时，其中一个符号将亮起。我怎么能做到这一点？

以下是我网站的预览图片：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">で</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;   
}

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/（尝试输入“Car Boat”）

正确输入文本后，图像会亮起/更改

4 个答案: