隨機輸入文本後顯示的文本行的方式

因此，用戶在上面輸入文本並且它消失並且新文本重新出現以供他們輸入。（像打字測試一樣思考）。如果它們輸入錯誤，它會變成紅色，如果它們輸入正確，它會消失並顯示新的文本。我想知道如何隨機化文本，以便用戶無法預測下一行，如果他們以前做過。並確保他們在會議期間不會重複發言。（基本上是通過所有的文本例子隨機的，而不是兩次做同一個例子）。隨機輸入文本後顯示的文本行的方式

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

來源

2014-02-13 user3298548

相反比在HTML中放置單詞，將它們放在數組中，甚至是數組中。數組中元素的數量=每個會話的字數。您可以在每個頁面加載中隨機排列陣列中的單詞順序，也許...... – sinisake

事情是這樣的：它不是測試，應該給你知道如何使用它。從這裏使用隨機播放功能：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'/>

而且不是在CSS功能改變你的顏色，你應該使用addClass（）和removeClass（）

來源

2014-02-13 08:08:07 Manu

隨機輸入文本後顯示的文本行的方式

回答

相關問題