HTML5 : 注音高手更新版

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

功能簡介

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

HTML5 注音高手:輸入注音

HTML5 注音高手:選國字

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

HTML5 注音高手:選擇國字

HTML5 注音高手:答對的畫面

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

• 只有有支援 HTML5 的網頁瀏覽器即可使用，可以跨平臺使用。
• 有多項參數供自訂題庫與客製遊戲內容。
• 如果未自訂題目的語音檔，會自動以合成語音念出題目。
• 內建國字注音對照表，題庫只要輸入國字即可。
• 答對或答錯有多種不同的回饋語音，會隨機變換。
• 可利用「HTML5 注音高手語法產生器」製作供嵌入網頁或是 Blogger 的語法，張貼至網站或是Blogger 中，不需要額外的設定檔，方便出題及線上使用。

試玩與下載

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

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

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

HTML5 注音高手的圖示

另外一種方式就是使用「HTML5 FUN烘焙機」(舊版為「HTML5 注音高手語法產生器」)

HTML5 注音高手語法產生器的截圖

在烘焙機裡面的步驟１輸入題庫、設定選項後，在步驟２按按鈕即可試玩，或在步驟３複製遊戲的網頁篏入語法，貼到自己的網站或是 Blogger 中，變成自己的「HTML5 注音高手」遊戲。

使用整合所有 HTML5 FUN 遊戲的「HTML5 FUN烘焙機」，按這個連結或圖示：

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

或使用「HTML5 注音高手語法產生器」：

• 雄 : HTML5 注音高手語法產生器

自訂答案

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

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

相關影片

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

[之一] 使用注音高手語法產生器加上圖片及使用 Vocaroo 錄語音設計題庫

相關連結

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

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

• 雄 : HTML5 FUN 精選集

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

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

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

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

更新記錄

• 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 上發布測試版