2019年6月10日 星期一

HTML5 : English 1200

2019年6月10日 星期一
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 的題庫有底下的參數可供自訂:
  • 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句子的題庫,

兩欄式題庫(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 : 載入題庫等候的最大秒數


相關文章



更新記錄

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




5 則留言:

  1. 顏老師,你好:
    我是在紐西蘭僑校教中文的老師,之前一直用你的 flash 小遊戲讓學生學習/練習中文有 7/8 年了吧. 也曾經向你討教過設定檔的問題. 經你的指導後問題也都解決了. 近兩年來常常煩惱 flash 的封鎖越來越嚴,將來學生的遊戲該如何處理. 前幾天在瀏覽你的網頁時,發現有很多遊戲都升級為 html5 的版本了,正想著如何將手邊的遊戲也都升級一下. 今天在試 html5_english1200 時,在 questions_set_tts.js 裡碰到一個問題. 就是我將 "tts_language = 'zh_tw'; // en : 英語, zh_tw : 中文" 改為中文(zh_tw) 時, 系統好像不會唸出中文.(我希望學中文的學生能聽到中文詞句,然後去選正確的英文翻譯. 不知是否還有其他參數需要一併修改? 還是 Google TTS 不提供中文文字轉語音的服務?
    賀明禮 敬上

    回覆刪除
  2. 賀老師您好:
    謝謝您的提醒,可能是我 TTS 的網址沒編碼好的問題,已經將程式更新過了,您可重新下載檔案以後,用新的程式再試看看。

    回覆刪除
  3. 顏老師,你好:
    你回覆的速度好快! 真是謝謝了! 前一陣子聽連育人老師的網上數位課, 說到顏老師你退休了. 卻還如此孜孜不倦的為老師(和學生)提供免費服務, 真是令人欽佩.
    我重新下載了 html5_english1200, 並將 questions_set_tts.js 裡的tts_language = 'zh_tw'(改為中文), 但從 “設定範例(TTS發音)” 選單進入後, 次目錄裡的前兩項 “聽音找英文” 和 “聽音找中文” 還是沒聲音. 我又試著把底下題庫裡的範例中文改到左欄(說明欄裡提到左欄為聲音檔路徑//右欄為中文), 但還是不行.
    另外, Google TTS 提供的中文文字轉語音的服務, 其對破音字的處理是否完善? 如果我想改用 .mp3檔作為聲音來源, 在 questions_set_tts.js 裡的聲音檔路徑語法應如何寫?
    賀明禮 敬上

    回覆刪除
  4. 補充說明: 聲音檔的路徑要指到硬碟目錄而不是 url 網址.

    回覆刪除
  5. 顏老師,你好:
    今天我重新下載程式並再把中英文內容(用##隔開)拷貝到設定檔questions_set_tts.js 和 questions_set_sentence裡面, 在練習聽音找中文(或英文時),聲音有點卡卡的,有時會沒唸出來,我猜可能是Google TTS 有時網路塞車所致. 至於上次都沒讀出聲音,可能是我在輸入詞句內容時,不小心更動了設定檔,所以老師你更新的程式應該是好的.
    因為我是改成聽中文找英文(或中文),所以在第二層的選單裡的 ”聽音找中文”、”聽音找英文”、”看英文找中文”、”看中文找英文” 的四個選項, 其 ”中文”、”英文” 兩個詞都相反了.我到上述兩個設定檔裡也沒找到第二層選單的文字設定/修改的地方.
    另外, 如果我想改用 .mp3檔作為聲音來源, 在上述兩個設定檔裡的聲音檔路徑語法可以改寫嗎? (English1200音檔是到網址去讀取,若我把音檔放在硬碟目錄裡,程式讀得到嗎?
    賀明禮 敬上
    PS. 我另試了 basketball 遊戲, 選好答案後當球移動到籃板時就停住了(當機?),好像有bug.

    回覆刪除

 
雄::gsyan © 2009. Design by Pocket