2014年8月25日 星期一

HTML5 : 單字高手 (2020.05.16更新)

2014年8月25日 星期一

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

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

[圖1] HTML5 版單字高手

玩一玩

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

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

[圖2] 單字高手的圖示

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

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

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

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

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

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

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

檔案下載與題庫修改

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

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

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

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

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

我們可以使用類似 Notepad++ 的純文字編輯來修改 .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 單字高手並沒有設計為離線使用的模式。

相關文章

更新記錄

  • 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 初版。



5 則留言:

  1. 顏老師:
    感謝您無私的分享,
    目前邀請本校英語老師使用單字高手,
    有幾個想法請教老師:
    1.我們想一~六年級各有一個頁面,卻又想將mp3檔共同放在/mp3的目錄下,我們該如何設定?
    2.一年級老師希望藉這程式讓學生認識母音的發音,能否設定隱藏字母時,能限定某1個或某幾個字母?
    3.除了單字外,老師發現片語教學也非常好用,但部份內容需要填入標點符號,這部分能否列入下次更新時的考量?
    再次謝謝老師
    阿國老師

    回覆刪除
    回覆
    1. 阿國老師您好:
      關於 Q1
      您可以仿 spelling_set.js 製作出不同的選單設定檔, ex. menu_set-1.js、menu_set-2.js、menu_set-3.js ......,然後在連結的網址上動手腳,加上「?menudatafile=menu_set-1.js&」這樣子程式就會依您的參數來載入選單設定檔 menu_set-1.js,而不是原本預設的 spelling_set.js。

      Q2 的部份會動到原有的題庫設定架構,因為這支程式其實有一點歷史,如果要向下相容,可能暫時無法做到。

      Q3 的部份,因為設定檔的欄位分隔符號用到了逗號及分號,基本上,這兩個就不能使用,另外,虛擬鍵盤也沒有提供符號的部份,除非大改版才有機會實現。

      刪除
  2. 謝謝嚴老師細心的解答

    回覆刪除
  3. hallow
    can you rewirite the game to use google translate ?
    http://dchesmis.blogspot.tw/2016/09/google.html
    mp3/chicken.mp3
    https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=en&q=chicken
    ---
    or
    直接依題目檔將語音捉下來呢?^^

    回覆刪除
  4. 您好:
    1.程式如果要 call google 的語音是需要授權的; 至於如何抓語音, 您可能要找找有什麼工具可以, 應該是有的。

    2.哈~不重要, 但還是提醒一下, 敝姓「顏」。

    回覆刪除

 
雄::gsyan © 2009. Design by Pocket