HTML5 : 分數小教具

心血來潮，和這一陣子成為話題的 OpenAI ChatGPT 在半夜研究起程式，我先問了如何利用 JavaScript 畫出能表示分數的圓形圖，接著加入按下某一個扇形時，扇形可以變成指定的顏色，然後給一個完整的範例。這一次全程都用破破的英文對話，反正只要關鍵字對了，東西就能產出了，感覺用英文可以比較精準地抓到重點，而且程式碼也不會不時地出現簡體字。

AI 給的範例如何呢？哈！看似完整，害我以為它真的寫好了，一個分成八等份的圓有照設計畫出八個紅色的扇形，不過，在某一塊按下後，卻全部變成綠色，而不是按下去的那一塊變色而已。查了一下 AI 給的程式碼，它在畫圖時，根本沒有指定哪一塊，當然又變成全部變色了。沒關係，大架構有了，細節我自己來修改就快了。

經過一天的測試、調整，添加功能，HTML5 分數小教具大致完成了。這個分數小教具可以自己選擇要採用哪一種形狀的圖形；再利用加號、減號的按鈕來切割圖形；接著只要在圖形上按一下，即可選取或不選取該塊，被選取的會變成紅色，同時分子也會自動調整數值；分子和分母上方有遮板，按一下，即控制要蓋牌或掀牌；也可以使用下方功能按鈕來同時掀開、蓋上分子和分母。

HTML5 Fraction 的畫面

來玩玩這個我和 ChatGPT 首次合作的小工具吧！

1

8

?

?

2022.12.21.v.0.1 by gsyan

相關連結

• 雄 : HTML5 FUN : 數學小白板

• 雄:HTML5:分數小教具:分數條

• 雄 : HTML5 FUN 精選集

更新記錄

• 2022.12.22 解決按扇形邊線時，分子數字沒有增減，但扇形會變色的問題；支援直拿的版面，由上而下，依序為：分數、圖形、工具)。
• 2022.12.20 初始。