Question

所以jist是用户在上面输入文本并且它会消失，并且新文本会重新出现以供他们输入。（想想打字测试）。如果输入错误，则会变为红色，如果输入正确，则会消失并显示新文本。我想知道如何将文本随机化，以便用户无法预测下一行，如果他们之前已经完成过。并确保他们在会话期间不会重复发送文本。（基本上是随机浏览所有文本示例，而不是两次执行相同的文本示例）。

$(function(){
var currentWordIndex = 0;

function currentWord() {
    return $('.example' + currentWordIndex);
}

function showNextWord() {
    currentWord().fadeOut('fast');
    $('.inputText').val('');
    currentWordIndex++;
    currentWord().fadeIn('slow');
}
function backBlack() {
$('.inputText').on('input',function(e){
 currentWord().css('color', '#454545');
    });
}
// start up
showNextWord();
backBlack();


// watch user input
$('.inputText').keyup(function (event) {
    if (event.keyCode == 13) {
        var userEntry = $('.inputText').val();
        if (userEntry == currentWord().text()) {
            showNextWord();
        } else {
            currentWord().css('color', 'red');
            if (event.keyCode == 13) {

            }
        }
    }
});

}）;

HTML代码

        <p class='example1'>Text Example 1</p>
        <p class='example2'>Text Example 2</p>
        <p class='example3'>Text Example 3</p>
        <input type='text' placeholder='Type sentence above and press enter' class='inputText'/>

CSS代码

 .example1 {
 display:none;
 position:absolute;
 }
 .example2 {
 display:none;
 position:absolute;
 }
 .example3 {
 display:none;
 position:absolute;
 }

Answer 1

这样的事情：它没有经过测试，应该让你知道如何使用它。使用此处的随机播放功能：Shuffle

$(function(){
    var words = shuffle(new Array('Word1', 'Word2', 'Word3'));
    var currentIndex = 0;

    function showNextWord() {
        $('.yourWord').val(words[currentIndex]).css('color', '#454545');
        $('.inputText').val('');
    }

    // watch user input
    $('.inputText').keyup(function (event) {
        if (event.keyCode == 13) {
            var userEntry = $('.inputText').val();
            if (userEntry == words[currentIndex])
            {
                currentIndex++;
                showNextWord();
            } else {
                $('.yourWord').css('color', 'red');
            }
    });

    //Show first word
    shotNextWord();
});

HTML：

<p class='yourWord'></p>
<input type='text' placeholder='Type sentence above and press enter' class='inputText'/>

也可以使用addClass（）和removeClass（）

而不是改变css函数的颜色。

在输入后随机显示文本行的方法

1 个答案: