☕ Edcafe 教師實作指南

用 Gemini Canvas 做遊戲,放進 Mini App

定一項學習目標 → Canvas 生成 → 存成 HTML → 試玩與修正 → Edcafe 上載 → 學生提交 → 老師核對。

提示詞要講清楚六件事

要求為甚麼要寫進提示詞
一個完整 HTML,資產內嵌老師拿到檔案即可上載;避免缺圖片、套件或其他檔案
一至兩項能力,每局三至四題學生容易開始,也能在講座內完成
題目變化要有具體例子改角色名字、對調相同比例,仍可能是重複題
先寫計分及提示規則「答對」與「獨立答對」可以不同,老師需要知道分數代表甚麼
公開真正總分及可讀學習紀錄Edcafe 要讀到分數;重播和摘要也需要有清楚的操作證據
答案由老師核對尤其分數等值、可接受的不同解、中文語意及英文推論,不應只驗畫面

在 Gemini Canvas 操作

  1. 登入 Gemini,在新增/工具選單選 Canvas;畫面名稱及位置可能隨帳戶版本不同。
  2. 貼上下面的完整提示詞,先完成一個小遊戲。
  3. 在預覽實際玩:先做對,再故意答錯及用提示。把「操作 → 預期 → 實際」告訴 Gemini,要求輸出完整修正版。
  4. 在 Canvas 的「程式碼」檢視取得完整 HTML。可用複製內容;如該版本提供 HTML 下載,也可下載。
  5. 用純文字編輯器以 UTF-8 儲存為 monster-juice.html。不要儲存成富文字文件,確認不是 .html.txt。macOS 文字編輯可先選「格式 → 製作純文字」。
  6. 雙擊 HTML 試玩,再上載同一個已核對的檔案。

Google Canvas 說明 ↗

可直接試用的提示詞

示例沿用果汁主題,每局三題,包含半杯、全杯及五等份。

完整示範提示詞貼到 Gemini Canvas
請在 Gemini Canvas 製作一個適合香港小六學生的數學遊戲《怪獸果汁吧:三杯挑戰》,練習分數、小數與百分數。

【交付格式】
交付完整的單一 HTML 檔,由 <!doctype html> 至 </html>。所有 CSS、JavaScript、音效及插圖都放在這個檔案內。用原生 HTML/CSS/JavaScript,以及 CSS 或 inline SVG 畫圖。可直接雙擊開啟和離線玩。不要用 React、JSX、Vite、npm、外部 CDN、外部字型、相對路徑圖片、API key、資料庫、登入或執行時的 AI 服務。不要只給我一個 Gemini 分享連結。

【畫面和操作】
繁體中文及香港用語。怪獸客人會點果汁,學生用量勺逐份加入兩種果汁,亦可舀走及清空,再按「送出」。用顏色及文字標示兩種果汁,不能只靠顏色分辨。大按鈕、手機和電腦均適用,鍵盤可操作;沒有倒數計時。題目、數值、回饋和結算要用可讀的 HTML 文字顯示,不要只畫在 canvas 圖像內。

【每局三題,三種難度】
初級:每局依次出二、四、五等份各一題,三題比例必須不同。第一次示範局:1/2 + 1/2、4/4 + 0/4、2/5 + 3/5。必須接受其中一種果汁為零份。重玩時四等份可改為 2/4 + 2/4,但同局不能又出 1/2 + 1/2。1/4 + 3/4 和 3/4 + 1/4 算同一種比例,不能當成兩種不同題目。
中級:每局三題,使用不同份數,連結分數、小數、百分數,例如 0.2 與 80%、3/4 與 25%、0.6 與 40%。訂單每次合共一整杯。
進階:先放入錯誤份量,學生舀走或補加修正。每局三題須涉及不同份數和不同修正方法,不能只換水果名。
用整數份數作內部判定,避免小數浮點誤差。每題只有完成後才進下一題。不得抽出數字完全相同的重複題。

【提示、答錯和計分】
每題最多 1 分,滿分 3 分。只有「第一次有效送出便答對,而且該題未用過提示」才得 1 分。答錯後修正可完成題目,但不得取回該題分數。按提示後答對亦可完成,但該題得 0 分。未作答或不合法操作只提醒,不計答錯。重複按送出不得重複加分。
主動提示:先提醒全體及每份大小,再提醒應有多少份;先不要直接填好答案。
有效送出後答錯:記錄答錯 1 次,自動提示 1 次,指出哪種果汁太多或太少,容許修改。
「首次答對題數」指第一次有效送出便答對,曾先看提示亦計入;這個數值與「得分」分開。
全程及結算顯示:本次得分 n/3、首次答對 n/3、主動提示次數、自動提示次數、答錯次數、已完成 n/3、難度及用時。結算再顯示每題的目標比例、學生嘗試、提示、正確結果及一句學習重點。每次重玩開始新的一局並清零上述本局資料。

【配合 Edcafe Mini App 的分數追蹤】
在頂層建立 window.edcafeScore = 0; 讓平台能從固定、可存取的路徑讀到本局總分。每次實際總分改變時,把 window.edcafeScore 更新成同一個總分;完成後保留最後分數。新一局清零。此值必須是 0 至 3 的有限數字,不能是字串、NaN 或 Infinity。
window.edcafeScore 必須反映真正計分,不能永遠為 0,不能只顯示在 DOM、只存於 localStorage、只放在函數閉包、區域變數或私人 class 欄位內。這是本示範選用的路徑名稱,不是 Edcafe 規定的保留名稱。

請先自行核對每題比例、正確份量、提示、計分及重玩流程,再交付完整可執行 HTML。
其他學科通用模板填好方括號內的內容,再貼到 Gemini Canvas
請在 Canvas 製作單一、獨立、可離線執行的 HTML 教學遊戲。
對象:[年級及語言]
學習目標:[一至兩項具體能力,不要涵蓋整個學科]
故事主題:[角色、學生要完成的任務]
操作:[點選/輸入/排序等,寫清楚如何改答案]
題目:[每局三至四題;三種難度;列三個確實不同的例題]
變化:[哪些數字、條件和題型會變;哪些題目算重複]
評分:[滿分、何時得分、提示及修正後怎樣計、避免重複加分]
提示:[主動提示、答錯提示,分步給予]
紀錄:[本次得分、首次答對、提示、答錯、完成、難度、用時、逐題回顧]
平台:用 window.edcafeScore 暴露真正的有限數字總分,於每次總分改變時同步更新。
格式:所有 HTML/CSS/JavaScript 及資產內嵌;原生 JavaScript;不需要安裝、伺服器、外部資源或 AI API。題目、回饋及結算用可讀 HTML 文字顯示。手機、電腦、鍵盤均可操作。
請核對內容和答案,輸出整份 HTML,不要只給修改片段或分享網址。

為甚麼多寫一條 window.edcafeScore

Edcafe 官方 Mini App 技術指南要求:整體分數能從一條固定、可存取的頂層路徑讀到,而且必須是有限數字。七款遊戲選用 window.edcafeScore;這個名字是示範慣例,並非官方保留名稱。

程式說明只供參考,不能原樣貼進遊戲
// 初始值
window.edcafeScore = 0;

// 每當遊戲真正的本局總分改變時同步,例如:
window.edcafeScore = currentRoundScore;
  • currentRoundScore 只是例子,要請 Gemini 連到遊戲實際的計分資料。
  • 畫面上寫著「3 分」,或分數只藏在函數內,未必能被追蹤。
  • 同一 Edcafe 學生會話保留最高有效分數。重玩得到較低分時,遊戲「本次得分」可能低於平台 Score;比較測試須另開新會話。

放入 Edcafe Mini App

  1. 在 My Library 進入目標資料夾,選 Create New → Mini App。
  2. 上載已儲存的 HTML。官方上限為一個 HTML、50 MB。
  3. 按平台的分數追蹤檢查,確認能識別分數;選擇繁體中文的教師 AI 摘要語言。
  4. 在 Preview 玩一題,檢查操作及文字。Preview 只供預覽,不會建立學生作答紀錄。
  5. 如無法追蹤分數,按 Copy score tracking guide,把指南和 HTML 交回 Gemini 修正,再重新上載或 Replace file。
  6. 確認 Track student scores 已開啟,儲存名稱及資料夾。要讓其他老師在社群搜尋或使用,按需要選 Public。
  7. 按 Assign,確認 Accepting submissions: ON,再 Copy link 或 Save QR。Public 控制作品在社群的可見性;Assign 連結用來收集參與紀錄。
  8. 用分享連結以「示範A」等虛構代號完成一局,再回老師端 View Report → 該次 Session Details,核對 Score。
  9. 學生停止操作後稍候查看 Replay 及 AI summary。平台提示摘要會在停止互動數分鐘後出現;摘要內容仍需老師判讀。
繁體中文 AI 摘要設定不會替你翻譯遊戲本身;遊戲語言須在生成提示詞設定。

七款遊戲:老師端真的收到分數

每款都以虛構名稱「系統分數測試(可忽略)」從 Assign 學生入口開始,使用一次提示,完成整局,再到老師端核對同一次紀錄。七款全部吻合。

遊戲學生端本次得分老師端 Score結果
機械人平衡工場3/43吻合
怪獸果汁吧2/32吻合
迷你樂園建築師3/43吻合
迷霧寶藏島2/32吻合
校園嘉年華情報局3/43吻合
熊貓文字郵局3/43吻合
星際閱讀補給站3/43吻合
查看七款實測截圖
機械人平衡工場:學生端 3/4,老師端 Score 3
機械人平衡工場學生端結算畫面機械人平衡工場老師端 Session Details
怪獸果汁吧:學生端 2/3,老師端 Score 2
怪獸果汁吧學生端結算畫面怪獸果汁吧老師端 Session Details
迷你樂園建築師:學生端 3/4,老師端 Score 3
迷你樂園建築師學生端結算畫面迷你樂園建築師老師端 Session Details
迷霧寶藏島:學生端 2/3,老師端 Score 2
迷霧寶藏島學生端結算畫面迷霧寶藏島老師端 Session Details
校園嘉年華情報局:學生端 3/4,老師端 Score 3
校園嘉年華情報局學生端結算畫面校園嘉年華情報局老師端 Session Details
熊貓文字郵局:學生端 3/4,老師端 Score 3
熊貓文字郵局學生端結算畫面熊貓文字郵局老師端 Session Details
星際閱讀補給站:學生端 3/4,老師端 Score 3
星際閱讀補給站學生端結算畫面星際閱讀補給站老師端 Session Details
老師端 Score 是數值,例如遊戲 3/4,平台顯示 3;它並不自動代表 3%。本次測試證實分數接收,並未驗證所有 AI 摘要的教學分析質素。

三條路徑驗收

每條路徑使用全新的 Edcafe 學生會話。同一會話會保留最高有效分數,較低分重玩不能用來測試分數是否下降。

路徑操作遊戲得分首次答對主動/自動提示答錯老師端 Score
A三題均首次答對,不用提示3/33/30/003
B第一題先按一次提示,三題均首次答對2/33/31/002
C第一題有效答錯一次,按自動提示修正,其餘首次答對2/32/30/112
✅ 驗收清單
  • 三題均可完成;重複按送出不會多加分。
  • 重玩及換難度不會沿用上一局的提示、答錯或本次得分。
  • 零份、全杯、半杯及不同分母都能正常操作。
  • 手機能看清題目、按鈕、回饋及結算。
  • 以 Assign 分享連結進入;Preview 不會建立學生紀錄。
  • 老師 View Report → Session Details 的 Score 與預期一致。
  • 學生停止操作後稍候,再檢視 AI summary 和 Replay;摘要是否準確仍要老師核對。
  • 若用一次提示仍得滿分,或只在畫面變分而老師端不變,返回 Gemini 附上操作及結果修正。

出問題時的修復提示詞

修復:生成了 React 或多個檔案貼到 Gemini Canvas 對話
請把目前遊戲改成一個獨立 HTML:原生 HTML/CSS/JavaScript,全部資產內嵌。移除 React、JSX、套件匯入、建置流程及外部服務。保留遊戲內容,輸出整份 HTML。
修復:Edcafe 無法識別分數貼到 Gemini Canvas 對話
以下附上從 Edcafe「Copy score tracking guide」取得的官方指南:[貼上指南]。
請遵照指南,將真正的本局總分同步到固定的頂層路徑 window.edcafeScore。初始化、加分、結算及新一局都要一致。不要只加入一個永遠為 0 的變數。保留原有計分規則,輸出整份 HTML。
修復:題目太重複貼到 Gemini Canvas 對話
請把每局改成三題,數字、份數與思考方式均有變化。交換水果名或把 1/4 與 3/4 對調不算新題。請列出同一局的三題,確認沒有相同或等值比例,再輸出整份 HTML。
修復:畫面好看,但答案或計分有錯貼到 Gemini Canvas 對話
以下是操作、預期和實際結果:[逐步填寫]。
請先找出錯誤原因,核對數學答案、提示及計分;修正後用同一操作重測。不要只改畫面文字。輸出整份 HTML。
修復:老師報告缺少學習過程貼到 Gemini Canvas 對話
請在遊戲畫面和結算用可讀 HTML 文字顯示本次得分、首次答對、主動/自動提示、答錯、完成、難度、用時及逐題回顧。每個數值都要來自實際操作紀錄,不可用預設示例冒充學生結果。保留 window.edcafeScore 的同步更新,輸出整份 HTML。