2026年7月24日 星期五

我用 Google 試算表 做出了一個互動任務平台

我用 Google 試算表

做出了一個互動任務平台

班級課堂互動任務平台 ─ 用 GAS + HTML 實現的異步學習系統
📥 一鍵建立試算表副本

💡軟體由來

以前在課堂上,我一直在用別人的教學平台來輔助教學。這些平台確實好用,但用久了總會發現一些功能缺口──有些我想要的互動方式,平台上就是沒有。

最近 AI 工具已經發展到能協助一般使用者開發軟體了,我就想:既然如此,何不自己把那些缺少的功能都實作出來?

於是,我開始動手打造這個「班級課堂互動任務平台」。它建立在 Google 試算表之上,以 Google Apps Script 作為後端,前端則是純 HTML + Tailwind CSS,不需要另外架設伺服器,只要有 Google 帳號就能使用。

🔍 核心理念:把 Google 試算表當作資料庫,用 GAS 操控它,再加上前端互動介面,就能做出一個完整的網頁應用程式。這個模式讓不懂伺服器架構的教育工作者也能快速上手。

🎓課堂教學應用

這個平台解決了幾個我長期以來的教學痛點:

🔗
多元任務類型
支援六種任務類型:外部連結、PDF 教材閱讀、YouTube 影片隨堂考、圖文回應、手繪繪圖、自動閱卷測驗。一個平台涵蓋所有課堂互動需求。
⏱️
異步自主學習
學生按自己的節奏完成任務,不用等待其他人。教師端能即時掌握全班進度,一目了然誰完成了、誰還沒開始。
✏️
觸控繪圖板
內建手繪畫布,支援畫筆、橡皮擦、直線、矩形、圓形、文字等工具,Apple Pencil 也能流暢使用。教師還能上傳學習單當背景圖,讓學生直接在上面標註。
📖
PDF 劃線筆記
PDF 教材自動轉為圖片頁面,學生可在每一頁上用畫筆或螢光筆做標註,教師能檢視全班的閱讀筆記,掌握理解程度。
自動批改測驗
選擇題測驗支援 CSV 批次匯入題庫,還內建「AI 出題小幫手」──貼上影片字幕,一鍵產生 AI 提示詞,再把 AI 回覆貼回來即可匯入。
🖼️
作品藝廊
圖文回應與手繪作品可公開展示,支援同儕按讚與留言鼓勵。教師可控制公開程度:不公開、僅本班可見、或完全公開讓任何人免登入瀏覽。

📋使用詳細教學

🧑‍🏫 教師端操作

1
首次設定密碼
開啟平台後點選「教師入口」,首次進入需設定一組登入密碼,之後皆以此密碼登入。
2
建立課堂
點選「+ 建立新課堂」,輸入課堂名稱與科目,可同時指派學生加入。系統會自動產生 4 位數加入代碼,也能手動改成 4 碼英數字組合。
3
建立分類與任務
進入課堂後,在「📚 單元內容」分頁建立分類頁籤(例如:單元一、課前預習),再於分類下新增互動任務。六種任務類型可自由選擇。
4
管理題庫
測驗與 YouTube 類型的任務可進「題庫管理」,支援逐題新增或 CSV 批次匯入。內建 AI 出題提示詞產生器,貼上字幕內容就能讓 AI 幫你出題。
5
批改與總覽
「📝 批改與總覽」分頁提供全班進度矩陣,依分類分組顯示每位學生的完成狀態。點選即可查看繳交內容、評分(支援分數/等第/通過未通過)並加上評語。
6
作品藝廊管理
在「🖼️ 作品藝廊」分頁可一鍵切換所有任務的公開程度。設為「完全公開」的任務會產生專屬分享連結與 QR Code,任何人免登入即可瀏覽。

🎒 學生端操作

1
登入帳號
學生從「學生入口」進入,從下拉選單選擇姓名並輸入密碼。也可透過掃描 QR Code 自動帶入加入代碼。
2
選擇課堂
登入後看到已加入的課堂清單,點選進入該課堂的學習儀表板。
3
完成任務
依分類頁籤切換,點選任務卡片進入操作。每種任務都有專屬的操作介面,完成後送出即可。
4
查看藝廊
若教師已公開作品藝廊,學生可在此欣賞同儕作品、按讚與留言鼓勵。

🚀佈署說明

這個平台採用「容器綁定試算表」架構,資料庫就是試算表本身。程式碼已預先寫好在試算表範本中,你只需要一鍵建立副本即可開始使用。

1
建立副本
點選上方按鈕,系統會自動建立一份試算表副本到你的 Google 雲端硬碟。程式碼已內建在範本中,不需手動貼上。
2
部署為網頁應用程式
在副本中,點擊「擴充功能」→「Apps Script」開啟指令碼編輯器,然後點擊「部署」→「新增部署」,選擇類型為「網頁應用程式」,執行身分選「我 (自己的帳號)」,存取權限選「知道連結的使用者」。部署後取得網址,即可直接使用。

💡 小提醒:首次開啟時,系統會自動建立所需的工作表。若看到預設的空白工作表(工作表1 / Sheet1),系統會自動清除。整個過程不需手動操作資料庫。

⚙️程式架構一覽

整個平台的程式碼分為後端(Code.gs)與前端(Index.html)兩個檔案,以下列出主要架構:

模組說明
Web App 進入點doGet 函式處理路由,支援帶入課堂代碼或藝廊任務 ID
資料庫層10 張工作表:系統設定、課堂資料、分類頁籤、任務資料、學生資料、課堂學生、提交紀錄、測驗題目、畫記筆記、藝廊互動
雲端硬碟整合PDF 頁面圖片上傳、照片上傳、背景圖管理、檔案權限自動設定
課堂管理建立/編輯/刪除課堂、產生/修改加入代碼、管理課堂名單
任務系統六種任務類型的建立、編輯、上架/下架、拖曳排序
測驗與題庫逐題新增、CSV 批次匯入、AI 提示詞產生、自動批改
提交與批改學生提交、教師批改(分數/等第/通過未通過)、退回重修
PDF 標註畫筆/螢光筆/擦除、防抖自動儲存、教師端全班筆記檢核
作品藝廊三級公開控制、按讚互動、留言鼓勵、分享連結與 QR Code

📚 結語

以前覺得「自己做一個教學平台」是很遙不可及的事,但有了 AI 的協助,這件事變得實際可行。從構想到完成,我逐步把以前用的平台缺少的功能一個一個補上來。

如果你也有類似的需求,不妨試試看。這個平台完全免費、採用創用CC 授權,歡迎教育用途自由使用。

2026年7月23日 星期四

經費支出明細表管理工具-多人用GAS雲端佈署版

經費支出明細表管理工具

多人協作 × 雲端備份 × 一鍵匯出 Word 列印
GAS + HTML | 多人 Web App | 免安裝 | 免費用
📥 立即取得工具(建立副本)點擊後建立副本到自己的雲端硬碟,即可開始使用

📖軟體由來

每個學期,學校的行政工作總少不了「經費支出明細表」的填報。從戶外教學、畢業旅行、校慶活動到社團補助,每一筆支出都需要詳實記錄,層層核章。傳統的做法不外乎用 Word 或 Excel 手動排版,每次都要重新調整格式、對齊欄位、計算總計,遇到多人需要同時填報時,更是衍生出無數個版本的檔案,最後搞得誰也不確定哪個才是最新的。

為了徹底解決這些痛點,我用 GAS(Google Apps Script)搭配 HTML 打造了一套「經費支出明細表管理工具」。它不只是一個表單生成器,而是一個完整的多人協作工作台:支援帳號登入、雲端自動備份、一鍵匯出 Word 文件、列印即用的核章欄位,讓經費核銷從「痛苦的行政負擔」變成「幾分鐘就能搞定的事」。



核心功能總覽

這個工具整合了經費明細表從建立到核銷的完整流程:

👥
多人帳號系統
Admin/User 權限分級,下拉選單登入
☁️
雲端自動備份
每 30 秒自動同步至 Google 試算表
📄
匯出 Word 文件
標楷體排版,A4 直式即印格式
🖨️
一鍵列印
去除 UI 元素,純淨列印輸出
📊
自動加總計算
金額即時運算,大寫國字金額
✍️
核章欄位自訂
承辦人/主計/校長,自由修改名稱
🎯
拖曳排序
Drag & Drop 調整項目順序
🧮
剩餘經費計算
輸入核定經費,自動算出剩餘
📦
JSON 匯入匯出
完整備份與跨帳號搬遷
🎨
卡片色彩標記
右鍵選單自訂明細表卡片顏色
🔍
即時搜尋
關鍵字快速篩選已儲存明細
⚙️
管理者後台
帳號管理、全域視察、批次匯入

🎯實際應用場景

🏫 學校行政:經費核銷不再痛苦

每學期的戶外教學、畢業旅行、校慶活動,都需要填報經費支出明細表。以前用 Word 手動排版,每次都要重新調整表格格式、計算總計、對齊欄位。現在只要登入系統,選擇「開新支出明細」,輸入標題(如「115學年度畢業旅行經費支出明細表」),接著逐筆輸入項目、單位、單價、數量,系統自動計算合計與總計,就這麼簡單。

更方便的是,核章欄位(承辦人、主計、校長)可以自由修改名稱,不同學校的組織編制不同,彈性調整完全沒問題。完成後直接點「📄 下載 docx」,產出的 Word 文件就是標準的 A4 直式格式,標楷體排版,直接拿去列印就能簽核。

👥 多人協作:各做各的,互不干擾

這套工具最大的特色就是「多人 Web App」。每位老師都有自己獨立的帳號,登入後只能看到自己建立的明細表,資料完全隔離。管理者则可以透過後台查看全校所有人的經費明細,需要審閱他人資料時,系統會自動切換到唯讀審閱模式,只能檢視、下載或列印,無法修改,確保資料安全。

管理者還可以批次匯入帳號名單,一次建立全校老師的帳號,不需要逐一設定。開放自主註冊時,還能設定 4 位數驗證碼,防止外人隨意加入。

☁️ 雲端備份:換電腦也不怕

所有資料每 30 秒自動同步到 Google 試算表,就算換了一台電腦、甚至換了瀏覽器,只要打開同一個網址登入,所有明細表就會自動載回來。再也不用擔心「上次做的那份明細表存在哪台電腦」的問題。

系統還提供 JSON 匯出功能,可以完整備份所有明細表資料,或是選擇性地部份匯出。需要搬到另一個帳號時,直接匯入 JSON 檔案即可,完全無痛遷移。

🧮 經費控管:剩餘經費一目瞭然

輸入核定的總經費金額,系統自動計算已支出金額與剩餘經費。在活動執行過程中,隨時可以掌握預算執行情況,避免超支。還能「勾選項目獨立加總」,只計算特定項目的花費,方便做分類統計。

📊與傳統方式的比較

比較項目Word / Excel 手動本工具
格式排版每次手動調整自動生成標準格式
金額計算手動或用 Excel 公式即時自動計算 + 大寫金額
多人使用檔案傳来傳去雲端多人獨立作業
資料備份自己負責每 30 秒自動同步
匯出列印手動排版列印一鍵下載 Word / 列印
跨裝置使用需帶著檔案有瀏覽器就能用
管理者稽核逐一索取檔案後台一鍵視察全校

🔧使用教學:從零開始

🚀 部署步驟(GAS + HTML 一鍵佈署)

  1. 點擊上方按鈕,將試算表建立副本到自己的 Google 雲端硬碟。
  2. 在自己的副本中,點擊「擴充功能」→「Apps Script」開啟指令碼編輯器。
  3. Code.gs 的內容完全覆蓋原本的程式碼。
  4. 在左側檔案列表中新增 HTML 檔案(命名為 Index),貼入前端程式碼。
  5. 首次執行:在上方工具列選擇 doGet 函式,點擊「執行」並通過權限審核。
  6. 點擊右上角「部署」→「新增部署」。
  7. 選擇類型為「網頁應用程式」。
  8. 執行身分:選擇「我 (Me)」(重要!)
  9. 誰可以存取:選擇「任何人 (Anyone)」(重要!)
  10. 點擊「部署」,複製產生的網址,這就是你的工具網址。

⚠️ 首次部署後,若要更新程式碼,需在「新增部署」時選擇「新版本」,才能讓修改生效。

💡 系統首次開啟時,會自動跳出身分初始化畫面,請設定管理者密碼。之後所有使用者即可透過下拉選單選擇帳號登入。

📌 日常操作流程

  1. 登入系統:從下拉選單選擇自己的帳號,輸入密碼登入。
  2. 建立明細表:點擊「➕ 開新支出明細」,輸入標題名稱。
  3. 輸入項目:逐筆輸入支出項目的名稱、單位、單價、數量,系統自動計算合計。
  4. 自動儲存:系統每 30 秒自動備份至雲端,也可手動點「💾 手動儲存」。
  5. 調整順序:直接拖曳表格中的列,即可調整項目順序。
  6. 修改核章:點擊「✍️ 修改核章區」,自訂承辦人、主計、校長的名稱。
  7. 匯出列印:點擊「📄 下載 docx」取得 Word 文件,或「🖨️ 列印」直接列印。

⚙️ 進階功能推薦

  • 計算剩餘經費:輸入核定總經費,系統自動算出還剩多少可以用。
  • 選取加總:勾選特定項目,只計算勾選項目的金額小計。
  • 卡片色彩標記:在明細表清單上按右鍵,可自訂卡片背景顏色,方便分類。
  • 管理者後台:Admin 帳號可批次匯入帳號、查看全校所有人的明細表、遠端列印。
  • JSON 備份:左下角「📦 檔案工具」可匯出/匯入 JSON,完整備份所有資料。
  • 隨機換背景:點擊「🎨 換背景」按鈕,切換不同的淡色系漸層主題。

💡技術亮點

這個工具在技術上使用了以下技術:

Google Apps Script HTML5 Tailwind CSS JavaScript Google Sheets API docx.js CacheService Noto Sans TC

前端使用 Tailwind CSS CDN 快速打造響應式介面,搭配 docx.js 在瀏覽器端直接生成 Word 文件,完全不需要伺服器轉換。後端使用 GAS 的 CacheService 管理 Session Token,確保 6 小時內的登入狀態有效,兼顧安全與效能。

資料儲存採用「同標題覆蓋機制」,同一個使用者對同標題的明細表永遠只保留最新版本,避免試算表中堆積大量重複紀錄。密碼欄位強制設為純文字格式,確保「01」不會被 Google 試算表自動轉成數字「1」。

🤝結語

經費核銷是學校行政中不可或缺的一環,但它不應該成為老師們的負擔。我希望透過這個工具,讓每一位老師都能在幾分鐘內完成一份格式正確、內容完整的經費支出明細表,把省下來的時間留給更重要的教學工作。

程式碼完全開放,大家都可以依照自己學校的需求修改調整。如果你在使用上有任何問題或建議,歡迎留言告訴我。

2026年7月22日 星期三

教師課堂管理整合工具 V5(使用GAS+html可一鍵佈署版)

 

教師課堂管理整合工具 V5

用一個網頁搞定加扣分、作業追蹤、座位表與雲端備份
GAS + HTML | 免安裝 | 免費用 | 雲端同步
📥 取得工具(開啟試算表)點擊後建立副本即可開始使用

📖軟體由來

身為一個每天要處理加扣分、追作業、排座位的老師,我深深感受到課堂管理的瑣碎與耗時。市面上的工具要嘛功能太分散,要嘛需要安裝軟體、擔心資料安全性,更有些需要付費才能使用完整功能。

我想要的其實很簡單:一個網頁就能搞定所有事情,不用安裝任何東西,資料存在 Google 雲端,換電腦也能繼續用。就這樣,我從零開始,用 GAS(Google Apps Script)搭配 HTML,一步步把這個工具打造出來。

從最早的加扣分功能開始,到後來陸續加入座位表、作業追蹤、抽籤系統、計時器,一直到現在的 V5 版本,整合了多班級管理與雲端自動備份。每一個功能都是我從課堂實戰中提煉出來的,真正解決了老師們常遇到的痛點。



核心功能總覽

這個工具包含了我認為一位老師在課堂管理上幾乎會用到的所有功能:

🏫
多班級管理
支援多班切換,馬卡龍配色主題
📊
加扣分系統
個人與群組計分,座位表視圖
📝
作業檢核
顏色標記追蹤,四種狀態切換
🪑
座位表生成
按列/按組排列,拖曳調整
🎲
隨機抽籤
全螢幕動畫,活絡課堂氣氛
⏱️
倒數計時器
預設/自訂時間,緊張音效
📋
聯絡簿顯示
全螢幕投影,學生直接抄寫
🏆
兌獎系統
點數兌換獎勵,歷史紀錄
📈統計報表
每週/每月統計,長條圖視覺化
📄
PDF/Word 匯出
作業清單與加扣分總表
☁️
雲端備份
30 秒自動同步至 Google 試算表
📦
資料匯入匯出
JSON 格式,單班或全部匯出

🎓課堂教學上的實際應用

🎯 正向增強:讓加分成為習慣

加扣分不只是紀律工具,更是正向行為的即時回饋。透過座位表視圖,我可以看著學生的座位直接加分,不需要翻名冊、不需要打字,一個按鈕就完成。當學生看到自己的分數在全螢幕上跳動,那種成就感是紙本紀錄無法比擬的。

更進階的是「群組計分」模式,我會在小組討論時使用。當某一組的回答特別好,我直接幫整組加分,讓團隊合作產生正向壓力,也讓沉默的學生因為組員的表現而被帶動。

📝 作業追蹤:再也不用追著學生要作業

作業追蹤是我覺得最實用的功能。每天設定好作業內容後,隔天用「檢」按鈕進入檢核表,看到的是學生姓名配上每項作業的狀態按鈕。點一下就切換狀態:紅色=未繳交綠色=已繳交橘色=待訂正藍色=已訂正

到了期中或期末,一鍵匯出 PDF 作業清單,連「誰沒交、誰还没訂正」都標註得清清楚楚。拿來跟家長溝通,或是做為學生學習歷程的佐證,都比口頭說的有說服力。

🪑 座位表:不只是排座位

這個座位表不只是好看而已。它支援「按列」與「按組」兩種排列方式,我可以根據教學需求自由切換。座位表上的每個格子都顯示學生的姓名與累積分數,有未完成作業的學生還會標示 ❌,點一下就能直接跳到該學生的作業追蹤頁面。

拖曳功能也很方便,開學初調整座位時,直接把學生名字拖到新位置就好,不用重新輸入。

☁️ 雲端備份:換電腦也不怕

這是 V5 最重要的升級。透過 GAS + Google 試算表,系統會每 30 秒自動備份所有資料到雲端。就算我換了一台電腦、甚至換了瀏覽器,只要打開同一個網址,所有班級資料就會自動同步回來。再也不用擔心資料消失的恐懼。

🔧使用教學:從零開始設定

🚀 部署步驟(GAS + HTML 一鍵佈署)

  1. 開啟我提供的 Google 試算表,點擊「檔案」→「建立副本」,將試算表複製一份到自己的 Google 雲端硬碟。
  2. 在自己的副本中,點擊「擴充功能」→「Apps Script」開啟指令碼編輯器。
  3. 點擊右上角「部署」→「新增部署」。
  4. 選擇類型為「網頁應用程式」。
  5. 執行身分:選擇「我 (Me)」(重要!)
  6. 誰可以存取:選擇「任何人 (Anyone)」(重要!)
  7. 點擊「部署」,複製產生的網址,這就是你的工具網址。

⚠️ 首次部署後,若要更新程式碼,需在「新增部署」時選擇「新版本」,才能讓修改生效。

📌 日常操作流程

  1. 建立班級:在初始畫面點擊 ➕ 按鈕,輸入班級名稱(如「601班」)。
  2. 輸入學生:點擊左上角 ☰ 選單 →「輸入學生姓名」,每行一個名字貼上。
  3. 設定作業:在日曆上找到今天,點擊 按鈕輸入作業內容。
  4. 抄聯絡簿:點擊 按鈕,全螢幕顯示作業內容,投影到螢幕讓學生抄寫。
  5. 收作業檢核:隔天點擊 按鈕,逐一點擊學生狀態切換顏色。
  6. 加扣分:點擊日曆上的日期數字,進入加扣分介面操作。
  7. 雲端備份:點擊右上角「☁️ 雲端存檔」,資料自動同步到 Google 試算表。

🎁 進階功能推薦

  • 抽籤系統:課堂提問時,點擊「抽籤」按鈕隨機選人,學生超愛,氣氛瞬間熱起來。
  • 計時器:小考或分組討論時使用,最後 10 秒還有緊張音效,學生會自動加速。
  • 兌獎系統:約定好獎勵規則(如 10 分換免死金牌),讓加扣分制度更有感。
  • PDF 匯出:期末時匯出加扣分總表與作業清單,親師溝通超方便。
  • 座位表視圖加扣分:在座位表上直接加分,不用切換畫面,教學節奏不中斷。

💡技術亮點

這個工具在技術上用到了以下技術:

Google Apps Script HTML5 CSS3 JavaScript Google Sheets API Chart.js html2pdf.js html2canvas Web Audio API localStorage LockService ContentService

值得一提的是,前端使用 localStorage 做為主要的資料儲存機制,搭配 GAS 後端將資料同步到 Google 試算表。這種「前端快取 + 雲端同步」的架構,讓工具在沒有網路時也能正常使用,連線後再自動備份,兼顧了速度與安全性。

🤝結語

做這個工具的初衷很單純,就是想讓自己的課堂管理更有效率。如果這個工具也能幫到其他老師,那就更好了。程式碼完全開放,大家都可以依照自己的需求修改調整。如果你在使用上有任何問題或建議,歡迎留言告訴我。

教學已經夠辛苦了,希望科技能幫我們省下更多時間,把精力留給最重要的事情——學生。