JavaScript - Javascript Human Typing Tutorial

i'm using a JavaScript typing tutorial....here is my code

[CODE]

<script type="text/javascript">
//<![CDATA[

var garray = new Array();
var garrayIndex = -1;
var gtext = "";
var gindex = 0;
var goldPressed = 0; //previous pressed key code
var goldTarget = 0; //previous target key code
var gtarget = 0;
var gpressed = 0;
var ggood = 0;
var gtotal = 0;
var gtime = 0;
var gkeytime = 0;



function setup() {

setEvents();

//change this array to suit your needs but note that indices
//must ascend by 1 from 0: garray[0]="foo"; garray[1]="bar";...
garray[0] = "a s d f s d f f s d as sd ad fs ds sad af sa fa dafa sda dad das afa sfd add sasd df sf saf dds fd ads safd fsd fas sas dafs as fad";

//more similar lines can easily be added above, dont forget to get the index right!

garrayIndex = -1;

next();
}



function setPatternInit() {

//#b note: once we did this using innerHTML but this caused
//a leakage of handles in ie

var pat = document.getElementById("pattern");

for(; {
if (pat.hasChildNodes()) {
pat.removeChild(pat.lastChild);
}
else break;
}

var cname = "done";
for (j=0; j<gtext.length; j++) {
var ch = gtext.charAt(j);

if (j>gindex) cname = "future";
else if (j==gindex) cname = "todo";

var kid = document.createElement("span");
kid.className = cname;

var txt = document.createTextNode(ch);
kid.appendChild(txt); //#b innertext doesnt work on firefox
pat.appendChild(kid);
}
}

function setPattern() {

var pat = document.getElementById("pattern");
var kids = pat.childNodes;

var cname = "done";

for (j=0; j<gtext.length; j++) {
if (j>gindex) cname = "future";
else if (j==gindex) cname = "todo";

var kid = kids[j];
kid.className = cname;
}
}


function mapToBoard(code) {
if ((code>=97)&&(code<=108)) return (code-32);
if ((code>=110)&&(code<=122)) return (code-32);
if ((code>=65)&&(code<=90)) return code;
if ((code>=48)&&(code<=57)) return code;
if ((code==32)) return code;
if ((code==44)||(code==46)||(code==47)||(code==59)) return code;
return 0; //not on our board picture
}


function setBoard() {

var letter;
var elt;
var c;
var s;


if (goldTarget!=0) {
c = mapToBoard(goldTarget);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "silent";
elt.className = s;
}
}
if (goldPressed!=0) {
c = mapToBoard(goldPressed);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "silent";
elt.className = s;
}
}

if (gtarget!=0) {
c = mapToBoard(gtarget);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "target";
elt.className = s;
}
}
if (gpressed!=0) {
c = mapToBoard(gpressed);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "pressed";
elt.className = s;
}
}

}

function nextPattern() {

goldTarget = gtarget;
goldPressed = gpressed;

if (++garrayIndex == garray.length) garrayIndex = 0;
gtext = garray[0]; gindex = 0;
gpressed = 0;

setPrompt();
}

function prevPattern() {

goldTarget = gtarget;
goldPressed = gpressed;

if (--garrayIndex < 0) garrayIndex = garray.length - 1;
gtext = garray[garrayIndex]; gindex = 0;
gpressed = 0;

setPrompt();
}

function next() {

nextPattern();
setPatternInit();
setBoard();
}

function prev() {
prevPattern();
setPatternInit();
setBoard();
}


function skip(e) {
next();
return false;
}


function back(e) {
prev();
return false;
}



function setEcho(c, isOK) {
var s;
if (c<' ') c=' ';

var s = "["+c+"]";
if (!isOK) s += " ..OOPS!"


var elt = document.getElementById("echo");
var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
}

function setPrompt() {
var ch = gtext.charAt(gindex);
gtarget = ch.charCodeAt(0);
}

function adjustStatistics(ch) {
return; //could count errors by character
}


function updateSpeed(ok) {
var t = (new Date()).getTime();
var dt = (t-gtime);
gtime = t;
if (dt > 5000) return; //ignore sleepy user
gkeytime += dt;

var s = (0.5+ggood*60*200/gkeytime).toFixed(0) + "";
var elt = document.getElementById("speed");
var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
}


function updateScore(ok) {
if (ok) ggood++;
gtotal++;

updateSpeed(ok)

var s = ggood.toFixed(0) + "";
var elt = document.getElementById("count");

var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);


s = (gtotal-ggood).toFixed(0) + "";
elt = document.getElementById("accuracy");

txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);


var s = (gkeytime/1000).toFixed(2) + " s";
var elt = document.getElementById("time");

var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);


}


function reset(e) {

window.location.reload();

}



function debug() { //#b to use, set body onLoad="debug()" instead of "setup()" in html
//document.onkeydown=debugKey; //#b
document.onkeypress=debugKey;
}

function debugKey(evt) { //#b

var e = (window.event) ? window.event : evt; //#b
var k = (e.which)? e.which : e.keyCode;
var f = filterKeyCode(k);

var s = "k="+k+",f="+f;
alert(s);

return false;
}

function setEvents() { //#b
document.onkeydown=down; //#b
document.onkeypress=press;
(document.getElementById('skip')).onmousedown=skip;
(document.getElementById('back')).onmousedown=back;
(document.getElementById('reset')).onmousedown=reset;
}


function cleanup() {
//pointless, really
document.onkeydown=null; //#b
document.onkeypress=null;
(document.getElementById('skip')).onmousedown=null;
(document.getElementById('back')).onmousedown=null;
(document.getElementById('reset')).onmousedown=null;
}


function filterKeyCode(code) { //from key down (0 to ignore)

//note: user must have num lock set if they want to use keypad numbers

if ((code>=65)&&(code<=90)) return code; //alpha
if ((code>=48)&&(code<=57)) return code; //numberic
if (code==32) return code; //blank
if ((code>=96)&&(code<=105)) return code; //number pad digits
if ((code==13)||(code==16)) return code; //enter, shift
if ((code>=106)&&(code<=111)) return code; //number pad operators
if ((code>=186)&&(code<=192)) return code; //punctuation
if ((code>=219)&&(code<=222)) return code; //punctuation

return 0;
}


function filterCode(code) { //from key press as ascii char code (0 to ignore)
if ((code==13)||(code==16)) return code; //enter and shift are allowed
if (code<32) return 0;
if (code>=127) return 0;
return code;
}



function capsLockFilter(e, pressed) { //#b many problems making this cross browser!

//#b e.modifiers known only on early mozilla (which does not know standard e.shiftkey)?

var shifted = e.shiftKey || (e.modifiers && (e.modifiers & Event.SHIFT_MASK)); //#b

var locked = (((pressed > 64) && (pressed < 91) && (!shifted))
|| ((pressed > 96) && (pressed < 123) && (shifted)));
if (locked) alert("caps lock!");
}


function down(evt) { //#b

var e = (window.event) ? window.event : evt; //#b
var rawcode = (e.which)? e.which : e.keyCode;
pressed = filterKeyCode(rawcode);

if (pressed > 0) return true;

if (typeof(e.cancelBubble)!="undefined") e.cancelBubble = true;
if (typeof(e.stopPropagation)!="undefined") e.stopPropagation();
return false; //#b nuisance keys - backspace etc on ie (no effect for capslock!!)

}


function press(evt) { //#b


//#b should work in ie, firefox, safari(hopefully), opera(hopefully)


var e = (window.event) ? window.event : evt; //#b

var pressed = 0;
var wc = -1;
var kc = -1;
var cc = -1;


if (typeof(e.keyCode)!="undefined") kc = e.keyCode; //ie
if (typeof(e.charCode)!="undefined") cc = e.charCode; //firefox
if (typeof(e.which)!="undefined") wc = e.which; //old mozilla

if ((kc>=0)&&(cc>=0)) { //firefox
pressed = cc;
}
else if (kc>=0) pressed = kc; //ie
else if (wc>=0) pressed = wc; //old mozilla

//alert("pressed="+pressed+",kc="+kc+",cc="+cc+",wc="+wc);


pressed = filterCode(pressed);
if (pressed==0) {
if (kc==13) return skip(); //#b firefox
else return false;
}
if (pressed==13) return skip(); //#b ie

capsLockFilter(e, pressed); //hmm

var c = String.fromCharCode(pressed); //ie from ascii code
var ch = gtext.charAt(gindex);
var ok = (c==ch);

goldPressed = gpressed;
gpressed = pressed;
goldTarget = gtarget;

if (ok) {
gindex++;

if (gindex==gtext.length) {
if (gtotal-ggood <= 5 && 0.5+ggood*60*200/gkeytime >= 20) {
alert('Good work! You had fewer than 5 errors and typed faster than 20 WPM! Now try the next exercise!');
setPatternInit();
}
else if (gtotal-ggood > 5 && 0.5+ggood*60*200/gkeytime >= 20){
alert('Good speed! You were over 20 WPM but have more than five errors! Slow down a bit for accuracy.')
setPatternInit();
}
else if (gtotal-ggood <= 5 && 0.5+ggood*60*200/gkeytime < 20){
alert('Good accuracy! You had fewer than 5 errors, now try for 20 WPM.')
setPatternInit();
}
else
alert ('Focus on accuracy first, then go for speed!');
setPatternInit();
}
else setPattern();

gpressed = 0;
setPrompt();
setEcho(c, true);
updateScore(true);
}
else {
setEcho(c, false);
updateScore(false);
setPattern()
}

setBoard();
return false;
}


//</XMLCDATA>
</script>


[CODE]

This is my HTML Code :

[CODE]


<body onload="setup()" onunload="cleanup()">

<div id="container1">
<div id="container3">


<div id="body">



<div id="pattern" class="big">
</div>

<div id="prompt" class="prompt">
</div>

<div id="board" class="board">

<div id="row0" class="row0">
<span id="code49">1</span>&nbsp;<span id="code50">2</span>&nbsp;<span id="code51">3</span>&nbsp;<span id="code52">4</span>&nbsp;<span id="code53" style="margin-left:-5px;">5</span>&nbsp;<span id="code54">6</span>&nbsp;<span id="code55">7</span>&nbsp;<span id="code56">8</span>&nbsp;<span id="code57">9</span>&nbsp;<span id="code48">0</span>
</div>
<div id="row1" class="row1">
<span id="code81">Q</span>&nbsp;<span id="code87">W</span>&nbsp;<span id="code69">E</span>&nbsp;<span id="code82" style="font-weight:bold">R</span>&nbsp;<span id="code84">T</span>&nbsp;<span id="code89">Y</span>&nbsp;<span id="code85" style="margin-left: -2px;">U</span>&nbsp;<span id="code73">I</span>&nbsp;<span id="code79">O</span>&nbsp;<span id="code80">P</span>

</div>
<div id="row2" class="row2">
<span id="code65">A</span>&nbsp;<span id="code83">S</span>&nbsp;<span id="code68">D</span>&nbsp;<span id="code70" style="font-weight:bold;">F</span>&nbsp;<span id="code71" style="margin: 0 0 0 -5px;">G</span>&nbsp;<span id="code72">H</span>&nbsp;<span id="code74" style="font-weight:bold;">J</span>&nbsp;<span id="code75">K</span>&nbsp;<span id="code76">L</span>&nbsp;<span id="code59">;</span>&nbsp;
</div>
<div id="row3" class="row3">
<span id="code90">Z</span>&nbsp;<span id="code88">X</span>&nbsp;<span id="code67">C</span>&nbsp;<span id="code86"
style="font-weight:bold">V</span>&nbsp;<span id="code66">B</span>&nbsp;<span id="code78">N</span>&nbsp;<span id="code77" style="font-weight:bold">M</span>&nbsp;<span id="code44">,</span>&nbsp;<span id="code46">.</span>

</div>



<div id="row4" class="row4">
<span id="code32">[SPACE]</span>
</div>


<div id="scores">
<div class="count">Characters:
<span id="count"></span>
</div>
<div class="accuracy">Errors:
<span id="accuracy"></span>
</div>
<div class="speed">WPM:
<span id="speed"></span>
</div>

<div class="time">Time:
<span id="time"></span>

</div>
</div>







<div align="center">
<button id="reset" class="button123" name="reset" align="center">Restart Exercise</button>
</div>
</div>


<div id="echo" class="echo" style="display:none;">
[]
</div>

<div style="display:none;">
<button id="skip" class="button123" name="skip">skip</button> to next line ("enter" key is shortcut)

</div>
<div style="display:none;">
<button id="back" class="button123" name="back">back</button> to previous line
</div>
</div>

</div>

[CODE]




Can any one help me to input the speed, accuracy and count to a database. I can't able to take the value because its JavaScript....

I know there's a way to do it in Jquery, but in simple javascript is there a way to "type" into a textbox? Or, modify what's typed? I tried using macros but it doesn't fill out the form after refresh.

I'm looking for a Javascript tutorial. I already have a good base in HTML & CSS. I'm trying to make a widget to display updated NCAA Football Team Stats.

Kind Regards,
- Mat P.

Hi, i wonder if anybody got a link to a tutorial for a javascript yahtzee game?

I am studying the javascript. I got following codes from json2.js but do not understand syntax of them.
if (!this.JSON) {
this.JSON = {};
}

(function () {
...
}());


For 2nd part, why there is () outsider function? and why these is () after function? Thanks a lot.