時計の読み方をLEARNに加える。
文字、九九、色、音符に続いて、アナログ時計を読む Clock を作った。
「おぼえる」と「クイズ」の2つのモードを用意し、時計の針を見ながら時刻を確認できる。最初の対象は1時〜12時のちょうどの時刻と、それぞれの30分。全部で24パターンに絞った。
15分、45分、5分刻みなどはまだ扱わず、まず「○時」と「○時半」を見分けるところから始める。
24種類の時刻を持つ。
時刻データは src/data/clock-numbers.mjs にまとめた。
1時から12時まで、それぞれに0分と30分を組み合わせて24件を生成する。表示用の「4じ30ぷん」と、読み上げ用の「よじはん」は分けて持つ。
4時は「よじ」、7時は「しちじ」、9時は「くじ」のように、日本語として自然な読み方を指定した。
「おぼえる」では24種類を順番に移動でき、現在位置も表示する。
SVGでアナログ時計を描く。
時計は画像を使わずSVGで描画した。
時計盤には1〜12の数字と60本の目盛りを表示する。5分ごとの目盛りを少し長くし、時刻を読み取りやすくした。
長針は1分につき6度、短針は1時間につき30度動かす。30分の場合は短針も15度進めるため、1時30分なら短針は1と2の中間に表示される。
12時、1時30分、6時30分なども同じ計算から描画し、時刻ごとにSVGを個別に用意しない構成にした。
時刻の読み方を聞く。
音声にはブラウザのSpeech Synthesisを利用する。
「音をきく」を押したときだけ日本語で読み上げる。ページ表示時や時刻を切り替えたときには自動再生しない。
30分は「さんじさんじゅっぷん」のようには読まず、「さんじはん」の形で読み上げる。
利用できる端末内の日本語音声が見つからない場合は音声ボタンを無効にし、時計を見る練習だけ続けられる。
10問の時計クイズにする。
「クイズ / 10もん」ではアナログ時計だけを表示し、「これはなんじ？」と4択で答える。
出題と採点にはColors、Music Notesで作った src/scripts/learn-quiz.mjs を再利用する。
24種類から10問を選ぶため、同じセットの中で正解時刻は重複しない。各問題には正解1つと別の3つをランダムに並べる。
回答後は選択肢を無効にし、同じ問題で二重に得点できないようにする。正しければ「せいかい！」、間違っていれば正しい時刻も表示する。
クイズ中は読み上げを使うと答えが分かるため、「音をきく」は表示しない。
ブラウザだけで動かす。
ページは src/pages/learn/clock.astro、動作は src/scripts/clock.ts に分けた。
時刻、現在位置、問題、得点はブラウザ内のメモリだけで扱う。アカウントや回答送信用API、localStorageへの保存処理はない。
テストでは24種類の時刻、0分と30分の組み合わせ、日本語の読み方、10問4択、選択肢の重複、二重採点防止を確認した。
実際の針の位置、音声、クイズ、スマートフォン表示についてはNothing Phoneからも確認した。
Learnの7本目として公開する。
Clock はLEARNの7本目。
Hiragana Trace、Katakana Trace、Alphabet Trace、Kuku Drill、Colors、Music Notesに続いて、時間を読む練習を追加した。
まずは「○時」と「○時半」に絞り、アナログ時計を見て時刻を判断する基本をブラウザですぐ練習できる形にした。