PHP variable updation in typing tutorial

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
nithinkk
Forum Commoner
Posts: 55
Joined: Sat Nov 28, 2009 7:57 am

PHP variable updation in typing tutorial

Post by nithinkk »

I have a typing tutorial which uses javascript and html. When a user start typing the speed is showed in a span tag.
Eg :

Code: Select all

<div class="time">Time: 
<span id="time">3.97 s</span>
</div>
Actually i want to insert the same into a php variable so that i can insert the time to database. The time get update only when the user start typing and before that inside the html i can find only

Code: Select all

<div class="time">Time: 
<span id="time"></span>
</div>
Can any one help me ????
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: PHP variable updation in typing tutorial

Post by Benjamin »

When you update the span you can also update the value of a hidden field in a form which can then be submitted.
nithinkk
Forum Commoner
Posts: 55
Joined: Sat Nov 28, 2009 7:57 am

Re: PHP variable updation in typing tutorial

Post by nithinkk »

But how can i take that value from the span tag and put to php variable ?

Code: Select all

$contents = '<span id="time"></span>';
But its not working :-(
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: PHP variable updation in typing tutorial

Post by Benjamin »

You can't. PHP doesn't execute in the browser. You need to put it into a hidden form field and then submit the value to a webpage. You can then get the value from either the $_GET or $_POST super global arrays.
nithinkk
Forum Commoner
Posts: 55
Joined: Sat Nov 28, 2009 7:57 am

Re: PHP variable updation in typing tutorial

Post by nithinkk »

so this is my code :

Code: Select all

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


I try to do like this but its not working :-(

Code: Select all

<form action="submit.php" method="post"> 

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


<input type="submit" />
</form>
Peter Kelly
Forum Contributor
Posts: 143
Joined: Fri Jan 14, 2011 5:33 pm
Location: England
Contact:

Re: PHP variable updation in typing tutorial

Post by Peter Kelly »

What they are trying to get you to do is create a hidden html field like

Code: Select all

<input type="hidden" name="time" value="" />
put that just above your submit button or something then how ever you set the span tag to the time also set the value of the hidden form field. As javascript runs within the clients browsers not on the server so you are unable to pass javascript data to the server via it.
nithinkk
Forum Commoner
Posts: 55
Joined: Sat Nov 28, 2009 7:57 am

Re: PHP variable updation in typing tutorial

Post by nithinkk »

How can i take that value from

Code: Select all

<span id="time"></span>
it automatically get the value using javascript when a user start typing....
Peter Kelly
Forum Contributor
Posts: 143
Joined: Fri Jan 14, 2011 5:33 pm
Location: England
Contact:

Re: PHP variable updation in typing tutorial

Post by Peter Kelly »

nithinkk wrote:How can i take that value from

Code: Select all

<span id="time"></span>
it automatically get the value using javascript when a user start typing....
If you look through the javascript which puts the time into that span then you need to modify it to also put it into the hidden field as well.
nithinkk
Forum Commoner
Posts: 55
Joined: Sat Nov 28, 2009 7:57 am

Re: PHP variable updation in typing tutorial

Post by nithinkk »

This is the code :

Code: Select all

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



And this is the HTML :

Code: Select all

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

<form action="submit.php" method="post"> 

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

<input type="hidden" name="time" value="<span id="time"></span>" />
<input type="hidden" name="speed" value="<span id="speed"></span>" />
<input type="submit" />
</form>

<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>
nithinkk
Forum Commoner
Posts: 55
Joined: Sat Nov 28, 2009 7:57 am

Re: PHP variable updation in typing tutorial

Post by nithinkk »

Can any one help ?
Peter Kelly
Forum Contributor
Posts: 143
Joined: Fri Jan 14, 2011 5:33 pm
Location: England
Contact:

Re: PHP variable updation in typing tutorial

Post by Peter Kelly »

Im not 100% sure but i think its to do with

Code: Select all

        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); 
nithinkk
Forum Commoner
Posts: 55
Joined: Sat Nov 28, 2009 7:57 am

Re: PHP variable updation in typing tutorial

Post by nithinkk »

No its not working :-(

I just want to store that speed and time in mysql database....Can any one suggest how to do it ??? Because above code is using javascript and me want to input it in to the database with php...
Post Reply