還以為 Gemini Canvas 只是協作工具?原來它一鍵就能生成互動式網頁和測驗題!

Rin 梨子-avatar-img
發佈於數位百寶袋 個房間
更新於 發佈於 閱讀時間約 5 分鐘

Google Gemini 推出的「Canvas」功能,為用戶提供了一個全新的互動創作空間,而最近更新的介面還能將文字描述快速轉化為應用程式、資訊圖表、測驗等多種形式,進一步提升內容創作與學習的效率。

raw-image



🤩 Gemini Canvas 五大隱藏功能

一直以為 Gemini 的 Canvas 畫布功能只是個普通的協作畫布,沒想到它其實隱藏了一個強大的「建立」按鈕。透過這個按鈕,可以快速生成:

  • 網頁
  • 資訊圖表
  • 測驗
  • 語言摘要
  • 應用程式

讓我們一起試玩看看吧!


🧪 實際操作

📝 首先先建立學習內容

輸入提示詞,例如:

生成「英文初級文法中關於動詞後接不定詞 (to V) 和動名詞 (Ving) 」的教學

按下「Canvas」按鈕後,生成的畫布區域會顯示在螢幕右側。你可以針對內容進行修改或提供建議,這邊跟大部分的聊天機器人一樣進行協作即可。

接著重頭戲來了!點選右上角的「建立」按鈕,就會發現這邊藏有更多的互動式功能,像是製作網頁、測驗或圖表等。

畫布右上角的「建立」清單

畫布右上角的「建立」清單



👩‍💻 生成網頁

點選「建立」→「網頁」,稍等一下,Gemini 就會幫你產出一份 HTML 程式碼,還能即時預覽成果。

確認結果後,只要點選「共用」,就會自動生成一個線上網址,就可以將這個網站分享給其他人!

生成網頁畫面

生成網頁畫面

🔗 Canvas 的公開分享連結:來試玩看看這個教學範例吧

點擊以上這個連結,你會發現 Gemini 將教學內容變成區塊性的章節,甚至最後一個部分還有測驗!完成測驗還可以計算自己的分數。整個互動感很不錯,學起來也比較不無聊!


📊 生成資訊圖表

點選「建立」→「資訊圖表」,稍等片刻,Gemini 就會將文字轉換成帶有視覺感的樣式。

這個功能主要是把原本的文字資訊視覺化,比如轉換成圓餅圖、柱狀圖等。不過像我這份內容比較偏教學說明,沒有明確的統計數據,所以轉換後只是加了一些版面樣式區塊,讓整體更美觀、好閱讀。

資訊圖表生成畫面

資訊圖表生成畫面


🧐 生成測驗

點選「建立」→「測驗」,稍等片刻,Gemini 就會將文字生成互動式的測驗題目!

生成測驗畫面

生成測驗畫面

🔗 Canvas 的公開分享連結:立刻進入互動測驗

教學者可以快速建立互動練習題,老師也能利用這功能直接出題給學生測驗。

🎙️ 生成語音摘要

點選「建立」→「語音摘要」,Gemini 就會將文字轉變成可以聽的 Podcast!

raw-image

按下播放,這樣你就可以用聽的學了,也可以練習英文聽力!

📲 生成應用程式

接下來這一個功能就要發揮一下想像力,點選「建立」→輸入任意的應用程式描述,Gemini 可以幫你建立出互動式應用程式,適合製作小遊戲、工具類功能

例如我這邊輸入「設計一個互動式測驗,除了可以查看提示,答錯時會給文法教學。」也能根據我的指令進行設計。

raw-image

🔗 Canvas 的公開分享連結:立刻進入應用程式玩玩看!

🧩 挑戰進階應用 1:發音卡片

試了一下,竟然還可以做英文跟讀卡!

raw-image




🧩 挑戰進階應用 2:打造像 Duolingo 的關卡地圖!

另外,我還嘗試了一個稍微進階一點的指令:「設計一個類似 Duolingo 的測驗路徑地圖,使用者可以點擊地圖上的任務進入測驗,只有完成當前測驗後,才能解鎖並前往下一個測驗關卡。」

實際操作後,Gemini 雖然可以幫我產出一個初步的互動架構,不過目前功能上還有些限制,像是路徑樣式和過關條件沒有照我要求的生成,錯誤部分還沒有辦法精細的處理。

👀 有興趣的夥伴們不妨試試這個指令,一起玩玩看能做到什麼程度,也許你會找到更酷的實作方式!


互動教學新選擇,Gemini Canvas不容錯過

🥑 梨子推薦指數:4.8 🌟🌟🌟🌟⭐️

Gemini Canvas 真得讓我驚奇,不僅僅是個協作畫布,沒想到藏在裡面的「建立」功能還能自動生成教學網頁、資訊圖表、測驗題甚至互動應用程式,大幅提升教學與學習的效率。不管你是老師還是學生,Canvas 都能幫助你快速製作出有趣又實用的教學內容,何況現在仍是免費版用戶就可用,快去試試看吧!




留言
avatar-img
留言分享你的想法!
Jing-Yan Lin-avatar-img
2025/06/02
請問應用程式生成完後選擇共用後將連結轉成Qr code,讓學生掃描Qr code後卻無法使用(顯示為不公開)該怎麼解決?可是家人、朋友掃Qr code後都能進入應用程式
Rin 梨子-avatar-img
發文者
2025/06/03
Jing-Yan Lin 聽起來蠻奇怪的耶,我查了一下這個公開網址似乎沒有權限設定,如果你朋友家人都可以。請學生將掃出來的網址給你比對一下是不是正確的呢?會不會不小心開了錯誤的網址?
avatar-img
AppLab 數位研究社
17會員
27內容數
I'm Rin 梨子,喜好研究各種數位科技,同時又愛好看劇、偶爾看看書,這裡會不定期分享實用的數位工具與資訊、溫暖且動人的作品與各種生活新知。
AppLab 數位研究社的其他內容
2025/05/15
Memo AI 是一款專為學習者打造的人工智慧工具,能將各種學習資料(如 PDF、簡報、影片等)自動轉換成互動式學習資源,幫助你提升學習效率、加強記憶和理解。 📌 主要功能 💬自動生成學習卡片 上傳學習資料後,Memo AI 會自動挑出重點資訊,生成記憶卡片(Flashcard)。 🛣️
Thumbnail
2025/05/15
Memo AI 是一款專為學習者打造的人工智慧工具,能將各種學習資料(如 PDF、簡報、影片等)自動轉換成互動式學習資源,幫助你提升學習效率、加強記憶和理解。 📌 主要功能 💬自動生成學習卡片 上傳學習資料後,Memo AI 會自動挑出重點資訊,生成記憶卡片(Flashcard)。 🛣️
Thumbnail
2025/04/17
下載 Memo AI 2.填寫信箱獲取邀請碼 開始使用👏 功能一:輕鬆將 YouTube 視頻、播客等轉為文字稿。 在 folder 下新增一個專案後,貼上要語音偵測文字的 YouTube 影片網址,開始進行模型設定,按下語音轉文字即可。 注意:如何出現“模型未下載”的錯
Thumbnail
2025/04/17
下載 Memo AI 2.填寫信箱獲取邀請碼 開始使用👏 功能一:輕鬆將 YouTube 視頻、播客等轉為文字稿。 在 folder 下新增一個專案後,貼上要語音偵測文字的 YouTube 影片網址,開始進行模型設定,按下語音轉文字即可。 注意:如何出現“模型未下載”的錯
Thumbnail
2025/04/12
🧠 DeepSeek:從中國出發的潛力 AI 新星 近年來,全球 AI 聊天機器人競爭激烈,除了大家熟悉的 ChatGPT、Claude、Gemini 等選手,一個來自中國的名字——DeepSeek,也悄悄引起了廣泛關注。那麼,DeepSeek 是誰?為什麼能快速竄紅?讓我們來簡單認識這位新進的
Thumbnail
2025/04/12
🧠 DeepSeek:從中國出發的潛力 AI 新星 近年來,全球 AI 聊天機器人競爭激烈,除了大家熟悉的 ChatGPT、Claude、Gemini 等選手,一個來自中國的名字——DeepSeek,也悄悄引起了廣泛關注。那麼,DeepSeek 是誰?為什麼能快速竄紅?讓我們來簡單認識這位新進的
Thumbnail
看更多
你可能也想看
Thumbnail
家中修繕或裝潢想要找各種小零件時,直接上網採買可以省去不少煩惱~看看Sylvia這回為了工地買了些什麼吧~
Thumbnail
家中修繕或裝潢想要找各種小零件時,直接上網採買可以省去不少煩惱~看看Sylvia這回為了工地買了些什麼吧~
Thumbnail
👜簡單生活,從整理包包開始!我的三款愛用包+隨身小物清單開箱,一起來看看我每天都帶些什麼吧🌿✨
Thumbnail
👜簡單生活,從整理包包開始!我的三款愛用包+隨身小物清單開箱,一起來看看我每天都帶些什麼吧🌿✨
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
Canva近年來成為設計界的熱門工具,其新擴張功能讓設計人員可以快速將設計的logo、圖案套用在各種商品上,操作簡便實用。本文將介紹Canva的新擴張功能,如何套用在不同的商品上,以及如何使用細部編輯模式調整大小和位置。
Thumbnail
Canva近年來成為設計界的熱門工具,其新擴張功能讓設計人員可以快速將設計的logo、圖案套用在各種商品上,操作簡便實用。本文將介紹Canva的新擴張功能,如何套用在不同的商品上,以及如何使用細部編輯模式調整大小和位置。
Thumbnail
運用生成的AI圖像來激發視覺和創意,無論是生成素材、用在社交媒體上,這些圖像都能為你的的視覺帶來獨特的風格。
Thumbnail
運用生成的AI圖像來激發視覺和創意,無論是生成素材、用在社交媒體上,這些圖像都能為你的的視覺帶來獨特的風格。
Thumbnail
Gemini Pro 1.0 和 Gemini Pro 1.5 都是強大的工具,但它們適用於不同的需求並提供不同的功能。以下是它們的主要區別: 模態性 Gemini Pro 1.0 主要基於文字,對圖片和視頻的支持有限(1.0-pro-vision)。 Gemini Pro 1.5 真正的多模
Thumbnail
Gemini Pro 1.0 和 Gemini Pro 1.5 都是強大的工具,但它們適用於不同的需求並提供不同的功能。以下是它們的主要區別: 模態性 Gemini Pro 1.0 主要基於文字,對圖片和視頻的支持有限(1.0-pro-vision)。 Gemini Pro 1.5 真正的多模
Thumbnail
這篇要搭建一個同時生成寫實照片跟動漫風格圖片的工作流,還可以幫線稿上色。
Thumbnail
這篇要搭建一個同時生成寫實照片跟動漫風格圖片的工作流,還可以幫線稿上色。
Thumbnail
AI生成圖片並非完全可控,所以需要很多額外手段去控制,這篇要來試試幾個方法讓生成的圖片更加可控。
Thumbnail
AI生成圖片並非完全可控,所以需要很多額外手段去控制,這篇要來試試幾個方法讓生成的圖片更加可控。
Thumbnail
先用Canva「Text to image」製作出心動的圖片,手部及側臉微崩,再用Unidream「圖生圖」上傳微崩圖並輸入文字指示,男生竟然變女生?!「魔法工作室」功能,付費會員才能使用,小蝦意外間,發現到好康福利!免費帳號能試用「Text to video」、「Text to image」!
Thumbnail
先用Canva「Text to image」製作出心動的圖片,手部及側臉微崩,再用Unidream「圖生圖」上傳微崩圖並輸入文字指示,男生竟然變女生?!「魔法工作室」功能,付費會員才能使用,小蝦意外間,發現到好康福利!免費帳號能試用「Text to video」、「Text to image」!
Thumbnail
今日分享Gemini它是Bard 進階變升版,能力更強大了,不過我還是喜歡它的圖片辦示AI能力,尤其是在上課時常常會拍照老師上課的投影片或是看書覺得重要點會照片做筆記,之前需要回去之後再整理,但也是要花時間就偷懶,但是這次功能我一直很喜歡,讓我來示範。這次以【打造第二大腦】中有重點PARA運用,拍
Thumbnail
今日分享Gemini它是Bard 進階變升版,能力更強大了,不過我還是喜歡它的圖片辦示AI能力,尤其是在上課時常常會拍照老師上課的投影片或是看書覺得重要點會照片做筆記,之前需要回去之後再整理,但也是要花時間就偷懶,但是這次功能我一直很喜歡,讓我來示範。這次以【打造第二大腦】中有重點PARA運用,拍
Thumbnail
結合不同AI軟體,無論「文本敘述生圖」、「以圖繪圖」、「AI局部改圖」,多多嘗試,才能得到更好的結果,玩得開心,結果自然愉快。 先用Canva「Text to image」勾勒出人體崩壞圖,它畫面構圖仍是好的,再用Unidream「文本描述生圖」上傳參考圖並輸入文字指示,立馬正常許多
Thumbnail
結合不同AI軟體,無論「文本敘述生圖」、「以圖繪圖」、「AI局部改圖」,多多嘗試,才能得到更好的結果,玩得開心,結果自然愉快。 先用Canva「Text to image」勾勒出人體崩壞圖,它畫面構圖仍是好的,再用Unidream「文本描述生圖」上傳參考圖並輸入文字指示,立馬正常許多
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News