ひっ算やってみよう 📖

3桁までの足し算と引き算をひっ算で一手ずつ表示します。たしかめ算も行います。

プログラム: (→大)
# ----------------------------------- # --- ひっ算やってみよう　version1.2 # --- 三桁までの足し算と引き算のひっ算をします。 # --- 手順を一つずつ書き足していきます、戻ることもできます。 # --- たしかめ算まで、がっつりやります。 # --- 計算画面と操作エリアのバランスを調整しました # ----------------------------------- # 初期値 大=0 // 大文字用インデックス 小=1 // 小文字用インデックス 余白大=10 余白小=3 たて大=40 たて小=15 よこ大=30 よこ小=15 文字大=40 文字中=25 文字小=15 手順={} 手順数=0 TCNT=0 // タイマー呼び出し回数 OFFSET=200 // オフセットたしかめ算用 # 描画情報 上百位=[余白大*2+よこ大*1, 余白大*1+たて小*1+余白小*1+たて大*1] 上十位=[余白大*3+よこ大*2, 余白大*1+たて小*1+余白小*1+たて大*1] 上一位=[余白大*4+よこ大*3, 余白大*1+たて小*1+余白小*1+たて大*1] 演算記号=[余白大*1+よこ大*0, 余白大*2+たて小*1+余白小*1+たて大*2] 下百位=[余白大*2+よこ大*1, 余白大*2+たて小*1+余白小*1+たて大*2] 下十位=[余白大*3+よこ大*2, 余白大*2+たて小*1+余白小*1+たて大*2] 下一位=[余白大*4+よこ大*3, 余白大*2+たて小*1+余白小*1+たて大*2] 横棒=[ [余白大*1+よこ大*0,下百位[1]+余白大/2], [下一位[0]+よこ大*1,下百位[1]+余白大/2]] 答千位=[余白大*1+よこ大*0, 余白大*3+たて小*1+余白小*1+たて大*3] 答百位=[余白大*2+よこ大*1, 余白大*3+たて小*1+余白小*1+たて大*3] 答十位=[余白大*3+よこ大*2, 余白大*3+たて小*1+余白小*1+たて大*3] 答一位=[余白大*4+よこ大*3, 余白大*3+たて小*1+余白小*1+たて大*3] 百補助=[上十位[0]-余白大-よこ小,余白大*1+たて小*1] 十補助１=[上十位[0],余白大*1+たて小*1] 十補助２=[十補助１[0]+よこ小+余白小,十補助１[1]] 一補助=[上一位[0],余白大*1+たて小*1] 引き算矢印１=[[答一位[0]+よこ大+余白大, 答一位[1]-たて大/2], [OFFSET, 上一位[1]-たて大/2]] 引き算矢印２=[[下一位[0]+よこ大+余白大, 下一位[1]-たて大/2], [OFFSET, 下一位[1]-たて大/2]] 足し算矢印１=[[上一位[0]+よこ大+余白大, 上一位[1]-たて大/2], [OFFSET, 下一位[1]-たて大/2]] 足し算矢印２=[[下一位[0]+よこ大+余白大, 下一位[1]-たて大/2], [OFFSET, 上一位[1]-たて大/2]] # --- 画面表示 「３けたまでの数字を入力して、計算開始ボタンをおしてね。」のラベル作成。改行作成。 「式：」のラベル作成。 空のエディタ作成して、上段エディタに代入。 ["＋","－",]のセレクトボックス作成し、演算セレクトに代入。 演算セレクトに「"＋"」をテキスト設定 空のエディタ作成して、下段エディタに代入。改行作成。 // エディタサイズ調整 上段エディタに｛ 「width」:「100px」、 ｝をDOMスタイル一括設定 下段エディタに｛ 「width」:「100px」、 ｝をDOMスタイル一括設定 ["自動","手動",]のセレクトボックス作成し、再生種類セレクトに代入。 再生種類セレクトに「手動」をテキスト設定 「＜もどる」のボタン作成して、コマ戻りボタンに代入 「計算開始」のボタン作成して、計算開始ボタンに代入。 「すすむ＞」のボタン作成して、コマ送りボタンに代入。改行作成。 #----------------- コマ戻りボタンをクリックした時には、 もし、TCNT>0ならば TCNT=TCNT-1 全描画クリア Nを0からTCNTまで繰り返す 手順表示(手順[N]) ここまで ここまで ここまで #----------------- 計算開始ボタンをクリックした時には、 //「計算開始ボタンクリック」と表示 // 入力チェック a=(上段エディタのテキスト取得を英数半角変換)*1 b=(下段エディタのテキスト取得を英数半角変換)*1 c=演算セレクトのテキスト取得 もし、((a<0)または(a>999))ならば 「最初の数は3桁までの自然数を入力してください」と言う。戻る。 ここまで もし、((b<0)または(b>999))ならば 「二つ目の数は3桁までの自然数を入力してください」と言う。戻る。 ここまで もし、(c="－")ならば もし、(a<b)ならば 「引き算できません」と言う。戻る。 ここまで ここまで 手順={} 手順数=0 a=上段エディタのテキスト取得 b=下段エディタのテキスト取得 f=演算セレクトのテキスト取得 手順作成(0, a, b, f, "")。 もし、f="－"ならば c=(aを英数半角変換)-(bを英数半角変換) 手順作成(OFFSET, c, b, "＋", "引き算たしかめ" )。 違えば // 入れ替えてたしかめる 手順作成(OFFSET, b, a, f, "足し算たしかめ")。 ここまで // 初期化 全タイマー停止。 TCNT=0 全描画クリア もし、(再生種類セレクトのテキスト取得)="自動"ならば 「自動表示」を1秒毎。 違えば 手順表示(手順[TCNT]) ここまで ここまで #----------------- コマ送りボタンをクリックした時には、 //「コマ送り」と表示 もし、TCNT<((手順の配列要素数)-1)ならば、 TCNT=TCNT+1 全描画クリア Nを0からTCNTまで繰り返す 手順表示(手順[N]) ここまで ここまで ここまで #--------------------------------------------- ●手順作成(X, a, b, f, tasikame) // X:offset a:上の数 b:下の数 f:演算 //「手順作成」と表示 数字情報生成(a) 上数字情報=それ 数字情報生成(b) 下数字情報=それ // 0 式表示 [ x座標, y座標 ]の位置に、　　　文字を表示　みたいな情報 もし、X=0ならば 手順["{手順数}"]=["はじめの式表示", X+上百位[0], 上百位[1], 上数字情報[2], X+上十位[0], 上十位[1], 上数字情報[3], X+上一位[0], 上一位[1], 上数字情報[4], X+演算記号[0], 演算記号[1], f X+下百位[0], 下百位[1], 下数字情報[2], X+下十位[0], 下十位[1], 下数字情報[3], X+下一位[0], 下一位[1], 下数字情報[4], X+横棒[0][0], 横棒[0][1], X+横棒[1][0], 横棒[1][1] ] 違えば 手順["{手順数}"]=["たしかめの式表示", X+上百位[0], 上百位[1], 上数字情報[2], X+上十位[0], 上十位[1], 上数字情報[3], X+上一位[0], 上一位[1], 上数字情報[4], X+演算記号[0], 演算記号[1], f X+下百位[0], 下百位[1], 下数字情報[2], X+下十位[0], 下十位[1], 下数字情報[3], X+下一位[0], 下一位[1], 下数字情報[4], X+横棒[0][0], 横棒[0][1], X+横棒[1][0], 横棒[1][1], tasikame ] ここまで 手順数 = (手順数+1) もし、(f="＋")ならば 足し算手順(上数字情報, 下数字情報,X) 違えば ans=(上数字情報[0]-下数字情報[0]) 引き算手順(上数字情報, 下数字情報,X) ここまで ここまで #--------------------------------------------- ●足し算手順(a, b, X) //「足し算手順」と表示 // 一の位 tmp=a[4]*1+b[4]*1 // 数値として計算 kuriagari = 0 もし、tmpが10以上ならば もし、((a[3]="")かつ(b[3]=""))ならば // 一桁計算の場合　ここでおしまい 手順["{手順数}"]=["十の位計算", X+答十位[0], 答十位[1], "1", 文字大] 手順数 = (手順数+1) 手順["{手順数}"]=["一の位計算", X+答一位[0], 答一位[1], (tmp-10), 文字大] 手順数 = (手順数+1) 戻る。 違えば 手順["{手順数}"]=["十の位補助２", X+十補助２[0], 十補助２[1], "1", 文字小] 手順数 = (手順数+1) 手順["{手順数}"]=["一の位計算", X+答一位[0], 答一位[1], (tmp-10), 文字大] 手順数 = (手順数+1) kuriagari = 1 ここまで 違えば 手順["{手順数}"]=["一の位計算", X+答一位[0], 答一位[1], tmp, 文字大] 手順数 = (手順数+1) もし、((a[3]="")かつ(b[3]=""))ならば // 一桁計算の場合　ここでおしまい 戻る。 ここまで ここまで // 十の位 tmp=a[3]*1+b[3]*1+kuriagari*1 // 数値として計算 kuriagari = 0 もし、tmpが10以上ならば もし、((a[2]="")かつ(b[2]=""))ならば // 二桁計算の場合　ここでおしまい 手順["{手順数}"]=["百の位計算", X+答百位[0], 答百位[1], "1", 文字大] 手順数 = (手順数+1) 手順["{手順数}"]=["十の位計算", X+答十位[0], 答十位[1], (tmp-10), 文字大] 手順数 = (手順数+1) 戻る。 違えば 手順["{手順数}"]=["百の位補助", X+百補助[0], 百補助[1], "1", 文字小] 手順数 = (手順数+1) 手順["{手順数}"]=["十の位計算", X+答十位[0], 答十位[1], (tmp-10), 文字大] 手順数 = (手順数+1) kuriagari = 1 ここまで 違えば 手順["{手順数}"]=["十の位計算", X+答十位[0], 答十位[1], tmp, 文字大] 手順数 = (手順数+1) もし、((a[2]="")かつ(b[2]=""))ならば // 二桁計算の場合　ここでおしまい 戻る。 ここまで ここまで // 百の位 tmp=a[2]*1+b[2]*1+kuriagari*1 // 数値として計算 kuriagari = 0 もし、tmpが10以上ならば 手順["{手順数}"]=["千の位表示", X+答千位[0], 答千位[1], "1", 文字大] 手順数 = (手順数+1) 手順["{手順数}"]=["百の位計算", X+答百位[0], 答百位[1], (tmp-10), 文字大] 手順数 = (手順数+1) kuriagari = 1 違えば 手順["{手順数}"]=["百の位計算", X+答百位[0], 答百位[1], tmp, 文字大] 手順数 = (手順数+1) ここまで ここまで #--------------------------------------------- ●引き算手順(a, b, X) //「引き算手順」と表示 // 一の位引き算 tmp=a[4]*1-b[4]*1 kurisagari10 = a[3]*1 kurisagari100 = a[2]*1 もし、tmp<0ならば // 十の位から繰り下がり kurisagari10 = kurisagari10 -1 tmp = tmp + 10 もし、kurisagari10<0ならば // さらに百の位から繰り下がり kurisagari100 = kurisagari100 -1 kurisagari10 = kurisagari10 + 10 手順["{手順数}"]=["百の位補助訂正あり", X+百補助[0], 百補助[1], kurisagari100, 文字小] 手順数 = (手順数+1) ここまで 手順["{手順数}"]=["十の位補助２訂正あり", X+十補助２[0], 十補助２[1], kurisagari10, 文字小] 手順数 = (手順数+1) 手順["{手順数}"]=["一の位補助", X+一補助[0], 一補助[1], "1", 文字小] 手順数 = (手順数+1) ここまで 手順["{手順数}"]=["一の位計算", X+答一位[0], 答一位[1], tmp, 文字大] 手順数 = (手順数+1) もし、((kurisagari10=0)かつ(b[3]="")かつ(a[2]=""))ならば // 一桁計算の場合　ここでおしまい 戻る。 ここまで // 十の位 tmp = kurisagari10*1 - b[3]*1 もし、tmp<0ならば // 百の位から繰り下がり kurisagari100 = kurisagari100 -1 手順["{手順数}"]=["百の位補助訂正あり", X+百補助[0], 百補助[1], kurisagari100, 文字小] 手順数 = (手順数+1) 手順["{手順数}"]=["十の位補助１", X+十補助１[0], 十補助１[1], "1", 文字小] 手順数 = (手順数+1) tmp = tmp + 10 ここまで 手順["{手順数}"]=["十の位計算", X+答十位[0], 答十位[1], tmp, 文字大] 手順数 = (手順数+1) もし、((a[2]="")かつ(b[2]=""))ならば // 一桁計算の場合　ここでおしまい 戻る。 ここまで // 百の位 tmp = kurisagari100*1 - b[2]*1 もし、tmp=0ならば 戻る。// 0は書かない ここまで 手順["{手順数}"]=["百の位計算", X+答百位[0], 答百位[1], tmp, 文字大] 手順数 = (手順数+1) ここまで #--------------------------------------------- ●数字情報生成(PRM) //「数字情報生成」と表示 // 引数の文字数字を、桁ごとにばらばらにしたり、計算用に数値変換したりする // [0]:全体数値 [1]:千の位 [2]:百の位 [3]:十の位 [4]:一の位 INF=["","","","",""] INF[0]=(PRMを英数半角変換) tmp=INF[0]を文字列分解 Nを1から(tmpの配列要素数)まで繰り返す INF[5-N]=tmp[(tmpの配列要素数)-N] ここまで INFを戻すこと ここまで #--------------------------------------------- ●式表示(PRM) //「式表示」と表示 「rgba(0,0,255,.5)」に塗色設定。 黒色に塗色設定。 「{文字大}px sans-serif」に描画フォント設定。 // 上の数字。 [PRM[1], PRM[2]]へPRM[3]を文字描画。 [PRM[4], PRM[5]]へPRM[6]を文字描画。 [PRM[7], PRM[8]]へPRM[9]を文字描画。 // 記号 [PRM[10], PRM[11]]へPRM[12]を文字描画。 // 下の数字 [PRM[13], PRM[14]]へPRM[15]を文字描画。 [PRM[16], PRM[17]]へPRM[18]を文字描画。 [PRM[19], PRM[20]]へPRM[21]を文字描画。 // 線 [PRM[22], PRM[23]]から[PRM[24], PRM[25]]まで線描画。 ここまで #--------------------------------------------- ●自動表示とは もし、TCNT<(手順の配列要素数)ならば 手順表示(手順[TCNT]) TCNT=TCNT+1 ここまで ここまで #--------------------------------------------- ●手順表示(TEJUN)とは //「手順表示({TEJUN})」と表示。 // 式表示,一の位計算,十の位計算,百の位計算,一の位補助,十の位補助１,十の位補助２,百の位補助,千の位表示 もし、TEJUN[0]="はじめの式表示"ならば // 上百、上十、上一、演算記号、下百、下十、下一の数字を描画 「{文字中}px sans-serif」に描画フォント設定。 [余白大, 答千位[1]+たて大+余白大]へ"計算してみよう"を文字描画。 式表示(TEJUN) 違えば もし、TEJUN[0]="たしかめの式表示"ならば 「{文字中}px sans-serif」に描画フォント設定。 [OFFSET+余白大, 答千位[1]+たて大+余白大]へ"確認してみよう"を文字描画。 // 矢印描画 もし、TEJUN[26]="引き算たしかめ"ならば 引き算たしかめ用矢印描画 違えば 足算たしかめ用矢印描画 ここまで 式表示(TEJUN) 違えば 「{TEJUN[4]}px sans-serif」に描画フォント設定。 [TEJUN[1], TEJUN[2]]へTEJUN[3]を文字描画。 もし、TEJUN[0]="百の位補助訂正あり"ならば 百位訂正 ここまで もし、TEJUN[0]="十の位補助２訂正あり"ならば 十位訂正 ここまで ここまで ここまで ここまで #--------------------------------------------- ●百位訂正 [上百位[0], 上百位[1]-たて大*4/5]から[上百位[0]+よこ大, 上百位[1]]まで線描画。 ここまで #--------------------------------------------- ●十位訂正 [上十位[0], 上十位[1]-たて大*4/5]から[上十位[0]+よこ大, 上十位[1]]まで線描画。 ここまで #--------------------------------------------- ●足算たしかめ用矢印描画 足し算矢印１[0]から[足し算矢印１[0][0]+10, 足し算矢印１[0][1]]まで線描画。 [足し算矢印１[0][0]+10, 足し算矢印１[0][1]]から[足し算矢印１[1][0]-10, 足し算矢印１[1][1]]まで線描画。 [足し算矢印１[1][0]-10, 足し算矢印１[1][1]]から足し算矢印１[1]まで線描画。 [足し算矢印１[1][0]-5, 足し算矢印１[1][1]-5]から足し算矢印１[1]まで線描画。 [足し算矢印１[1][0]-5, 足し算矢印１[1][1]+5]から足し算矢印１[1]まで線描画。 足し算矢印２[0]から[足し算矢印２[0][0]+10, 足し算矢印２[0][1]]まで線描画。 [足し算矢印２[0][0]+10, 足し算矢印２[0][1]]から[足し算矢印２[1][0]-10, 足し算矢印２[1][1]]まで線描画。 [足し算矢印２[1][0]-10, 足し算矢印２[1][1]]から足し算矢印２[1]まで線描画。 [足し算矢印２[1][0]-5, 足し算矢印２[1][1]-5]から足し算矢印２[1]まで線描画。 [足し算矢印２[1][0]-5, 足し算矢印２[1][1]+5]から足し算矢印２[1]まで線描画。 ここまで #--------------------------------------------- ●引き算たしかめ用矢印描画 引き算矢印１[0]から[引き算矢印１[0][0]+10, 引き算矢印１[0][1]]まで線描画。 [引き算矢印１[0][0]+10, 引き算矢印１[0][1]]から[引き算矢印１[1][0]-10, 引き算矢印１[1][1]]まで線描画。 [引き算矢印１[1][0]-10, 引き算矢印１[1][1]]から引き算矢印１[1]まで線描画。 [引き算矢印１[1][0]-5, 引き算矢印１[1][1]-5]から引き算矢印１[1]まで線描画。 [引き算矢印１[1][0]-5, 引き算矢印１[1][1]+5]から引き算矢印１[1]まで線描画。 引き算矢印２[0]から[引き算矢印２[0][0]+10, 引き算矢印２[0][1]]まで線描画。 [引き算矢印２[0][0]+10, 引き算矢印２[0][1]]から[引き算矢印２[1][0]-10, 引き算矢印２[1][1]]まで線描画。 [引き算矢印２[1][0]-10, 引き算矢印２[1][1]]から引き算矢印２[1]まで線描画。 [引き算矢印２[1][0]-5, 引き算矢印２[1][1]-5]から引き算矢印２[1]まで線描画。 [引き算矢印２[1][0]-5, 引き算矢印２[1][1]+5]から引き算矢印２[1]まで線描画。 ここまで