jpetto · September 19, 2012 02:22
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Keyboard Racer :*Evolved*:</title>
 </head>
 <body>

 	<p>
 		Enter your name in the box below. When you're ready to play, click the
 		<em>Start Typing!</em> button and type the alphabet.
 	</p>

 <form id="racer_form">
 	<label for="name">Player Name:</label>
 	<input type="text" name="name" id="name" />

 	<fieldset>
 		<input type="text" name="alphabet" id="alphabet" />
 		<br />
 		<button type="button" id="start">Start Typing!</button>
 		<button type="submit" id="stop">Finished!</button>
 	</fieldset>
 </form>

 <div id="results">
 	<h2 id="player_name"></h2>
 	<!-- all responses will go here -->
 </div>

 <script type="text/javascript">
 // get references to my buttons and form
 var form = document.querySelector('#racer_form');
 var textbox = document.querySelector('#alphabet');
 var namebox = document.querySelector('#name');
 var start = document.querySelector('#start');
 var end = document.querySelector('#end');

 // get references to other DOM elements
 var player_name = document.querySelector('#player_name');
 var results = document.querySelector('#results');

 var name_displayed = false;

 // declare date variables
 var start_time;
 var end_time;
 var previous_time;

 // declare element vars
 var p;

 start.onclick = function(e) {
 	if (!name_displayed) {
 		player_name.appendChild(document.createTextNode('Player 1: ' + namebox.value));
 		name_displayed = true;
 	}

 	// clear out the textbox
 	textbox.value = '';

 	// focus the text box
 	textbox.focus();

 	// store the time they start typing
 	start_time = new Date();
 }

 form.onsubmit = function(e) {
 	e.preventDefault();
 	// store the time they finished
 	end_time = new Date();

 	// calculate total time taken
 	var total_time = (end_time.getTime() - start_time.getTime())/1000;

 	// make sure they typed the alphabet correctly
 	//if (textbox.value !== 'abcdefghijklmnopqrstuvwxyz') {
 	if (textbox.value !== 'abcdefg') {
 		// add an element insulting the user
 		p = document.createElement('p');
 		p.appendChild(document.createTextNode("You don't even know your ABCs? Jeez louise. I still love you."));

 		results.appendChild(p);
 	} else {
 		// display how long it took
 		p = document.createElement('p');
 		p.appendChild(document.createTextNode("It took you " + total_time + " seconds."));
 		results.appendChild(p);

 		// tell them if they did better or worse
 		if (previous_time !== undefined) {
 			var msg;
 			var diff;

 			if (previous_time > total_time) {
 				// did better
 				msg = "You've shown improvement. Nice!";
 				diff = previous_time - total_time;
 			} else {
 				// did worse
 				msg = "Whoa, getting a little fatigued, eh?";
 				diff = total_time - previous_time;
 			}

 			p = document.createElement('p');
 			p.appendChild(document.createTextNode(msg + " The difference was " + diff.toFixed(2) + "."));
 			results.appendChild(p);
 		}
 	}

 	// store the current time into the previous time
 	previous_time = total_time;
 }
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Keyboard Racer :Evolved:</title>
	</head>
	<body>

	<p>
	Enter your name in the box below. When you're ready to play, click the
	<em>Start Typing!</em> button and type the alphabet.
	</p>

	<form id="racer_form">
	<label for="name">Player Name:</label>
	<input type="text" name="name" id="name" />

	<fieldset>
	<input type="text" name="alphabet" id="alphabet" />
	<br />
	<button type="button" id="start">Start Typing!</button>
	<button type="submit" id="stop">Finished!</button>
	</fieldset>
	</form>

	<div id="results">
	<h2 id="player_name"></h2>
	<!-- all responses will go here -->
	</div>

	<script type="text/javascript">
	// get references to my buttons and form
	var form = document.querySelector('#racer_form');
	var textbox = document.querySelector('#alphabet');
	var namebox = document.querySelector('#name');
	var start = document.querySelector('#start');
	var end = document.querySelector('#end');

	// get references to other DOM elements
	var player_name = document.querySelector('#player_name');
	var results = document.querySelector('#results');

	var name_displayed = false;

	// declare date variables
	var start_time;
	var end_time;
	var previous_time;

	// declare element vars
	var p;

	start.onclick = function(e) {
	if (!name_displayed) {
	player_name.appendChild(document.createTextNode('Player 1: ' + namebox.value));
	name_displayed = true;
	}

	// clear out the textbox
	textbox.value = '';

	// focus the text box
	textbox.focus();

	// store the time they start typing
	start_time = new Date();
	}

	form.onsubmit = function(e) {
	e.preventDefault();
	// store the time they finished
	end_time = new Date();

	// calculate total time taken
	var total_time = (end_time.getTime() - start_time.getTime())/1000;

	// make sure they typed the alphabet correctly
	//if (textbox.value !== 'abcdefghijklmnopqrstuvwxyz') {
	if (textbox.value !== 'abcdefg') {
	// add an element insulting the user
	p = document.createElement('p');
	p.appendChild(document.createTextNode("You don't even know your ABCs? Jeez louise. I still love you."));

	results.appendChild(p);
	} else {
	// display how long it took
	p = document.createElement('p');
	p.appendChild(document.createTextNode("It took you " + total_time + " seconds."));
	results.appendChild(p);

	// tell them if they did better or worse
	if (previous_time !== undefined) {
	var msg;
	var diff;

	if (previous_time > total_time) {
	// did better
	msg = "You've shown improvement. Nice!";
	diff = previous_time - total_time;
	} else {
	// did worse
	msg = "Whoa, getting a little fatigued, eh?";
	diff = total_time - previous_time;
	}

	p = document.createElement('p');
	p.appendChild(document.createTextNode(msg + " The difference was " + diff.toFixed(2) + "."));
	results.appendChild(p);
	}
	}

	// store the current time into the previous time
	previous_time = total_time;
	}
	</script>

	</body>
	</html>