互動式九九乘法表練習網站，專為 8 歲小朋友設計，支援 iPad 觸控操作與桌面電腦鍵盤輸入。
- 漸進式難度：10題模式從簡單的2倍數開始，建立信心
- 練習模式：支援選擇性練習範圍，無時間壓力，純學習導向
- 練習全部：2×1到9×9所有題目（72題）
- 選擇被乘數：針對特定數字的乘法表（如：2×n, 5×n）
- 選擇乘數：針對特定乘數練習（如：n×5, n×7）
- 可選計時器：避免時間壓力，專注學習
- 大按鈕設計：符合兒童手指觸控需求
- 視覺回饋：答對有動畫，鼓勵持續練習
- 手機版：單欄垂直佈局，虛擬鍵盤
- 平板版：橫向雙欄（題目+鍵盤），直向垂直佈局
- 桌面版：隱藏虛擬鍵盤，使用實體鍵盤輸入
- 響應式設計：Mobile-First 架構，流暢適應各種螢幕
- Strava 風格：仿運動 App 的排行榜設計
- 10題/20題分組：獨立排行，公平競爭
- 前三名獎勵：🏆🥈🥉 差異化慶祝效果
- 記錄保護：前10名記錄永久保存
- 128道題目：涵蓋2×2到9×9的所有組合
- 兩種題型：標準乘法
a × b = (?)和因數填空a × (?) = result - 智能選題：10題模式漸進式，20題模式隨機挑戰
🌐 GitHub Pages: https://huansbox.github.io/99timestable/
建議使用 Safari 瀏覽器，可加入主畫面作為 Web App 使用。
- HTML5 + CSS3 + 原生 JavaScript
- Mobile-First 響應式設計
- CSS Grid + Flexbox 佈局
- LocalStorage 本地記錄保存
- 流體排版：使用
clamp()實現平滑字體縮放 - CSS 變數系統：統一顏色、間距、字體管理
- 深色模式支援：自動適配系統主題
- 觸控優化：所有按鈕符合 44px 最小觸控標準
- 智能答案檢查：依裝置類型調整檢查延遲
- 防重複觸發：避免多事件同時處理
- 裝置偵測：區分觸控和滑鼠操作
- 語音輸入支援：Web Speech API，支援中文數字識別
- 自動語音啟動：新題目自動開始語音監聽
- 音效回饋系統：Web Audio API 生成的音效，答對清脆音、答錯溫和音、完成慶祝音
- PWA 就緒：支援加入主畫面
- 開啟網站，選擇是否顯示計時器
- 設定輸入方式：虛擬鍵盤、語音輸入（可選自動開啟語音）
- 選擇模式：10題（漸進式）、20題（隨機挑戰）或 練習模式（選擇性練習）
- 點擊「開始練習」進入答題
- 輸入答案（鍵盤或語音），答對自動進入下一題，享受音效回饋
- 完成後查看時間和排名，根據成績播放不同慶祝音效（練習模式無排名）
- iPad：橫向模式獲得最佳體驗（題目左邊，鍵盤右邊），語音輸入效果優良
- 手機：直向操作，虛擬鍵盤在下方，支援語音和觸控雙重輸入
- 桌面：使用鍵盤輸入，Enter 鍵確認答案，語音功能可選
- 10題模式：前2題簡單（2的倍數），後8題困難，適合初學
- 20題模式：完全隨機，包含因數填空題，適合挑戰
- 練習模式：支援三種選擇性練習，無計時無排行榜，專注學習
- 練習全部：按九九乘法表順序（2×1到9×9），共72題
- 選擇被乘數：可選擇特定數字的乘法表（如選擇2、5：練習2×1
2×9和5×15×9） - 選擇乘數：可選擇特定乘數練習（如選擇5、7：練習2×5
9×5和2×79×7）
/* Mobile-First 基礎樣式 */
.container { /* 手機樣式 */ }
/* 平板優化 */
@media (min-width: 768px) { /* 平板樣式 */ }
/* 桌面優化 */
@media (min-width: 1024px) { /* 桌面樣式 */ }- 簡化策略：觸控裝置顯示，桌面隱藏
- 無複雜偵測：僅用
pointer: fine區分真實桌面 - 統一體驗：所有觸控裝置操作一致
- 本地儲存：無需註冊，資料保存在瀏覽器
- 分組競技：10題和20題獨立排行
- 智能排名：自動計算新記錄的排名位置
| 瀏覽器 | 手機 | 平板 | 桌面 | 特殊優化 |
|---|---|---|---|---|
| Safari | ✅ | ✅ | ✅ | iOS vh 跳動修復 |
| Chrome | ✅ | ✅ | ✅ | 大螢幕觸控支援 |
| Firefox | ✅ | ✅ | ✅ | - |
| Edge | ✅ | ✅ | ✅ | - |
v2.2 優化：
- ✅ iPad Pro 橫向模式：完美支援 1366×1024 解析度
- ✅ iOS Safari vh 修復：解決網址列收合跳動問題
- ✅ 精準裝置判斷：觸控 vs 滑鼠操作自動識別
- ✅ 中間斷點補強：iPad Mini (820px) 專用優化
建議：iOS Safari 有最佳的觸控體驗和 PWA 支援。
99times/
├── index.html # 主頁面
├── single-digit-test.html # 語音識別測試工具
├── sound-test.html # 音效測試中心
├── voice-log-test.html # 語音錯誤記錄工具（未追蹤）
├── styles-rwd.css # RWD 響應式樣式
├── script.js # 互動邏輯
├── styles-original.css # 原始樣式備份
├── CLAUDE.md # 開發技術記錄
├── README.md # 專案說明
└── LaTeX/ # LaTeX 試卷版本
├── multiplication_practice.tex
└── multiplication_with_answers.tex
- 建立基礎：從最簡單的2倍數開始
- 循序漸進：逐步增加難度
- 即時回饋：答對立即確認，建立成就感
- 記憶強化：重複練習加深印象
- 專注力：一次一題，避免分心
- 反應力：即時檢查訓練快速反應
- 自信心：從簡單開始，逐步建立信心
- 競爭意識：排行榜激勵持續進步
- v1.0 (2025年1月): MVP 基礎功能
- v2.0 (2025年9月): Strava風格排行榜、分級選題
- v2.1 (2025年9月19日): RWD 重構、Mobile-First 架構
- v2.2 (2025年9月19日): iOS 優化、大螢幕觸控裝置支援
- v2.3 (2025年9月20日): 新增練習模式與選擇性練習功能
- v2.4 (2025年9月20日): 語音輸入功能、自動語音啟動、詳細錯誤回饋
- v2.4.1 (2025年9月20日): 語音識別優化、修復「四」識別問題、虛擬鍵盤預設關閉
- v2.5.0 (2025年9月21日): 新增音效回饋系統、答對和答錯音效提升互動體驗
- v2.5.1 (2025年9月21日): 簡化音效設定，一律開啟；新增完成頁面音效（遊戲過關音效/經典勝利號角）
- v2.6.0 (2025年9月23日): UI介面全面簡化，設定按鈕整合、開始畫面簡化、排行榜優化、虛擬鍵盤預設開啟
- ✅ iPad 橫向佈局問題（已解決）
- ✅ JavaScript 覆蓋 CSS 問題（已解決）
- ✅ 容器寬度不一致問題（已解決）
- ✅ CSS calc() 語法錯誤（已解決）
- ✅ iOS Safari vh 跳動問題（已解決）
- ✅ 大螢幕觸控裝置虛擬鍵盤（已解決）
⚠️ iPhone 小螢幕優化（待改進）
這是一個教育專案，歡迎提出建議或回報問題：
- Issues: https://github.com/huansbox/99timestable/issues
- Discussions: 分享使用心得和改進建議
此專案僅供教育使用，請勿用於商業目的。
專為 8 歲小朋友設計的九九乘法表練習工具 Made with ❤️ for young learners