Multiplication Facts Table

by ecropolis

HTML

<div id="viewport">
    <form id="userinput">
        <label for="dimensions">Dimension:</label>
        <input id="dimensions" name="dimensions" type="number" value="12">
        <input type="submit" value="save">
            <span class="btn" id="quiz-me">quiz me</span>
            <span class="btn" id="hide-answers">hide answers</span>
    </form>
    <div id="infoport">
    </div>
            <img src="http://www.freesmileys.org/smileys/smiley-green/greensmilies-019.gif" class="emo correct"><img src="http://www.freesmileys.org/smileys/smiley-think001.gif" class="emo wrong">
</div>

CSS

html { font-family: Arial, Sans-Serif; }
#viewport form { padding: 5px 30px; background-color:#CCC; display:block; margin:0 auto 15px; border-bottom: 1px solid #000; }
#dimensions { width: 40px; text-align:center; }
table { border: 1px solid #ccc; }
table td.null-cell { background-color: #8A8A8A; }
table td { padding: 3px 6px; min-width: 26px; text-align: center; cursor:help; border-bottom: 1px solid #CCC; border-left: 1px solid #CCC; }
table td:hover { background-color: #315279; color: #CCC; }
table td.top-hd,
table td.side-hd { background-color: #CCC; }
table td.top-hd.active,
table td.side-hd.active { background-color: #8FA9C7; }
#infoport {
    display:none;
    font-size: 1.8em;
    text-align: center;
    padding: 10px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    background-color: #F7F7F7;
    min-height: 34px;
}
.btn { cursor: pointer; display: inline-block; color: #CCC; background-color:#000; padding: 2px 4px; font-size:.8em; display:none; margin-left: 5px; border-radius: 2px;  }
.btn.active { background-color: darkgreen; }
.btn#quiz-me { margin-left: 30px; }
.correct, .wrong{ display:none; margin-left: 10px; }
.red-txt { color:red; }
.green-txt { color:green; }
.is-correct { background: #A5CCA5; }
.is-wrong { background: #FBD7D7; }

JavaScript

$viewport = $('#viewport');
$form = $viewport.find('#userinput');
$info = $viewport.find('#infoport');
$table = $('<table/>').appendTo($viewport).hide();
dim = 0;
numq = 0;
numqTogo = 0;
quizmode = disableClick = false;
numberKeyMap = {
	'96':0,'97':1,'98':2,'99':3,'100':4,'101':5,'102':6,'103':7,'104':8,'105':9,
    '48':0,'49':1,'50':2,'51':3,'52':4,'53':5,'54':6,'55':7,'56':8,'57':9
};
$form.on('submit',function(e){
    e.preventDefault();
    $table.empty();
   	var x = y = dim = parseInt($(this).find('input[name="dimensions"]').val()) + 1;
    dim = dim - 1;
    var i = ii = 0;
    var $th = $('<tr/>');
    $th.append('<td class="null-cell"> </td>');

    while (ii < x){
        var $td = $('<td/>');
        $td.addClass('top-hd').text(ii);
        $td.appendTo($th);
        ii++;
    }
    $th.appendTo($table);
    while (i < y) {
        ii = 0;
        var $tr = $('<tr/>');
        while (ii < x) {
            var $td = $('<td/>');
            if(ii === 0)
                $tr.append('<td class="side-hd">'+i+'</td>');
			
                $td.html('<span>'+ i*ii +'</span>').hover(function(){
                    if(!quizmode){
                        var x = $(this).index();
                        var y = $(this).parent().index();
                        var $x = $table.find('tr:eq(0) td:eq('+x+')').addClass('active');
                        var $y = $table.find('tr:eq('+y+') td:eq(0)').addClass('active');
                        $info.html( $y.text() + ' x ' + $x.text() + ' = ' + $(this).text() );
                    }
                },function(){
                    //$table.find('tr:eq(0) td').removeClass('active');
                    $table.find('td').removeClass('active');
                });

            $td.appendTo($tr);
        	ii++;
		}
        $tr.appendTo($table);
        i++;
	}
    $table.fadeIn();
    $info.css('width',($table.width()-20)+'px').fadeIn();
    $('#quiz-me').fadeIn();
});
$('#quiz-me').on('click',function(){
   ...