2019年6月10日 星期一

HTML5 : English 1200

English 1200 的靈感是得自於由桃園縣青溪國中所製作的「國民中小學一千兩百個英文單字」免費教育光碟。關於這個光碟的詳細介紹,可以參考「桃園縣政府教育局電子報」中的這一篇:

該光碟位於青溪國中的的線上操作版及下載的連結均已失效了

原網站的截圖如下:

English 1200 原來的下載頁面
桃園縣 English 1200 光碟首頁

2011年時,試著用 LimeJS 寫 HTML5 的程式,就以青溪國中 English 1200 的資源,寫了一個聽音選英文或中文的小工具,然後在噗浪中和朋友分享。



放了那麼多年,幾乎把它給忘記了。最近好友明勳提起了它,於是又將 html5_english1200 重新修改一下,並且加入 HTML5 FUN 中:

重新裝修過的 html5_english1200 把功能由原來的「聽音找英文」和「聽音找中文」,再擴充「看中文找英文」和「看英文找中文」兩項選單。此外,也增加了題庫選單功能及一些題庫設定的選項,讓使用者可以下載程式後,加入自己的題庫或自訂一些功能。
試玩:


四大功能選單
聽音找英文
聽音找中文
看中文找英文

自訂選單及題庫

HTML5 FUN 下載的 html5_english1200.zip 解壓縮以後,裡面有幾個檔名叫 ?????set.js 的檔案,它們都是可以自訂的設定檔。

「english1200_menu_set.js」是選單的設定檔。

「english1200-all-set.js」是 english1200 的單字設定範例,「english1200-all-set-sentence.js」是 english1200 的句子設定範例,題庫及聲音檔的來源都是青溪國中製作的光碟。

questions_set_tts.js」則是使用 TTS 來發音的題庫設定範例。

關於選單設定及題庫設定的方法,和我其它 HTML5 程式的都差不多,可以參考這一篇中的說明來修改:

題庫參數說明

關於 html5_english 的題庫有底下的參數可供自訂:
  • numberOfOptions : 每題有幾個選項。選項會利用題庫自動產生。
  • numberOfOptionsPerRow : 每列最多可以有幾個選項。
  • numberOfQuestionsPerRound : 每回合抽幾題題目。如果題庫的數量很多,可以利用此選項,讓程式將所有題目切成多個回合,每回合的分數與時間都會單獨計算。如果此數字大於題庫總題數,會自動修正為題庫的數量。
  • select_questions_in_random : 出題時,程式選擇題目的方式,設定值可以是 true 或 false ; true 是採亂數選題,false 則是按題庫順序出題。
  • soundBaseURL : 聲音檔路徑的前置網址,如果此設定值不是空字串,而且語音不是使用 TTS (tts_enabled=false) ,出題時,程式會為 questionLines 的左欄前面自動加上這裡指定的字串。例如想用 English 1200 網站的聲音檔來發音,可以使用預設值的
    https://gsyan888.github.io/english1200/
  • tts_enabled : 是否使用 TTS 的語音,如果設為 true,就會使用 google 的 TTS 來發音,而不會使用 soundBaseURL 中指定的,或是自訂的 mp3 語音檔案。
  • seperator : 題庫欄位分隔符號。在題庫(questionLines)中,每一行為一題,而一行可以用 seperator 來將它分為不同的欄位。預設值為兩個井字號(##)
  • questionLines : 題庫,每一行一個題目,以 seperator 所指定的符號來分隔為不同的欄位,可以分為「兩欄式題庫」和「三欄式題庫」;

    「兩欄式題庫」左欄為聲音檔路徑也是英文,右欄為中文。
    兩欄式題庫適用於英文單字本身就是聲音檔路徑中的檔名部份,程式可以解析出 mp3檔名,並去掉字尾的 .mp3 成為題庫英文的部份。例如:青溪國中所製作的 English 1200單字題庫。

    「三欄式題庫」左欄為聲音檔路徑,中間欄為中文,右欄為英文。
    三欄式題庫適用於聲音檔檔名較不規則,無法解析出英文的部份的題庫,例如:青溪國中所製作的 English 1200句子的題庫,

兩欄式題庫(english1200-all-set.js)
三欄式題庫(english1200-all-set-sentence.js)

以下 2019.06.12 版新增的自訂參數,可以更改界面中要顯示的文字:

  • caption : 上方標題欄的標題
  • item_button1_caption : 遊戲模式選單第1個按鈕上的文字
  • item_button2_caption : 遊戲模式選單第2個按鈕上的文字
  • item_button3_caption : 遊戲模式選單第3個按鈕上的文字
  • item_button4_caption : 遊戲模式選單第4個按鈕上的文字
  • credit_caption : 下方資料出處的文字
  • numberOfSecondToLoadQuestionLines : 載入題庫等候的最大秒數


相關文章



更新記錄

  • 2019.06.13 修正遊戲頁面上方的標題字字數如果過多時,會和分數及題數重疊的問題。在 english1200_menu_set.js 中如果設定了 memu_title ,程式會將網頁的標題自動更換為該字串。
  • 2019.06.12 新增一些自訂參數,讓界面可以自訂訊息,並更改按鈕上的文字。此外新增 numberOfSecondToLoadQuestionLines 參數,可以控制程式等候題庫變數 questionLines 的載入,應用於動態題庫。
  • 2019.06.11 解決按鈕中的字串如果很長會換行的問題。
  • 2019.05.31 題庫設定檔中加入判斷 CR/LF 的程式判斷,以解決不同系統間換行字元不同,導致題庫第一題會解析錯誤的問題。加入每列最多可以有幾個選項的參數「numberOfOptionsPerRow」。
  • 2019.05.30 加入自訂一回合多少題的功能。
  • 2019.05.29 改版、除蟲,加入 TTS 的功能。
  • 2011.04.17 初版




沒有留言:

張貼留言

 
© 2009. Design by Pocket