javascript - Javascript - 隐藏的数学答案。

Question

下面的脚本生成随机数，并计算答案。

接下来是我想要隐藏答案并在那里放置一个文本区域。然后你必须输入一个答案，当答案正确时，它应该使答案变为绿色。

我知道这是可能的，但我在互联网上搜索它没有成功，所以我正在创建一个问题。

这是脚本：

<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

试试这个http://jsfiddle.net/r4QTQ/

它确实会发生基本的绿色变化，但应该足以让您修改并完全按照您的意愿行事。

Answer 2

创建了这个 jQuery演示，如果您使用 jQuery，它可能会帮助您朝着正确的方向发展。

var $questions = $('<div />').attr('id', 'questions');
for (var i = 1; i <= 3; i++) {

    var question = "Question " + i + "?";
    var answer = i;

    $questions.append(
        $('<div />')
            .attr('id', 'question' + i)
            .addClass('question')
            .append(
                $('<span />').text(question)
            )
            .append(
                $('<input type="text" />')
                    .addClass('answer')
                    .data('answer', answer)
            )
    );
}
$('#container').empty().append($questions);

希望能帮助到你！

Answer 3

这个答案实际上与@gillesc 的答案相同，但用于jQuery完成繁重的工作，如果你手头有它，你应该使用它。（并且更短）

Javascript 代码：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);
    }
});