九九を繰り返し使える形にする。
文字をなぞるLEARNに、計算を練習する Kuku Drill を加えた。段を選び、答えを入れ、その場で正誤を確認する。短い1セットを終えたら、同じ段をもう一度練習できる形にした。
段を選んで始める。
最初の画面には1〜9の段と「ランダム」を並べた。段を選ぶと、かける数が1から9まで順番に進む9問になる。3の段なら、3 × 1から3 × 9までを練習する。
ランダムは10問。1〜9同士をかける81通りの式をシャッフルし、先頭の10問を使う。同じセットで同じ式は重複しない。ただし、2 × 3と3 × 2は別の式として扱う。問題数を自由に変更する設定は設けていない。
答えて、その場で確認する。
回答は入力欄に数字を入れ、「こたえる」かEnterで送信する。スマートフォンでは数字キーボードを表示しやすいよう inputmode="numeric" を指定した。独自の数字ボタンは置かず、端末の入力機能を使う。
全角の数字は半角に正規化する。空欄や数字以外の入力には「こたえを数字でいれてね」と案内し、問題を進めない。正しければ「せいかい！」、間違っていれば「おしい！」を表示し、どちらの場合も正しい答えを式で示す。
回答後は入力を読み取り専用にし、同じ問題の二重採点を防ぐ。次の問題へ自動では進まず、答えを確認してから「つぎのもんだい」を押す。Enterを押し続けたときの繰り返し入力も抑えている。
1セットを終えて、振り返る。
段の選択から、問題、回答、正誤の確認、次の問題へと進む。問題画面には「1 / 9」のように進み具合を表示し、最後の回答後は「けっかを見る」で結果へ切り替える。
結果には正解数と全問題数を表示する。間違えた問題があれば「こたえをふりかえろう」に正しい式を並べ、全問正解ならこの欄は表示しない。
「もういちど」は同じモードで新しいセットを始め、得点と間違いの記録をリセットする。ランダムなら出題を選び直す。「ほかのだん」で選択画面へ戻れ、問題の途中でも「ほかのだんをえらぶ」から切り替えられる。
ブラウザだけで動かす。
画面と出題・採点の処理は src/pages/learn/kuku.astro にまとめた。問題、現在の位置、正解数、間違えた式はページ内のメモリで扱う。回答を送るAPIや、アカウント、localStorageへの保存処理はない。
ページや必要なファイルの読み込みには通信するが、出題と採点のためのサーバー通信は行わない。ページを閉じたり再読み込みしたりすると結果は消える。履歴管理を始める前に、まず段を選んですぐ練習できる構成にした。
PCとスマートフォンで使う。
PCではキーボードで数字を入力してEnterで回答できる。回答後は次のボタンへフォーカスを移し、結果表示では結果の見出しへ移す。正誤の案内には読み上げ向けのライブ領域も指定した。
段のボタンは3列に並べ、狭い画面では余白と文字サイズを調整する。520px以下では結果画面の操作ボタンを縦に並べる。入力欄とボタンを大きくし、タッチでも操作できるようにした。
既存のNodeテストは、実際のページスクリプトをDOMの代替オブジェクトで動かし、全9段、ランダム10問、入力の検証、採点、結果、やり直しを確認する。ブラウザ用テストでは横方向のはみ出しやボタンの大きさも確認する。Nodeテストだけでは、端末のキーボード表示や実際のタッチ操作までは確かめられない。
Learnの4本目として公開する。
Kuku Drill は、Hiragana Trace、Katakana Trace、Alphabet Traceに続くLEARNの4本目。2026年9月10日の追加コミットに、実装とテスト、一覧の導線をまとめた。書いて覚える練習に加えて、答えて確かめる練習も同じ場所から開けるようになった。