HTML5 : 單字高手 (2022.11.16更新)

2014年初進行 Flash 版單字高手修改時就曾考慮是否直接生出個 HTML5 版就好，讓不支援 Flash 的 iPad 也可以玩，不過，想到得處理難搞的聲音控制問題，加上 mp3 檔根本不能離線使用，又擱了下來。哈～真正的原因就是一個字「懶」啦！

又想到，說過要試著把過去的作品盡量用 HTML5 改寫的，說話算話，不衝不行！從開新專案到有一點樣子，寫寫停停，磨了一個多星期，和以前比起來，實在很沒效率。倒是期間累積了一些新經驗，小有收穫。

[圖1] HTML5 版單字高手

玩一玩

HTML5 版的單字高手一樣的集中放在 HTML5 FUN 的網站中：

• https://gsyan888.github.io/html5_fun/

找到底下 [圖2] 的圖示，按下去，就可以試玩裡面的幾個範例題庫：

[圖2] 單字高手的圖示

• https://gsyan888.github.io/html5_fun/html5_spelling/html5_spelling.html

進入 HTML5 單字高手後，在範例的選單中先選一組題庫按一下，即可進入遊戲。

上方的圓圈中會出現英文單字，空的圈圈即是等待填答的部份；可以按畫面中的虛擬鍵盤或是使用實體鍵盤來輸入空格的字母。

想修正答案，就先按一下要修改的圓圈，使游標停在該格，再重新輸入答案。

[圖3] 「全字」輸入的模式

如果想整個單字都用實體鍵盤來進行完整輸入，就按一下 [圖1] 中「填空」的按鈕，讓它變成 [圖3] 藍色箭頭所指的「全字」。即可進入全字輸入的模式。

在「全字」的模式中，用鍵盤輸入完整單字，並按下 Enter 鍵，程式就會幫忙檢查答案是否正確。

如果想再回到「填空」輸入的模式，就按一下黃底的「全字」按鈕。

檔案下載與題庫修改

光玩 HTML5 FUN 中的範例不過癮，如果想要打造一個使用自訂題庫的 HTML5 單字高手，第一件事情，當然是要先把程式及範例題庫打包並下載回來。

HTML5 單字高手檔案下載的網址如下：

• https://gsyan888.github.io/html5_fun/archives/html5_spelling.zip

下載並儲存的檔案是一個 .zip 的壓縮檔，所以要先將它解壓縮。解壓縮後，應該會有一個名為「html5_spelling」的資料夾，內容大概如下圖：

[圖4] html5_spelling 的檔案與資料夾

想要自訂題庫，只需要觀察一下選單設定檔 spelling_set.js 和 data 資料夾中的題庫設定檔。

我們可以使用類似 Notepad++ 的純文字編輯來修改 .js 的設定檔。此部份可以參考這篇：

• 雄 : HTML5 : 如何以Windows的記事本修改.js設定檔

在設定檔中，可以看到以兩個斜線( // ) 開頭的，表示該部份為註解，題庫的設定說明，大部份都寫在設定中了，可以先參考看看。

題庫設定檔中，最重要的兩個選項是：

• blanks_total_number : 每題要拿掉幾個字母當填空。
• questionLines : 題庫。

blanks_total_number

blanks_total_number 如果設為 1 ，出題時，每一個單字都會以亂數拿掉一個字母，讓玩家填空。

questionLines

questionLines 是用來設定要用哪些單字來當題目。一行一個單字，其後還可以設定它的中文及聲音檔。

如果出題時，單字填空的位置想自己指定，而不使用亂數決定，例如: speech ，想將填空固定在 「ee」兩個字母，那就幫它們加上「中括號」，變成這樣:

sp[ee]ch

這樣子，程式出到這一個單字時，就不會管 blanks_total_number ，也不使用亂數，固定空格在「ee」的位置。

套用 Flash 版的題庫到 HTML5 版

可否直接使用 Flash 版的設定檔？

當初在準備寫 HTML5 版的單字高手時定下了一個目標：

• 將它放到原有的 Flash 版目錄中，可以直接套用原有的設定、題庫。

不過，因為 JavaScript 的安全管制問題，我們並無法開啟本機的 .txt 檔案，而單字高手 Flash 版正是使用 .txt 的檔案來儲存設定。

所以，如果想要達到前述直接使用 Flash 版設定檔的目標，最簡單的方法是將所有檔案都放到網頁主機中，透過網路來存取，不然就會出現類似底下的檔案載失敗的錯誤訊息：

選單設定檔載入失敗

題庫設定檔載入失敗

如何不透過網路玩？

HTML5 版的單字高手執行時，除了 mp3 聲音檔及系統用的圖片檔以外，基本上還需要選單設定檔和題庫設定檔，設定檔可以是 .txt (與 Flash 版的格式相同)，或是 .js (JavaScript 的格式)。如前面提過，HTML5 版無法開啟儲存在本機中的 .txt 檔案，所以，如果想讓 HTML5 版的單字高手可以直接在本機上使用，不透過網路，我們就必須將原有設定進行一點點小改造：

• 打開所有的設定檔，在最前面及最後面各加一行，讓它變成 JavaScript 的變數內容。
• 修改選單設定中的題庫設定檔檔名，將「.txt」改為「.js」。
• 將選單設定檔及題庫設定檔的副檔名重新命名為「.js」。

看看原來 spelling_set.txt 的內容為：

我們在第一行的前一行加上：

var URIformatVars = function(){/*--這一行請勿更改--

在第九行的下一行加上：

-----*/}.toString().slice("function(){/*--這一行請勿更改--".length+2,-9);

把類似 01.txt , 02.txt , 03.txt 的題庫檔檔案名稱改為 01.js , 02.js , 03.js ......

讓它變為下圖中的內容：

最後再把「spelling_set.txt」重新命名為「spelling_set.js」，經過這樣的改造，選單設定檔就變成 JavaScript 的格式了。

接著如法泡製，將題庫設定檔也改造一下，類似底下的內容：

所有的 .txt 設定檔都「加料」過，並重新命名為「.js」以後，我們就可以在本機上玩 HTML5 版的單字高手了。

不過，在猜想，可能有人會卡在「改副檔名為 .js」這個步驟，以 Windows 來說，它的檔案總管預設是會「隱藏已知類型的副檔名」，如果想看到 .txt、.js 的「副檔名」，必須自己到「資料夾選項」中去設定才行。

另外一個方法就是把設定的內容直接貼到「html5_spelling-本機可用範例.zip」解壓縮以後的 spelling_set.js 範例檔案及 data 目錄裡的 .js 檔案中，不要去動到第一行和最最後一行即可，或許這樣會簡單一點。

《注意》如果目錄中「spelling_set.js」和「spelling_set.txt」兩個檔案同時存在，HTML5 版的單字高手會開啟「spelling_set.js」哦！

可不可以離線使用?

如果題庫中有使用到聲音檔，以 iPad 來說，基本上，答案是否定的，因為它無法快取 mp3 語音檔，因此，HTML5 單字高手並沒有設計為離線使用的模式。

相關文章

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

• 雄 : HTML5 : 單字高手@Blogger語法產生器

• 雄 : Flash : spelling3 英文單字高手

• 江明勳老師的網誌：嘰哩呱啦ACE--第647回--電子白板教學應用-43-英文單字高手-1

• 雄 : Teaching : 英文單字高手 Flash 拼字測驗 spelling

• 雄 : Apps Script : 用 scoreLogger 來接收遊戲作答記錄

• 雄 : HTML5 : 將 WebApps 放到 Google Drive

更新記錄

• 2022.11.16 v.2k 新增 order_by_random 參數，設定是否以亂數抽題 true:亂數抽題 false:題庫依序使用。
• 2022.10.28 v.2j 解決題庫使用中括號的單字中，如果帶有空格，空格未跳過，以致無法完成作答的問題。
• 2022.08.25 v.2i 題庫範例檔案中，題庫的解析會因為不同平台的換行字元數(Mac OS X 用一個字元，Windows 用兩個字元)而產生解析錯誤，修正了題庫的格式；解決題庫中如果有空白行，未正確去除的問題；將計時器換到左側，以避免和顯示錯幾題的方塊重疊。
• 2022.05.16 v.2h 設定檔中可以使用「audioPlaybackRate」的參數來控制語音檔播放的速度，ex. 1.0 正常, 0.5 慢速, 2.0 兩倍速。
• 2022.05.12 v.2j 在右上角加上答錯題數；將左下角的版次文字往左移一點，並更換顏色，讓它可以比較明顯。
• 2022.05.07 解決在 iOS 中，使用 Google TTS 的語音，如果按「播放」鈕重播語音會沒反應。(使用 .load() ，重新載入語音)
• 2022.04.26 題庫的部份，可以手動設定單字中，那些字母要進行填空，例如 sp[ee]ch ，使用中括號框住了 ee 兩個字母，填空的位置就會設定在這兩個字母；沒有使用中括號的，則是用亂數來決定填空的地方。
• 2022.02.25 虛擬鍵盤的數字鍵本來以 number_enabled 來控制，現在會以題目有沒有使用到數字及新增的兩個虛擬按鍵「-」和「'」來自動設定。
• 2022.01.09 加入類似 English1200 題庫的新題庫格式，一題一行較清楚，同時將範例都改為新格式；支援 TTS ，可以直接使用 TTS 來當單字的語音來源；鍵盤操作時，可以用 Ctrl 鍵來重播語音。
• 2022.01.06 加入一個「填空」「全字」的選項按鈕，「全字」狀態時，只能以鍵盤輸入完整的字，最後以 Enter 鍵送出，核對答案正確與否。
• 2017.10.10 依據江明勳老師的建議，加入以鍵盤輸入及計時器的功能。
• 2014.08.24 初版。