Canva教學|透過 Canva Code 製作有趣的數位教材

更新 發佈閱讀 9 分鐘
raw-image

Canva 自從2025年4月推出最新AI功能以來,最令人驚豔的莫過於 AI「幫我撰寫程式碼」的功能,讓完全沒有程式背景的使用者也能透過自然語言指令製作互動式內容。我們只需在對話框輸入自己的需求描述,系統就會自動生成程式碼並展現成品。這項功能大幅降低程式語言的門檻,讓更多的教師可以輕鬆創建客製化的數位教具。

進入首頁,在中間對話框點選「Canva AI」與「幫我撰寫程式碼」,就可以開始描述你的想法。如果一開始還沒想好要創建什麼,下方有提供11組 prompt 的範本,先找一個範本,然後改寫裡面的文字敘述。

raw-image

關掉對話框,如果還想再回來修改,記得再回返首頁,並且點選「Canva AI」與「幫我撰寫程式碼」,然後打開左上角的「選單」按鈕,就會出現之前的歷史紀錄。

raw-image

Canva 跑程式的過程速度比較慢,如果對於作品不滿意,就需要多花時間來回修改,因此建議大家可以先透過其他AI機器人,討論出基本構想,幫你統整指令詞,然後再複製到Canva的對話框,產出的內容會比較符合需求,減少之後來回修改的時間。

網路上也有很多文章、影片介紹如何使用Canva 程式的操作與案例分享,這篇文章就以我個人對國文課的想法,分成四個部分來分享,希望能給其他老師更多的靈感啟發。


1.教學工具

老師在課堂上最常用的應該是點名、抽籤、分組、計時等,而這些工具相對簡單,我一開始也是從這些工具著手練習。翰林、南一都有抽籤、點名類型的數位工具,因此我就是看著上面的功能,試著自己描述出來,並且加上我想要的設計風格——魔法元素。因此我分別做了「魔法抽號機」、「魔法學院計分板」。

「魔法抽號機」提示詞參考

建立一個名為「抽籤機」的互動式工具。
名單模式: 允許使用者輸入或貼上班級學生名單。 提供「開始抽取」按鈕,點擊後隨機選取一位學生。顯示被選取學生的姓名。 可設定是否排除已選取的學生,避免重複點名。 可設定一次選取的人數(預設為一人)。
數字模式: 允許使用者設定抽取號碼的範圍1到50號。 提供「開始抽取」按鈕,點擊後隨機選取一個或多個號碼。顯示被選取的號碼。 可設定是否排除已選取的號碼,避免重複選取。 可設定一次選取的號碼數量(預設為一人)。
設計風格:
1.魔法水晶球設計 - 取代了原來的扭蛋機,更加神秘且符合魔法主題 2.深色魔幻背景 - 使用深藍紫色調,搭配星星背景,營造神秘氛圍 3.魔法粒子效果 - 點擊水晶球時會釋放魔法粒子,增加視覺效果 4.扁平化設計 - 所有元素都採用現代扁平化風格,但保留了魔法元素的特色。

「魔法學院計分板」提示詞參考

建立一個名為「班級計分板」的互動式工具。
功能: 模式選擇: 提供「小組競賽」和「個人挑戰」兩種模式的選項按鈕。
資料輸入: 小組競賽模式: 允許使用者輸入小組名稱(可新增、刪除小組)。 提供每個小組的即時分數輸入框。 提供加分/扣分按鈕,方便快速調整分數。
個人挑戰模式: 允許使用者輸入學生姓名或編號(可新增、刪除)。 提供每位學生的即時分數輸入框。 提供加分/扣分按鈕。
計分與排行榜顯示: 即時更新各組或個人的分數。 自動根據分數高低排序,顯示排行榜。 排行榜可設定顯示前幾名。
加分機制: 提供預設的加分按鈕(例如:+1, +5, +10),方便快速加分。 允許使用者自訂加分項目的名稱和分數(例如:積極參與+2)。
獎勵方式: 提供簡單的獎勵圖示或文字,可在排行榜上顯示給領先者。 可設定在達到特定分數時觸發祝賀動畫或音效。
介面元素: 模式選擇按鈕:「小組競賽」、「個人挑戰」。
視覺風格設計:扁平化、魔法元素。

2.動態展示

老師可以把講義內容,打造成互動式網頁,也許效果沒有特別新奇或有趣,至少可以省去製作簡報的時間,直接變成視覺化、可互動性的網頁。例如:我想到把十二時辰,做成一個時鐘,雖然沒有太大實用功能,如果哪天我要介紹天干地支的國學常識,就可以秀出這個網頁。Canva有個「互動式歷史時間軸」範本,我把它改成「唐宋八大家」的內容,一開始AI自己抓的資料,我覺得不是很精準,所以後來還是自己編修資料,重新把資料餵給AI,產出的成果就比較好。

「十二時辰鐘」提示詞參考

請幫我設計一個以「中國十二時辰」為主的時鐘,讓學生認識十二時辰所對應的時間。這個互動式時鐘展示了中國傳統十二時辰與現代時間的對應關係。時鐘會根據當前時間自動顯示對應的時辰,並高亮當前時辰的區域。時鐘會根據當前時辰自動切換日夜模式。

「唐宋八大家」提示詞參考

製作可吸引學生的互動式歷史時間軸元件。主題是「唐宋八大家」時間軸。其中包含韓愈(768-824)、柳宗元(773-819)、歐陽脩(1007-1072)、蘇洵(1009-1066)、曾鞏(1019-1083)、王安石(1021-1086)、蘇軾(1036-1101)、蘇轍(1039-1112)等八人的生平簡介、文學風格、文學成就、代表作品,以及可展開資訊卡和一致的視覺風格
raw-image

3.遊戲測驗

知名的遊戲教育網站(如:Kahoot、Quizlet、Wordwall)所具備的閃卡、字卡配對、翻牌記憶、填空等功能,這些通通都可以在Canva上實現啦!只要你有想像力,就可以用Canva試試看。我覺得很適合語文科,像是成語、語文常識比較偏記憶性的知識,就可以透過遊戲化的測驗,讓學生玩一玩。

另外,我之前玩過《Reigns》遊戲,我就突然想到可以來做個簡單的心理測驗,所以就先用Gemini討論好,並產出十組問題與三種類型結果。教學情境可以用於引起動機的環節,測驗完讓學生有恍然大悟:「原來,對於同樣的事情,大家會有這麼不同的選擇和想法!」也許,國中可以搭配〈五柳先生傳〉、高中可以搭配〈漁父〉。

⭐「借代修辭字卡測驗」提示詞參考

製作幫助玩家學習字彙的互動式閃卡遊戲。
主題是:中文借代修辭。
資料如下:……(有指定資料的話,AI就會依據此筆資料產生測驗喔)
raw-image

「心理測驗遊戲」提示詞參考

創建一個「左滑右滑」的卡牌遊戲。參考《Reigns》遊戲,玩家在遊戲當中遭遇的事件或對話,全部都是一張張的紙牌。每張紙牌只有往左或往右翻兩種動作選項。通常,往左翻代表「是」、往右翻代表「否」。
遊戲說明:依序呈現十個問題,每個問題都有兩張卡片,分別代表不同的選項,分別代表兩種不同的價值觀。根據玩家的選擇,呈現出測驗結果。
遊戲操作說明:點擊並拖曳卡片往你想選擇的方向滑動。 向左滑動時,卡片會向左移動。向右滑動時,卡片向右移動。
十個問題如下:……
結果類型如下:……

4.創作任務

老師可以製作特定主題的數位工具,方便每次教到這個單元時,就可以拿出來使用。

  • 「語文挑戰任務」,適合腦力激盪、發散思維的情境,隨機產出寫作任務,讓學生快速造句,應該滿適合醒醒腦。
  • 「拼貼詩」之前我有看過翰林出版社做過一個,完成後可以輸出作品。於是我參考《翰林素養漫慢讀》第一冊的教案,也製作了一款拼貼詩工具,可惜這個網頁只有前端功能,無法輸出圖片、PDF等,或是做出一個回傳使用者作答結果的數據給後台統計。

「語文挑戰任務」提示詞參考

請製作一款名為「語文挑戰任務」的互動式小遊戲。
遊戲的核心機制是基於三組「文字骰子」的隨機組合,這三組分別代表:語文任務、主題情境和創作條件。玩家點擊對應的骰子,就會隨機顯示出該分類的挑戰內容,並顯示在「今日挑戰任務」的文本顯示區域。除了各別點擊骰子,也要製作一鍵點擊全部骰子的按鈕。
「文字骰子」請設計成「魔法藥水」,三瓶不同顏色的魔法藥水分別為: 左邊的藥水瓶是粉色的 : 貼上「語文任務」標籤。 中間的藥水瓶是藍色:貼上「主題情境」標籤。 右邊的藥水瓶是紫色的:貼上「創作條件」的標籤。
raw-image

「拼貼詩」提示詞參考

建立互動式的拼貼詩創作畫布,學生可以點選文字,拖曳到畫布中,組合成一首詩歌,並且可以輸入姓名、作品命名、以及創作理念的欄位。
詳細操作方式:使用者拖曳字卡或雙擊字卡到畫布上。在畫布上,拖曳詞卡到畫布上可以自由調整位置,雙擊已有的字卡可以刪除它。雙擊畫布空白處可以添加自定義文字。
色彩風格:扁平化、簡約、可愛。
拼貼詩的特定詞彙如下:……



留言
avatar-img
Rutaverse 芸香小宇宙
19會員
51內容數
芸香(Ruta)是一種驅逐書蟲的香草植物。寫作者的腦袋本身就是一個元宇宙(Metaverse)。''ruta''加上''vesrse'',開啟方格子沙龍,透過書寫整理我的所思所想。相信文字蘊含著能量,萬事萬物皆有連結與意義。目前主要分享閱讀筆記、學習成長、生活閒談等。
2025/05/31
隨著AI科技的發展,「氛圍編程」(Vibe Coding)成為程式設計的新浪潮,使用者即便不具備程式語言基礎,也能透過自然語言描述需求,由 AI 自動生成程式碼。
Thumbnail
2025/05/31
隨著AI科技的發展,「氛圍編程」(Vibe Coding)成為程式設計的新浪潮,使用者即便不具備程式語言基礎,也能透過自然語言描述需求,由 AI 自動生成程式碼。
Thumbnail
2025/03/23
對AI輸入你想學習的單字,然後請AI生成例句、同義詞代換、搭配短語,或會話應用等,學習方法多元,可以讓學習者快速認識單字的用法。在這個時代,AI是很棒的語言家教,那麼國語文學科應該也可以借助AI的力量,讓老師去編製教材。
Thumbnail
2025/03/23
對AI輸入你想學習的單字,然後請AI生成例句、同義詞代換、搭配短語,或會話應用等,學習方法多元,可以讓學習者快速認識單字的用法。在這個時代,AI是很棒的語言家教,那麼國語文學科應該也可以借助AI的力量,讓老師去編製教材。
Thumbnail
2024/11/11
與AI腦力激盪、整理資料→討論完做總結→生成簡報大綱→命製作文題目
Thumbnail
2024/11/11
與AI腦力激盪、整理資料→討論完做總結→生成簡報大綱→命製作文題目
Thumbnail
看更多
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
今天介紹的是 #canve 小小的做個範例影片, 意外看到這種小動畫廣告XD 順便貼圖的廣告做上去看看成品, https://www.instagram.com/p/C9CdEkropaS/
Thumbnail
今天介紹的是 #canve 小小的做個範例影片, 意外看到這種小動畫廣告XD 順便貼圖的廣告做上去看看成品, https://www.instagram.com/p/C9CdEkropaS/
Thumbnail
AnyText是一款先進的圖像AI工具,利用深度學習技術,根據你輸入的文字描述生成圖像,更棒的是,它能生成繁體中文,而且能指定文字生成的位置。
Thumbnail
AnyText是一款先進的圖像AI工具,利用深度學習技術,根據你輸入的文字描述生成圖像,更棒的是,它能生成繁體中文,而且能指定文字生成的位置。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
運用生成的AI圖像來激發視覺和創意,無論是生成素材、用在社交媒體上,這些圖像都能為你的的視覺帶來獨特的風格。
Thumbnail
運用生成的AI圖像來激發視覺和創意,無論是生成素材、用在社交媒體上,這些圖像都能為你的的視覺帶來獨特的風格。
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
在FB上看到運用canva 製作動畫,從右道中之後在到左上,感覺運用介紹作品的效果不錯,就之前做的AI圖片,試試看效果。 運用canva 動畫AI作品展示,相信有在玩AI的朋友,可以運用此功能分享您的作品。 假日來補錄教學影片分享。
Thumbnail
在FB上看到運用canva 製作動畫,從右道中之後在到左上,感覺運用介紹作品的效果不錯,就之前做的AI圖片,試試看效果。 運用canva 動畫AI作品展示,相信有在玩AI的朋友,可以運用此功能分享您的作品。 假日來補錄教學影片分享。
Thumbnail
結合不同AI軟體,無論「文本敘述生圖」、「以圖繪圖」、「AI局部改圖」,多多嘗試,才能得到更好的結果,玩得開心,結果自然愉快。 先用Canva「Text to image」勾勒出人體崩壞圖,它畫面構圖仍是好的,再用Unidream「文本描述生圖」上傳參考圖並輸入文字指示,立馬正常許多
Thumbnail
結合不同AI軟體,無論「文本敘述生圖」、「以圖繪圖」、「AI局部改圖」,多多嘗試,才能得到更好的結果,玩得開心,結果自然愉快。 先用Canva「Text to image」勾勒出人體崩壞圖,它畫面構圖仍是好的,再用Unidream「文本描述生圖」上傳參考圖並輸入文字指示,立馬正常許多
Thumbnail
在數位時代,圖片是內容行銷中不可或缺的元素。無論是社群媒體、部落格文章,或是電子報,都需要精美的圖片才能吸引讀者目光。然而,對於許多內容行銷創作者來說,設計圖片是一項挑戰。如果您是初學者,或是沒有時間學習複雜的設計軟體,那麼可以嘗試使用線上設計工具。線上設計工具簡單易用,即使沒有設計基礎也能輕鬆完成
Thumbnail
在數位時代,圖片是內容行銷中不可或缺的元素。無論是社群媒體、部落格文章,或是電子報,都需要精美的圖片才能吸引讀者目光。然而,對於許多內容行銷創作者來說,設計圖片是一項挑戰。如果您是初學者,或是沒有時間學習複雜的設計軟體,那麼可以嘗試使用線上設計工具。線上設計工具簡單易用,即使沒有設計基礎也能輕鬆完成
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News