HTML5 : English 1200

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

• 一片在手，隨時學習－English1200字光碟
  http://163.30.44.7/e_paper/index.php?show_topic_detail=yes&topic=4&num=157

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

• http://www.tyc.edu.tw/files/english1200/

原網站的截圖如下：

[圖1] English 1200 原來的下載頁面

[圖2] 桃園縣 English 1200 光碟首頁

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

• https://www.plurk.com/p/bqpyrx

試玩與下載

放了那麼多年，幾乎把它給忘記了。最近好友江明勳老師(嘰哩呱啦ACE的格主)提起了它，於是又將 html5_english1200 重新修改一下，並且加入 HTML5 FUN 中。在HTML5 FUN網站找到 English1200 的圖示(圖3)後，即可試玩一玩已建立好的題庫，或是將打包好的壓縮檔下載回來：

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

試玩：

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

[圖3] English1200 的圖示

遊戲畫面

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

[圖4] 四大功能選單

[圖5] 聽音找英文

[圖6] 聽音找中文

[圖7] 看中文找英文

輕鬆打造自己的遊戲

如果想要在 English1200 中放自己的題庫，並快速地製作自己的 English1200 遊戲，建議可以試試看 HTML5 FUN 烘焙機 (可製作遊戲或是下載題庫設定檔)：

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

以修改設定檔的方式自訂遊戲

如果想知道更多有關 HTML5 English 如何自訂選單，及題庫設定檔的詳細參數說明，可以參考以下的資料。

自訂選單及題庫

由 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 : BINGO
  https://gsyan888.blogspot.com/2017/10/html5-bingo.html

題庫參數說明

關於 html5_english 的題庫有底下的參數可供自訂：

• optionsFontSize : 設定選項文字字型的大小。
• numberOfOptions : 每題有幾個選項。選項會利用題庫自動產生。
• numberOfOptionsPerRow : 每列最多可以有幾個選項。
•  auto_show_options 的參數，如果設為 false，按先按 [開始作答] 才會出現選項；預設值是 true。(2021.12.11新增的功能)
• numberOfQuestionsPerRound : 每回合抽幾題題目。如果題庫的數量很多，可以利用此選項，讓程式將所有題目切成多個回合，每回合的分數與時間都會單獨計算。如果此數字大於題庫總題數，會自動修正為題庫的數量。
• select_questions_in_random : 出題時，程式選擇題目的方式，設定值可以是 true 或 false ； true 是採亂數選題，false 則是按題庫順序出題。
• soundBaseURL : 聲音檔路徑的前置網址，如果此設定值不是空字串，而且語音不是使用 TTS (tts_enabled=false) ，出題時，程式會為 questionLines 的左欄前面自動加上這裡指定的字串。例如想用 English 1200 網站的聲音檔來發音，可以使用預設值的
  https://gsyan888.github.io/english1200/
  2022.06.05 起，支援以陣列來設定多個來源，這樣可以用亂數隨選不同的聲音。
  例如:
  soundBaseURL = ['./mp3/a/', './mp3/b/', './mp3/c/'];
  如果 mp3/a , mp3/b, mp3/b 三個資料夾中的結構與檔案都一樣，就可以由程式隨選播放不同的聲音。
• audioPlaybackRate : 用來控制語音播放的速度。(2022.06.05 新增)
• audioAutoPlayLoop : 語音自動播放的次數。
• audioAutoPlayDelay : 隔多久重播(單位秒)。
• tts_enabled : 是否使用 TTS 的語音，如果設為 true，就會使用 google 的 TTS 來發音，而不會使用 soundBaseURL　中指定的，或是自訂的 mp3 語音檔案。
• seperator : 題庫欄位分隔符號。在題庫(questionLines)中，每一行為一題，而一行可以用 seperator 來將它分為不同的欄位。預設值為兩個井字號(##)
• questionLines : 題庫，每一行一個題目，以 seperator 所指定的符號來分隔為不同的欄位，可以分為「兩欄式題庫」和「三欄式題庫」；
  
  「兩欄式題庫」左欄為聲音檔路徑也是英文，右欄為中文。
  兩欄式題庫適用於英文單字本身就是聲音檔路徑中的檔名部份，程式可以解析出 mp3檔名，並去掉字尾的 .mp3 成為題庫英文的部份。例如：青溪國中所製作的 English 1200單字題庫。
  
  「三欄式題庫」左欄為聲音檔路徑，中間欄為中文，右欄為英文。
  三欄式題庫適用於聲音檔檔名較不規則，無法解析出英文的部份的題庫，例如：青溪國中所製作的 English 1200句子的題庫，

[圖8] 兩欄式題庫(english1200-all-set.js)

[圖9] 三欄式題庫(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 : 載入題庫等候的最大秒數

相關文章

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

• 雄 : HTML5 FUN 精選集

• 雄 : HTML5 : BINGO

更新記錄

• 2024.04.03 v.0.5j 如果 item_button1_caption, item_button2_caption, item_button3_caption, item_button4_caption 為空字串，該選單按鈕就不出現。
• 2023.07.16 v.0.5h 開始作答後，按左上角叉叉後的 Error Log，出現的對話框中，新增一個[加強]的按鈕，按下以後，可以複習所有錯的題目；題庫第一欄如果不是聲音的路徑，會自動以 TTS 來合成語音。
• 2023.07.16 v.0.5g 在模式選項的畫面中，加入「接續舊進度」的功能選項，如果設為 On，可從上次最後完成的題目之後開始新的進度，如果沒有接續，則會重頭玩起，並在第一合回完成時，覆蓋舊進度。
• 2023.07.14 加入錯誤複習的功能，在每一回題目都做完後，如果有錯的，要將錯的複習完(挑戰加分題)，才能結束該回合或是遊戲。
• 2022.08.25 題庫範例檔案中，題庫的解析會因為不同平台的換行字元數(Mac OS X 用一個字元，Windows 用兩個字元)而產生解析錯誤，修正了題庫的格式；解決題庫中如果有空白行，未正確去除的問題。
• 2022.06.05 新增 audioPlaybackRate 的參數，自訂語音播放的速度；soundBaseURL 可以用陣列來設定多個來源，語音就可以由多個聲音中隨選；新增 audioAutoPlayLoop 和 audioAutoPlayDelay 可以控制語音播放幾次。
• 2022.05.08 在 iOS 使用 Gooogle TTS 時，按播放鈕沒有聲音的問題，重新執行 .load() 載入語音解決問題。
• 2021.12.12 在作答畫面左下角加一個設定鈕，可以臨時更改 auto_show_options 的設定；答案選項的文字加上陰影，解決遇到字數較多、超出按鈕下緣時，看不清楚的問題。
• 2021.12.11 設定檔多一個 auto_show_options 的參數，如果設為 false，按先按 [開始作答] 才會出現選項。
• 2021.06.03 tts 網址的部份無法念中文,改用 encodeURIComponent(english_str)。
• 2021.05.11 文字可以自動調整大小; 上方的題目文字改用陰影字, 讓字可以更清楚; 加入答錯記錄, 答錯時, 會記錄答錯及選錯的兩條題庫, 按作答畫面右上方的叉叉圖示, 即可顯示所有記錄, 或是刪除記錄。
• 2020.08.04 加入 optiosFontSize 的選項, 可以自訂選項文字的大小, 以免因為預設字形太大而讓字數較多的選項無法完整呈現內容。
• 2020.08.03 支援行動裝置直拿的模式, 調整版面解析度為 768x1024 的比例, 將字稍微放大(原為 35, 調整為 45), 按鈕間距稍微拉開(江明勳老師建議)。
• 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 初版