[JS] Human Typer

[benny!]

Hi,

here is a little telex / typer text effect written in Javascript. Its a normal
telex / typer effect - but additionally I added some 'human touch' to it - so the
typing speed varies from character to character and the typer 'makes' typing
mistakes from time to time.

Here is a small example online :

http://www.weltenkonstrukteur.de/ext/HumanTyper.htm

Source code:

Code: [Select]

/**
 * - Human Typer -
 *
 * @author benny!weltenkonstrukteur.de
 * @license LGPL ( see : http://www.gnu.org/licenses/lgpl.html )
 * @version 1.0
 * @projectDescription
 * A type / telex fx in javascript with a 'human touch'.
 *
 *  Disclaimer: I am providing this source code "as-is," without accepting any
 *             responsibility for the effects it may have on your computer,
 *              network, or livelihood. If you decide to use portions of my
 *              code in your project or product, I would be very pleased to be
 *              attributed.  More importantly, please e-mail me to tell me
 *              about it!  Do not charge money for this source code, as it is
 *              intended to be freely distributed.  Do not remove this header
 *              text from the source file, and do not change the version string.
 */


/**
 * @param divId [String]
 * The id of the content innerHtml to output.
 * @param newDelay [Number]
 * The maximum delay of the typer.
 * @param newCorrenctness [Number]
 * The Correctness specifies how much typing mistakes the typer
 * makes. The higher the less typing mistakes are made.
 *
 */

function HT_Init( divId, newDelay, newCorrectness ) {
document.getElementById(divId).style.visibility = "hidden";
// Getting innerHtml of specified div
var div = document.getElementById( divId );
message = div.innerHTML;
document.getElementById(divId).innerHTML = "";
document.getElementById(divId).style.visibility = "visible";
delay = newDelay;
correctNess = newCorrectness;

// Globals - change them if you want !
cursor = "_"; // Cursor char

// System variables
curState= 0;
errMsg = "";
divTelex= document.getElementById( divId );
counter = -1;
errCount= 0;
errWay = 0;
tagFlag = 0;
setTimeout( 'HT_Write();', 100 );
}


function HT_Write() {

if ( errWay == 0 && counter > 3 && (Math.floor ( Math.random() * correctNess ) == 0) ) {
errCount = Math.floor( Math.random() * 2 ) + 2;
errWay = 1;
}

if ( errWay == 1 ) {
errMsg = errMsg +  String.fromCharCode( Math.floor ( Math.random() * 89) + 33 );
divTelex.innerHTML = message.substr(0, counter + 1 ) + errMsg + HT_GetCursor();
if ( errCount == errMsg.length ) {
errWay = 2;
}
setTimeout ( 'HT_Write();', Math.floor( Math.random() * 250 ) + delay );
return;
}
else if ( errWay == 2 ) {
errCount--;
divTelex.innerHTML = message.substr( 0, counter + 1 ) + errMsg.substr( 0, errCount ) + HT_GetCursor();
if ( errCount == 0 ) {
errWay = 0;
errMsg = "";
}
setTimeout( 'HT_Write();', Math.floor( Math.random() * 250 ) + delay );
return;
} else {
if ( message.substring( counter, counter + 1) != '<'  ){
divTelex.innerHTML = message.substr ( 0, counter + 1 ) + HT_GetCursor();
} else {
while ( message.substring( counter, counter + 1) != '>'  ) {
//divTelex.innerHTML = message.substr ( 0, counter + 1 );
var tagStuff = message.substr ( 0, counter + 1 );
counter ++;
}
divTelex.innerHTML = tagStuff;
}
counter++;
if ( counter < message.length ) {
setTimeout( 'HT_Write();', Math.floor( Math.random() * delay ) );
return;
} else {
divTelex.innerHTML = message.substr ( 0, counter + 1 );
}
}
}

function HT_GetCursor() {
if ( curState == 0 ) {
curState = 1;
return " ";
} else {
curState = 0;
return "_";
}
}
Source + Example also added to this thread.

Successfully tested on :

- Mozilla Firefox 2.0
- Internet Explorer 7.0

[Clyde]

Thats really smart, welldone dude.

[benny!]

Thanks mate 

[Shockwave]

That works really well Benny Respect! +K

[benny!]

Thanks shocky !!!

[rdc]

Very cool Benny. It really looks like a human typing (except for me, since I hunt and peck). 

[benny!]

Very cool Benny ...

Thanks a lot, rdc.

... It really looks like a human typing (except for me, since I hunt and peck). 

Yup. When calling the HR_init() funciton you can determine "how good/bad" the
typer should be :

Code: [Select]

HR_Init( 'divId', delay, correctness );
-delay determines the delay-range for a char : 0ms  - (delay + 150) ms
-correctness determines how often the typer makes a mistake. the lower
this value is - the more often the typer makes a mistake. this value has to be
at least 1.

So, you can pretty much simulate everyone's typing abilities

[Rbz]

Thats a nice function, I did one in Blitzbasic some time ago but not that cool like yours 

[benny!]

Thats a nice function, I did one in Blitzbasic some time ago but not that cool like yours 

Thanks mate. Glad you like it.