Way to randomize lines of text showing after typing

Question

So the jist it is that users type text above and it disappears and new text reappears for them to type. (think like a typing test). If they type it wrong, it turns red, and if they type it right it disappears and new text appears. I'm wondering how I can randomize the text so that the user can't predict the next line that comes if they've done it before. And also make sure that they don't get repeated text during the session. (essentially goes through all of the text examples at random, without doing the same one twice).

$(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 Code

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

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

Rather than place words in HTML, place them in array, or even arrays. Number of elements in array = number of words 'per session'. You can randomize order of words in array(s) on every page load, maybe.... — sinisake, Feb 13 '14 at 07:29

score 0 · Answer 1 · edited May 23 '17 at 12:13

Something like this: Its not tested and should give you the idea how to use it. Use the shuffle function from here: 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'/>

Also instead of changing your color over the css function, you should use addClass() and removeClass()

Way to randomize lines of text showing after typing

1 Answers1