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 時，會先將資料儲存在網路中，改以類似短網址的方式運作，並同時將原始長長的網址複製到剪貼簿中；所以有需要保存設計供下次使用的需求，請自行將剪貼簿中的網址貼到自己的文件中保存。

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

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

[圖3] 2023.08.27 分享功能選單

新功能介紹影片

影片１

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

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

00:20 天平的新功能

00:49 分數條的新功能

01:31 小白板的新功能

01:46 整數元件的新功能

02:36 分享的功能

影片２

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

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

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

00:43 分數條變分數牆

01:05 清空畫面的功能

01:27 捲動元件選單

01:34 五格板的操作

相關連結
By at 沒有留言:
標籤: , ,

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 讓玩家名稱及分數更醒目

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

相關連結
By at 沒有留言:
標籤: , , ,

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

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

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

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

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


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

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

相關連結
By at 沒有留言:
標籤:

2023年8月12日 星期六

在 Padlet 放 HTML5 FUN 自製遊戲

2023年8月12日 星期六

【註】

2024.11.13 有網友表示，原來放在 Padlet 可以玩的遊戲，現在都變「下載」而不能玩了。經測試，目前的狀況是無法使用本文中的方法。

替代的方案，建議可以將烘焙機製作的遊戲檔案上載到 Google 雲端硬碟中，或是直接填 Google 試算表來命題，再搭配使用


原文開始

----

 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 有一個推薦的機置，每三個人使用上面這個連結去開新帳號，我們就都可以多一個「板」可以使用。

相關連結
By at 沒有留言:
標籤: , ,

2023年8月9日 星期三

HTML5 FUN:自製遊戲啟動器

2023年8月9日 星期三

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

  • 下載遊戲網頁。
  • 匯出遊戲設定檔。
  • 複製遊戲程式碼，並將程式嵌入自己的網站。
製作線上遊戲的「嵌入自己的網站」困擾了不少人，底下有更簡單的方法，不需要有自己的網站。

▋ 更簡單的方法

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

🚀 方法1：利用試算表就能設計遊戲

利用試算表來填寫所有遊戲設定及遊戲題庫，這是 2025.02.24 開放的新設計方法，只要先建立好範例試算表的副本 (範例請往下找)，選擇想設計的遊戲工作表，修改遊戲題庫及設定。將試算表共用為 [任何知道連結的人] [檢視者]，最後複製瀏覽器網址列的網址，貼到遊戲啟動器就能完成一個遊戲。目前支援的遊戲有：pk、pk2、投籃高手、足球高手、青蛙過河、打鬼、搶救公主等 8 個 pk 系列８合１遊戲，加上注音高手、Speaking、聽音辨字、戳戳樂、填字遊戲、大家一起來、對對碰、我說你猜、造句靈感產生器、單字高手、English1200、Bingo、Monster、樂透機、幸運轉盤、重組遊戲、漢字五子棋及筆順練習。試算表就能管理遊戲，結合底下的方法2，還能當遊戲選單，強烈推薦，值得一試！

🚀 方法2：烘焙機語法貼到試算表

「烘焙機」提供製作可以將遊戲題庫及設定儲存在 Google 試算表儲存格的功能(自2023.08.08 起)，試算表按照範例檔的格式設計：

  • Ａ欄放遊戲的提取代碼
    （自訂一個不重覆的代碼，可用中文，但建議字數不要太多）。
  • Ｂ欄放由烘焙機製作的題庫資料
    （在烘焙機中按【查看合併後的原始碼-自動複製到剪貼簿】）。
  • 試算表共用設定設為「知道連結的任何人」可檢視。
註：此方法也可以在 B 欄中，全部貼入 [🚀 方法1] 製作的遊戲試算表網址，然後利用遊戲啟動器製作遊戲選單。

🚀 方法3：設定檔放雲端硬碟 

注意！方法3因雲端硬碟的異動，已無法使用 (2026.03.27 補註)

  • 將在烘焙機下載的「遊戲網頁」或是「遊戲設定檔」放到 Google 雲端硬碟。
  • 將檔案共用設定設為「知道連結的任何人」可檢視。(如果整個資料夾都是遊戲的網頁或是設定檔，也可以將資料夾設為共用，然後複製資料夾的共用連結，可製作成遊戲選單)

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

▋ 範例試算表

【範例檔案】👉 按這裡開啟試算表檔案 👈(請自行建立副本)

✂️ 在範例試算表中選定遊戲範本，修改工作表中黃色標記的設定與題庫內容後，複製試算表的網址。

✂️ 「或是」在範例試算表中選 [選單範例]，將烘焙機產出的資料貼到試算表儲存格中後，複製試算表的網址。

使用以下的「HTML5 FUN 自製遊戲啟動器」，將前面 ✂️ 二選一，複製好的試算表網址，貼到「參數設定」的輸入區中，即可製作遊戲的網址。

開啟製作好的網址即可自動載入遊戲來玩。

▋ Let's go ～～

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

HTML5 FUN::Game Launcher

HTML5 FUN::自製遊戲啟動器

參數設定

雲端硬碟 [試算表/網頁/設定/資料夾] 共用連結網址
遊戲取用代碼 (欄位:   )
代碼: 
【送出參數並製作網址】

遊戲網址
(按一下複製)

解說影片

🎬【影片1】完全以試算表來設計遊戲，再利用遊戲啟動器製作遊戲網址及 QRCode :

🎬【影片2】雲端硬碟的檔案或是資料如何製作遊戲網址及 QRCode可以觀看以下影片：

🎬【影片3】以下影片介紹如何以 Google 試算表來儲存所有的遊戲，再使用遊戲啟動器來製作遊戲的網址：

🎬【影片4】以下影片介紹如何一次設定試算表所有儲存格的列高：

相關連結

    更新記錄

    • 2025.02.28 啟動 8合1 的遊戲以後，左上角會多一個切換遊戲的選單按鈕(試玩時不會出現)。
    • 2025.02.27 試算表模板新增對對碰、我說你猜、造句靈感產生器、單字高手、English1200、Bingo、Monster、樂透機、幸運轉盤、重組遊戲、漢字五子棋。
    • 2025.02.25 試算表題庫如果語音是用 Vocaroo 線上錄音的網址，會自動轉為可使用的 mp3 網址；試算表模板新增聽音辨字、戳戳樂、填字遊戲、大家一起來。
    • 2025.02.23 支援直接以試算表來設定遊戲及題庫，包括 pk、pk2、投籃高手、足球高手、青蛙過河、打鬼、搶救公主等 8 個 pk 系列遊戲，及注音高手、Speaking。
    • 2025.02.07 支援啟動筆順練習，可以由試算表中讀取練習清單及設定；B 欄如果是試算表的網址，會當作選單網址來處理，所以選單可支援巢狀結構；在選單的最後面加入一個空白的選項，以免最後一項被火箭的圖示遮敝。
    • 2024.11.12 試算表題庫如果超過一個遊戲，可以選擇「所有遊戲」的選項，啟動遊戲會自動製作遊戲選單。
    • 2024.11.11 可使用 Google Drive 的資料夾共用網址，會自動找出 .html、.htm、.js、.txt 來製作遊戲選單。
    • 2024.11.09 試算表的遊戲代碼改由清單中選取的方式輸入，可順便檢查試算表是否存在，並減輸代碼打字的問題。
    • 2024.11.07 試算表當資料庫可以在儲存格貼入編碼過，或是未編碼的題庫資料；新增顯示遊戲 QRCode 的功能。
    • 2024.11.06 Google Drive 下載文字檔的程序(權限)有所變動，改由文字檔預覽的內容來讀取遊戲設定。
    • 2023.08.13 可以載入 Google 雲端硬碟中公開分享的遊戲網頁或是遊戲設定檔後，啟動遊戲。
    • 2023.08.11 測試烘焙機中可以直接利用 Google 表單寫入資料到回應用的試算表，但是因為表單的限制，只能上載 32kb 以下的資料，沒有直接貼入試算表好。
    • 2023.08.10 可指定「提取代碼」是放在哪一欄中，不再限定 A 欄。
    • 2023.08.08 可以由公開分享的試算表中查詢儲存格中的遊戲設定，並啟動遊戲。
    By at 8 則留言:
    標籤: , ,
    訂閱： 文章 (Atom)
     
    雄::gsyan © 2009. Design by Pocket