繼上次的「雄:HTML5:真分數小教具」後，這是另一個分數小教具。在觀察等值分數時，我們會使用長條形的分數條，甚至分數牆。這一個分數條，可以自行新增、刪除來調整需要的數量，也可以自行控制每一長條平分的數量及是否要顯示數字；設定完後，還可以將結果，以網址的方式分享給別人，或是自行留存。
|
| HTML5:分數條:按三角形後會出現工具列 |
需要調整時，按一下分數條下方的三角形，畫面就會出現工具圖示；如果拖曳三角形，則可以改變著色的範圍。
下方的工具列，由左而右依序為：
- 刪除選取的分數條。
- 在下方新增一個分數條。
- 顯示／隱藏數字。
- 「減號」：減少平分數量。
- 「加號」：增加平分數量。
如果拖曳整個「板子」，則可以改變它擺放的位置。
除此之外，在畫面的右下角有一個「分享」的按鈕，按下去以後，會將目前的所有分數條的狀態與設定輸出成一個網址，並複製到剪貼簿，老師可以將這網址給學生使用，學生也可以將自己操作好的結果再以分享的方式，回傳給老師。
按下面的按鈕，來試試這個分數小教具吧！
分隔線以下的一堆文字，純為記錄用，可以不用理會。
開發筆記
在分數條中有兩個比較特別的地方，值得記錄一下來，一是調整著色部份的三角形其實是利用文字元件的邊框畫出來的，只要這樣的 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;
相關連結
更新記錄
- 2024.04.17 QR Code API 改用 QuickChart。
- 2023.01.30 在畫面右下角加入分享的按鈕，可以將目前的配置製作成網址分享。
- 2023.01.19. Blogger 版。
- 2023.0.115. 元件版。
發表文章
沒有留言:
張貼留言