第 4 課 · 連

連 Apps Script:做一個網上小測,成績自動寫入試算表

  • 約 60 分鐘
  • 成品:學生打開連結就能作答的網上小測
  • 不需要編程基礎
  1. 1 用
  2. 2 讀
  3. 3 造
  4. 4 連

① 先理解三件套

約 5 分鐘

部分它是甚麼負責甚麼
Google 試算表資料庫存放題目、答案、成績
Code.gs後端程式到試算表拿題目、把成績寫回試算表
index.html前端網頁學生看到的畫面

這一課不會逐行寫程式。程式由 Gemini 寫,你負責把要求講清楚,再把程式碼貼到正確的地方。

② 步驟一、二:複製題庫,輸入題目

約 7 分鐘

  1. 按 建立我的題庫副本,按確定,副本會存到你的 Google 雲端硬碟。之後一直用這份副本。
  2. 確認試算表左下角的分頁名稱是「題庫」兩個字。程式靠這個名字找資料,改了名就會找不到。
  3. 在範本兩條示範題下面,再加三條題目。建議先用加減乘除,因為現在要練的是流程,不是出題。
欄填甚麼例子
A · 題目題目全文7 + 5 = ?
B–E · 選項A 至 選項D四個選項10 / 11 / 12 / 13
F · 正確答案只填一個英文字母 A、B、C 或 DC
G · 題解答錯時給學生看的解釋,可留空7 加 5 等於 12。

最常見的錯誤:F 欄填了完整的選項內容(例如填「12」)。F 欄只可以填 A、B、C、D 其中一個字母。

你的試算表「題庫」分頁裏有 5 條題目。這就是本課第一個成果。

③ 步驟三:用 Gemini 生成程式碼

約 8 分鐘

  1. 打開 gemini.google.com,在工具選單選「Canvas」。
  2. 複製下面整段提示詞,把【中學/小學】改成你的學生,然後送出。
提示詞
我要用 Google Apps Script 製作一個簡單的網上測驗系統,請幫我寫程式碼。

【資料來源】
我有一個 Google 試算表,裏面有一個工作表,名稱是「題庫」。
第一行是標題行,由 A 欄至 G 欄依次為:
A 欄:題目
B 欄:選項A
C 欄:選項B
D 欄:選項C
E 欄:選項D
F 欄:正確答案(只會填 A、B、C 或 D 其中一個英文字母)
G 欄:題解(可能留空)
第二行開始是題目資料,數量不固定。

【功能要求】
1. 學生打開網頁後,先輸入班別(例如 3A)和學號(例如 12),然後按「開始測驗」。不要要求學生輸入姓名。
2. 系統從「題庫」工作表讀取全部題目,每題以單選按鈕顯示四個選項。
3. 學生按「交卷」後:
   - 即時批改,答對的題目顯示綠色,答錯的顯示紅色;
   - 答錯的題目要顯示正確答案,如果 G 欄有題解就一併顯示;
   - 在頁面底部顯示總分,例如「3 / 5」。
4. 交卷後,把成績寫入同一個試算表中名為「成績記錄」的工作表,
   欄位依次為:時間、班別學號(例如 3A-12)、分數、總題數。
   如果「成績記錄」工作表不存在,請自動建立並加上標題行。

【技術要求】
- 請給我兩個檔案:Code.gs(後端)和 index.html(前端)。
- 前端使用 google.script.run 呼叫後端函式。
- 不要使用任何外部程式庫或 CDN,所有 CSS 和 JavaScript 都寫在 index.html 之內。
- 重要:試算表讀回來的選項可能是數字(例如 12),請在比較答案前把選項和正確答案
  都轉換成文字(String),否則數字題目會全部判錯。
- 介面簡潔清爽,適合【中學/小學】學生使用,全部文字使用繁體中文。
- 請在程式碼中加入中文註解,方便我理解每一段的作用。

這段提示詞最值得學的地方:工作表叫甚麼名、每一欄放甚麼,全部寫得清清楚楚。要 AI 幫你寫程式,必須先講清楚資料怎樣擺放。

Gemini 給你兩段程式碼:一段是 Code.gs,一段是 index.html。

④ 步驟四:貼進 Apps Script

約 8 分鐘

  1. 回到題庫試算表,選單選「擴充功能 → Apps Script」,會開一個新分頁。
  2. 左邊有一個檔案叫 程式碼.gs(或 Code.gs)。刪除裏面原有的內容,貼上 Gemini 給你的 Code.gs。
  3. 按左邊「檔案」旁的+,選 HTML,檔案名輸入 index(不要打 .html,系統會自動加)。
  4. 刪除新檔案原有的內容,貼上 Gemini 給你的 index.html。
  5. 按上方的儲存圖示(或 Ctrl+S/⌘+S)。

HTML 檔案名一定要是 index:如果打錯,網頁打開會是一片空白。這是其中一個最常見的問題。

左邊有兩個檔案:Code.gs 和 index.html,都已儲存。

⑤ 步驟五:部署成網頁

約 10 分鐘

  1. 在 Apps Script 右上角按「部署 → 新增部署作業」。
  2. 按齒輪圖示「選取類型」,選「網頁應用程式」。
  3. 兩個重要設定:執行身分選「我」,學生不需要有試算表權限;誰可以存取選「任何人」,學生不用登入 Google 都能作答。
  4. 按「部署」。第一次會要求授權:選你的 Google 帳戶 →「進階」→「前往(不安全)」→「允許」。
  5. 完成後會得到「網頁應用程式網址」,這就是給學生的連結。

「前往(不安全)」是正常的:這個程式是你自己剛寫的,未經 Google 審核,所以會出現這個提示。你授權的對象是你自己的程式。

之後改了程式碼,要做「部署 → 管理部署作業 → 編輯(鉛筆圖示)→ 版本選『新版本』→ 部署」,網址不變。單純儲存不會更新網頁。

你得到一條「網頁應用程式網址」。

⑥ 步驟六:自己試一次

約 5 分鐘

  1. 用手機打開你的網址,輸入班別和學號,做一次測驗。
  2. 回到試算表,看看有沒有多了「成績記錄」分頁。
  3. 打開示範測驗答一次,對照你的版本:畫面、批改方式和成績記錄應該差不多。(示範測驗仍要求輸入姓名,可以填代號。)

試算表多了「成績記錄」分頁,裏面有剛才那一筆成績。之後換題目,只需在試算表加減行數,不用改程式。

⑦ 派給學生之前要知道

約 4 分鐘

只適合溫習,不適合正式評估:

這個簡化版會把正確答案連同題目一起送到學生的瀏覽器。懂得查看網頁原始碼的學生可以看到答案。如果要用於正式評估,必須改成由伺服器批改,即答案不下發到瀏覽器。

另外:成績記錄只存班別學號,不存姓名;但班別學號仍可辨認學生,試算表不要共用給學生或其他人。

⑧ 行不通?先看這裏

你見到的情況多數是這個原因
網頁一片空白HTML 檔案不是叫 index。回 Apps Script 改檔名,然後重新部署。
「找不到工作表」之類的錯誤試算表的分頁名不是「題庫」。改回「題庫」兩個字。
題目能顯示,但全部答案都錯F 欄填了選項內容而不是 A/B/C/D 字母。
加減乘除題全部判錯試算表的數字讀回來是數字,與網頁上的文字比較不相等。生成的程式要用 String() 轉換後才比較;如果沒有,用下面的後備程式碼。
改了程式碼,但網頁沒有變要重新部署(見步驟五),單純儲存不會更新。
學生說打不開部署時「誰可以存取」不是選「任何人」。重新編輯部署設定。
沒有「成績記錄」分頁要成功交卷一次,程式才會自動建立這個分頁。
學校帳戶沒有「任何人」選項學校管理員限制了對外分享。可改用個人 Google 帳戶部署,或向學校管理員查詢。
學生打開後出錯或無法交卷學生同時登入了多個 Google 帳戶(Google 官方已知問題)。請學生改用無痕視窗,或只登入一個帳戶再試。
以上都不是,就是不成功用下面的後備程式碼換掉兩個檔案,重新部署。

後備程式碼

請先試自己生成的版本,這一課的重點是學會怎樣叫 AI 幫你寫;這裏只是保險。這套程式碼的功能與上面提示詞的要求相同。

顯示 Code.gs(後端)

        
      
顯示 index.html(前端)

        
      

還可以這樣用

中學例:中三英文詞彙

題目選項A–D答案
"reluctant" means…unwilling / excited / tired / carefulA

小學例:小四中文量詞

題目選項A–D答案
一( )魚條 / 隻 / 張 / 本A

同樣的三件套,可以逐步延伸

  • 加登入:多一張「學生」工作表,學生登入後才作答。
  • 加錯題本:記下答錯的題目,之後只重做錯題。
  • 自動寄成績單:交卷後用 MailApp 把成績和錯題分析電郵給學生(須另外記錄學生電郵地址,要先考慮私隱)。
  • 教師後台:統計全班每條題目的答對率,看看大家一起錯了哪個選項。

小結

四課完成:你已經會用 Gemini、讀 Gemini Notebook(舊稱 NotebookLM)、造 Canvas 遊戲、連 Apps Script。之後要找提示詞,到提示詞庫就可以。

想學更多?

到 Desmond EdTech 教學頻道看相關影片(粵語講解)