Type writing script using jQuery

Type writing script using jQuery

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.

type writing script using jQuery

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.





1. jQuery JS

2. BootStrap JS

3. 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 class="row">
Do not see keyboard & type.
1. If your score is greater than 100, you are ok.
2. If your score is greater than 300, you are medium.
3. If your score is greater than 500, you are ultimate


Javascript Source code:

var score = 0;
isWrong = false;

<!-- refresh button click triggers -->
$( "#block" ).show();
isWrong = false;
console.log("go clicked now");

$("#userValue").keypress(function(event) {
if (event.which == 13) {

<!-- 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;
isWrong = false;
score = score+10;
isWrong = true;
score = 0;
$( "#block" ).hide();


<!-- 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(){
$( "#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');



Please share your feedbacks/comments in the below comment section.


1,588 total views, 3 views today

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.