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

この回答は実質的に@ gillesc'sと同じですが、重い持ち上げにはjQueryを使用しています。 you'reはjQueryのを使用している場合は、正しい方向にあなたを助けるかもしれない、このjQueryのdemoを作成し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); 
    } 
}); 

Answer 2

は、それが基本的な緑の色の変化をしていますが、変更して、必要な正確に何をするために十分なはずです。このhttp://jsfiddle.net/r4QTQ/

を試してみてください。

Answer 3

：

Javascriptコード（短いです）。

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); 

希望すると助かります！