へっぽこびんぼう野郎のnewbie日記

けろけーろ(´・ω・`)! #vZkt8fc6J

JavaScriptで16進数の四則演算の計算ドリルつくった

こんなかんじのやつ

f:id:haruharu1:20180401214028p:plain

Enterを押すと正誤判定してくれます。(=スマホだと動かない)

切り替えて使える

f:id:haruharu1:20180401214143p:plain

f:id:haruharu1:20180401214250p:plain

作った動機

文字コードの勉強してて、16進数の足し算引き算で苦しんでいたため。計算ドリルあったらいいのになと思ったのでつくった。

使い方

$ git clone https://github.com/harukaeru/CalculationDrillBase16.git
$ npm install
$ npm start

これでローカルサーバが立ち上がるのでそこで楽しんでください。

他のサーバと通信などは特にしてないです。全部JavaScriptです。

試してないけど、古いnodeだとインストールできないかもしれないです。

俺専用の問題をつくりたいんだけど??って人へ

window.changeProblemsという関数を用意したのでそれにオプションを入れて実行してください。JavaScriptのライブラリであるlodashも使えます。

↓こんな感じです

window.changeProblems({
  leftRange: () => _.range(0x1, 0x3),
  rightRange: (left, calcType) => _.range(0x1, 0x3),
  calcTypes: ['+']
})

f:id:haruharu1:20180401214828p:plain

ざっくり解説

左側の値(left)はleftRangeで指定した範囲の中からランダムに選ばれたものになります(↑の場合なら0x01か0x02のどちらか)。

calcTypecalcTypesからランダムに選ばれたものが入ります(↑の場合は1個しかないので絶対'+')

それで、この計算されたleftcalcTypeをもとにrightRangeの範囲を決めることができます。(別に使わなくてもいいです。↑の例は使ってません)

rightRange: (left, calcType) => _.range(0x01, left + 1)のようにすると、絶対左側の値を越えないように右側の値を決めることができます。

↓デフォルトで組み込んだやつはここなので、適当に参考にしてください。 https://github.com/harukaeru/CalculationDrillBase16/blob/master/js/configs.js

ちなみにデカい数字入れると落ちますが仕様です。

ソース

github.com

その他

  • バグがあったらごめんなさい。テストなのにテストがないです。ESLintもないです。issueくれれば直します。
  • Redux入れるのめんどくせえなと思って、ないまま作ってたら見事なアンチパターンになってしまったのでコードは参考にしないでください
  • CSSは知らないので雑です。class名とかつけたので適当にデザイン変更してくれると嬉しいです。PRほしいです
  • ちょっと改造すると10進数や8進数や2進数のものとしても使えると思います。ご家庭でご活用ください