2022年11月7日 星期一

HTML5 : Listening 聽音辨字六選一

2022年11月7日 星期一

「聽音辨字六選一」是 2010 年底由南投縣永興國小江明勳老師發想的一個 Flash 小工具 (詳情請參考另一篇文章「雄 : Flash : listening2 聽音辨字六選一」中,噗浪發想文的連結),玩的時候,主要是先聽語音的題目後,在畫面上多張圖片或是文字中選出正確的答案,答對了,就繼續進行下一題。原來是應用在英文,應用在中文也是不錯的工具。

其實 2014年就做出了 HTML5 版的「聽音辨字六選一」,也曾經在 Blogger 中新增了文章,想幫它寫個改版後的介紹,但是起筆後,就這麼一直「草稿」的狀態放著。

這幾天為了讓「聽音辨字六選一」也能嵌入 Blogger 、網頁中使用,將它大調整了一番,順便加強了中文顯示的功能。底下就改版後的「聽音辨字六選一」簡單地介紹一下,有興趣的人,可以搭配後面的「語法產生器」,快速地製作自己的「聽音辨字六選一」遊戲。

[圖1] 2022年版的聽音辨字六選一展示範例


功能簡介

「聽音辨字六選一」進入遊戲以後,會讀入預先製作好題庫設定檔,再依設定,由題庫中選擇指定數量的題目,以其中一道題目為標準答案,再加其它題目為選項;畫面中會呈現圖卡及文字(可自訂要不要顯示),並播放題目的語音。玩家根據這些提示,點選答案,答對了,就可以加分,並進入下一題。底下是「聽音辨字六選一」的一些特性與功能:

  • 以 HTML5 開發,只要支援 HTML5 的網頁瀏覽器(Chrome、Edge、Safari、Firefox ......)即可玩。
  • 提供客製化的參數,可以自訂題庫及控制遊戲要顯示的內容,打造自己的遊戲。
  • 題目如果沒有圖片時,會自動改以文字卡片的方式呈現。
  • 題目如果沒有語音時,會自動改以 TTS 合成語替代。
  • 題目支援中文國字旁加直式注音的方式呈現 (可用「雄 : HTML5 注音高手語法產生器」來製作語法)。
  • 支援 Blogger、網頁嵌入的方式,只要使用語法產生器製作嵌入語法,即可將遊戲放在網頁中,線上供學生練習。

[圖2] 2022年版聽音辨字六選一支援多元的題庫格式


試玩與下載

「HTML5 聽音辨字六選一」的檔案與範例,都放在 HTML5 FUN 的網站中,如果想試玩範例題庫,或是下載所有檔案來修改,都可以在裡面找到。如果想要快速地製作單一題庫的聽音辨字六選一,則可以考慮使用「語法產生器」製作嵌入網站中的語法,再將遊戲嵌入網站中。

方法一:前往 HTML5 FUN 網站

HTML5 FUN 網站的網址如下:

HTML5 聽音辨字六選一的圖示

方法二:使用語法產生器

HTML5 聽音辨字六選一有支援 HTML5 FUN 的語法產生器,我們可以在語法產生器中直接修改題庫及其它設定,試玩沒有問題以後,可以製作嵌入 Blogger 或網站的語法,再將語法貼到自己的網站中,變成自製旳遊戲。


相關連結


更新記錄

  • 2022.11.06 新增 imageLoadingTimeout、audioLoadingTimeout 兩個參數,可以自訂等圖片或語音載入的逾時秒數。
  • 2022.11.04 修改題庫設定的結構;加入支援 embeded Blogger 及網頁;支援更多 Flash 版相容的設定參數;支援國字旁加直式注音的功能;無法載入聲音檔時,改用 TTS 的合成語音,並可自動判斷是否用 zh-TW 中文來發聲。
  • 2022.11.02 加入 fontname 及 label_fontname 兩個參數,可以自訂文字的字體。
  • 2017.10.05 更改語音及音效播放器,音效資料集中放在 assets/sound_data.js 檔案中。
  • 2014.02.15 設定可用變數 URIformatVars 來傳入多行的字串;新增 options_total 設定參數,自訂要出現幾個選項。
  • 2014.02.11 加入記錄成績用的 logger 參數。
  • 2014.02.06 HTML5 版。
  • 2010.11.06 Flash 版。


沒有留言:

張貼留言

 
雄::gsyan © 2009. Design by Pocket