bruceharris/index.html

## index.html
<!doctype html>
<html lang=en>
<meta charset=utf-8>
<title>Multiplication Table</title>
<style>
  body { font-family "Lucida Grande", Sans-Serif }
  td { border: 1px solid black; }
  th { border: none; font-weight: normal; font-size: 1.2em; color: blue }
  input { width: 25px; height: 25px; margin: 5px; font-size: 1.2em; }
  div { float: left; }
  br { clear: both; }
  .correct { background-color: #7cfc00; }
  .oops { background-color: red; }
  .active { background-color: #bfbfbf; }
  div#question { height: 50px; width: 170px; font-size: 40px; margin: 0px 30px 0px 170px; }
</style>

<body>
	<div id="question"></div>
	<div id="points">Points: <span></span></div><br/>
	<table><tbody></tbody></table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function(){
	var row, col, tr, td;

	// header row
	tr = $('<tr>');
	for (col = 0; col <= 10; col++) {
		tr.append($('<th>').html(col || ''));
	}
	$('tbody').append(tr);

	// make rest of table
	for (row = 0; row < 10; row++) {
		tr = $('<tr>').attr('data-row', row + 1);
		$('tbody').append(tr);
		for (col = 0; col <= 10; col++) {
			if (col === 0) {
				tr.append($('<th>').html(row + 1));
			} else {
				tr.append($('<td>').attr('data-col', col).append('<input/>'));
			}
		}
	}

	// returns column and row coordinates corresponding to a given td element
	function getCoordinates(td){
		return {
			col: Number($(td).attr('data-col')),
			row: Number($(td).parent().attr('data-row'))
		};
	}
	function isCorrect(inputEl){
		var coords = getCoordinates(inputEl.parentElement);
		return inputEl.value == (coords.col * coords.row);
	}
	function computePoints(){
		var points = 0;
		$('input').each(function(i, el){
			points += isCorrect(el) ? Number(el.value) : 0;
		});
		return points;
	}

	$('input')
		.change(function(e){
			if (isCorrect(e.target)) {
				$(e.target).addClass('correct').removeClass('oops');
			} else if (e.target.value === '') {
				$(e.target).removeClass();
			} else {
				$(e.target).addClass('oops').removeClass('correct');
			}
			$('#points span').html(computePoints());
		})
		.focus(function(e){
			var inputCoords = getCoordinates(e.target.parentElement);
			$('#question').html(inputCoords.row + ' x ' + inputCoords.col + ' =');
			// highlight 'active' cells for current problem
			$('td').each(function(i, el){
				var cellCoords = getCoordinates(el);
				if (cellCoords.col <= inputCoords.col && cellCoords.row <= inputCoords.row) {
					$(el).addClass('active');
				}
			});
		})
		.focusout(function(){
			$('#question').html('');
			$('td').removeClass('active');
		});
});

</script>
</body>
</html>
	<!doctype html>
	<html lang=en>
	<meta charset=utf-8>
	<title>Multiplication Table</title>
	<style>
	body { font-family "Lucida Grande", Sans-Serif }
	td { border: 1px solid black; }
	th { border: none; font-weight: normal; font-size: 1.2em; color: blue }
	input { width: 25px; height: 25px; margin: 5px; font-size: 1.2em; }
	div { float: left; }
	br { clear: both; }
	.correct { background-color: #7cfc00; }
	.oops { background-color: red; }
	.active { background-color: #bfbfbf; }
	div#question { height: 50px; width: 170px; font-size: 40px; margin: 0px 30px 0px 170px; }
	</style>

	<body>
	<div id="question"></div>
	<div id="points">Points: <span></span></div><br/>
	<table><tbody></tbody></table>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script>
	$(function(){
	var row, col, tr, td;

	// header row
	tr = $('<tr>');
	for (col = 0; col <= 10; col++) {
	tr.append($('<th>').html(col \|\| ''));
	}
	$('tbody').append(tr);

	// make rest of table
	for (row = 0; row < 10; row++) {
	tr = $('<tr>').attr('data-row', row + 1);
	$('tbody').append(tr);
	for (col = 0; col <= 10; col++) {
	if (col === 0) {
	tr.append($('<th>').html(row + 1));
	} else {
	tr.append($('<td>').attr('data-col', col).append('<input/>'));
	}
	}
	}

	// returns column and row coordinates corresponding to a given td element
	function getCoordinates(td){
	return {
	col: Number($(td).attr('data-col')),
	row: Number($(td).parent().attr('data-row'))
	};
	}
	function isCorrect(inputEl){
	var coords = getCoordinates(inputEl.parentElement);
	return inputEl.value == (coords.col * coords.row);
	}
	function computePoints(){
	var points = 0;
	$('input').each(function(i, el){
	points += isCorrect(el) ? Number(el.value) : 0;
	});
	return points;
	}

	$('input')
	.change(function(e){
	if (isCorrect(e.target)) {
	$(e.target).addClass('correct').removeClass('oops');
	} else if (e.target.value === '') {
	$(e.target).removeClass();
	} else {
	$(e.target).addClass('oops').removeClass('correct');
	}
	$('#points span').html(computePoints());
	})
	.focus(function(e){
	var inputCoords = getCoordinates(e.target.parentElement);
	$('#question').html(inputCoords.row + ' x ' + inputCoords.col + ' =');
	// highlight 'active' cells for current problem
	$('td').each(function(i, el){
	var cellCoords = getCoordinates(el);
	if (cellCoords.col <= inputCoords.col && cellCoords.row <= inputCoords.row) {
	$(el).addClass('active');
	}
	});
	})
	.focusout(function(){
	$('#question').html('');
	$('td').removeClass('active');
	});
	});

	</script>
	</body>
	</html>