sriprasanna/How smart am I?

## How smart am I?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>How smart am I?</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Sri Prasanna">
	<!-- Date: 2010-02-17 -->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css" media="screen">
	 body        { text-align:center; width: 960px; margin: 0 auto; }
	 div, strong, input
	             { margin-top: 30px;}
	 #type_text  { border: 1px solid black; font-size: 1.25em; }
	 .win        { color: green; }
	 .fail       { color: red; }
	 .highLight  { background-color: yellow ; }
	</style>
</head>
<body>
  <div>
    <strong id="timer">
      60
    </strong>
    <div id="type_text">along head does America food big eye this look every have page got like too their left plant long thing need made answer school do word watch hear sentence only over work help would light small together example on so is go put while for well found of even want good saw most around you he get second later always are why took began don't such talk think which miss four study stop read story form learn came one little now must about those tree set above try play she not water did start under white far live went state family before mother show should they open country sometimes might old or mean time who and said almost sound up know very then carry hand kind number face idea close new write leave into these important use enough find different me make all that may call few being men her own add because cut just move any between out young sea after great back begin off people thought them large each feet come life could day high than your take had list soon with can year here animal more keep right city my many no some how home way never turn seem been river both has boy part end first where its if man give below something really let land to near girl without car father three night as follow was house hard mountain were eat by place Indian once run our us group we it's through change be side children song line another the will down next an name there again often but letter until see in two picture much last world other spell same his paper what earth grow book walk at tell from it oil say also when still mile point him away air ask</div>
    <input type="text" name="type_here" id="type_here" size="100" />
    <div id="result">

    </div>
  </div>
  <script type="text/javascript" charset="utf-8">
    (function(){
      var text = $('#type_text').html(),
          text_array = text.split(" "),
          array_index = 0,
          timer_element = $('#timer'),
          text_container = $('#type_text'),
          type_input = $('#type_here'),
          total_words_typed = 0,
          total_correct_words = 0,
          total_wrong_words = 0;
      var stop = function(){
        type_input.attr("disabled", "disabled");
        var html = [];
        html.push( "Total words typed = " + total_words_typed );
        html.push( "Total correct words typed = " + total_correct_words );
        html.push( "Speed = " + total_correct_words + " per second" );
        $('#result').html( html.join("<br />") );
      };
      var tempFunc = function(){
        setTimeout( function(){
                      var seconds_left = parseInt( timer_element.html(), 10 ) - 1;
                      timer_element.html( seconds_left );
                      if (seconds_left < 1)
                        stop();
                      else
                        setTimeout( arguments.callee, 1000 );
                    }, 1000 );
        type_input.unbind("keydown", tempFunc);
      };
      var highLightFirstWord = function(){
        text_container.html( text_container
                              .html()
                              .replace( new RegExp("(^|\\s)" + text_array[0] + "(\\s|$)") , " <strong class=\"highLight\">"+ text_array[0] +"</strong> " ) );
      };
      highLightFirstWord();
      type_input.keydown(tempFunc).keypress(function(e){
        if (e.charCode === 32) {
          e.preventDefault();
          var actual_text = text_array.shift(), typed_text = this.value, className;
          total_words_typed++;
          if (actual_text === typed_text) {
            className = "win";
            total_correct_words++;
          }else{
            className = "fail";
            total_wrong_words++;
          }
          text_container.html( text_container
                                .html()
                                  .replace( "<strong class=\"highLight\">"+ actual_text +"</strong>", "<strong class=\""+ className +"\">"+ actual_text +"</strong>" ) );
          highLightFirstWord();
          this.value = "";
        }
      }).focus();
    })();
  </script>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>How smart am I?</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Sri Prasanna">
	<!-- Date: 2010-02-17 -->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css" media="screen">
	body { text-align:center; width: 960px; margin: 0 auto; }
	div, strong, input
	{ margin-top: 30px;}
	#type_text { border: 1px solid black; font-size: 1.25em; }
	.win { color: green; }
	.fail { color: red; }
	.highLight { background-color: yellow ; }
	</style>
	</head>
	<body>
	<div>
	<strong id="timer">
	60
	</strong>
	<div id="type_text">along head does America food big eye this look every have page got like too their left plant long thing need made answer school do word watch hear sentence only over work help would light small together example on so is go put while for well found of even want good saw most around you he get second later always are why took began don't such talk think which miss four study stop read story form learn came one little now must about those tree set above try play she not water did start under white far live went state family before mother show should they open country sometimes might old or mean time who and said almost sound up know very then carry hand kind number face idea close new write leave into these important use enough find different me make all that may call few being men her own add because cut just move any between out young sea after great back begin off people thought them large each feet come life could day high than your take had list soon with can year here animal more keep right city my many no some how home way never turn seem been river both has boy part end first where its if man give below something really let land to near girl without car father three night as follow was house hard mountain were eat by place Indian once run our us group we it's through change be side children song line another the will down next an name there again often but letter until see in two picture much last world other spell same his paper what earth grow book walk at tell from it oil say also when still mile point him away air ask</div>
	<input type="text" name="type_here" id="type_here" size="100" />
	<div id="result">

	</div>
	</div>
	<script type="text/javascript" charset="utf-8">
	(function(){
	var text = $('#type_text').html(),
	text_array = text.split(" "),
	array_index = 0,
	timer_element = $('#timer'),
	text_container = $('#type_text'),
	type_input = $('#type_here'),
	total_words_typed = 0,
	total_correct_words = 0,
	total_wrong_words = 0;
	var stop = function(){
	type_input.attr("disabled", "disabled");
	var html = [];
	html.push( "Total words typed = " + total_words_typed );
	html.push( "Total correct words typed = " + total_correct_words );
	html.push( "Speed = " + total_correct_words + " per second" );
	$('#result').html( html.join("<br />") );
	};
	var tempFunc = function(){
	setTimeout( function(){
	var seconds_left = parseInt( timer_element.html(), 10 ) - 1;
	timer_element.html( seconds_left );
	if (seconds_left < 1)
	stop();
	else
	setTimeout( arguments.callee, 1000 );
	}, 1000 );
	type_input.unbind("keydown", tempFunc);
	};
	var highLightFirstWord = function(){
	text_container.html( text_container
	.html()
	.replace( new RegExp("(^\|\\s)" + text_array[0] + "(\\s\|$)") , " <strong class=\"highLight\">"+ text_array[0] +"</strong> " ) );
	};
	highLightFirstWord();
	type_input.keydown(tempFunc).keypress(function(e){
	if (e.charCode === 32) {
	e.preventDefault();
	var actual_text = text_array.shift(), typed_text = this.value, className;
	total_words_typed++;
	if (actual_text === typed_text) {
	className = "win";
	total_correct_words++;
	}else{
	className = "fail";
	total_wrong_words++;
	}
	text_container.html( text_container
	.html()
	.replace( "<strong class=\"highLight\">"+ actual_text +"</strong>", "<strong class=\""+ className +"\">"+ actual_text +"</strong>" ) );
	highLightFirstWord();
	this.value = "";
	}
	}).focus();
	})();
	</script>
	</body>
	</html>