HTML5 Speaking 是一個可以練習看文(圖)說話的自學小工具。學生看完提示(文字或、圖片)後，以麥克風說出答案，程式利用語音辨識的結果，來檢核答案正確與否，並給予回饋。
HTML5 Speaking 除了可以在 HTML5 FUN 網站中下載並改成自己的練習內容；有自己的網站或是 Blog 的人，也可以利用本頁中的「語法產生器」，製作可直接放在網路上玩的版本。
想要在 Blogger 中放自訂題庫的 HTML5 FUN Speaking 嗎？利用底下的語法產生器製作語法，再將語法貼入 Blogger 的文章中，即可以直接利用 Blogger 當儲存題庫、並讓別人來玩自製遊戲的空間囉！
底下可以試玩，也有語法產生及剪貼到自己 Blogger 的程序。
忘了是從什麼時候開始，用 LimeJS 開發的 HTML5 程式，在行動載具上，會有一個問題不大，但卻令人困擾的小臭蟲。常常會遇到載入程式時，畫面的比例、位置不太對，明明利用 LimeJS 框架寫的程式會自動計算，並按設定的比例，盡量填滿瀏覽器視窗的，卻會有如底下兩個截圖的差異：
 |
| [圖1] 正常的畫面 |
 |
| [圖2] 未正常調整比例的畫面 |
以我寫的 HTML5單字高手來說，會像在 [圖1] 左下角有版本戳記；但是在 iOS 上，常常會變成 [圖2] 的樣子，比例稍大，然後周圍的部份就會被截掉。早期並沒有這個問題的，很明顯地，在 iOS 的 Safari，一定有改了什麼，而 LimeJS 這個古董級的框架沒跟上。
我後來發現，只要將載具旋轉一下，由橫拿變直拿，再由直拿變成橫拿，畫面就可以由 [圖2] 變成 [圖1]。不過，雖然這個方法可以解決問題，不但麻煩，也不是每個人都知道啊！
這兩天在寫新的程式，對這個問題實在覺得感冒，決定好好地追一下問題出在哪裡。
在 LimeJS 的原始碼中，控制畫面比例，包括啟始大小的計算、改變大小及旋轉......等，都是由 director.js 在控制。在 director.js 中，「invalidateSize_ 」就是負責計算調整大小的程序，所以在好幾個系統事件中，都會去執行它。
追一下有關行動載具相關的，有以下的片段：
//todo: look for a less hacky solution
if(goog.userAgent.MOBILE && !goog.global['navigator'].standalone){
var that = this;
setTimeout(
function(){window.scrollTo(0, 0);that.invalidateSize_()}
,100);
}
在 director.js 中，它利用了「goog.userAgent.MOBILE」來判斷是不是行動載具，如果是，就會執行將畫面往上拉到頂，並重新計算大小、調整位置。
針對 goog.userAgent.MOBILE 偵錯，在 iOS 10.3.4 中，它得到的值是 True；而在 iOS 15 上，則為 False。這和在 iOS 10.3.4 中可以正確地調整大小，而在 iOS 15 不正常的結果是吻合的。這樣子，看來問題出在 goog.userAgent.MOBILE 並沒有正確地偵測到 iOS。
這讓我想起，之前寫「HTML5 幾A幾B」時，曾經有研究過如何偵測是否為 iOS，使用了這個判斷式：
if( /iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
)
最重要的其實是「navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1」，細節可以用這個當關鍵詞搜尋看看。
不過，如果是應用在 LimeJS 的「壓縮編碼」，navigator.maxTouchPoints 要改成 navigator['maxTouchPoints']，以免因為 maxTouchPoints 被編碼，又無法正常判斷。
綜合前述的測試結果，LimeJS 原始碼中的 director.js 中的這部份：
//todo: look for a less hacky solution
if(goog.userAgent.MOBILE && !goog.global['navigator'].standalone){
var that = this;
setTimeout(
function(){window.scrollTo(0, 0);that.invalidateSize_()}
,100);
}
修改為：
//todo: look for a less hacky solution
if((goog.userAgent.MOBILE
|| /iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === 'MacIntel' && navigator['maxTouchPoints'] > 1)
)
&& !goog.global['navigator'].standalone){
var that = this;
setTimeout(
function(){window.scrollTo(0, 0);that.invalidateSize_()}
,100);
}
這樣子，在 iOS 中，就可以自動調整位置及大小了。
有空再將 HTML5 FUN 中的程式，一個個重新編譯，並更新。
人多半會有盲點，往往在和他人的討論、互動中，可以察覺到自己過去沒發現的問題。
之前為了讓大家可以簡單而有結構地自訂我設計的 HTML5 小工具題庫，在設定檔中，使用了一個特殊的小技巧，詳情可以參考這篇舊文：
當時使用一陣子以後，發現在多行題庫設定中，第一行的內容的前幾個字有被吃掉的情形。研究了一下，「吃字」的原因是在不同平臺，使用了不同的「換行字元」。以 Windows 來說，當我們在文字編輯器中，按下 Etner 鍵時，一般會送出 CR (\r) 和 LF (\n) 兩個字元；在 Mac OS X 或是其它 Unix like 的系統中，，按下 Enter 鍵時，則是送出 LF (\n) 一個字元。這讓我在 Windows 中寫的解析多行內容字串指令，在不同平臺，會有不同的結果。後來，甚至因為瀏覽器的版本不同，也會產生問題。
為了解決前述的問題，最後我修改了擷取題庫設定的流程，先用一小段指令，來計算應該要擷取多長的字串。像這樣：
//測試區塊開始
CR_LF_test = function(){/*--這一行請勿更改--
CR_LF testing block
-----*/}.toString().slice("function(){/*--這一行請勿更改--".length+2,-9);
CR_LF_First_Pos = CR_LF_test.indexOf('_LF')-'CR_LF'.indexOf('_LF');
//測試區塊結束
計算完的「CR_LF_First_Pos」長度，可以應用在題庫的擷取指令中，類似這樣：
questionLines = function(){/*--這一行請勿更改--
angry##生氣##mp3/angry.mp3
smile##微笑##mp3/smile.mp3
cry##哭##mp3/cry.mp3
-----*/}.toString().slice("function(){/*--這一行請勿更改--".length+2+(typeof(CR_LF_First_Pos)!='undefined' ? CR_LF_First_Pos:0),-9);
看似完美，其實也正常運作了滿久。
今天一位朋友反應題庫的第一行有「吃字」的情形，看了設定檔，似乎沒什麼問題。在 Notepad++ 中，顯示所有特殊字元後，看到一個自己之前沒注意到的情境(以前面的例子來說明)：
這樣一來，算出來的 CR_LF_First_Pos」就會多一，導致「questionLines」的第一個字元會被捨去不取用，而造成「吃字」的情形。
以前我在測試時，要嘛都是純 Windows 的環境，要嘛就是純 Unix like 的環境，環境單純，哈！人更單純！程式碼自然就單純得沒考慮到混用的情形，這就是一個人時的盲點。幸好有人跟我反應了問題，盲點被找出來了！
那如何解決前述的問題呢？
看來我根本不需要使用「CR_LF_test」那幾行，直接改一下題庫設定解析的指令就好，也就是將：
-----*/}.toString().slice("function(){/*--這一行請勿更改--".length+2+(typeof(CR_LF_First_Pos)!='undefined' ? CR_LF_First_Pos:0),-9);
改為：
-----*/}.toString().replace(/\r/g,"").slice("function(){/*--這一行請勿更改--".length+1,-9);
改了什麼關鍵呢？
經過這樣的修正，可以正確無誤的取到使用者設定的多行字串，只要再利用每一行都有一個「\n」的換行元，將它拿來當作分解各行的「分隔符號」，即可解析出自訂題庫的內容了。
後來也因為在測試這題庫設定的問題，發現我在「HTML5 單字高手」和「HTML5 English1200」中，原本設計可以去掉題庫空白行的功能沒發揮作用。順便將臭蟲除掉了。
一直以來，喜歡將東西與別人分享，喜歡幫別人解決問題，過程中可能要用掉不少時間，但在別人的問題中，我看到了自己的盲點，解決了別人的問題，其實也是解決了自己的問題，收穫最多的，還是自己。
天氣狀況 : 晴
TRIP DIST : 9.86想念貓空的山路了！那就再衝一回吧！
恆光橋這一側上貓空的好處是峰迴路轉，有陽光直射，也有涼快的綠蔭；每每被酷日烤過後，更覺得林蔭微風的美好。
 |
| 泉南產業道路的綠蔭 |
這一側上山的另一個好處是人車相對的少，聞得到草香、花香，聽得著鳥語、蟲鳴。有時實在很難理解那些騎自行車，還要帶個喇叭，大聲放著音樂的人是什麼心態，在室外運動，尤其是往山裡騎車，不就是要讓自己暫時跳脫原有的生活情境，徹底的放鬆、調劑身心，為什麼不好好的聽聽大自然的聲音，還一路吵別人。
 |
雖然很久沒騎這條路了，節奏還沒忘記，輕齒順順地騎，雖喘不累。
 |
| 明德宮前的101 |
本來設定的目標是騎到草湳再折返，來到明德宫前，看看時間，得下山幫小孩準備午餐，只好等下一回囉！
朋友反應「雄 : HTML5 : 圖形計時器」的圓形計時器在 Safari 上，剩餘時間的圓圈位置會跑掉，回想了一下，當初在 iPad 上測試放大縮小的功能時，好像有「骨肉分離」的情形，只是因為當時主要是要給桌機使用，就沒理會這隻臭蟲。
 |
| [圖1] Safari SVG transform-origin 失效 |
會發生位置跑掉的問題，主要是因為這個圓形計時器是使用 SVG 繪圖，為了讓剩餘時間顯示的起點能在上方，並以逆時針方向減少，所以作者使用了 CSS 中的這兩個：
transform: rotate(90deg);
transform-origin: center;
也就是將 SVG 中，顯示剩餘時間的圓圈旋轉90度(第一行)，而且是以中央為旋轉中心(第二行)。這個應用在 Chrome、Edge、Firefox 上，可以正常運作。唯獨 Safari 有問題。
查一下 transform-origin 的說明：
transform-origin 在 Safari 是「Partial support」，難怪使用 transform 的 rotate 會出問題。
在 Safari 中，由於 transform-origin: center 無法發揮作用，以致在執行旋轉90度的指令時，它是用預設的「0, 0」當座標的參考點，當放大後，計算的基準跑掉，旋轉後，位置也就跑掉了，變成 [圖1] 錯位的樣子了。
為了解決旋轉中心的問題，只好捨 transform-origin ，改成用設定 SVG transform 屬性的方法來進行旋轉：
關鍵在這個：
rotate(<a> [<x> <y>])
當我們在 SVG 中的 transform 使用 rotate 時，可以使用三個參數，後面兩個用來指定旋轉中心。所以我將作者原來 CSS 那兩行先拿掉，改在 SVG 畫剩餘時間圓圈的 path 指令中加入了：
transform="rotate(90,45,45)"
「45,45」是 SVG 圖形在不放大時的中心點，這樣子，畫出來的圓圈就不再亂跑了。
以為這樣子就完美了嗎？
Safari 和 Firefox 都沒問題，在 Chrome 上，它卻會先錯位，然後再自動地慢慢移到正確的位置，試了一下，如果把原 CSS 的那兩行再加回去，它才完全不亂跑，真的是整死人了！
沒關係，既然 Chrome 有需要，就再利用 CSS 的語法：
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.base-timer__path-remaining {
transform: rotate(90deg);
transform-origin: center;
}
}
上面限定只有在瀏覽器是 Chrome 時，才會加上 transform 和 transform-origin。
先這樣頭痛醫頭，腳痛醫腳，暫時頂著用，有時間再來看有沒有一體通用的方法。
FFmpeg 可以用來幫影片加字幕，那可以編輯字幕檔內，各段文字出現的時間嗎？
我找到了一部影片的 .srt 字幕檔，但是發現它的時間比影片晚了 15點多秒鐘，找了一下資料，利用 FFmpeg 的「 -itsoffset」參數，就可以控制字幕出現的時間。例如
ffmpeg -itsoffset 10 -i subtitle_file.srt output.srt
它就會將 .srt 中的所有時間，通通加上10秒鐘，然後輸出到 output.srt。
如果時間用負數，例如：
ffmpeg -itsoffset -10 -i subtitle_file.srt output.srt
它就會將 .srt 中的所有時間，通通提早 10 秒鐘。
哈！這樣是不是很棒！
不過，經過實際操作，「 -itsoffset」參數使用負數的時間，必須要「夠減」才行。像我的字幕檔中的內容大概像這樣：
1
00:00:01,000 --> 00:00:06,000
== xxx xxxx==
2
00:00:15,065 --> 00:00:16,266
xxxxxx？
3
00:00:16,266 --> 00:00:18,502
xxxxxxxxxxx
我想將每一行字幕，通通提早 16 秒鐘，就執行以下的指令：
ffmpeg -itsoffset -16 -i subtitle_file.srt output.srt
第 1～2 行字幕因為不夠減，就無法正確的顯示了。
因此我做了兩個修正：
這樣子就可以使用底下提早 15 秒鐘的轉換指令：
ffmpeg -itsoffset -15 -i subtitle_file.srt output.srt
實作的結果，還不錯！影片的語音跟字幕是對得上的。
Android 手機借朋友用 Facebook Messenger 發訊息後，以 Messenger 的「帳號管理」要移除帳號，出現了底下的訊息：
此帳號也已經在這部裝置上登入Facebook。你必須從 Facebook 登出此帳號，才能將其移除。
好的～那就照著操作，先到 Facebook 的程式中去登出，重新回到 Messaenger 去移除帳號，結果還是出現 [圖1] 的訊息！
 |
| [圖1] Messenger 無法移除帳號 |
今天是愚人節嗎？像鬼打牆一樣！明明 Facebook 已經登出，甚至選了「從裝罝移除」了，它還是說沒有登出！
好！使出大絕招，將 Facebook 和 Messenger ，甚至 Meta ... 的應用程式，通通移除，也利用檔案管理的工具去一個個目錄查過了，似乎沒有留下什麼資料了，總該是乾淨的狀態了吧！重新將相關的應用程式安裝回來，再開啟 Messenger 看看。
是的！我還是失敗了！要真那麼順利，就不用寫這篇筆記了。
查了一下，原來在 Android 中，Facebook 的帳號資料是儲存在系統中，所以要刪除的話，應該要利用 Android 的系統設定中：
 |
| [圖2] 帳號與備份 |
找到如 [圖3] 這樣的選單：
 |
| [圖3] Facebook 的帳號清單 |
清單中，有 Facebook 圖示的，那串數字 Facebook 帳號的 ID。想刪除哪一個，就按一下進入，然後就會有類似 [圖4] 的畫面：
 |
只要按一下 [刪除帳號] 就可以將本裝置中該 Facebook 帳號資料刪除。
不過，在按上面的按鈕之前，建議先在 Facebook 應用程式中先登出、移除，並關閉應用程式，不然，再次啟動 Facebook 應用程式時，可能該帳號又「復活」了。
重新列出要順利在 Android 中的 Messenger 刪除帳號的程序：
沒想到刪一個帳號，要搞得這麼複雜，真的是圈圈叉叉！
印象中，騎那麼久的自行車，只有一次在路邊換備胎，但因為是防剌胎被剌穿，內胎的氣是慢慢洩掉的。本週日(大暑的隔日)則是突然聽到「砰」！一聲，瞬間「消風」。騎的這部自行車是同事移轉過來的舊車，所以什麼工具都沒有，只好慢慢地牽回家，哈！還拎著三個便當呢！
昨天將內胎拆下後，看到一個明顯的爆裂點，而外胎的側邊也有明顯的破損：
 |
| 爆裂的外胎 |
本來以為大概是天氣太熱才導致爆胎，不過再仔細的回想了一下，其實之前就有將爆的症兆：
前一天因為久沒打氣，發現胎壓不足，於是把輪胎打好打滿（多半是太滿了！），加上氣溫高，柏油路面溫度更高，外胎老舊......多重因素之下，後輪就這麼爆了。
拿出之前備很久沒用的「新」內胎要換時，也是快昏倒：
 |
| 全新的內胎長這樣 |
哈！兩條全新的內胎都像照片中那樣，在有摺痕的地方裂開了兩處以上，照片中這條是最慘的；這下是「有備無換」了，備了胎，卻無法用。查了一下，其實很多人都有類似的經驗，內胎擺久了會壞，不然就是得將它稍微打氣，放在陰涼處，或許可以放久一點。
最後去自行車行買了一條建大 1.5 的防剌胎，加一條正新 1.75 (店內無 1.5 的存貨)的內胎，老闆本來說 1000元，攀談了好一會兒，他自己降價，900元成交。雖然比我印象中的價錢貴了一點點，能拿到現貨可以立即換，了卻一椿事還是比較重要。
建大這條外胎比之前習慣用的馬牌防剌胎軟多、好換多了，哈～希望它的防剌效果不要也那麼「軟」！
換好之後，試騎了一下，後輪偏擺的情形消失了。騎車還是要多體察車子的狀況，不然「顧路」，或是受傷了，很不划算的。
2021 年時，想用手機錄畫面，才發現 Android 錄畫面時，錄不到輸出的聲音，查了半天資料，找到了關鍵字「audio loopback」，然後參考了這篇「Audio Loopback Dongle」：
它主要是將原本要輸出給耳機的聲音，導回給麥克風；而在錄畫面時，麥克風的聲音是可以同步錄下的，這樣一來，就能把原本錄不到的聲音，用跳板的方式，同步錄下來了。
參考「Audio Loopback Dongle」的電路圖，稍微修了一下，另外加上 TRRS 母座，可以插耳麥接聽輸出的聲及說話。這個簡易混音器，試了一下，搭配 Kimcy929a 的 Screen Recorder ：
就可以解決我 Android 手機無法同時錄影跟錄音的問題 (如果 Android 的版本較新，這個問題應該已經解決，不過，我的手機只能到 Android 9)。
後來看到有人在討論 Google Meet 除了用「分頁模式」，遠端學生無法聽到老師聲音的問題；前面的簡易混音器再度登場，它可以將電腦本來要輸出給喇叭的音源和麥克風混音以後，再由麥克風的途徑輸入給電腦，這樣子，無論 Google Meet 使用任何模式分享畫面，遠端都可以同時聽到電腦的輸出的聲音及麥克風的聲音。
不過，在使用後，才發現，如果沒有音量調整實體鈕來控制電腦輸出聲音的大小，有時會蓋掉麥克風的人聲，所以後來又幫簡易混音器加上了一個電位器，這樣使用時更方便。[圖1] 是修改過後的電路圖：
 |
| [圖1] 簡易混音器電路圖 |
[圖2] [圖3] 的混音器是利用舊電話拆下來的電位器(R3: 50kΩ)、舊平板拆下來的 TRRS 母座(J2) 及一個全新的 TRRS 端子(J1)所組成的。
 |
| [圖2] 簡易混音器 |
 |
| [圖3] 簡易混音器 |
使用時，左側的 J2 可以插上耳麥監聽及說話；右側的 J1 則插到手機或是平板的耳麥插座，如果是接桌機，則可以用一母(TRRS)轉二公(TRS)的轉接線 [圖4]，將 J1 分為耳機插頭跟麥克風插頭，再插到電腦的耳機與麥克風插孔中。
 |
| [圖4] TRRS 轉 TRS x 2 的轉接線 |
看到這邊，哇！可以應用在手機或平板，是不是就可以解決 Google Meet 在 iPad 上無法分享聲音的問題？
關於 Google Meet 在 iPad 分享聲音的問題，可以看一下我錄的測試影片：
影片中使用的簡易混音器是 [圖5] 這個：
 |
| [圖5] 可斷開麥克風功的簡易混音器 |
測試影片中的 iPad 有成功在 Google Meet 中分享聲音給遠端，主要是有特別去將「耳機」的音量及「電話」的音量調小，前者用虛擬調整鈕調整，後者用 iPad 的實體按鈕調整。
不過，只要使用麥克風講話，或是遠端的人有發言，分享的聲音就可能因為回授的關係而變小或是消失，所以需要將 [圖1] 右側中的 J1 插掉後重插(有可能因為這樣而讓 Google Meet 斷線)。如果音量調整得不好，或是大家都很多話，會很不穩定。
所以結論是，使用 Google Meet 分享聲音，還是筆電或是桌機比較穩定而容易些。
前面 [圖2] 和 [圖5] 的混音器，設計時，因為考慮可以直接插手機或是平板，所以都是針對 TRRS 的端子設計，也就是麥克風都是單聲道而已，所以只用一個電位器來調整音量。
個人常用的麥克風是以前 AIWA 隨身聽附的立體電容式麥克風，為了讓它保持立體聲，所以我利用光碟機拆下來的控制板 [圖6] :
 |
| [圖6] 光碟機的控制板 |
改裝成 [圖7] 的混音器：
 |
| [圖7] 光碟機控板改裝的簡易混音器 |
我將接到電腦喇叭和麥克風的外接線改了一下，加裝了 2.54 的母座，這樣就可以直接插在三根 2.54 的針腳上，喇叭的音量可以用雙聲道的電位器來調整大小聲，然後再串接到麥克風的左、右聲道，這樣子，就可以維持麥克風的立體聲。
這是一個簡易的倒數計時計時器
之前想玩一下在視訊報告時，在自己的頭像上疊一個計時器，於是在網路上找到了Mateusz Rybczonec 的這個圓形的計時器：
把這個計時器的文字位置調整到圖的底部後，讓它加入到 OBS 的「瀏覽器」元件中，再啟動 OBS 的「虛擬相機」，就能達到我要的效果，報告時，有個計時器同步顯示，滿好玩的。
 |
| [圖1] OBS 虛擬相機與 Google Meet 子母畫面中的頭像 |
不過前面的計時器應用在 OBS 的瀏覽器元件中，有個小問題，無法控制計時器什麼時候開啟，使用時要回到 OBS 去操作。
於是我將前一陣子在玩的 HTML5 FUN 語音外掛，加了進去。打開麥克風，說：「5分鐘，計時開始」，然後計時器就開始跑了！想起來是不是很完美？哈！不過，我試了半天，在 OBS 就是無法讓我打開麥克風，然後說話！查了半天，別人說有用的方法，硬是無法用。
沒關係！我還有一招，就是利用「雄: HTML5 : remoteClick 網路遙控器」中使用的遠端遙控技術，由另一個計時器去控制 OSB 中的那個。哈！是不是很好玩！
計時器的使用方法很簡單，在為計時器取個簡單的「代號」，例如：「myXxXx」，因為它可以被遠端控制，所以建議不要用預設的 timer 當代號，不然，如果大家都用 timer 當代號，一按啟動鈕，大家的計時器都一起連動了。
設定了自訂的計時器代號以後，就可以按「按這裡開啟計時器」的按鈕來進行計時器的畫面了。
 |
| [圖2] 計時器的控制 |
開啟計時器以後，計時器的控制方塊在畫面的左上角：
設定好就可以按「開始計時」的按鈕，送出控制指令囉！
另外一個方式是直接用麥克風，以語音指令控制，可參考後面的說明。
畫面中的計時器，在計時的過程中，如果想暫停，就按一下計時器，想繼續計時，就再按一下計時器。（哈～突然想到，目前無法控制遠端計時器的暫停跟繼續）。
計時器畫面的右下角有一個拉桿，可以用拉桿來調整計時器的大小。(2022.07.09 加入)
想離開計時器，就按一下畫面右上角的叉叉圖示。
如果瀏覽器有支援語音辨識，計時器的左下角會有 [MIC] 的圖形按鈕。想用語音來設定倒數計時的時間跟啟動計時，先按一下 [MIC] 的藍色按鈕，當它變成紅色時，就可以按以下的格式，說出計時的時間跟啟動計時的語音指令：
用關鍵字「facebook share debug」找到 FB 的「分享偵錯工具」，我找到的網址如下：
連進去以後，在「偵錯」那欄的輸入區，貼上要修正的分享網址；然後按「偵錯」的按鈕。
在「抓取時間」那欄位，按「再次抓取」的按鈕，這樣子 FB 會重新抓取，並更新它的內容。
回到 FB 自己分享的那則中，按「編輯」，應該會出現新的縮圖，將文章重新儲存，即可完成更新囉！
「量詞大考驗」是我在2010年5月左右以 Flash 寫小程式，當時曾在噗浪上和噗友分享與討論，沒幫它寫過詳細的介紹文，只在自己網站的 Flash 作品集「雄之語文高手」頁面有了底下簡單的描述：
一隻、一枝、一打......這些量詞你知道怎麼用嗎？挑戰一下你對量詞的瞭解程度。遊戲的題庫可以自行擴充的，目前的題庫的來源主要是由雄老師將之前王文裕老師設計的"喜從天降”CAI 中的題庫轉換而來。
沒文章記錄，原本已經忘了是在什麼時候將 Flash 版的量詞大考驗改為 HTML5 版了，幸好在程式的一角有留下了 2012.11.28 的戳記，應該就是那日發布的吧？
最近重新檢視了自己的 HTML5 FUN 作品中，哪些可以使用HTML5 FUN 語音外掛，才發現 HTML5 Bubble 量詞大考驗很久沒維護了，於是幫它加上了音效，也把可自訂的題庫設定，改得更有彈性一點，順便補上這篇說明。
HTML5 版的量詞大考驗可以 HTML5 FUN 的網站中玩，或是下載回來，改成使用自訂的題庫：
 |
| HTML5 FUN 量詞大考驗 |
HTML5 量詞大考驗主要是針對量詞的練習來設計，所以題庫中主要分為「量詞」、「名詞」和「說明」，而「名詞」的部份有對的跟錯的選項，所以每一個題組中共有四個部份；出題時，再由程式在量詞前面加上數詞組合成多選題的題目。
底下稍微介紹一下它的功能特色：
HTML5 量詞大考驗可以將題庫換成自訂的題目，第一個步驟是先到 HTML5 FUN 的網站中，將打包好的 html5_bubble.zip 壓縮檔下載回來，將它解壓縮以後，應該會有一個名為「html5_bubble」的資料夾，裡面跟自訂遊戲的相關的設定檔檔案如下所示：
上面的設定檔，都可以使用純文字編輯器(例如 Windows 上可使用 Notepad++ 、記事本......) 來開啟並修改。
由 HTML5 FUN 網站下載回來的 HTML5 量詞大考驗中，預設使用的選單設定檔，檔名是「bubble_menu_set.js」。
選單設定檔主要的用途是讓程式知道要在畫面上呈現的標題及選單項目名稱；以及當選單項目被按下去以後，要載入哪一個題庫設定檔。所以它的設定項目不多。
 |
| [圖1] HTML5 量詞大考驗選單畫面及設定的對應 |
選單設定檔中可自訂的參數如下：
以 [圖1] 中的選單設定來說，當我們按下「量詞找名詞生手級」的選項以後，程式會到資料夾「data」(datafolder 指定的)中，找到「b01-1.js」這個題庫檔案，並載入題庫。
由 HTML5 FUN 網站下載回來的 HTML5 量詞大考驗壓縮檔解壓縮後，有一個名稱為「data」的資料夾，裡面有六個範例題庫設定檔。以純文字編輯器開啟以後，即可修改為自己的題庫。
題庫設定檔中，能夠自訂的參數如下：
在題庫設定檔中，最重要的是 question_lines ，它是題目的來源，格式很簡單：
以 data 資料夾中的題庫設定檔 b01-1.js 來說，它的分隔符號、題目類型及數字列表設定值為：
question_O_X_seperator = ";";
options_seperator = ",";
question_type = 1;
question_number_string = "一,兩,三,四";
以題庫設定參數 question_lins 中的這一行為例：
頭;牛,山羊;馬,黑狗,猴子,鳥;計算牛、羊的單位。
和遊戲畫面對照的結果：
 |
| [圖2] HTML5 量詞大考驗題庫與畫面對照圖 |
「;」分號為欄位分隔符號(question_O_X_seperator)，題目中有三個「;」分號，將這個題組切為四部份：
「,」逗號為多選項的分隔符號，將正確答案切為兩個：
「,」逗號為多選項的分隔符號，將錯的選項切為五個：
因為題目的類型(question_type)是設為「1」，[圖2] 中，飛鳥所拉的紅布條上有「四頭」，數字「四」是由「question_number_string」的設定值中，以亂數隨機取出來的，它和題組中的題幹欄位(左起第一欄)的「頭」合在一起，就變成「四頭」了。
當玩家選錯選項時，就會如 [圖2] 中，跳出解說的對話框，解說的文字是在題組設定中的第四個欄位，本題組是「計算牛、羊的單位。」。
以上的資訊在製作自己的自訂題庫檔案時，可供參考。
HTML5 量詞大考驗在瀏覽器有支援語音功能下，會自動載入語音外掛(畫面左下角有 MIC 的藍色啟動按鈕)。玩的時候，按一下藍色 MIC 鈕，變成紅色的，就可以用麥克風來說答案，程式辨識成功，並發現進行中的選項有該文字，就會幫忙觸發按按鈕的動作。
另外，畫面上的「繼續挑戰」、「開始挑戰」的按鈕，可以用語音來「按」。
2006年設計的 Flash 版詞語大挑戰在2012年初改寫為「Flash : Monster 詞語大挑戰」，年底又新增了 HTML5 版，讓它可以 iOS 中使用。
不過，一直沒把 HTML5 版的參數說明整理記錄，最近將題庫的格式改得更有彈性一點，也盡量讓它和 HTML5 FUN 中的其它程式類似；都快十年過去了，順便將 HTML5 版的說明完成。
Monster 詞語大挑戰可以在 HTML5 FUN 的網站中直接玩範例題庫；如果想自訂題庫，也提供下載程式及範例。
直接玩：
 |
| HTML5 FUN::Monster |
HTML5 FUN :: Monster 範例題庫是語詞填空的多選題，畫面下方會出現句子(題幹去掉填空的部份)，上方則會顯示候選的詞語(正確跟錯誤的選項):
 |
| HTML5 FUN Moster 的畫面 |
按下選項後，如果答對會加分，答錯則會有爆炸的音效。全部的正確答案都選完了，即可進入下一關(題)。雖然名稱是「 Monster 『詞語』大挑戰」，如果把題目換成數學式，也是可以哦！
簡單的說明一下功能特色：
HTML5 FUN 「Monster 詞語大挑戰」除了可以直接玩範例題庫，也可以將自己的題庫加入遊戲中；遊戲選單也可以自己修改項目名稱，及要載入的題庫設定檔。
如果想自訂題庫，第一個步驟是先到 HTML5 FUN 網站中，下載「Monster 詞語大挑戰」的壓縮檔，並解壓縮。接著就可以參考底下的參數說明，用文字編輯工具開啟相關的檔案來自訂選單，或是題庫。
先來看看「Monster 詞語大挑戰」的啟動程序：
下載「Monster 詞語大挑戰」，並解壓縮好的 html5_monster 資料夾中，應該可以找到一個檔名為「monster_menu_set.js」的檔案，這個檔案就是「Monster 詞語大挑戰」的選單設定檔。我們可以用純文字編輯工具(例如 Notepad++ 或是 Windows 的記事本)來開啟。
monster_menu_set.js 的範例檔中有底下的內容：
menu_title='詞語大挑戰';
menu_items = new Array(
"心緒類語詞:初級篇,monster_set_basic.js"
, "心緒類語詞:高級篇,monster_set_advance.js"
);
選單設定檔內容，對照「Monster 詞語大挑戰」的選單畫面如下圖所示：
 |
| HTML5 Monster 選單設定與選單對照圖 |
設定檔中只使用到兩個參數：
「項目名稱」「逗號」「題庫檔檔名」
所以當使用者按下選單中的「心緒類語詞:初級篇」，程式就會試著去載入「monster_set_basic.js」這個題庫設定檔，載入成功，就可以開始玩。
前面提到，我們在 monster_menu_set.js 的選單設定中，指定按哪一個選項，讓程式去載入哪個題庫設定檔。範例中，按「心緒類語詞:初級篇」，程式就會試著去載入「monster_set_basic.js」這個題庫設定檔；我們可以利用純文字編輯工具開啟「monster_set_basic.js」，來編輯它的內容。底下來看看可以自訂哪些參數。
其中最重要的是 question_lines ，它是題目的來源，格式很簡單：
假設分隔符號及填空設定值為：
question_O_X_seperator = "##";
options_seperator = ",";
blank_pattern = "◎";
blank_replacement = "( )";
 |
| HTML5 FUN Monster 題庫格式 |
解說一下「 question_lines 」中的這一行：
他的惡作劇，讓大家◎。##很難過,很不高興,很生氣,很討厭,受不了,發火,發狂##開心,佩服,喜歡,喜愛,感動
我們可以看到有兩個欄位分隔符號「##」，將這個題組切為三部份：
題幹的部份，「◎」會被程式用「( )」置換掉，變成：
他的惡作劇，讓大家( )。
確答案會再用選項的分隔符號「,」，切為七個：
而錯的選項也會再用選項的分隔符號「,」，切為五個：
參考上面題庫的格式，您就可以設計自己的的 HTML5 Monster 囉！
HTML5 Monster 在瀏覽器有支援語音功能下，會自動載入語音外掛(畫面左下角有 MIC 的藍色啟動按鈕)。玩的時候，按一下藍色 MIC 鈕，變成紅色的，就可以用麥克風來說答案，程式辨識成功，並發現進行中的選項有該文字，就會幫忙觸發按按鈕的動作。
另外，畫面上的「回主選單」、「重新挑戰」可以用語音來「按」。
2021年6月為了讓學生在遠距課時，仍然可以享受到自己戳「戳戳樂」的樂趣，所以寫了「雄: HTML5 : remoteClick 網路遙控器」，它算是一個 HTML5 戳戳樂的「外掛」，對戳戳樂的程式來說，不過是知道有人按了按鈕，其它的動作，仍然維持原來的程序在運作。
使用「remoteClick」有個小缺點，如果學生使用的是平板或是手機，要操作遙控器，就必須切換到「remoteClick」，這樣就看不到遠端戳戳樂的畫面。剛好最近在研究 HTML5 FUN 中，有哪些程式可以使用「雄 : HTML5 FUN : 語音輸入外掛」，就針對戳戳樂，調整了語音外掛的一些程序及優化。
 |
| [圖1] 有語音外掛的戳戳樂 |
HTML5 FUN 的語音外掛應用在戳戳樂的流程大概是這樣子：
 |
| [圖2] 按下藍色MIC按鈕啟動語音辨識 |
 |
| [圖3] MIC 按鈕變紅色、左上角編號由1開始 |
 |
| [圖4] 喊「9號」就可以戳9號那格 |
 |
| [圖5] 9號那格被按下了 |
這樣的運作方式，如果是線上課程，主控端(老師)只要能讓電腦的麥克風，能收到學生的聲音，即可進行語音辨識，讓遠端學生也能用自己的聲音下指令「遙控」戳戳樂。
底下是使用麥克風玩戳戳樂的一小段影片：
要啟動戳戳樂的語音外掛，只要開啟有載入 HTML5 FUN 語音外掛的網頁即可，如果要直接使用 HTML5 FUN 網站中的，可以視指令的語言需求，按底下其中一個網址：
如果下載了最新的 HTML5 戳戳樂 .zip 壓縮檔，解壓縮以後，在 html5_poke 的資料夾中，找到這個網頁檔案：
html5_poke_speech.html
 |
| [圖6] 由「html5_poke_speech.html」載入戳戳樂語音外掛 |
用 Chrome 、Edge 或是其它有支援語音辨識功能瀏覽器來開啟 html5_poke_speech.html ，即可自動載入 HTML5 FUN 的語音外掛。
使用 HTML5 戳戳樂的語音外掛時，它可以處理哪些語音辨識結果呢？
應用在等候戳格子的畫面時，可以使用中文，或是英文語音指令：
XX 為格子左上角的編號，偵測到，外掛會幫忙「按」指定的格子。
 |
| [圖7] 內容對話框也可以使用語音關閉 |
如果是戳完格子，畫面是停在呈現內容的對話框時 [圖7]，可以使用底下的語音指令：
當程式偵測到以上的語音指令，它會幫忙「按 Enter 鍵」，等同於按下對話框的「確定」鈕，可以關閉對話框，等待戳下一個格子。
戳戳樂原始的設計，格子的編號是由最左上角那格的 0 號開始，依序加一，因為英文的 zero 在這裡的應用，不太容易辨識成功，所以操作時，建議以下的程序：
 |
| [圖8] 出現格子後再按 MIC 鈕 |
這樣的好處是：
發表文章
所有留言
