Question

The script below generates random numbers, and calculates the answer.

The next thing is that I want to have the answer HIDDEN and place a text area there. Then you have to input an answer and when the answer is correct, it should make the answer green.

I know it is possible, but I’ve searched on the internet for it without success, so I’m creating a question instead.

Here’s the script:

<div id="breuken"></div>

$(function () {
    var number = document.getElementById("breuken");
    var i = 0;
    for (i = 1; i <= 10; i++) {
        var sRandom = Math.floor(Math.random() * 10);
        var fRandom = Math.floor(sRandom + Math.random() * (10 - sRandom));
        var calc = Math.abs(fRandom - sRandom);
        number.innerHTML += "" + fRandom + " - " + sRandom + " = " + calc + "<br />";
    }
    number.innerHTML;
});

Answer 1

This answers does practically the same as @gillesc’s but uses jQuery to do the heavy lifting, which you should use if you have it at hand. (and is shorter)

Javascript code: jsFiddle

$(function() {
    var checkAnswer = function(elem) {
        if ($(elem).data('calc') == $(elem).val()) {
            $(elem).css('background-color', 'green');
        } else {
            $(elem).css('background-color', 'white');
        }
    };
    var div = $('#breuken');

    for (var i = 0; i < 10; i++) {
        var sRandom = Math.floor(Math.random() * 10);
        var fRandom = Math.floor(sRandom + Math.random() * (10 - sRandom));
        var calc = Math.abs(fRandom - sRandom);

        var qa = $('<span>' + fRandom + ' - ' + sRandom + 
            ' = <input type="text"></span><br />');
        qa.find('input').change(function() {
            checkAnswer(this);
        }).data('calc', calc);
       div.append(qa);
    }
});