算数 計算ドリル 脳トレゲーム 足し算 引き算 掛け算 割り算

document.title = '算数 計算ドリル 脳トレゲーム 足し算 引き算 掛け算 割り算';

let w = document.body.clientWidth;
let h = window.innerHeight;
const symbolList = ['+', '-', '×', '÷'];

//document.oncontextmenu = function () {return false;}
$(function(){
  $demo = $('#demo');

  let clearCount = 0;
  let numMaxDef = 5;
  eq = '=';
  $h1 = $('<h1>').text(document.title);
  $demo.after($h1);

  $explanation = $('<pre>').text(explanation);
  $h1.after($explanation);


  let $controls = $('<div id="controls">');
  $h1.after($controls);
  symbolList.forEach(function(symbol){
    let $label = $('<label>');
    let $checkbox = $('<input type="checkbox">')
      .addClass('symbol-check')
      .val(symbol)
      .prop('checked', false) //
      .on('change', function(){
        clearCount = 1;
        setQuiz(); // 
      });
    $label.append($checkbox).append(' ' + symbol);
    $controls.append($label);
  });


  function setQuiz(){
    $demo.empty();

    let selectedSymbols = getSelectedSymbols();
    let symbols = [];

    // チェックがあるとき → それを優先して使う
    if (selectedSymbols.length > 0) {
      symbols = selectedSymbols;
    } else {
      // チェックがないときは clearCount によって制限
      if (clearCount < 3) {
        symbols = ['+'];
      } else if (clearCount < 4) {
        symbols = ['+', '-'];
      } else if (clearCount < 12) {
        symbols = ['+', '-', '×'];
      } else {
        symbols = ['+', '-', '×', '÷'];
      }
    }

    let symbol = symbols[Math.floor(Math.random()*symbols.length)];


    // 記号に応じた numMax を決定
    let numMax;
    if(symbol === '+' || symbol === '-') {
      numMax = 6 + clearCount*2;
    } else if(symbol === '×' || symbol === '÷') {
      numMax = Math.floor(clearCount);  // 少なめ
    }
    if(numMax > 99) numMax = 99;

    let n1,n2,n3;
    if(symbol === '÷') {
      n3 = Math.floor(Math.random() * (numMax - 1)) + 2; // 答え
      n2 = Math.floor(Math.random() * clearCount) + 2;            // 除数
      n1 = n3 * n2;                                      // 被除数
    }　else {
      n1 = Math.floor(Math.random() * (numMax - 1)) + Math.floor(clearCount+2);
      n2 = Math.floor(Math.random() * (n1 - 1)) + Math.floor(clearCount/2+1);
      if(symbol === '+'){
        n3 = n1 + n2;
      } else if(symbol === '-'){
        n3 = n1 - n2;
      } else if(symbol === '×'){
        n3 = n1 * n2;
      }
    }

    let answer = n3;
    answers = [];
    answerStart = answer + Math.floor(Math.random()*4)-3;
    answers.push(answerStart);
    answers.push(answerStart+1);
    answers.push(answerStart+2);
    if(answer>39){
      plamin1 = Math.random().toFixed()*2-1;
      answers.push(answer+10*plamin1);
      answers.push((answer+plamin1)+10*plamin1);
    } else {
      answers.push(answerStart+3);
      answers.push(answerStart+4);
    }

    if(!answers.includes(answer)){
      answers.push(answer);
      answers.shift();
    }

    answers.sort(function(a, b) {
      return a - b;
    });

    const obj = {
      symbol:symbol,
      n1:n1,
      n2:n2,
      n3:n3,
      eq:eq,
      answers,
      answers: answers,
      answer: n3,
    }
    display(obj);
  }


  function display(obj){
    const { symbol,n1,n2,n3,eq,answers,answer } = obj;
    let formulaAry = [n1,symbol,n2,eq,n3];
    formulaAry.forEach(function(v,i){
      let $b = $('<b>').text(v);
      $demo.append($b);
      if(v>999){
       $b.addClass('digit4');
      }
      if(i===4){
       $b.addClass('space');
      }
    });
    answers.forEach(function(v,i){
      let $b = $('<b>').text(v);
      $demo.append($b);
      if(v>999){
       $b.addClass('digit4');
      }
      $b.addClass('choice');
      $b.on('click',function(){
        if(!$(this).hasClass('choice')){return;}
        var t = Number($(this).text());
        if(t === answer){
          $(this).addClass('ok');
          $('.space').addClass('ok');
          clearCount++;
        } else {
          $(this).addClass('ng');
          $('.space').addClass('ng');
        }
        $('.choice').removeClass('choice');
        $('.space').removeClass('space');

        $btn = $('<button>').text('次の問題へ');
        $demo.append($btn);
        $btn.on('click', function(){
          setQuiz();
        });
      });

    });
  }

  setQuiz();

});
function getSelectedSymbols() {
  let selected = [];
  $('.symbol-check:checked').each(function(){
    selected.push($(this).val());
  });
  return selected;
}
$('.symbol-check').on('change', function(){
  setQuiz(); // チェック変更時に新しい問題を出題
});

const explanation = `

小学校1年の算数学習内容

✨ 足し算（たしざん）
【せつめい】
足し算は、「あわせて いくつになるか」を しらべる けいさん です。

たとえば、

りんごが 3こ あります。そこに 2こ ふえました。
あわせて いくつに なりますか？

これは、
3 ＋ 2 = 5
と けいさんします。

「3と2を たすと、5に なります。」

【ことばでいうと】
「〇に〇をたすと、〇になります」

「〇と〇をあわせて、〇です」

【おぼえよう】
「たしざん」は、ものが ふえたり、あつまったり したときに つかいます。

けいさんのきごうは「＋」（プラス）です。



✨ 引き算（ひきざん）
【せつめい】
引き算は、「のこりは いくつか」「ちがいは いくつか」を しらべる けいさんです。

たとえば、

みかんが 5こ あります。2こ たべました。
のこりは いくつですか？

これは、
5 − 2 = 3
と けいさんします。

「5から2を ひくと、3に なります。」

【ことばでいうと】
「〇から〇をひくと、〇になります」

「〇と〇の ちがいは、〇です」

【おぼえよう】
「ひきざん」は、ものが へったり、ちがいを くらべたり するときに つかいます。

けいさんのきごうは「−」（マイナス）です

`;

#demo{
  user-select:none;
  text-align:center;
}
#demo b{
  display:inline-block;
  width:20%;
  height:20vw;
  line-height:20vw;
  text-align:center;
  font-size:8vw;
  font-weight:bold;
  border:1px solid #000;
  border-bottom:8px solid #000;
  box-sizing:border-box;
  font-family:serif;
}
#demo b.space{
  color:transparent;
}
#demo b.select{
  color:#555;
}
#demo b.choice{
  background-color:#ccc;
  color:#555;
}
#demo b.choice:hover{
  background-color:#eee;
  color:#000;
  cursor:pointer;
}
#demo b.ok{
  background-color:#afa;
  color:#000;
}
#demo b.ng{
  background-color:#faa;
}
button{
  width:100%;
  padding:12px;
  font-size:5vw;
  box-sizing:border-box;
}
#demo a{
  display:inline-block;
  padding:12px;
}

#controls{
  margin:20px;
}
#controls label{
  display:inline-block;
  width:24%;
  height:10vw;
  font-size:8vw;
}
#controls input{
  transform: scale(4);
  transform-origin: bottom center;
  margin:20px;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/game/game-arithmetic/