Here's what you've asked:
$(document).ready(function() {
var START_TABLE = 1;
var END_TABLE = 9;
var START_MULTIPLIER = 1;
var END_MULTIPLIER = 9;
var $quiz = $('#quiz');
var html = [];
for (var i = START_TABLE; i <= END_TABLE; i++) {
html.push('<div class="block">');
for (var j = START_MULTIPLIER; j <= END_MULTIPLIER; j++) {
html.push(
'<p>' +
'<span class="i">' + i + '</span>' +
' x ' +
'<span class="j">' + j + '</span>' +
' = ' +
'<input type="text" class="res">' +
'<button class="check">Check!</button>' +
'</p>'
);
}
html.push('</div>');
}
$quiz.html(html.join(''));
$quiz.on('click', 'button.check', function() {
var $p = $(this).parent('p');
var res = parseInt($p.find('.res').val());
var i = +$p.find('.i').text();
var j = +$p.find('.j').text();
if (res == i * j) {
alert('Correct!');
} else {
alert('Incorrect!');
}
});
});
And in your <body>
:
<div id="quiz">
</div>
Working demo: http://jsfiddle.net/Cp8rY/1/
I've used jQuery so don't forget to include it on your web page (or modify the code to not use it).
But, please, in the future don't ask others to write all the code at your place: https://stackoverflow.com/help/on-topic