2014年8月25日 星期一

HTML5 : 單字高手 (2017.10.01更新)


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

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

HTML5 版單字高手

為了讓虛擬鍵盤的按鈕能盡量大一些,版面和 Flash 版稍微有一點不同。

試玩與下載


試玩:



檔案下載:

利用檔案清單的截圖,做了張簡單的用途說明。


設定檔可設定的選項請自行參考 Flash 版的說明,在此就不贅述。

可否直接使用 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 單字高手並沒有設計為離線使用的模式。

相關文章



更新記錄






3 則留言:

  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. 謝謝嚴老師細心的解答

    回覆刪除

 
© 2009. Design by Pocket