2023年9月8日 星期五

HTML5 FUN : 數學小白板時鐘元件

2023年9月8日 星期五

來囉~ HTML5 FUN 數學小白板的時鐘元件來囉~可以讓它自己走,也可以使用手動模式來自己拖曳指針。

底下整理一下它的功能選單:

  • 變大、變小:改變時間的尺寸。
  • 秒針顯示、秒針隱藏:可以用來控制是否顯示秒針。不顯時秒針時,會將它固定在12的位置後隱藏,這樣子就能讓分針可以對準刻度上的格子。
  • 數字顯示切換:每按一次會讓刻度上的數字有以下的改變(循環切換)
    • 內圈加 13~24 的數字(與時針同色),供 24 小時制的對照。
    • 內圈加 0 ~55 每大格增加 5 的數字(與分針同時),供分鐘與秒鐘對照。
    • 清空所有數字。
    • 只有數字 1~12。
  • 24小時制:顯示24小時制的數字鐘。
  • 12小時制:顯示12小時制的數字鐘。
  • 穩藏數字鐘
  • 自動:讓時鐘可以持續更新為現在的時間。
  • 手動:指針需拖曳才會動。
  • 對時:抓取現在的時間。
  • 複製:製作一個目前時鐘的副本。

指針對應到刻度上都有一個同色的小方塊,它除了是一個「指示器」可以更清楚地顯示指針所在的刻度外,如果拖曳「指示器」,可以用與指針同色的扇形,及虛線箭頭標示出經過的時間。如果直接拖曳指針(不要在指示器上),就可以取消現有的經過時間標示。

示範影片

底下是數學小白板時鐘元件的操作影片:

章節的清單如下,按時間可以直接跳到該章節:

00:00 新增時鐘元件及基本操作

00:48 功能選單介紹

01:00 秒針及刻度顯示設定

01:31 數字鐘的顯示與隱藏

02:11 複製時鐘

02:25 標示經過的時間

03:13 利用五格板放多個時鐘提問


相關連結


2023年9月4日 星期一

JavaScript : html2canvas 的擷圖參數測試

2023年9月4日 星期一

前一陣子因為想幫「HTML5 FUN 數學小白板」加上匯出成圖片的功能,找到了一個名為「html2canvas」的工具,試了一下,滿強的一個工具,利用 JavaScript 將網頁中,指定的元件整個分析後,輸出成 cavas,我只要加上轉成 PNG 圖片的程式,就完全符合我的需求;於是決定花一點時間研究 html2canvas 就好,不用花很多時間從最底層研究起。

html2canvas 可以在這個網址中找到:

在沒有加任何選項的情形下,用著,用著,發現幾個問題:

  1. 如果帶有圖片(非使用 DataURL)時, 在本機無法順利匯出,最後要將 canvas 使用 dataURL() 轉為 base64 編碼的資料時,會出現類似這樣的錯誤訊息「DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.」。
  2. 因為「HTML5 FUN數學小白板」的圖片是放在 GitHub 中,而程式是在 Google Blogger 中執行,會有「跨域」存取圖片的問題(CORS),所以原有的圖片空白一片。
  3. 如何讓 html2canvas 自動跳過某些地方不輸出?
  4. 「HTML5 FUN數學小白板」中的骰子元件,只有六點可以輸出成圖片,其它點數在輸出結果中,都只有空白一片。

第一個問題應該只有我會遇到,因為數學小白板都放在網路中執行,不會有本機存取圖片的問題。以前是一不做二不休,直接將要用的圖片通通轉成 Base64URI 的格式 ,就能避掉 Tainted 的問題,在考慮要不要將數學小白板的16張圖捨圖檔,直接轉資料。

第二個「跨域」CORS 的問題,因為 GitHub 並沒有禁止跨域存取,所以只要在 html2canvas 中啟用「useCORS」的選項,將它設為 true 即可解決;後面的測試中,可以比較一下,有勾選「useCORS」,跟沒勾選,擷取的結果中,沒有小狗的圖案就知道該選項的效果。

第三個問題,如何跳過某些地方不輸出?html2canvas 的說明中有提到,我們可以將不想要放在輸出(擷取)結果中的物件,加上名為「data-html2canvas-ignore」的屬性,這樣子,它就會自動跳過該內容。底下的測試中,可以用勾不勾選「包含圖片上方的標題」來控制要不要出現在小狗上方那行「html2canvas 網頁擷(戳)圖測試」的標題字。

第四個骰子元件空白一片的問題,html2canvas 的功能說明中有提到「transform (Limited support)」,而骰子的動畫及結果呈現,正是使用 transform 所製造的效果。空白的部份可以使用選項設定「"foreignObjectRendering": true」,但它並沒有正確地顯示內容。沒關係,山不轉,路轉,路不轉,人轉;修改了骰子的程式,在擲骰子的動畫播畢,將原有的內容變完全透明,然後再加一張最後結果的點數圖片,完全地過渡,畫面有顯示,使用 html2canvas 匯出的結果也看得到骰子(不完美的大概是位置稍偏右下方一點點)。

來玩一下,並比較不同選項,輸出結果的不同吧!

html2canvas 網頁擷(戳)圖測試

啟用選項

allowTaint    useCORS
由第1層開始擷取(含橙色邊框)
由第2層開始擷取(不含橙色框)
擷取整個網頁的內容
包含圖片上方的標題

請設定選項後按 [下載擷(戳)圖]

圖片來源

相關連結


2023年8月25日 星期五

HTML5 FUN : 數學小白板分享的新功能

2023年8月25日 星期五

2023年五月公開的 HTML5 FUN 數學小白板許久沒更新了,這幾天除掉一些臭蟲,元件增強一些功能,也新增了一項重要的功能「分享」。畫面右上方多了一個「分享」圖示 (圖1),按下去以後,可以將畫面的內容匯出設定,並加在網址中,不但可顯示QRCode (圖2),同時也可將網址複製到剪貼簿中供剪貼;老師布題的內容可以透過 QRCode 讓學生以平板電腦掃瞄,或是提供網址給學生作答;學生修改過內容,一樣可以透過「分享」的功能,將網址給老師存查;或是將作答結果下載成圖片(2023.08.27新增)。

[圖1] 分享的按鈕

[圖2] 按分享後產生的 QRCode

像前面按下「分享」的按鈕,除了會出現 [圖2] 的 QRCode;如果按了「複製網址」的話,底下這串長長的網址,就會複製到剪貼簿中了:

https://gsyan888.blogspot.com/2023/05/html5-math-whiteboard.html?jsurl=~'*7b*22size*22*3a*7b*22width*22*3a1024*2c*22height*22*3a695*7d*2c*22nodes*22*3a*5b*7b*22n*22*3a*22expressionBox*22*2c*22p*22*3a*7b*22x*22*3a543*2c*22y*22*3a311*7d*2c*22nodes*22*3a*5b*7b*22n*22*3a*22label*22*2c*22p*22*3a*7b*22x*22*3a503*2c*22y*22*3a304*7d*2c*22v*22*3a*22**ff1d*22*2c*22c*22*3a*22*234C82FF*22*7d*2c*7b*22n*22*3a*22mathFraction*22*2c*22p*22*3a*7b*22x*22*3a306*2c*22y*22*3a395*7d*2c*22v*22*3a*5b0*2c4*2c0*5d*2c*22c*22*3a*22*23FF826F*22*7d*2c*7b*22n*22*3a*22math-label*22*2c*22p*22*3a*7b*22x*22*3a684*2c*22y*22*3a319*7d*2c*22v*22*3a*5b1*5d*2c*22c*22*3a*22*23FFE54F*22*7d*2c*7b*22n*22*3a*22mathFraction*22*2c*22p*22*3a*7b*22x*22*3a306*2c*22y*22*3a222*7d*2c*22v*22*3a*5b0*2c4*2c0*5d*2c*22c*22*3a*22*23FF826F*22*7d*5d*7d*5d*7d&autostart=true

哈!真的嚇死人了!

試試看,按一下那長長的連結,它會重現布題的結果哦!

【註1】目前的分享方式是將元件的設定及配置放入網址中,因為 QRCode 能接受的網址長度有限制,所以如果元件放太多,有可能造成 QRCode 無法產生。

【註2】2023.08.27 將「分享」如 [圖3] 依需求細分為:

  • 「建立QR code」
  • 「複製網址」
  • 「下載圖片」

[圖3] 2023.08.27 分享功能選單

新功能介紹影片

影片1

底下的影片簡單地介紹一下2023年08月的更新:

將關鍵的段落整理如下,按時間可以直接跳到該段:

00:20 天平的新功能

00:49 分數條的新功能

01:31 小白板的新功能

01:46 整數元件的新功能

02:36 分享的功能

影片2

底下的影片介紹新增的五格板元件及圖示元件的使用:

章節的清單如下,按時間可以直接跳到該章節:

00:00 數學小白板的基本操作

00:43 分數條變分數牆

01:05 清空畫面的功能

01:27 捲動元件選單

01:34 五格板的操作

相關連結


2023年8月21日 星期一

HTML5 FUN : 2023-08-16 更新

2023年8月21日 星期一

每次去分享時,我總會特別強調分享是一件快樂的事,而且分享後,收穫最大的是自己。2023-08-15、2023-08-16 兩天,在南投水里國小和兩次梯次的老師們分享了 HTML5 FUN 的工具、遊戲後,和以前一樣,蒐集到了一些增強的意見,回到家後,便開了電腦,將清單中的事項,一件件的「消滅」,底下是三天的成果:

手機記事本待辦事項的截圖

清單中的待辦事項,到目前,只剩兩件未完成。底下將已完成更新的部份截圖:

【更新】筆順練習「分享」功能中的顯示 QR Code,加入了下載功能,只要按一下 QRCode 右下角的下載圖示,即可將 QRCode 下載到電腦中;另外加碼,按一下 QRCode 的圖案,即可隱藏 QRCode:

筆順練習3加上QRCode下載的按鈕

【更新】幸運999 原來是比兩個人排出數字誰大,數字大的人贏,現在設定畫面中,增加了一個開關,可以自行設定是要比數字大的贏,還是數字小的贏:

幸運999加上比數字大還是比數字小的開關

【更新】HTML5 FUN 選單加上一個烘培機的小圖示,讓各個工具或遊戲,都能夠直接按這個圖示進入烘培機的頁面:

HTML5 FUN 選單加入烘焙機的圖示與連結

【更新】烘焙機的題庫編輯器加入刪除重複行的功能,按一下這個按鈕,就會一行行檢查題庫中是否有一樣的內容,找到就刪除,方便由試算表貼上的內容,快速去掉相同的題目:

烘焙機加入刪除重複行的按鈕

【更新】我說你猜支援國字加注音的題目,可以在題目預覽及字詞卡片上顯示直式注音在國字旁(目前選單中只能使用國字);另外也解決我說你猜在按「正確」或「跳過」按鈕,會有按到最後成績報告畫面中「重玩」或「選單」按鈕的問題。:

我說你猜支援國字加注音的格式的題庫

【更新】重組遊戲支援國字加注音的題目,可以在國字旁顯示直式注音;另外加碼,在玩的時候,左下角多一個開關,可以選擇交換字詞卡片的方式是用拖曳,還是按兩張卡片後交換:

重組遊戲支援國字加注音格式的題庫

【更新】PK2 的玩家名稱及分數欄的字型放大,並改用加框字,讓訊息可更清楚;PK(PK2)烘焙機的題庫範本加註可支援素材,提醒目前題庫只支援文字及圖片兩種素材:

PK2 讓玩家名稱及分數更醒目

以前閩南語有一句話「互相漏氣,求進步。」,分享的過程中,老師們總是很客氣,從沒有「漏氣」的情形,倒是有很多很多的正能量,這些能量讓人可以一直持續不斷地努力,讓寫程式、改程式是一件件有趣的事。鼓勵大家絕對要用力的分享下去,好東西,永遠要和好朋友分享,造福更多的學生。

相關連結

2023年8月20日 星期日

Life : 水里經濟旅社

2023年8月20日 星期日

這幾年很少去外面分享,五根手指就夠數了,今年去了三個學校:2023-02-09 石碇的永定國小、2023-07-04宜蘭的竹林國小及2023-08-15、08-16 兩日在南投的水里國小。前兩所學校都是三個小時的分享,加上距離不遠,當日來回即可;水里國小因為是兩梯次各一天六小時的分享,只能外宿了。

行前在網路上找了一下住宿的地點,由於白天都在上課,我的需求只是在晚上能有個地方睡覺就好了,住民宿實在貴又浪費,於是只鎖定小旅館。

提早一天出發,落腳在水里市場路中,一家名為「經濟旅社」的傳統旅社。看一下內裝實景:



空間不大的套房,看起雖舊,但是打掃得乾亁淨淨,一個晚上五百元,雖不提供早餐,但市場就在不遠處,走幾步路就能找到吃吃喝喝的地方。在市場路,那不就不好停車?這家旅社有一個大大的優勢,它有大大的庭院,車子可以停在它家的庭院中。老闆親切又健談,只能說它真的是一家經濟又實惠的「經濟旅社」。對我來說,要說缺點話,應該是我只需要電風扇,但是房內提供的是窗型冷氣;我喜歡安靜,窗型冷氣隆隆地吹,涼是很涼,但我受不了那聲音啊!所以兩晚我都只讓它吹到有冷房效果後,就關掉冷氣,然後開窗。

第一晚凌晨一點多開窗時,向天空一望,哇!不得了,久違的星空就在那兒!

2023-08-15 01:39 水里的星空

好景不浪費,就這麼拿起手機拍星空,哈!拍了一個多小時。手機隔著紗窗,將它卡在紗窗木框上,用手動模式 10 秒曝光,效果還不錯呢!

對照一下 Sky Map 的星空圖:

2023-08-15 02:07 水里 Sky Map

英仙座流星雨就在左上角的位置,但是那一個小時內,沒看到半顆流星。

第一天早餐去好友推薦的老店「阿塗麵店」,吃了乾麵、油豆腐(阿給)和肉骨肉湯;看大家都有加很多白色的醬,後來問了旅社老闆,才知道,原來那個醬是做米苔目的再來米米漿,再加入辣椒磨過後,所製作的辣醬,當地人都會加很多,哈!下回去吃,我也要嘗嘗辣醬跟米苔目。

住在當地的好處是上課不趕時間,不開車,散步兼逛街,徒步去不到一公里的水里國小。旅社出門後,右轉直走,沒多遠就是熱鬧的市場,那市場跟鹿港的市場感覺差不多,除了兩側的商家,路中央也有小販,然後機車照樣騎在人群之中。市場這條路是民族路,民族路一直往前走,過了一座橋,遠離了市場的喧囂,感受到不同的氛圍。

民族路過了橋以後,馬路緩緩的上坡,住宅就在路的兩側,其中有一座日式的建築,很有味道,但已殘破不堪;後來好友跟我介紹,才知道它其實是原本的郵局。這麼古樸的建築,放著毀壞,實在可惜啊!


走進水里國小,時間還早,就自己在校園裡逛了一下,寬闊的視野,站在操場的一角,有草地,有山景,有清新的空氣,孩子們能在這裡跑跑跳跳,光是這一點就值得了。

水里曾經繁榮過,還有「小台北」之稱,雖然繁華不再,來到這裡,住住小旅社,走一走,吃一吃在地小吃,是不錯的體驗。第二天上課,開車離開經濟旅社前,我還跟老闆說到,下回再來水里,還是會選擇到這裡來住。

相關連結


2023年8月12日 星期六

在 Padlet 放 HTML5 FUN 自製遊戲

2023年8月12日 星期六

 Padlet 是一個滿有意思的平台,可以在上面放各式各樣的媒材,至於用途,則端看每個人想拿來做什麼,有人拿來整理想法,有人拿來發布消息,拿來應用在課堂的討論、共作也是佷好的平台。那~我可以將自製的 HTML5 FUN 遊戲放到 Padlet 嗎?

如果自製的 HTML5 FUN 遊戲已經放在別的網站中了,利用 Padlet 在貼文中「附上連結」的功能,當然沒什麼問題。更棒的是 Padlet 有上載檔案的功能,而且上載到雲端的網頁開啟後,跟在我們由本磁碟開啟後的運作是一樣的,程式是可以正常執行的;不會像將網頁放到 Google 雲端硬碟,只能看到網頁的原始始;不會像現行的 Notion,以 Embed 上載網頁檔案以後,只能看到靜態的頁面,無法執行程式。

Padlet 可以上載網頁,HTML5 FUN 自製遊戲的工具「烘焙機」則可以將自製好的遊戲下載為網頁,關鍵就在這張戳圖中:

HTML5 FUN 烘焙機第三步驟的功能按鈕

HTML5 FUN 烘焙機的第三步驟中,可以複製要貼到網站文章中的遊戲程式碼(下方綠色按鈕),可以匯出遊戲設定檔(右上角磁片圖示),也可以下載遊戲網頁(左上角下載圖示)。所以我們只要按一下圖中紅色箭頭所指的下載圖示,就可以將自製的遊戲網頁下載到電腦中儲存了。

有了自製遊戲的網頁檔案了,就可以準備將檔案上載到 Padlet。在 Padlet 中按了加號「+」新增貼文後,先按一下圖中清單的「三個點點」,來展開更多附件內容:

Padlet 新增貼文的選項

在展開後的清單中,應該會有一個圖示是「上傳」:

箭頭所指的是 Padlet 上傳的功能鈕

「上傳」的按鈕按下去就對了!

選定之前已下載好的 HTML5 FUN 自製遊戲網頁檔案,將檔案上載到 Padlet 的雲端空間後,開啟在 Padlet 看板中建立好的新貼文,應該會在新的頁面中開啟已存放在 Padlet 雲端空間的自製遊戲,玩玩看吧!看看遊戲是否正常運作。

我們如果將開啟後的遊戲網址複製好,這個網址也可以貼到別的網站中。例如想在 Notion 中嵌入 HTML5 FUN 遊戲,就可以用 Padlet 來當遊戲的儲存空間;不然就得考慮 HTML5 FUN 烘焙機以 Google 試算表來儲存遊戲的方法(詳見:「雄:HTML5 FUN:自製遊戲啟動器」)。

申請 Padlet

如果想要申請 Padlet 來玩一玩,可以按一下這個帶有我是推蔦人訊息的連結:

哈哈哈~Padlet 有一個推薦的機置,每三個人使用上面這個連結去開新帳號,我們就都可以多一個「板」可以使用。

相關連結



2023年8月9日 星期三

HTML5 FUN:自製遊戲啟動器

2023年8月9日 星期三

HTML5 FUN  烘焙機是用來打造 HTML5 FUN 遊戲的小工具。利用「烘焙機」製作完的遊戲可以有三種方式將遊戲儲存:

  • 下載遊戲網頁。
  • 匯出遊戲設定檔。
  • 複製遊戲程式碼,並將程式嵌入自己的網站。

如果想更簡單地在網路分享自己的HTML5 FUN 遊戲,那就這樣做:

  • 將在烘焙機下載的「遊戲網頁」或是「遊戲設定檔」放到 Google 雲端硬碟。
  • 將檔案共用設定設為「知道連結的任何人」可檢視。

共用設定好,複製連結,然後利用以下的「HTML5 FUN 自製遊戲啟動器」製作遊戲的分享網址。

第四種方式是自2023.08.08 起,「烘焙機」提供製作可以將遊戲題庫及設定儲存在 Google 試算表儲存格的功能,試算表按照範例檔(這裡有範例檔案)的格式設計:

  • A欄放遊戲的提取代碼
    (以英文及數字自編一個不重覆的代碼)。
  • B欄放由烘焙機製作的題庫資料
    (烘焙機中需勾選「應用於 Google 試算表」)。
  • 試算表共用設定設為「知道連結的任何人」可檢視。

將烘焙機產出的資料貼到試算表中後,一樣的,將所需要的資料複製好,使用以下的「HTML5 FUN 自製遊戲啟動器」製作遊戲的網址。開啟製作好的網址即可自動載入遊戲來玩。

哪一種方式最簡單,哈!那肯定是直接將遊戲檔案放 Google 雲端硬碟,並設定共用最方便囉!快來試試這個「HTML5 FUN 自製遊戲啟動器」吧!

HTML5 FUN::Game Launcher

HTML5 FUN::自製遊戲啟動器

參數設定

雲端硬碟 [網頁檔、設定檔、試算表] 共用連結網址
工作表名稱
遊戲取用代碼 在   欄
【送出參數並製作網址】

遊戲網址
(按一下複製)

待辦清單

  • Google 試算表的儲存格最多只能放 50,000 個字元,如果題庫內容太多,可能會超過限制而無法置入儲存格;未來是否可以將資料分割後,置入不同的儲存格中。(2023.08.11 更新:烘焙機會自動將過長的資料切割,並加上跳格符號;直接將剪貼簿中的資料,貼入「B欄」的「遊戲設定」中,多的會自動貼到下一欄中)。

相關連結

    更新記錄

    • 2023.08.13 可以載入 Google 雲端硬碟中公開分享的遊戲網頁或是遊戲設定檔後,啟動遊戲。
    • 2023.08.11 測試烘培機中可以直接利用 Google 表單寫入資料到回應用的試算表,但是因為表單的限制,只能上載 32kb 以下的資料,沒有直接貼入試算表好。
    • 2023.08.10 可指定「提取代碼」是放在哪一欄中,不再限定 A 欄。
    • 2023.08.08 可以由公開分享的試算表中查詢儲存格中的遊戲設定,並啟動遊戲。


    2023年7月29日 星期六

    筆順練習QRCode產生器:由投影片解析國字清單

    2023年7月29日 星期六

    2023年2月南投縣江明勳老師發起的「生生用平板-師師有法寶-TPET共編」活動,為了能批次製作 HTML5 FUN 筆順練習的 QRCode,以 Google 簡報+擴充功能,開發了一個小工具「TPET-生生用平板-師師有法寶-筆順練習QRCode產生器」,利用這個 QRCode產生器,可以批次產生國語筆順練習用的 QRCode,QRCode產生器工具的網址及詳細介紹可以參考2023年2月的這篇文章:

    因為要更新舊投影片的國字清單,沒有原始資料供修改,於是幫 QRCode產生器的擴充功能再加上了「由現有投影片中解析筆順練習國字清單」。也就是我們可以由之前做好的筆順練習 QRCode 投影片,解析出「標題」和「國字清單」,修改以後,再重新製作 QRCode。

    底下將示範影片的關鍵時間點列出,可供快速觀看需要的片段:

    00:00 筆順練習QR Code產生器

    00:32 由擴充功能選單啟動產生器

    00:56 由試算表複製國字清單

    01:41 按鈕開始新增QR Code投影片

    02:06 如何由投影片解析出國字清單

    02:39 將投影片貼到QR Code產生器

    03:05 解析國字清單

    03:45 複製國字清單到試算表中

    03:55 使用選擇性貼上

    完整的影片請按:


    相關連結

    2023年7月24日 星期一

    HTML5 FUN烘焙機的使用 : 下載遊戲或設定檔

    2023年7月24日 星期一

     「烘焙機」是 HTML5 FUN 遊戲式題庫烘焙機(HTML5 FUN Homepage)的簡稱,它提供了三大功能,在自製好 HTML5 FUN 遊戲以後,我們可以下載遊戲網頁,開啟下載回來的網頁檔案,即可開始玩遊戲;也可以將遊戲的設定匯出成設定檔案,放到遊戲的資料夾中,並將檔名加入遊戲選單中,即可變成遊戲的題庫之一;或是複製遊戲題庫及啟動遊戲的語法,並將語法貼到自己網站的文章中,將可將 HTML5 FUN 的遊戲嵌入 Blogger 或是網站中。

    底下的影片,示範在使用烘焙機設計完遊戲以後,如何下載遊戲來玩,或是匯出遊戲的設定檔。

    影片的章節如下,按時間即可以跳到影片的該段落:
    (在 Youtube 觀看時,按「顯示完整資訊」,展開影片詳細資料點選)

    00:00 烘焙機的三大功能

    01:12 開啟烘焙機

    01:23 選取遊戲及題庫樣板設計遊戲

    02:07 試玩遊戲

    02:13 烘焙機第三步驟

    02:26 下載自製的遊戲

    03:09 下載遊戲的設定檔

    04:06 再看一次烘焙機的三大功能

    完整影片請按:

    相關連結


    2023年7月20日 星期四

    HTML5 FUN烘焙機的使用 : 設定遊戲參數

    2023年7月20日 星期四

     「烘焙機」是 HTML5 FUN 遊戲式題庫烘焙機(HTML5 FUN Homepage)的簡稱,它有題庫編輯器供編修自己的遊戲題庫,也可以用來設定遊戲的各種參數,讓遊戲有更多的變化,最後能將自己打造的 HTML5 FUN 遊戲下載到電腦中使用,或是將遊戲嵌入自己的網站裡。

    底下的影片,示範如何使用烘焙機的題庫編輯器來編修遊戲的題目,及如何設定遊戲的各種參數。

    影片的章節如下,按時間即可以跳到影片的該段落:
    (在 Youtube 觀看時,按「顯示完整資訊」,展開影片詳細資料點選)

    00:00 啟動烘焙機

    00:38 選擇要製作的遊戲

    00:42 選擇題庫樣板

    00:46 看題庫格式說明

    01:00 題庫原始碼編輯器的使用

    01:31 試玩遊戲

    01:46 使用圖形化編輯器與試算表來修改題庫

    02:30 設定遊戲參數

    02:44 將青蛙過河的青蛙圖示換成老虎

    02:51 找圖片並複製圖片的網址

    03:27 遊戲試玩

    03:55 讓青蛙過河可以念出題目及答案的文字

    04:50 結語

    完整影片請按:

    相關連結


    HTML5 FUN 烘焙機的使用:與試算表共舞

     「烘焙機」是 HTML5 FUN 遊戲式題庫烘焙機(HTML5 FUN Homepage)簡稱,我們可以利用烘焙機來打造自己的 HTML5 FUN 遊戲,在遊戲中置入自己的題庫,自訂遊戲的參數,然後將遊戲下載,或是嵌入自己的網站中。

    在HTML5 FUN 烘焙機的「圖形化題庫編輯器」,可以貼上由試算表複製的資料,並自動在欄跟欄之間加入遊戲題庫的「分欄符號」,如果資料內容是圖片及聲音的路徑,還可以變成縮圖或是代表圖示。

    底下的影片,示範烘焙機如何與試算表共舞,利用試算表預先建立的資料,放到遊戲中當遊戲的題庫。

    影片的章節如下,按時間即可以跳到影片的該段落:
    (在 Youtube 觀看時,按「顯示完整資訊」,展開影片詳細資料點選)

    00:00 開啟烘焙機

    01:10 選擇要製作的遊戲

    01:27 選擇題庫樣板(本示範使用兩欄式題庫)

    02:33 題庫格式說明

    02:53 常用快速連結

    03:10 題庫編輯器

    03:25 試算表的應用

    04:04 插入圖片網址(使用 pixabay)

    04:31 插入語音網址(使用Vocaroo)

    05:24 將試算表資料貼到烘焙機

    06:25 試玩遊戲

    06:43 結束遊戲

    06:57 快速複習試算表的操作

    完整影片請按:

    使用試算表可以輕鬆地將現有的題庫轉到 HTML5 FUN 的遊戲,如果有支援「出題光碟格式」樣板的遊戲,甚至也可以搭配出題光碟輸出成 CSV 格式來使用(當然要注意一下版權的問題)。此外,因為題目資料已儲存在試算表中,以後要重做遊戲,或是要改做別的遊戲,也會比較方便,值得一試。

    相關連結


    2023年7月11日 星期二

    HTML5:注音高手自訂答案

    2023年7月11日 星期二

    注音高手是2012年由江明勳老師發想,我寫程式完成的一個的注音練習小工具;現在可以在 HTML5 FUN 網站中試玩、下載;也可以使用「烘焙機」來自製遊戲。出題時,在題庫中輸入國字,還可以加上語音或圖片,學生看完題目,以畫面的虛擬注音鍵盤輸入正確的注音。目前程式比對玩家輸入旳注音是否正確時,會由一個國字注音的對照表中「查表」搜尋答案;「查表」的方式有一個小缺點,對照表可能不完全,造成玩家輸入的注音是對的,卻被判定為答錯。

    為了因應程式內建的對照表可能有所不足,所以在 HTML5 注音高手更新版中,題目設定的第四個欄位中,出題者可以自行輸入該題正確的答案(注音);有加入「第四欄」的題目,會以該欄的內容當比對答案的依據,而不再是查內建的資料庫;這樣子就可以無限延伸資料庫。當然囉!如果您願意,留個言,提示一下有問題的題目,我可以將它們新增到內建的「對照表」中,這樣子,大家就不用一個個地去加「第四欄」。

    以下用一個特別的例子(哈!非正式的注音),來說明如何使用題庫設定,題目的「第四欄」,自訂正確答案。

    例如,以前有的學生會叫我「雄雄」(ㄒㄩㄥˇ)(ㄒㄩㄥˊ)老師,「雄」這個字應該沒有三聲的「ㄒㄩㄥˇ」,我要故意讓它是對的,可以怎麼在題庫中設定?

    [圖1] 故意變調的「三聲」「雄」

    這邊先假設這一題的題目不加語音(第二欄位),也不加圖片(第三欄位),在題庫中,最簡單的設定是:

    雄雄

    但是上面的設定,除非使用者輸入「ㄒㄩㄥˊ ㄒㄩㄥˊ」(兩個二聲的),不然是不會過關的。想要使用三聲的「雄」,加上二聲的「雄」,題庫就必須改為:

    雄雄######ㄒㄩㄥˇ ㄒㄩㄥˊ

    修改過的題目設定中,國字之後加了六個半形的井字號,接下輸入的內容就在第四個欄位,輸入兩組注音(一個三聲,一個二聲,兩組注音之間有一個空格),這「第四欄」就變成了正確答案。

    [圖2] 烘焙機中修改題庫

    那如果想要加上有(ㄒㄩㄥˇ)(ㄒㄩㄥˊ)的語音呢?

    注音高手的題庫設定,如果沒有在題目中設定語音檔的路徑(第二欄或是第三欄),預設會使用 Google 的合成語音(TTS)來念出題目,所以「雄雄」,TTS 應該是會發出兩個字都是二聲的(ㄒㄩㄥˊ ㄒㄩㄥˊ),想要變調,只能自己錄囉!線上錄音的 Vocaroo 會是一個即時錄的好幫忙,而且 HTML5 FUN 有支援直接使用它的音檔分享網址,只要錄好音,複製網址,然後貼到注音高手「烘焙機」的第二欄位(第三欄也可以,程式會自動用路徑來判斷是聲音或圖片)中即可。變成類似這樣子的設定:

    雄雄##https://voca.ro/1cjwusoTRVaP####ㄒㄩㄥˇ ㄒㄩㄥˊ

    修改後,當本題出現時,會念出變調後的讀音;也會以改過的答案來核對。

    [圖3] 烘焙機中加入 Vocaroo 語音網址

    以上是如何利用注音高手題庫的第四欄位,來自訂標準答案的方法。歡迎在本文中留言,提供需要修正的語詞。

    註:在注音高手下載的壓縮檔案,注音國字對照表的檔案檔名是「phonetab.js」

    示範影片


    相關連結


    2023年7月6日 星期四

    HTML5:讓青蛙過河與打鬼遊戲念出題目與答案

    2023年7月6日 星期四

    七月四日上午去宜蘭縣竹林國小分享 HTML5 FUN,講題是【行動載具「玩」起來】,一位認真的老師問到「青蛙過河」和「打鬼遊戲」題幹的部份可以支援語音嗎?記得六月時,江明勳老師也有提過能不能讓「打鬼遊戲」念出題目,於是我又開了支票,允諾會讓這兩個遊戲的題幹支援聲音的內容。當天回到家,立即把在講課示範「我說你猜」如何使用「烘焙機」過程中發現的臭蟲,除掉並更新,沒半個小時,整個人就沒電了,只好去補眠兩個小時。晚上吃飽後,立即開工兌現自己開的支票。

    現在 HTML5 FUN 的「青蛙過河」與「打鬼遊戲」,題庫設定中,可以使用 mp3 檔案的路徑(.mp3)、Vocaroo 錄的語音來當題幹的內容,或是在文字加上 .tts (圖3),讓程式以合成語音的方式念出文字。

    [圖1] 打鬼遊戲聲音素材的題幹

    [圖2] 青蛙過河聲音素材的題幹

    [圖3] 「小狗.tts」可以變成語音題

    哈!只有這樣嗎?當然不只,向來我都會自己「加碼」的。在題庫設定中新增了兩個自訂參數:

    • question_text_speaking_enabled
    • answer_text_speaking_enabled

    這兩個參數如果設定為 true 時,就會啟動以 TTS 合成語音念出內容的功能:

    • question_text_speaking_enabled : 在出題或按播放鈕時念出題目的文字。
    • answer_text_speaking_enabled : 在答對時念出答案。

    至於要用什麼語言念出內容,就用以下兩個參數來設定 TTS 語言代碼:

    • tts_language : 題幹的 TTS 語言代碼。
    • tts_language_of_answer : 答案的 TTS 語言代碼。

    以上的自訂參數,都已經加到兩個遊戲的烘焙機中了,可以利用烘焙機的表單來選取。

    [圖4] 文字題,但可以用 TTS 念出內容的打鬼遊戲

    [圖5] 文字題,但可以用 TTS 念出內容的青蛙過河

    [圖6] 設定中勾選了「念出題目的文字」

    既然可以使用 .mp3 或 .tts 的語音題型,播放出題目的聲音了,為什麼還加上 question_text_speaking_enabled 和 answer_text_speaking_enabled 的功能?

    這兩種方式其實不一樣,應用的情境不同。

    使用 .mp3 或是 .tts 在題幹時,只會在畫面上方,題目顯示區中出現一個聲音播放器(圖1、圖2),不會有任何文字;而使用 question_text_speaking_enabled 時,題目顯示區中,不但會出現原有的文字,在右下角還會有聲音播放器,供重播語音(圖4、圖5)。

    所以這兩者,一個純用聽覺,另一個是聽覺加上視覺;要選用哪一種方式出題,可能要看使用者的需求了。

    影片示範

    相關文章


     
    雄::gsyan © 2009. Design by Pocket