🆕 有新版可用!

📚 繪本 → Google 表單 一條龍工作坊

把 Gemini 畫的繪本,變成有圖片、有解謎、可發音的 Google 表單測驗

v0.6.7 · 🎨 AI 生圖 · 🤖 整本生成 · PWA · 7 題型
📚
🤖 Gemini AI 助手 未設定
🔑 BYOK(Bring Your Own Key):你貼自己的 Gemini API Key,只存在你的瀏覽器,永不離開這台電腦。 免費 Key 拿這裡:Google AI Studio(免費層 gemini-2.5-flash 每天 1500 次請求)
0%
完成 0 / 6 個步驟
1

把繪本圖文整理進 Google Doc

▼

把 Gemini 產出的圖片和故事文字整理進一份 Google Doc。建議每一頁/章節用「標題 1」分隔,未來在表單裡比較好對應。

💡 小撇步:在 Gemini 對話裡叫它「依角色設定畫一系列繪本插圖」,把產出的圖片右鍵下載 → 拖進 Google Doc。文字部分也叫 Gemini 一起寫。
2

發布到網路 + 設定共用權限

▼

兩件事要同時做,缺一不可:

  • ① 在 Doc 裡按 檔案 → 共用 → 發布到網路 → 點「發布」(拿到 /pub 結尾的網址)
  • ② 右上角「共用」按鈕 → 把連結權限改成 「知道連結的任何人 → 檢視者」(Anyone with link · Viewer)
⚠ 只發布、沒改共用權限,圖片在表單裡會破圖(因為圖片網址是私有資源)。
3

把繪本圖片轉成可嵌入網址

▼

從已發布的 Google Doc 抓出每張圖片的「公開直接連結」,這樣 Google 表單裡才能成功插入這些圖片。

🔧 內建轉換器:直接在這裡轉,不必離開頁面(會用公開 CORS 代理抓取)。
🌐 picconvert(備援)
這裡會顯示轉換出來的圖片網址
⚙️ 進階:自架 Cloudflare Workers 代理(穩定優先)

第三方代理可能被限流或下線。自架一個 Cloudflare Worker(免費,每天 10 萬請求),程式碼在 worker.js。

  1. 到 Cloudflare Workers 註冊登入
  2. Create Worker → 命名 storytell-proxy → Deploy
  3. Edit code → 把專案資料夾的 worker.js 內容貼上 → Save and Deploy
  4. 把它給你的網址(https://storytell-proxy.xxx.workers.dev)貼下面儲存
4

用 Gemini Canvas 產生 Apps Script

▼

步驟:

  • ① 開 Gemini → 對話視窗 → 把你的 Google Doc 用 @ 連結或附加進去
  • ② 右上角開 Canvas 模式
  • ③ 貼下面這段提示詞,等它產出 Apps Script 程式碼
✨ 開啟 Gemini
💡 進階用法:把步驟 3 轉好的圖片網址清單也貼進 Gemini 對話,叫它把圖片網址對應到每一頁。或乾脆把整份 Doc 的內容用 @ 引用,讓 Gemini 自動分頁。
5

到 Apps Script 貼上程式碼,執行產生表單

▼

操作:

  • ① 開 script.google.com → 新增專案
  • ② 把 Gemini 產出的程式碼貼進去 → 儲存(💾 圖示或 Ctrl+S)
  • ③ 上方選擇要執行的函式(通常叫 buildForm 或 createForm)→ 按「執行」
  • ④ 第一次會跳授權視窗 → 選帳號 → 「進階」→「前往(不安全)」→ 允許
  • ⑤ 在「執行紀錄」看 Logger 印出的表單網址
⚡ 新功能:視覺化編輯器 — 填表單一樣填一填,不用碰 Gemini Canvas,直接產出可貼上的 Apps Script。
🪄 用 Gemini 一鍵生成整本繪本(含故事 + 題目 + 圖像提示詞)
用題型 = 上方選的題型

          
🚀 開啟 Apps Script
📦 不想用視覺化編輯器?這裡有手動 Apps Script 範本(複製即用)

把下面 pages 陣列改成你的故事內容和圖片網址即可:

function buildForm() {
  const form = FormApp.create('故事情境解謎闖關');
  form.setDescription('跟著故事一步步解開謎題吧!');
  form.setIsQuiz(true);
  form.setCollectEmail(true);

  // ★ 把這裡改成你的故事 + 圖片網址(從步驟 3 轉換取得)
  const pages = [
    {
      title: '第一章 神秘森林',
      story: '小明走進魔法森林,看到三條小徑。',
      image: 'https://lh7-rt.googleusercontent.com/docsz/AD_4nXxxxxx',
      question: '你覺得他應該往哪走?',
      options: ['左邊有發光的花', '中間有奇怪的腳印', '右邊聽到流水聲'],
      correct: 1,
      points: 1
    },
    {
      title: '第二章 河邊洞穴',
      story: '腳印帶他走到河邊,看到洞穴裡有亮光。',
      image: 'https://lh7-rt.googleusercontent.com/docsz/AD_4nXyyyyy',
      question: '洞穴裡是什麼?',
      options: ['寶藏', '巨龍', '水晶球', '一封信'],
      correct: 3,
      points: 1
    },
    // ↑ 想加幾頁就加幾筆
  ];

  pages.forEach((p, i) => {
    form.addPageBreakItem().setTitle(p.title).setHelpText(p.story);

    // 圖片
    if (p.image) {
      try {
        const blob = UrlFetchApp.fetch(p.image).getBlob();
        form.addImageItem().setImage(blob).setTitle(p.title);
      } catch (e) {
        Logger.log('圖片抓取失敗:' + p.image + '  → ' + e.message);
      }
    }

    // 選擇題
    const q = form.addMultipleChoiceItem();
    q.setTitle(p.question).setPoints(p.points || 1).setRequired(true);
    q.setChoices(p.options.map((opt, idx) =>
      q.createChoice(opt, idx === p.correct)
    ));
  });

  // 結尾頁
  form.addPageBreakItem().setTitle('🎉 恭喜通關!').setHelpText('你成功幫助主角解開所有謎題!');

  Logger.log('📝 填表網址:' + form.getPublishedUrl());
  Logger.log('✏️ 編輯網址:' + form.getEditUrl());
  Logger.log('📊 回應試算表:執行後在表單的「回應」分頁建立');
}
⚠ 圖片若放不上去,95% 是步驟 2「共用權限」沒改成「知道連結的任何人」。
6

取得表單網址,分享給學生

▼

從 Apps Script 的 執行紀錄複製 填表網址,或到 Google 表單裡按右上角「傳送」拿連結。

  • 📤 直接給連結 → 學生開瀏覽器就能填
  • 📱 產生 QR Code(Google 表單 → 傳送 → 連結 → 縮短網址 → 用其他工具產 QR)
  • 📚 嵌入 Google Classroom 作業
📱 內建 QR Code + A4 派發單,貼上表單網址就自動產出。
✨ 加碼功能 ✨
♪

表單裡放發音 (TTS)

▼

Google 表單的「插入影片」欄位其實也可以放 YouTube 上的影片,但不能直接上傳音檔。兩種變通方式:

  • 方法 A:Gemini TTS — 用 Google AI Studio 的 Gemini TTS 產生 WAV / MP3,下載後上傳到 YouTube(設不公開)→ 把 YouTube 連結放進表單
  • 方法 B:雲端硬碟分享連結 — 把音檔(mp3)丟雲端硬碟 → 共用設「知道連結的人 → 檢視者」→ 在表單題目敘述裡放連結,學生點連結就能聽
💡 用 TTS 時記得選 繁體中文女聲 / 男聲,速度設 0.9x 適合國小學生。
📚

NotebookLM 做關鍵詞學習單

▼

把繪本 Doc 加進 NotebookLM 當來源,可以自動產出:

  • 📝 學習指南(含關鍵詞、章節摘要、討論題)
  • ❓ FAQ(學生會問什麼)
  • 🎙️ Audio Overview(兩個 AI 主持人聊這本書,可下載當 Podcast)
  • 📊 心智圖(角色關係、時間線)
💡 把 Audio Overview 下載成 mp3,丟雲端硬碟取得分享連結 → 接到「方法 B」上面,繪本就有專屬 Podcast 了。