2022年10月15日 星期六

HTML5 : 注音高手更新版

2022年10月15日 星期六

「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 網站中找到並按一下注音高手的圖示即可試玩或下載:

HTML5 注音高手的圖示

另外一種方式就是使用「HTML5 注音高手語法產生器」

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

在語法產生器裡面的步驟1輸入題庫、設定選項後,在步驟2按按鈕即可試玩,或在步驟3複製遊戲的網頁篏入語法,貼到自己的網站或是 Blogger 中,變成自己的「HTML5 注音高手」遊戲。「HTML5 注音高手語法產生器」的連結如下:


相關影片

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

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




相關連結

更新記錄

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


沒有留言:

張貼留言

 
雄::gsyan © 2009. Design by Pocket