1〜100の数をLEARNに加える。
Clockと同時に、1〜100を練習する Numbers を作った。
数字だけを表示するのではなく、その数が「10のまとまり」と「1のまとまり」でいくつになるかも視覚化する。
「おぼえる」と「クイズ」の2つのモードを切り替えながら、数字、読み方、数量を一緒に確認できるようにした。
1〜100を自動生成する。
数のデータは src/data/clock-numbers.mjs にまとめた。
1から100までを配列として手書きするのではなく、コードから生成する。それぞれに数字、読み方、10のまとまりの数、1の数を持たせる。
例えば37なら、
- 数字は37
- 読み方は「さんじゅうなな」
- 10のまとまりは3
- 1は7
となる。
100は10のまとまり10個、1は0個として扱う。
日本語の読み方を作る。
1〜9の基本の読みを用意し、10〜99は十の位と一の位を組み合わせて生成する。
10は「じゅう」、20は「にじゅう」、37は「さんじゅうなな」、99は「きゅうじゅうきゅう」となる。
4は「よん」、7は「なな」、9は「きゅう」を使い、40、70、90も「よんじゅう」「ななじゅう」「きゅうじゅう」とする。
100だけは「ひゃく」として個別に扱う。
10と1のまとまりで表示する。
数量表示では、10をひとつのまとまりとして描く。
ひとつの10のまとまりには10個の小さいマスを入れ、外側を枠で囲む。1は単独の四角として表示する。
37なら10のまとまりが3つと、1が7つ並ぶ。100なら10のまとまりが10個になる。
数字だけを見るよりも、十進法のまとまりを視覚的に確認できる形にした。
数の読み方を聞く。
音声にはClockやColorsと同じくブラウザのSpeech Synthesisを使う。
「音をきく」を押したときだけ、その数字の日本語読みを再生する。
ページを開いたときや数字を変更したときには自動再生しない。端末内の日本語音声が利用できない場合でも、数字と数量表示による学習は続けられる。
数量を見て4択で答える。
「クイズ / 10もん」では数字と読み方を隠し、10と1のまとまりだけを表示する。
「これはいくつ？」に対して、4つの数字から正解を選ぶ。
1〜100から10問を選ぶため、同じセットの正解は重複しない。選択肢も正解1つと別の3つを使い、重複しないようにする。
回答後は選択肢を無効にして二重採点を防ぐ。正解・不正解と正しい数字を文字でも表示する。
クイズ中は読み上げを使うと答えが分かるため、音声ボタンを表示しない。
ブラウザ内だけで練習する。
ページは src/pages/learn/numbers.astro、動作は src/scripts/numbers.ts に分けた。
出題や採点は既存の src/scripts/learn-quiz.mjs を再利用する。
問題、現在位置、得点はページを開いている間だけブラウザ内で保持する。アカウント、サーバーへの回答送信、localStorageへの保存はない。
テストでは1〜100が順番に生成されること、代表的な日本語読み、37や100の10と1への分解、10問4択、選択肢の重複、二重採点防止を確認した。
Nothing Phoneからも1、9、10、11、37、99、100の表示とクイズ、スマートフォンでのレイアウトを確認した。
Learnの8本目として公開する。
Numbers はClockと同日に追加したLEARNの8本目。
これでLEARNには、ひらがな、カタカナ、アルファベット、九九、色、音符、時計、数の8種類が並ぶ。
文字を書く、計算する、見分ける、聞く、数量を捉えるという複数の練習を、ログインなしですぐ始められる形まで広げた。