2022年9月25日 星期日

HTML5 : Speaking@Blogger 語法產生器

2022年9月25日 星期日

HTML5 Speaking 是一個可以練習看文(圖)說話的自學小工具。學生看完提示(文字或、圖片)後,以麥克風說出答案,程式利用語音辨識的結果,來檢核答案正確與否,並給予回饋。

HTML5 Speaking 除了可以在 HTML5 FUN 網站中下載並改成自己的練習內容;有自己的網站或是 Blog 的人,也可以利用本頁中的「語法產生器」,製作可直接放在網路上玩的版本。

想要在 Blogger 中放自訂題庫的 HTML5 FUN Speaking 嗎?利用底下的語法產生器製作語法,再將語法貼入 Blogger 的文章中,即可以直接利用 Blogger 當儲存題庫、並讓別人來玩自製遊戲的空間囉!

底下可以試玩,也有語法產生及剪貼到自己 Blogger 的程序。(本文的最後有示範影片)

三大步驟將 HTML5 Speaking「帶回家」


1.改
2.玩
3.剪貼

Let's go ~~

步驟 1

雄:HTML5 FUN:Speaking 自訂題庫設定

1-1 輸入題庫

  • 題庫內容一行一題
  • 兩個井字號「##」為「欄位分隔符號」。
  • 第1欄為「題目」,也就是要講出來的內容(預設使用英文)。
  • 第2欄、第3欄為「提示」,可以放文字,或是圖片的網址。
底下有兩種題庫的編輯器
您可以在圖形化編輯器或是原始碼輸入區中
填入自己的題庫內容:

圖形化題庫編輯器

  1. ######

題庫原始碼:

1-2 設定其它參數

1-2-1 語音辨識及語音合成的語言代碼

(例: 英文 en-US 、中文 zh-TW 、日文 ja-JP 、韓文 ko-KR 查代碼)
 


1-2-2 遊戲說明文字

1-2-3 遊戲模式選擇鈕上的文字

模式1 :

模式2 :

模式3 :


1-2-4 是否使用亂數抽題目

 啟用亂數抽題


1-2-5 語音播放的速度

例如:1.0 正常, 0.75 較慢速, 0.5 慢速, 1.5 快速, 2.0 兩倍速
(可設定多個,播放時會依序使用;以逗號分隔)


1-2-6 中文字是否先轉為拼音(無調號)再比對答案

 啟用轉為拼音


1-2-7 上方看板的標題字


以上為主要的設定
其它更多的參數,請在複製原始碼貼到您自己的Blogger(HTML檢視)之後,再自行設定。參數說明按這裡查看


步驟 2

按底下的按鈕試玩
(進入遊戲畫面後,按右上角的小叉叉可以再回到語法產生器)


步驟 3

會員限定的遊戲代碼(可省略,空白表示任何人均可玩)

 

是否要嵌入 Google Sites

(勾選 : Google Sites 專用的語法 ; 未勾選 :使用一般語法)

 應用於 Google Sites


可以將底下合併後的原始碼貼到Blogger(HTML檢視)


  1. 在輸入區將題目修改為自己想用的。
  2. 按底下的【查看合併後的原始碼-自動複製到剪貼簿】,複製合併後的原始碼。
  3. 進入Blogger建立新文章。
  4. 輸入「標題」。
  5. 文章編輯工具最左邊的切換為 <>「HTML檢視」。
  6. 貼上複製的原始碼。
  7. 發布測試。
  8. 沒問題就可以編輯文章,自訂題庫。

請依需求按一下底下的功能選項:

【查看 Speaking 題庫及設定】
【查看載入程序的原始碼】
【查看合併後的原始碼-自動複製到剪貼簿】

 

示範影片

[之一] 在語法產生器的題庫中加上圖片及 Vocaroo 錄製的語音




[之二] HTML5 Speaking 語法產生器製作 Blogger 及 Weebly 頁面的方法



相關連結

更新記錄

  • 2022.10.28 加入可勾選支援 Google Sites 嵌入語法的選項。
  • 2022.10.27 加入圖形化編輯區。
  • 2022.10.16 新增 topTitle 的選項
  • 2022.10.15 新增 pinyinConvertEnable 的選項。
  • 2022.10.13 新增 order_by_random 和 ttsPlaybackRate 兩個選項供設定;解決說明對話框說明文字的填入題庫設定的問題。
  • 2022.10.08 在第三步驟加入一個可輸入「會員限定的遊戲代碼」的欄位,如果設定了,題庫會被加密,玩的時候必須先輸入正確的代碼,才能將題庫解碼,出現開始玩的按鈕。
  • 2022.10.03 將語音辨識的語言代碼、說明畫面的說明內容及遊戲模式選擇鈕上的文字,列入填寫的欄位,方便自訂;調整版面,將三大步驟以圓角邊框區分清楚。
  • 2022.09.28 解決在 iOS 時,會有按了試玩鈕,畫面不正常顯示及有按鈕無法按的情形。
  • 2022.09.25 解決語法產生單輸入的自訂題庫,因為主程式載入後,會覆蓋掉設定的問題。
  • 2022.09.25 正式發布。 


沒有留言:

張貼留言

 
雄::gsyan © 2009. Design by Pocket