HTML5 : 注音高手更新版

「HTML5 注音高手」源自於 2012年10月，江明勳老師於 Plurk 上發想的「Flash 版注音高手」，月初完成 Flash 版，月底亦有 HTML5 版。不過，自 2014 年以後，就沒什麼更新了。2022年因為要將「HTML5 注音高手」改成可以嵌入網頁或 Blogger 中，索性來個大改造，外觀上看起來，大概只能看出它多支援直拿的版面；其實內部的結構與功能，有了不少改變。原來的舊文就留著當一個記錄，本文介紹的為 2022年10月以後的版本。

▋ 功能簡介

「HTML5 注音高手」的玩法是由老師建立好國字的字詞、短句題庫（亦可幫每道題目配上圖片或語音，甚至自訂正確的注音），玩家看到題目後，利用畫面中的「虛擬注音鍵盤」，輸入每個國字的注音，如果都正確，就可以進入下一題，直到完成所有題目。

HTML5 注音高手:輸入注音

HTML5 注音高手:選國字

HTML5 注音高手:輸入第二個字的注音

HTML5 注音高手:選擇國字

HTML5 注音高手:答對的畫面

底下簡單的列出主要的特色與功能：

• 只要有支援 HTML5 的網頁瀏覽器即可使用，可以跨平臺使用。
• 有多項參數供自訂題庫與客製遊戲內容。
• 如果未自訂題目的語音檔，會自動以合成語音念出題目。
• 內建國字注音對照表，題庫只要輸入國字即可。
• 針對一字多音者，可自訂答案的注音（例如：爸爸可指定答案為「ㄅㄚˋ ˙ㄅㄚ」）。
• 答對或答錯有多種不同的回饋語音，會隨機變換。
• 可利用「HTML5 FUN 烘焙機」製作供嵌入網頁或是 Blogger 的語法，張貼至網站或是Blogger 中，不需要額外的設定檔，方便出題及線上使用。
• 🚀可利用「HTML5 FUN 遊戲啟動器」＋試算表製作不需要網站的線上遊戲，比 HTML5 FUN 烘焙機更加容易。

▋ 試玩與下載

「HTML5 注音高手」的程式、範例與打包好、可供下載的壓縮檔，都放在 HTML5 FUN 的網站中。所以可以直接在網站上試玩預先建立好的範例題庫；或是下載全部的檔案，然後再修改成有自己題庫的遊戲。HTML5 FUN 的網址如下：

• 🌏 雄 : HTML5 FUN （https://gsyan888.github.io/html5_fun/）

在 HTML5 FUN 網站中找到並按一下注音高手的圖示即可試玩或下載：

HTML5 注音高手的圖示

▋ 自製遊戲

自製 HTML5 FUN 注音高手的方法有三種：

💾 下載並修改設計檔 (原始的方法，需花較多時間研究)

早期設計 HTML5 FUN 遊戲，都是先下載注音高手的壓縮檔，解壓縮以後，再使用文字編輯器去修改設定檔。這種方式好處是可以在單機離線使用，但是程序稍複雜些。

🚀 使用「HTML5 FUN 遊戲啟動器」(2025年後的製作方法)

如果是第一次接觸設計 HTML5 FUN 遊戲的設計，建議使用「HTML5 FUN 遊戲啟動器」，最簡單，可以輕鬆地設計線上使用的注音高手。

請參考以下的兩則文：

💡 填試算表製作 HTML5 FUN 遊戲

👉👉👉 雄 : 填試算表製作 HTML5 FUN 遊戲

（使用範例試算表中的「注音高手」工作表）

💡 直接使用雲端硬碟的圖片➕試算表來製作注音高手的題目

👉👉👉 雄 : 以雲端硬碟資料夾的圖片製作注音高手 

（使用範例試看表中的「注音高手遊戲啟動器範例」工作表）

📋  使用「HTML5 FUN 烘焙機」(2023年的製作方法)

如果有在使用 Google Blogger 、Google Sites ...... 等網站者，則可以考慮使用「HTML5 FUN 烘焙機」。在烘焙機裡面的步驟１輸入題庫、設定選項後，在步驟２按按鈕即可試玩，或在步驟３複製遊戲的網頁篏入語法，貼到自己的網站或是 Blogger 中，變成自己的「HTML5 注音高手」遊戲。按這個圖示可以開啟：

▋ 自訂答案

如果發現題目的注音輸入後，明明正確的，卻被判定為答錯，很有可能是注音高手內建的資料庫未蒐集到該注音。遇到這種情形，可以參考這篇文章來自訂答案：

• 雄 : HTML5:注音高手自訂答案

▋ 操作示範影片

底下是有關 HTML5 注音高手的一系列影片：

• 🎬 以雲端硬碟資料夾的圖片製作注音高手
   https://www.youtube.com/watch?v=wpRX1LQU9bs

• 🎬 填試算表製作 HTML5 FUN 遊戲
   https://www.youtube.com/watch?v=BVSF-vSvL6Y

• 🎬 HTML5 : 注音高手 : 加圖片與聲音
   https://www.youtube.com/watch?v=yDvr_ehA6Ow

• 🎬 HTML5:注音高手如何自訂答案
   https://www.youtube.com/watch?v=a3eBhKjQBcw

▋ 相關連結

• 雄 : 以雲端硬碟資料夾的圖片製作注音高手

• 雄 : HTML5:注音高手自訂答案

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整

• 雄 : HTML5 FUN 精選集

• 雄 : 取得 Vocaroo 的聲音檔網址

• 雄 : Flash : phonetics_quiz 聽字詞拼注音

• 雄 : HTML5 : phonetics_quiz 聽字詞拼注音

• 雄: HTML5 FUN : 利用 Google Form 登錄遊戲成績

更新記錄

• 2025.03.22 v.1t 沒有自訂答案者，以國語辭典簡編本比對答案(以happy2009~2013隨選分散流量)。
• 2025.03.21 v.1.s 修正自訂注音的 TTS 四聲調號未自動換到最後面，以致發音不正確；有自訂注音時，輸入完會核對輸入的注音與自訂注音是否符合。
  TODO: 多音字因為核對答案只檢查國字是否相符，所以有可能輸入的注音和語詞的不見得一樣，卻仍算正確，此為一個大 bug，可能需要輔以詞庫來核對答案。。
• 2024.09.08 v.1.r 支援以實體鍵盤輸入注音符號。
• 2023.09.26 v.1.o 如果有在題庫的第四欄位自訂注音，而又未指定聲音欄位，會自動改用第四欄位的內容來播放 TTS 合成語音。
• 2023.04.15 v.1.i 題庫的聲音欄位(第三欄位)可以使用 Vocaroon 分享的網址，也支援「國字.tts」的格式，自動以 TTS 合成語音來發音。
• 2022.11.17 v.1.h  答錯後，在輸入區旁會出現跳到下一題的按鈕，如果按過跳題的按鈕，成績報告的標題字會顯示「繼續挑戰」而不是「恭喜過關」；在右上角顯示錯誤的總次數。
• 2022.10.16 v.1.g 新增可以在題庫第四欄位填入答案的注音(每一單字間用空格隔開，例如: ㄉㄚˋ  ㄒㄩㄥˊ)，未使用第四欄者，照預設方式查注音國字對照表來核對答案；將左上角的計時器改用總時間。
• 2022.10.15 v.1.f 修正上方標題看板的文字未自動調整字型大小的問題。
• 2022.10.12 將注音聲母韻母的文字方塊設為多行模式，解決 Chrome 該換行顯示，卻無作用的問題(在 iOS 卻無此情形)。
• 2022.10.10 調整程式的架構，並和 HTML5 FUN 較新的工具，採用類似的程序與設定；支援網頁嵌入的語法(語法產生器待完成)；支援 TTS 合成語音，沒有自訂聲音檔時，會自動播放 TTS 語音；調整注音國字對照表的格式，讓檔案更小一些。
• 2014.02.15 修改載入檔案的程序，簡化設定檔的格式，精簡程式。
• 2014.02.14 修正播放聲音的流程，讓 Android 上播放聲音可以更順一點，修改作答記錄的資料結構。
• 2014.02.07 修改設定檔的架構，把原本無法在本機執行的問題解決。
• 2012.10.20 首次在 plurk 上發布測試版