2022年10月15日 星期六

HTML5 : 注音高手@Blogger 語法產生器

2022年10月15日 星期六

HTML5 注音高手」是源自於江明勳老師和我開發的「Flash版注音高手」,在 2012年改成 HTML5 版後,就沒什麼更新。2022年10月10日整個重新改造,少了和 Flash 版設定檔的相容性,新增了可以嵌入網站或是 Blogger 的功能,並採用和 HTML5 FUN 網站其它工具的題庫格式。

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

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

底下可以試玩,也有語法產生及剪貼到自己 Blogger 的程序。(本文的最後有 HTML5 Speaking 語法產生器範影片 它們的操作程序是類似的)

三大步驟將 HTML5 注音高手「帶回家」

1.改
2.玩
3.剪貼

Let's go ~~

步驟 1

雄:HTML5 FUN:注音高手 自訂題庫設定

1-0 選擇題庫範例

請先選擇要套用的注音高手題庫範例

使用合成語音
(question-set-2.js)

不用選國字、國字變框
(question-set-3.js)

使用自訂圖片與自訂聲音
(question-set-1.js)

1-1 輸入題庫

  • 題庫內容一行一題
  • 兩個井字號「##」為「欄位分隔符號」。
  • 第1欄為國字。
  • 第2欄為圖片檔的路徑(可不使用)
  • 第3欄為聲音檔的路徑(沒有指定聲音,會用合成語音)
底下有兩種題庫的編輯器
您可以在圖形化編輯器或是原始碼輸入區中
填入自己的題庫內容:

圖形化題庫編輯器

  1. ######

題庫原始碼:

1-2 設定其它參數


1-2-1 最多出幾題

(題庫數量過多時,用來限定出題數)


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

(勾選 :亂數抽題 ; 未勾選 :按題庫順序)

 啟用亂數抽題


1-2-3 虛擬鍵盤是否要選國字

(勾選 :由玩家選國字 ; 未勾選 :自動選字)

 注音輸入完需再選國字


1-2-4 題目中是否顯示國字

(勾選 :顯示國字 ; 未勾選 :國字變成空格)

 顯示國字


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


步驟 2

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


步驟 3

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

是否要嵌入 Google Sites

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

 應用於 Google Sites


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


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

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

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

 

示範影片

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




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



相關連結

更新記錄

  • 2022.10.27 最後輸出語法時,可以勾選「是否嵌入 Google Sites」。
  • 2022.10.26 按圖形化編輯器上方圖示說明列中的圖示可以在游標處插入欄位分隔符號或是開啟 Vocaroo 錄音網站的連結
  • 2022.10.24 加入由剪貼簿貼上動作的處理,事先將文字分析並轉換後才貼上可用的語法。試算表貼過來的資料,會自動將 Tab 符號轉為欄位分隔符號(##)。
  • 2022.10.23 整合 HTML5 FUN Editor 的圖形化題庫編輯器。
  • 2022.10.15 修正在置換參數內容後,如果同行後面有加註解,會消失不見的問題;題庫的輸入區增加自動轉換 Vocaroo 語音連結網址的功能,錄好後,只要將得到的網址貼進輸入區即可,詳情請參考「雄 : 取得 Vocaroo 的聲音檔網址」。
  • 2022.10.14 修正輸出的設定中,結束用的分號未附加上去的問題。
  • 2022.10.13 以「雄 :  HTML5 : Speaking@Blogger 語法產生器」為基礎,稍加強後,改為注音高手語法產生器。 
    在第一步驟中,可以先選擇 HTML5 FUN 網站中,注音高手的三個範例題庫檔案來載入,當作樣版。


2 則留言:

  1. 今天2022-11-28 使用雄注音有問題 按紅色框 使用注音高手 畫面是白色網頁

    回覆刪除
    回覆
    1. 您好,謝謝通報,已經將程式更新好了;有問題再麻煩通報。謝謝 ^_^

      刪除

 
雄::gsyan © 2009. Design by Pocket