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.

demo
 
 
 
download

Requirements:

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

Leave a Reply