36 websim製作班級小管家系統

(2025/08/28)

快開學了，去年的這個時候第一次使用websim ai寫了一個【學生上課表現的評分系統 】，一開始使用還不錯，後來發現還是有一些問題需手動去修改，因此想說要開學再來寫一個比較完整的，也順便再學一下如何利用AI寫程式。

這次完成的作品，我覺得很好用，請踴躍測試：

• 測試網址：https://wenyu168.github.io/homework.github.io/class_manager/ 

• 檔案下載(可本機執行)：https://educase.kh.edu.tw/s/2NNNFHQK 

• 教學影片：https://youtu.be/6SwaMAMOluo  (歡迎訂閱)

一、websim的再體驗

其實現在的AI越來越聰明，寫一個【學生上課表現的評分系統 】的網站，真的是非常簡單！本來想改用最近很紅的Canva AI來寫這網站，但之前一直找不到他的程式碼！(不知近來有沒有比較好找)，後來想一想還是用以前用過的websim AI再來試試，如果不行再換其他的來試！

• websim AI重新摸索

  • 網址：https://websim.com/  一樣使用Google帳號登入

• 建立新專案

• 選擇模型

  • 這次最主要以免點數的Gemini 2.5 Flash Thinking，我想使用Gemini的Canvas應該也可以完成此作品！！

  • 因為我一開始像以前一樣使用Sonnet 4(要500點數)模型，但只問了一句，就不能再問了，所以接下來都是用這3個免點數的模型

• 開始與AI互動

  • 第一句prompt：請模仿classdojo製作一個學生上課表現加扣分的網頁 

• • 接下來就開始與AI對話，根據自己的需要去下Prompt，直到滿意為止 

• 互動過程

  • 雖然使用的是免點數模型，但大概對話了十幾次後，反應速度會漸漸變慢

  • 這時可以改用另兩個免費模型試試，雖然中途換了模型，但並不會上下就連接不上

  • 中間一直在修BUG

  • 我一共花了兩天的時間，互動了176次，終於完成了此系統！！但後來錄影時，不小心把這專案給刪除了！！

二、班級小幫手的使用說明

• 班級小管家測試與下載

  • 測試網站：https://wenyu168.github.io/homework.github.io/class_manager/ 

  • 檔案下載(可本機執行)：https://educase.kh.edu.tw/s/2NNNFHQK 

•  第一次使用

  • 可以直接從上面連結進去

  • 也可以下載上面檔案，解壓縮後，點擊index.html檔

• 第一件事：先【新增班級】/ 輸入【班級名稱】

• 加入學生名單 / 直接輸入學生名字(座號可加在後面)

• 修改下拉選單內的設定

  • 本系統有3個下拉式選單，內容可自訂，大家可針對自己的需求去設定，分別：

    • 特殊表現記錄預設選項

    • 連絡簿重要資訊預設選項

    • 連絡簿回家作業預設選項

• 最後完成的基本畫面

• 功能總覽：

  • 基本功能

    • 可設定多個班級，方便科任老師使用

    • 顯示學生得分

    • 針對學生表現加扣分

    • 設定請假或返校(會記錄於特殊表現記錄)

    • 是否顯示學生特殊表現記錄(預設不顯示)

    • 記錄學生的特殊表現(可用下拉式選單加入，也可手動加入)

  • 額外功能

    • 抽籤功能

    • 倒數計時功能

    • 聯絡簿功能

    • 作業檢查功能

    • 資料匯入匯出功能

• 基本功能說明：

  • 顯示學生得分

  • 學生加扣分

  • 設定請假或返校(會記錄於特殊表現記錄)

  • 是否顯示學生特殊表現記錄(預設不顯示)

  • 記錄學生的特殊表現(可用下拉式選單加入，也可手動加入)

• 聯絡簿功能說明：

  • 可利用下拉式選單或手動輸入來公告【重要資訊】及【回家作業】

  • 可全螢幕顯示聯絡簿內容，方便學生抄寫

  • 也可以改變日期去看其他時間的【重要資訊】及【回家作業】

• 作業檢查功能說明：

  • 可針對前一天的【回家作業】進行【未繳交】、【待訂正】及【已繳交】的標示

    • 預設為【已繳交】，選擊一下會出現【未繳交】，再選擊一下會出現【待訂正】

  • 作業檢查完畢後，學生資料會顯示有幾份作業未繳交、幾份作業待訂正

  • 也可以改變日期去看其他時間的作業繳交情形

• 匯出及匯入資料說明：

  • 目前我們的資料都只是暫存在瀏覽器內，因此要記得隨時把資料【匯出】做備份，不然一定不能去【刪除瀏覽資料】

  • 匯出的資料為JSON檔，可以隨時把資料匯入，或拿到別台電腦再匯入

  • 另外有做一個匯出成EXCEL檔，這是為方便老師輸入成績用

• 新轉入學生的處理：

  • 針對轉入生，因為加入學生名字時一定會加到最後一個，目前本系統無法調整學生的位置！！

  • 由於專案已刪除，無法再修改程式來達成！！所以改用手動的方式來處理，如下：

  • 手動調整學生位置的方法：

    • 從匯出的JSON來動手腳，利用記事本開啟JSON檔，去調整學生區塊

• 結語

  • 我覺得這次的這個【班級小管家】還滿好用的，希望大家會喜歡

  • 這程式可能還有一些我沒有遇到的BUG，當遇到BUG時，請再告訴我，我再請AI修改