教科書上有好多生物的圖需要解說，我上課時有個需求是希望先遮蓋這些文字，然後可以隨選點開進行解說。
這件事以前我怎麼做呢？ppt上有動畫功能可以製作，或是現在觸控螢幕的應用程式也有可以製作的。
好的，假設作完了，但是有另外一個需求是想要讓學生可以拖曳文字去標註圖，練習看這些圖，有沒有程式可以做呢？有啊，我目前是用moodle的測驗題做這件事，或是想辦法用AI做一個程式來弄啊。
但是啊，這件事就是一直重複作工啊？有沒有一勞永逸的方式呢？
找到這些核心問題之後，接下來就是用程式實作了，這次用了一些新技術來堆疊，再加上後期的手工，終於完成了這個專案。
https://chihhsiangchien.github.io/bioannotator/
1. 這裡有國中生物課本幾乎所有需要練習的圖
2. 你可以上課時用toggle模式進去單張圖，適合上課時教學使用，也可以是自學工具。學生可以看著圖片，試著回想各部位的名稱，然後點擊標示點來顯示或隱藏答案，即時的自我檢測能有效加深記憶，可以用在課前預習和課後複習。
3. 你可以開drag模式做拖曳練習，適合上課互動，例如讓學生上台拖曳練習。在這個模式中，所有的構造名稱標籤會被打亂。學生需要將正確的標籤拖曳到圖片中對應的位置上。有即時回饋告訴使用者放對了嗎？也有計時與計分：遊戲會記錄您的作答時間與分數，錯誤的嘗試會被扣分，增加了一點點的趣味性，讓使用者追求更高的準確率與速度。
4. 你也可以針對drag模式開啟單頁連結或qr code給學生做練習，完成的教材會產生專屬連結與 QR Code。頁面單一，沒有其他頁面的連結。學生用手機或平板一掃就能立即進入遊戲，讓課堂互動與評量變得簡單。
5. 如果是要複習使用，也有所有拖曳遊戲的頁面，可以一覽練習，也有簡單的計分模式。
所有教材其實都是同一份json做的，我自己有開另外一個編輯頁面進行標註資料，然後用程式直接生成兩種不同呈現模式，滿足教師教、學生預習、複習到自我測驗的完整需求。
https://chihhsiangchien.github.io/bioannotator/#/admin
這個頁面多了可以自己編輯文字標籤的功能，不過這單純給我自己本機上使用，因為編輯好的json檔我還要再存起來上傳雲端才可以用，所以一般使用者根本用不上。
