Type writing script using jQuery
Table of Contents
Type writing script using jQuery:
Do you like to type more faster ? then our simple jQuery based type writing script can help you. Typing faster is a very essential skill required to complete any task faster. Great computer knowledge without fast typing skill can not help you to complete a task quickly. Our simple script will help to practice type-writing at your free time.
People who are maintaining any type-writing related sites/apps can make use of this sample type writing script to help your users to practice type-writing.
Requirements:
- jQuery JS
- BootStrap JS
- Bootstrap CSS [for responsive designs]
Note: You can find the JS and CSS in the downloaded zip.
HTML Source code:
<div class="row" style="height:100px;"> Enter the above visible value: [Case Sensitive]<br/> Your Score:<span id="score"></span><br/> <input type="text" id="userValue" style="width:400px;height:50px;"/> </div> <div class="row"> Rules: Do not see keyboard & type. <br/> 1. If your score is greater than 100, you are ok. <br/> 2. If your score is greater than 300, you are medium. <br/> 3. If your score is greater than 500, you are ultimate </div>
Javascript Source code:
<script> var score = 0; isWrong = false; $(document).ready(function(){ <!-- refresh button click triggers --> $('span#go').click(function(){ $( "#block" ).show(); isWrong = false; console.log("go clicked now"); $('#userValue').focus(); animateText(); }); animateText(); $('#userValue').focus(); $("#userValue").keypress(function(event) { if (event.which == 13) { validate(); } }); <!-- triggered on click of enter and validate whether the visible and typed is correct or not --> function validate(){ txtValue = $('#userValue').val(); animValue = document.getElementById('block'); animValueTxt = animValue.innerHTML; if(txtValue==animValueTxt){ isWrong = false; console.log("Correct......."+isWrong); score = score+10; animateText(); $('span#score').html(score); }else{ isWrong = true; console.log("Wrong......."+isWrong); score = 0; $( "#block" ).hide(); } $('#userValue').val(""); } <!-- for random word generations --> function makeid() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < 5; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } <!-- to animate the random words --> function animateText(){ if(isWrong===false){ $( "#block" ).animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" },5000,function () { $(this).removeAttr('style'); $( "div#block" ).html(makeid());$('#userValue').focus();} ); } } function javascript_abort() { throw new Error('This is not an error. This is just to abort javascript'); } }) </script>
Please share your feedbacks/comments in the below comment section.