2023年1月30日 星期一

HTML5:分數小教具:分數條

2023年1月30日 星期一

繼上次的「雄:HTML5:真分數小教具」後,這是另一個分數小教具。在觀察等值分數時,我們會使用長條形的分數條,甚至分數牆。這一個分數條,可以自行新增、刪除來調整需要的數量,也可以自行控制每一長條平分的數量及是否要顯示數字;設定完後,還可以將結果,以網址的方式分享給別人,或是自行留存。

HTML5:分數條:按三角形後會出現工具列

需要調整時,按一下分數條下方的三角形,畫面就會出現工具圖示;如果拖曳三角形,則可以改變著色的範圍。

下方的工具列,由左而右依序為:

  1. 刪除選取的分數條。
  2. 在下方新增一個分數條。
  3. 顯示/隱藏數字。
  4. 「減號」:減少平分數量。
  5. 「加號」:增加平分數量。

如果拖曳整個「板子」,則可以改變它擺放的位置。

除此之外,在畫面的右下角有一個「分享」的按鈕,按下去以後,會將目前的所有分數條的狀態與設定輸出成一個網址,並複製到剪貼簿,老師可以將這網址給學生使用,學生也可以將自己操作好的結果再以分享的方式,回傳給老師。

按下面的按鈕,來試試這個分數小教具吧!


分隔線以下的一堆文字,純為記錄用,可以不用理會。



開發筆記

在分數條中有兩個比較特別的地方,值得記錄一下來,一是調整著色部份的三角形其實是利用文字元件的邊框畫出來的,只要這樣的 CSS 就能畫面三角形:


.arrow {
  width: 0px;
  height: 0px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 28px solid green;
}

重點是底下的邊框最粗,左、右兩側稍細,上面則為 0,這樣子就畫出了上面尖尖的三角形了。形狀則調整兩個 14 和 28 的比例。

另一個則是每一個長條中間均分的格子,也是利用 CSS 的「background-size」、「background-image」畫出來的,因為分數條的需求是在橫向等距畫出直線,所以假設分數條的大小是 600x60,然後要畫出等分為六的分數條,每一格就是 100x60,就套用這樣的設定:

.rect {
  background-size: 100px 60px;
  background-image: linear-gradient(to right, black 2px, transparent 2px), linear-gradient(to bottom, black 2px, transparent 2px);
}

依上面的設定,它會由左向右,每 100px 畫出 2px 寬的黑色直線,直到分數條的右邊端點;由上而下,每 60px 畫出 2px 寬的黑色橫線,直到分數條的底部。

使用 LimeJS frame work 開發的好處是很多 CSS 的問題都不用傷神;但也因此而少了磨鍊的機會。所以這個小教具是先有元件版,才又自我挑戰,不使用 frame work,一字一字的堆出來。其中耗掉最多時間的地方是在處理拖曳物件的部份,「相對位置」、「絶對位置」,和在一起,實在不好玩。筆記一下幾個跟計算位置相關的關鍵字

  • offsetLeft、offsetTop
  • scrollLeft、scrollTop
  • clientX、clientY
  • getBoundingClientRect

滑鼠事件與觸控事件取得 clientX、clientY 的方法也不同,以 clientX 為例,可以用這樣子取得:

var clientX = e.clientX||e.touches[0].clientX;

同理,觸發事件的物件也可以用這樣取得:

var target = e.target || e.touches[0].target;


相關連結

更新記錄

  • 2023.01.30 在畫面右下角加入分享的按鈕,可以將目前的配置製作成網址分享。
  • 2023.01.19. Blogger 版。
  • 2023.0.115. 元件版。


2023年1月21日 星期六

Life : 2023 恭賀新禧::萬事如意

2023年1月21日 星期六

跟小孩子說:「讀過書的人,春聯當然要自己寫。」,自 2019 豬年起,家裡的春聯便開始自己寫,還加上生肖摺紙當裝飾。就這樣子豬、鼠、牛、虎,來到免年了,當然不能免俗。

2023-01-21 免年春聯

之前總為了撕下舊春聯,也把門上的漆剝掉而傷腦筋,去年改成在春聯背後貼上磁鐵條,這樣子好黏又不怕破壞門上的油漆,試了一年,「年獸」果然沒有將春聯偷走,所以今天再度如法泡製。

把前三年的照片順便找出來,放在這一篇中:

2022-01-31 虎年春聯

2021-02-11 牛年春聯

2020-01-24 鼠年春聯

2019-01-30 豬年春聯
哈~是的,對子沒換,因為當初可是精心挑選的,筆畫比較不複雜,然後,不用再重新練字啦!看!多麼「精打細算」。

最後祝福大家新年快樂、萬事如意,最重要的是,閤家平平安安、健健康康。



2023年1月8日 星期日

HTML5:Math:幸運999

2023年1月8日 星期日

 給你三張數字卡,要如何排列,才能得出最大的數呢?

如果一次拿到全部的三張數字卡後,可以隨意調整位置;跟一次只能拿到一張數字卡,並且在拿到卡片時立即定位,定位後即不可以換位置,排列的策略又會有所不同。

HTML5:Math:幸運999的畫面

遊戲規則

這個「幸運999」的遊戲是個抽牌、排數字,比較大小的遊戲,遊戲規則如下:

  • 輪流利用轉盤轉出數字,並將數字放入空的位置中。
  • 所有位置都填滿後,比較拼出的兩個數字的大小。
  • 數字比較大的一方,可以得到兩個數字相減後的結果為加分的數量。
  • 結束一回合後,繼續輪流抽牌。
  • 比完設定旳回合數後,遊戲結束;分數比較高者為優勝者。

遊戲設定

幾位數字: 3

比幾回合: 3


相關連結

更新記錄

  • 2023.01.08 發布。
  • 2023.01.07 初版。

2022年12月26日 星期一

JavaScript: Touch 和 Mouse 事件的觸發順序

2022年12月26日 星期一

以前 LimeJS framework 寫的 程式中遇過設了 click 事件的處理程序,在 iOS 中沒有執行的情形,當時也沒去深入研究,索性就避免使用 click,改以 touchstart 和 mousedown 來取代。這兩天為了解決「HTML5 分數小教具」在行動裝置上會滑動的問題,監控了最底層元件的 touchstart、touchmove,哈!在 iOS 中的分數小教具,所有的按鈕通通失效了,想想,多半是因為 click 的動作中有含 touchstart 的部份,而它被底層元件攔劫走了,就無法進行後續的程序了。

底下就來測試一下,touchstart、touchend、mousedown、mouseup 和 click 到底依什麼順序來被觸發?

在電腦或是有觸控螢幕的載具中按一下底下虛線方塊中的任何一點,看前面幾個事件出現的順序如何?


值得再進一步觀察的是,在電腦版跟手機版的結果其實是不同的,可以比較看看。

此外,如果在 touchstart 觸發時,加入「preventDefault()」,改變了原有觸發的程序,上面的結果又會有所不同。(註:如果操作的裝置沒有觸控的功能,底下可能會跟前一個實驗結果一樣。)


經過前面的實驗,可以知道,在行動裝置中,因為有觸控功能,是以 TouchEvent 為主,在電腦中則是 TouchEvent 和 MouseEvent 各自獨立運作;在行動裝置中,如果在第一個會觸發的 touchstart 中,呼叫了 event.preventDefault(),mousedown 及 click 就都不會再繼續觸發了,反之則會按順序觸發。

在 LimeJS framework 中,最底層的 director ,為了防止在行動裝置中針對其上的物件操作時,會讓整個畫面滑動,所以監控了 TouchEvent,同時也在 touchstart、touchmove 事件中,執行了 event.preventDefault(),所以如果沒有對應的事件處理程序,搶在 director 前處理,就會造成 click 事件失效。

相關連結

2022年12月22日 星期四

HTML5 : 分數小教具

2022年12月22日 星期四

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

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

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

HTML5 Fraction 的畫面


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



1
8

相關連結

更新記錄

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

 
雄::gsyan © 2009. Design by Pocket