HTML5 FUN 數學小白板是 2023年1月建立的一個實驗專案，主要是想做一個可以不斷擴充模組的數位學習工具。哈！當然還是那個壞習慣，沒日沒夜地衝了一陣子，因為又把時間花在別處，就擱著沒動了。隔了幾個月，這兩天又拿出來加了個骰子的模組，稍微整理一下目前的內容，記錄一下。
 |
| [圖1] HTML5 數學小白板 |
物件簡介
HTML5 FUN 數學小白板中的物件，主要可以分為兩大類：
- 容器：可以將一般物件拖曳到容器中，將物件加入容器通常會有特別的功能；將其它物件拖離容器的範圍後，物件就會由容器中移出。
- 一般物件：除了運算的物件，大部份的物件都代表著某個數值。一般物件可以拿來進行計算。
目前 HTML5 FUN 數學小白板可用的物件簡介如下：
小白板
小白板元件是一個「容器」(圖2)，我們可以將其它的物件拖曳到「小白板」上，如果有「等號」的物件，「小白板」下方會多一個「送出算式」的按鈕，按下這個按鈕，「小白板」會計算並檢驗等號、大於、小於等物件左、右兩側的數值是否符合算式或比較式。
 |
| [圖2] 具有驗證算式功能的小白板容器 |
數值天平
數值天平是一個「容器」(圖3)，我們可以將帶有「數值」的物件拖曳到天平的秤盤上疊在一起，天平可以依數值大小的改變而作反應。
 |
| [圖3] 可互動的數值天平 |
分數條
它是一個「容器」，可以將分數條拖曳到分數條中，就能進行多個分數的比較，可以應用在等值分數的學習中。拖曳分數條的「小三角」，可以改變著色的範圍。如果對準分數條「長按」，會出現設定的選單，設定分割的方式及顏色等選項。
運算子物件
運算子物件可以應用在表達計算式中；對著運算子物件長按不放，即可出現設定的選單。
整數物件
數數物件用來代表某個物件上數字的數值；對著物件長按不放，即可出現設定的選單，調整它的數值。
數字型分數物件
數字型分數物件用來顯示真分數或是帶分數；對著物件長按不放，即可出現設定的選單，調整它的數值。
圖形式分數物件
圖形式分數物件有圖形、直條、橫條三種圖形，用來表示真分數。對準分數圖形的某一分割區按一下，可以著色，或是取消著色。對著物件長按不放，即可出現設定的選單，可以選擇圖形形狀，設定圖形大小，調整它的數值，甚至複製圖形。
骰子物件
骰子物件上的點數就代表它的數值，如果按一下，它就會重新取得新的數值。
五格板
五格板中可以加入其它元件，如果將一個五格板加入另一個五格板中，它們就會合在一起，變成十格板；再加一個五格板就變成15格板......以此類推。
如果在五格板的格子中按一下，它會填入一個前一次使用的元件，預設是紅色的圓圈；長按的話，會出現要填入的元件選項，可以選擇填一個，或是填滿空格。
圓圈及圖示元件
這個元件可以是單色實心的圓圈，或是小圖示；加好的只要再長按，即可更換。目前無論是圓圈或是圖示，它們代表的數值都是１。
時鐘元件
時鐘元件以圖形指針式時鐘為主，可以加上數字型的文字框在中間；如果設定為自動模式，會跟著系統時間走，手動模式則可以拖曳指針來設定要顯示的時間。時鐘元件的介紹請參考這一則：
遮簾元件
塗鴉工具
塗鴉工具在畫面的右側，按一下淡紫色的開關即可展開或是收合。工具展開時，就可以使用裡面的選色器、畫筆、橡皮擦及清除所有塗鴉的小工具。塗鴉的內容會疊在所有元件的最上方，使用「分享」中的「下載圖片」時，也會包含塗鴉的內容；不過，使用「分享」中的 QRCode 及複製網址，則因為容量大小的限制，無法包括塗鴉內容哦！
使用與移除物件
要使用前述的那些容器，或是一般物件，都可以從畫面左側的「陳列區」中，拖曳進畫面中央；如果不想使用了，就將物件拖曳到畫面右下角的「回收區」中刪除。
如果想一次清除畫面中的所有物件，就長按右下角的「回收區」，會出現清除全部的對話框。
操作影片
玩一玩
光看怎麼會過癮，想體驗一下 HTML5 FUN 數學小白板的功能，就按底下的按鈕進入，有什麼心得或是建議，歡迎在本篇最下方旳留言處留言。
PLAY
相關連結
更新記錄
- 2024.04.17 QR Code API 改用 QuickChart。
- 2023.12.13 時鐘加上雙色背景的舖色選項
- 2023.12.06 時鐘的大刻度與數字改用時針的顏色
- 2023.11.22 圖形分數著色的部份改為透明的，被按下的物件加入最上層物件群前，先將其它有同樣設定的清除，以免混亂。
- 2023.11.01 塗鴉支援多點觸控，可多個人同時塗鴉
- 2023.10.22 jsurl 解碼前先檢查參數是否被 escape 過, 有的話就先 unescape 。
- 2023.10.15 時鐘的三支指針都可以單獨隱藏；如果只剩時針時，只會顯示12大格的刻度；只剩一支指針時，拖曳指針畫出的旋轉角不會有箭頭，拖曳指針端點才會有箭頭；解決時鐘旋轉角及指針是否隱藏的設定未匯出的問題。
- 2023.10.03 QR code 改用類似短網址的機置，會將元件資料儲存到試算表中，並取得一個 ID，用來製作 QR code，學生掃瞄完 QR code 後，會以 ID 查詢試算表資料，取得元件的設定並呈現在載具中，以上類似短網址的機置；老師在看到 QR code 時，同時在剪貼簿中會自動複製一份完整的網址(非短網址)；基本上每一個載具在當次只會使用到試算表的一列，如果使用量過大(試算表能儲存四萬列)，再加入自動刪除舊資料的功能。
- 2023.09.24 解決跨載具時座標計算基準不同的問題，原本都是使用螢幕座標，改用場景的座標，才不會因為瀏覽器對上方網址列及按鈕列是否包含在 innerHeight 而影響比例。
- 2023.09.18 加入遮簾元件；解決分數、整數元件無法匯入的問題(主因是之前改了元件的設計，匯入的程序未修改到)。
- 2023.09.13 右側加入塗鴉工具列，展開時，進入畫模式，可以使用畫筆，收合時恢復為一般模式。
- 2023.09.07 加入時鐘的元件。
- 2023.08.26 分享改用三項選單: 建立 QR code、複製網址、下載為圖片。
- 2023.08.25 可以建立多個分數牆；整數元件可以一次加減10或是加減100；小白板支援 >、<、>=、<= 和 = 的比較式；天平及小白板加入音效。
- 2023.08.24 分享功能支擾分數條；天平如果兩邊有放東西，而且一樣重時，中央會亮綠色提示。
- 2023.08.23 畫面右上角多一個分享的圖示，按下去以後可以分享當時的內容，網址會自動複製到剪貼簿，並顯示 QRCode。(
註: 分享的功能目前暫不支援分數條) - 2023.05.22 加入骰子。
- 2023.01.09 初稿。
發表文章
沒有留言:
張貼留言