算数 計算ドリル 脳トレゲーム 足し算 引き算 掛け算 割り算
算数 計算ドリル 脳トレゲーム 足し算 引き算 掛け算 割り算 | ひまあそび-ミニゲーム hi0a.com
view source
JavaScript
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に なります。」
【ことばでいうと】
「〇から〇をひくと、〇になります」
「〇と〇の ちがいは、〇です」
【おぼえよう】
「ひきざん」は、ものが へったり、ちがいを くらべたり するときに つかいます。
けいさんのきごうは「−」(マイナス)です
`;
CSS
#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;
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/game/game-arithmetic/
ABOUT
hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
仕様変更、API廃止等、実験途中で動かないページもあります。