asolkar/Multiplication_short.html

## Multiplication_short.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Multiplication - Short</title>
  <meta name="description" content="Multiplication exercise">
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <style type="text/css">
body {
  font-family: "Trebuchet MS", sans-serif;
}
.problem {
  margin-left: 20px;
  margin-bottom: 30px;
  display: inline-block;
}
.problem td {
  margin: none;
  padding: 3px;
}
.problem td.val {
  min-width: 2em;
}
.problem td {
  font-family: "Consolas", "Monaco", "Ubuntu Mono", monospace;
  font-size: 32px;
  text-align: right;
}
.sign {
  color: #55f;
}
.correct {
  color: #5a5;
}
.wrong {
  color: #f55;
}
.op2 .sign, .op2 .val {
  border-bottom: 4px solid #eee;
}
.dim {
  color: #eee;
}
.sol-in {
  width: 3em;
}
#score {
  display: inline-block;
}
.active {
  cursor: pointer;
}
  </style>
</head>
<body>
  <!-- Add your site or application content here -->
  <h1>Math Exercise</h1>

  Score: <button id='check' title='Click to grade test'>Check?</button><div id='score'></div>

  <div id="test_container">
  </div>

<script>
function rn(min,max) {
  return Math.floor(Math.random()*(max-min+1)+min);
}

function pose_problem(cont, op1, op2, sign, ans) {

  var problem = $('<table></table>');

  problem.append($('<tr></tr>').addClass('op1')
                  .append($('<tr></tr>').addClass('op1'))
                  .append($('<td>' + op1 + '</td>').addClass('val')));

  problem.append($('<tr></tr>').addClass('op2')
                  .append($('<td>' + sign + '</td>').addClass('sign'))
                  .append($('<td>' + op2 + '</td>').addClass('val')));

  problem.append($('<tr></tr>').addClass('ans')
                  .append($('<td>?</td>').addClass('solver dim active')
                    .attr('title', 'Click to check answer')
                    .click(function () {
    solve_problem($(this).parent().parent().find('.sol-val'),
                  $(this).parent().parent().find('.sol-in'), ans);
                      }))
                  .append($('<td></td>').addClass('val')
                    .append($('<input type="number"></input>').addClass('sol-in'))));

  problem.append($('<tr></tr>').addClass('sol')
                  .append($('<td>&nbsp;</td>'))
                  .append($('<td></td>').addClass('val').addClass('sol-val')));

  cont.data('ans', ans);
  cont.append(problem);
}

function solve_problem(sol_val, ans_inp, ans) {
  sol_val.removeClass('correct');
  sol_val.removeClass('wrong');
  sol_val.text(ans).addClass((ans_inp.val() == ans) ? 'correct' : 'wrong');
  sol_val.parent().parent().find('.solver').unbind('click').removeClass('active').attr('title', '');
}

function solve_all() {
  $('.problem').each(function() {
    solve_problem($(this).find('.sol-val'),
                  $(this).find('.sol-in'),
                  $(this).data('ans'));
  });
}

$(document).ready(function() {
  for (pn = 0; pn < 30; pn++) {
    //
    // Customize this:
    //
    var op1 = rn(3, 12);
    var op2 = rn(2, 9);
    var sign = '&times;'; // &divide, &minus, +

    var ans = (op1*op2);
    var problem = $('<div></div>').addClass('problem');
    $('#test_container').append(problem);
    pose_problem(problem, op1, op2, sign, ans);
  }

  $('#check').click(function() {
    solve_all();
    var all = $('.problem').length;
    var correct = $('.problem .correct').length;
    var wrong = $('.problem .wrong').length;
    var rate = Math.floor((correct/all)*10000)/100;
    $('#score').html(rate + '% correct! ('
                + all + ' solved, <span class="correct">'
                + correct + '</span> correct, <span class="wrong">'
                + wrong + '</span> wrong)');
    $(this).hide();
  });
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>Multiplication - Short</title>
	<meta name="description" content="Multiplication exercise">
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<style type="text/css">
	body {
	font-family: "Trebuchet MS", sans-serif;
	}
	.problem {
	margin-left: 20px;
	margin-bottom: 30px;
	display: inline-block;
	}
	.problem td {
	margin: none;
	padding: 3px;
	}
	.problem td.val {
	min-width: 2em;
	}
	.problem td {
	font-family: "Consolas", "Monaco", "Ubuntu Mono", monospace;
	font-size: 32px;
	text-align: right;
	}
	.sign {
	color: #55f;
	}
	.correct {
	color: #5a5;
	}
	.wrong {
	color: #f55;
	}
	.op2 .sign, .op2 .val {
	border-bottom: 4px solid #eee;
	}
	.dim {
	color: #eee;
	}
	.sol-in {
	width: 3em;
	}
	#score {
	display: inline-block;
	}
	.active {
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<!-- Add your site or application content here -->
	<h1>Math Exercise</h1>

	Score: <button id='check' title='Click to grade test'>Check?</button><div id='score'></div>

	<div id="test_container">
	</div>

	<script>
	function rn(min,max) {
	return Math.floor(Math.random()*(max-min+1)+min);
	}

	function pose_problem(cont, op1, op2, sign, ans) {

	var problem = $('<table></table>');

	problem.append($('<tr></tr>').addClass('op1')
	.append($('<tr></tr>').addClass('op1'))
	.append($('<td>' + op1 + '</td>').addClass('val')));

	problem.append($('<tr></tr>').addClass('op2')
	.append($('<td>' + sign + '</td>').addClass('sign'))
	.append($('<td>' + op2 + '</td>').addClass('val')));

	problem.append($('<tr></tr>').addClass('ans')
	.append($('<td>?</td>').addClass('solver dim active')
	.attr('title', 'Click to check answer')
	.click(function () {
	solve_problem($(this).parent().parent().find('.sol-val'),
	$(this).parent().parent().find('.sol-in'), ans);
	}))
	.append($('<td></td>').addClass('val')
	.append($('<input type="number"></input>').addClass('sol-in'))));

	problem.append($('<tr></tr>').addClass('sol')
	.append($('<td> </td>'))
	.append($('<td></td>').addClass('val').addClass('sol-val')));

	cont.data('ans', ans);
	cont.append(problem);
	}

	function solve_problem(sol_val, ans_inp, ans) {
	sol_val.removeClass('correct');
	sol_val.removeClass('wrong');
	sol_val.text(ans).addClass((ans_inp.val() == ans) ? 'correct' : 'wrong');
	sol_val.parent().parent().find('.solver').unbind('click').removeClass('active').attr('title', '');
	}

	function solve_all() {
	$('.problem').each(function() {
	solve_problem($(this).find('.sol-val'),
	$(this).find('.sol-in'),
	$(this).data('ans'));
	});
	}

	$(document).ready(function() {
	for (pn = 0; pn < 30; pn++) {
	//
	// Customize this:
	//
	var op1 = rn(3, 12);
	var op2 = rn(2, 9);
	var sign = '×'; // &divide, &minus, +

	var ans = (op1*op2);
	var problem = $('<div></div>').addClass('problem');
	$('#test_container').append(problem);
	pose_problem(problem, op1, op2, sign, ans);
	}

	$('#check').click(function() {
	solve_all();
	var all = $('.problem').length;
	var correct = $('.problem .correct').length;
	var wrong = $('.problem .wrong').length;
	var rate = Math.floor((correct/all)*10000)/100;
	$('#score').html(rate + '% correct! ('
	+ all + ' solved, <span class="correct">'
	+ correct + '</span> correct, <span class="wrong">'
	+ wrong + '</span> wrong)');
	$(this).hide();
	});
	});
	</script>
	</body>
	</html>