在現代數位教學環境中,人工智慧(AI)已成為教師不可或缺的好幫手。透過 AI 協助撰寫程式碼,教師可以更有效率地設計出互動式學習工具,提升學生的學習動機與專注力。其中一個實用的應用案例,就是讓學生觀看 YouTube 教學影片時,搭配互動問答機制來引導學習進程。
利用 AI 設計互動式教學影片流程:
👍學生觀看影片,配合互動問題
教師可透過簡單的程式設計,設定學生在觀看 YouTube 教學影片時,影片會在特定時間點暫停,並跳出與內容相關的提問。只有學生正確回答問題後,影片才會繼續播放,避免跳過重要學習重點,並有效防止快轉行為。
👍ChatGPT 協助自動產生問題
利用 ChatGPT 等 AI 工具,教師可以輸入影片內容摘要或重點段落,讓 AI 自動產生相關的選擇題或開放性問題。這不僅節省備課時間,也確保問題貼近教學主題與學習目標。
👍教師審閱並優化題目內容
AI 所產出的問題經由教師審閱、調整與補充,確保符合課程水準與學生理解能力,避免過於簡單或太難的題目影響學習成效。
👍使用 Gemini、v0、Claude 或 Canva 等平台製作網頁
最後,教師可選擇使用像 Gemini、v0、Claude 或 Canva 等低程式碼/免程式碼平台,快速建立具有互動問答功能的教學網站。這樣的教學平台可整合影片、問題與學習紀錄,打造完整的數位學習體驗。
參考作法
在 ChatGPT(https://chatgpt.com/) 中提問:
提示詞:根據YouTube影片內容,設計5個繁體中文的選擇題,並提供正確解答和問題所在的時間戳記。 https://www.youtube.com/watch?v=H14bBuluwB8
https://chatgpt.com/share/683f1377-6cac-8008-805b-67431392ec23
將 ChatGPT 的回答儲存為 PDF 檔。
接著,來到 Gemini(https://gemini.google.com/)。
先上傳這個 PDF 檔,選取 Canvas 模式,再使用以下的指令:
我想做一個看影片答問題的自主學習互動網頁,並以YouTube影片(ID:H14bBuluwB8)為例,設計一個互動式網頁。平台提供:
1.提供YouTube影片播放器。
2.在播放影片中停下來讓學生回答問題後,再往下進行播放和回答問題。
3.根據上傳的題目的時間戳記插入停留點,並顯示問題讓學生回答,並記錄學生回答的結果統計分數。
4.影片播放結束時,讓學生填寫心得。
5.設計影片播放時無法快轉
6.讓心得撰寫的文字方塊無法使用Ctr+V或按右鍵選取貼上等方式貼上文字。
7.界面使用繁體中文並注意字體大小以利學生閱讀。
8.避免使用外部圖片資源,以明亮而色彩豐富的視覺化設計。
9.盡量增加網頁互動性,以利學生學習。
10.以側邊欄位,顯示學生的操作歷程,並且可以切換顯示/隱藏側邊欄位。
11.提供按鈕,可以將學生的分數和留下的心得在瀏覽器中以列印方式輸出學習記錄的PDF檔。
結果:https://g.co/gemini/share/e8e2b41b782e
接著,來到 v0(https://v0.dev)。利用相同指令和題目製作互動網頁。
結果:https://v0-chat-gpt-am.vercel.app/