Home首頁  /  Lessons課程  /  Lesson 5第五課

Quizzes & Surveys that Save to Google Sheets會自動存進 Google Sheets 的測驗與問卷

This is my favourite kind of quiz. You build a beautiful quiz page with AI, your students fill it in, and their class, name, answers, and score drop straight into a Google Sheet — automatically. The same trick makes a wonderful survey, too. And it's faster and far better-looking than Google Forms.

這是我最喜歡的一種小考。你用 AI 做出一頁漂亮的測驗,學生填完後,他們的班級、姓名、作答與分數會自動掉進一份 Google Sheet 裡。同樣的方法拿來做問卷調查也超好用。而且它比 Google Forms 更快、更好看。

What you'll be able to do你將學會

  • a Have AI write the questions and a beautiful quiz pagea 讓 AI 寫出題目,並做成一頁漂亮的測驗網頁
  • b Set up a Google Sheet + Apps Script to catch the answersb 設定 Google Sheet + Apps Script 來接收作答
  • c Connect the page so scores save to the Sheet automaticallyc 把網頁接上,讓分數自動存進 Sheet
  • d Know when to use this instead of Google Formsd 知道什麼時候該用它、而不是 Google Forms
Before we start.開始之前。 Have ready: a Google account (for the Sheet), and a place to publish your page — your GitHub Pages site from Lesson 1. About 30 minutes. You don't need to write a single line of code yourself — AI writes the page, and you'll copy a small ready-made script for the Sheet. 請準備好:一個 Google 帳號(放 Sheet 用),以及一個能發佈網頁的地方——就是第一課的 GitHub Pages 網站。大約 30 分鐘。你完全不用自己寫程式——網頁由 AI 寫,Sheet 的部分只要複製一段現成的小腳本。
Part A

How the whole thing works整件事是怎麼運作的

It looks like magic, but it's just four simple steps passing data along a line. Once you see the shape, the rest is easy.看起來像魔法,其實只是四個簡單步驟,把資料一棒接一棒傳下去。看懂這個形狀,後面就簡單了。

AI writes the pageAI 寫出網頁 Questions + a clean design, all on one page.題目+乾淨設計,全在一頁。
Student fills it in學生填寫 Name, class, answers — then taps Submit.姓名、班級、作答——按下送出。
Apps Script catches itApps Script 接住 A tiny Google script receives the data.一段 Google 小腳本收下資料。
It lands in your Sheet掉進你的 Sheet One new row per student, scored.每位學生一列,分數算好。
The two new words here are Apps Script (free Google code that can do things to your Sheet) and Web App (a secret web address that script listens on). You'll meet both in Part C — and AI handles the hard part. 這裡只有兩個新名詞:Apps Script(Google 免費的程式,可以對你的 Sheet 做事)和 Web App(那段腳本在等資料的一個秘密網址)。Part C 會帶你認識它們——而且難的部分都交給 AI。
Part B

Have AI build the quiz page讓 AI 做出測驗網頁

Here's where the time-saving begins. Instead of typing questions into a form one at a time, you describe the whole quiz once and AI writes all of it — every question, the scoring, and the design — in a single page.省時間就從這裡開始。你不用一題一題打進表單,而是把整份測驗描述一次,AI 就把全部寫出來——每一題、自動算分、還有設計——全在一頁。

Copy-and-paste prompt可直接複製的提示詞

Make a single self-contained HTML quiz page about [your topic]
for [grade / level] students.

- [10] multiple-choice questions, ALL on one page (not one at a time).
- At the top: a "Name" field and a "Class" field.
- A Submit button that scores the answers in the browser and
  shows the student their score.
- On submit, also send the result to this web address using fetch (POST):
      [paste your Apps Script /exec URL from Part C]
  Send it as JSON: { class, name, score, answers }
- Friendly, colourful design, big text, works on phones.
  No login, no outside libraries.
  1. Fill in the blanks把空格填好 Topic, level, and how many questions. You can also say "make 5 of them harder" or "add a short-answer question at the end."主題、程度、幾題。你也可以說「其中 5 題難一點」或「最後加一題簡答」。
  2. Leave the URL blank for now網址先空著 You'll get that address in Part C. Just keep AI's page open — you'll paste the URL in at the end.那個網址會在 Part C 拿到。先把 AI 做的頁面留著,最後再把網址貼進去。
  3. Preview and tweak預覽並微調 Read the questions, fix any wording, ask AI to change colours or add your school's name. This is the part only you can do well.看一遍題目、修字句,請 AI 換顏色或加上學校名字。這部分只有你能做得好。
Survey instead of a quiz?想做問卷而不是測驗? Just say so: "make this a survey, no right answers, no score — collect the choices." Everything else stays the same. Class feedback, parent surveys, reading-interest polls — same method. 只要說一句:「改成問卷,沒有正確答案、不算分——只收集選項。」其他都一樣。班級回饋、家長問卷、閱讀興趣調查——同一套方法。
Part C

Make a Google Sheet that catches the answers做一份會接住作答的 Google Sheet

Now we build the other end of the line — the Sheet, and the little script that writes a new row each time a student submits.現在來做這條線的另一端——Sheet,以及那段每次學生送出就寫一列的小腳本。

  1. Make a new Google Sheet建一份新的 Google Sheet Go to sheets.new. In row 1, type your column headings — for example: Time, Class, Name, Score, Answers.前往 sheets.new。在第 1 列打上欄位標題——例如:TimeClassNameScoreAnswers
  2. Open Extensions → Apps Script打開 擴充功能 → Apps Script A code editor opens in a new tab. Delete whatever's there, and paste the script below.會在新分頁打開一個程式編輯器。把裡面的內容全部刪掉,貼上下面這段腳本。

Paste this into Apps Script把這段貼進 Apps Script

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  var data  = JSON.parse(e.postData.contents);
  sheet.appendRow([
    new Date(),
    data.class,
    data.name,
    data.score,
    (data.answers || []).join("  |  ")
  ]);
  return ContentService.createTextOutput("ok");
}
  1. Click Deploy → New deployment部署 → 新增部署作業 Choose type Web app. This turns your script into a web address that can receive data.類型選 網頁應用程式(Web app)。這會把你的腳本變成一個能接收資料的網址。
  2. Set access to Anyone存取權設為 任何人(Anyone) Execute as: Me. Who has access: Anyone. This lets students' pages send in answers without logging in. (Your Sheet itself stays private — only you can open it.)執行身分:我。誰可以存取:任何人。這樣學生的頁面不用登入就能送出作答。(你的 Sheet 本身仍是私人的——只有你能打開。)
  3. Authorize, then copy the Web app URL授權,然後複製 網頁應用程式網址 Google asks you to allow your own script the first time — that's normal. Then it gives you a URL ending in /exec. This is the address from Part B.Google 第一次會請你授權自己的腳本——這很正常。接著它會給你一個以 /exec 結尾的網址。這就是 Part B 要用的那個網址。
Part D

Connect the page to the Sheet把網頁接上 Sheet

Two ends, one link. Now you hand the /exec URL to the quiz page, publish it, and watch the first row appear.兩端、一條線。現在把 /exec 網址交給測驗頁、發佈出去,看著第一列出現。

  1. Paste the URL into the page把網址貼進網頁 Give the /exec URL back to AI: "here's my Apps Script URL, put it in the page." Or paste it yourself where the page says fetch(./exec 網址交回給 AI:「這是我的 Apps Script 網址,請放進頁面。」或自己貼到頁面裡寫著 fetch( 的地方。
  2. Publish the page發佈頁面 Upload the index.html to your GitHub repository, exactly like Lesson 1. Within a minute it's live and shareable.index.html 上傳到你的 GitHub repository,就跟第一課一樣。約一分鐘就上線、可以分享。
  3. Test it yourself first自己先測一次 Open the live page, type a name and class, answer, and submit. Then switch to your Google Sheet — a new row should appear within seconds. 🎉打開上線的頁面,輸入姓名和班級、作答、送出。再切回你的 Google Sheet——幾秒內就會出現新的一列。🎉

What the page is doing (you don't have to write this)頁面在做的事(你不用自己寫)

fetch("https://script.google.com/macros/s/AKfy…/exec", {
  method: "POST",
  body: JSON.stringify({ class: cls, name: name, score: score, answers: answers })
});
It won't pop up an error — so test by checking the Sheet.它不會跳錯誤訊息——所以請用「看 Sheet」來測試。 For privacy reasons the page can't read a reply back from Google, so it stays quiet either way. The Sheet is the source of truth: if a new row appeared, it works. 基於隱私限制,頁面讀不到 Google 回傳的內容,所以不管成功與否它都很安靜。Sheet 才是真相:只要出現新的一列,就代表成功了。
Side by side一張表看懂

This vs Google Forms這個方法 vs Google Forms

Google Forms is fine — and for a single quick question, it's the right call. But the moment you want something beautiful, branded, or long, the difference is huge. Both, by the way, can save to a Google Sheet.Google Forms 很好——而且只要一個快速問題,它就是對的選擇。但當你想要漂亮、有品牌感、或題目很多時,差別就很大了。順帶一提,兩者都能存進 Google Sheet。

Your own quiz page你自己的測驗網頁 Google Forms
Look & feel外觀質感 Anything you want — your colours, your school, real design.你想要的任何樣子——你的顏色、你的學校、真正的設計。 One plain template. Tidy, but the same as everyone else's.一個樸素的模板。整齊,但跟大家長得一樣。
All questions at once所有題目一次看 Yes — one page, scroll through, like a real paper test.可以——一頁到底,像真正的紙本考卷。 Possible, but built and edited one question at a time.做得到,但要一題一題建立和修改。
Building 20 questions出 20 題的速度 AI writes all 20 in one go. Minutes.AI 一口氣寫完 20 題。幾分鐘。 Type, click "add", repeat ×20. Lots of copy-paste.打字、按「新增」、重複 20 次。一堆複製貼上。
Auto-scoring自動算分 Yes — and you control exactly how feedback looks.可以——而且你能完全掌控回饋怎麼呈現。 Yes (Quiz mode), within Forms' fixed style.可以(測驗模式),但限定在 Forms 的固定樣式裡。
Where answers go作答存到哪 Your Google Sheet — class, name, score, answers.你的 Google Sheet——班級、姓名、分數、作答。 A Google Sheet too. Same destination.也是 Google Sheet。同一個目的地。
Lives inside your site能放進你的網站 Yes — it's just a page on your own website.可以——它本來就是你網站上的一頁。 Only as an embedded box; the design never quite matches.只能嵌成一個方框;設計永遠搭不太起來。
Quickest one-off question臨時一個小問題 Slight setup (the script, once).要一點設定(那段腳本,做一次)。 Fastest — nothing to set up. Forms wins here.最快——完全免設定。這裡 Forms 勝。
My rule of thumb: one quick question for the staff room? Google Forms. A real quiz or survey for my students — many questions, looks lovely, lives on my site? My own page, every time. 我的判斷原則:辦公室裡一個快速小問題?用 Google Forms。給學生的真正測驗或問卷——題目多、要好看、要放在我的網站上?每次都用我自己的頁面。
FAQ

If something doesn't work如果遇到問題

No new row appears沒有出現新的一列

Check the deployment access is Anyone, and that the page has your /exec URL (not the editor URL).

確認部署的存取權是任何人,而且頁面用的是你的 /exec 網址(不是編輯器的網址)。

Can students retake it?學生可以重做嗎?

Yes — each submit just adds another row. You'll see every attempt, with its time.

可以——每次送出就多一列。你會看到每一次作答和它的時間。

Is it private?這樣安全嗎?

Only you can open the Sheet. Keep it to names and answers — never collect anything sensitive. See Responsible AI.

只有你能打開那份 Sheet。只收姓名和作答就好——絕不收集敏感資料。參見負責任 AI

You did it — quick recap你做到了——快速回顧

  • Had AI write the questions and a beautiful quiz page讓 AI 寫出題目和一頁漂亮的測驗
  • Set up a Google Sheet with an Apps Script Web App設定了一份 Google Sheet 和 Apps Script 網頁應用程式
  • Connected the page so scores save automatically把頁面接上,讓分數自動存檔
  • Saw class, name, and score land in your Sheet看到班級、姓名、分數掉進你的 Sheet
  • Know when to reach for this instead of Google Forms知道什麼時候用它、而不是 Google Forms