AI 賦能教師自製教學工具-1140523分享實況錄影+重點整理

AI 賦能教師自製教學工具

讓非科技領域老師也能利用 AI 寫程式製作教學工具

課程影片

會議概述

• 講師：張哲剛老師 (阿剛老師)
• 主題：AI 賦能教師自製教學工具
• 目標：讓非科技領域老師也能利用 AI 寫程式製作教學工具
• 與上次課程對比：本次更適合一般領域老師，無需程式基礎
• 會議時長：三節課，約至 9:30 PM
• 主辦：花蓮縣教育處教育網絡中心

為何老師需要自製教學工具？

學校有許多工具需求 (抽獎機、抽號機等)

現有工具可能不完全符合個人需求

難以請人修改或不好意思開口

AI 科技發達，可協助生成工具

使用 AI 寫程式的基本流程

以抽籤程式為例

選擇 AI 工具

ChatGPT (免費版可)、Claude (介面較美觀，付費)、Gemini (介面美觀，可上網找資料，Canvas 功能，免費版可用)

操作步驟

1

明確功能需求 (自然語言描述)

2

將需求告訴 AI
如：國小導師想寫 HTML 抽籤程式，需學生姓名、記錄結果、介面好看

3

複製 AI 生成的程式碼 (HTML, CSS, JavaScript)

4

儲存程式碼為 HTML 檔案
使用記事本等文字編輯器，另存新檔，檔名.html，編碼 UTF-8，檔案類型選所有檔案

5

測試程式功能

6

根據測試結果，用文字向 AI 提出修改需求
如：抽籤會重複、作弊功能、移除提示訊息、調整外觀、保留抽籤結果

7

重複步驟 3-6 直到滿意

實用技巧

• 如果功能複雜，可拆解成小步驟逐步要求 AI 完成
• 可請 AI 建議程式功能列表，再從中挑選
• 測試時注意所有細節，發現問題立即回饋給 AI
• 不同 AI 模型寫出的程式風格和介面不同

將 HTML 程式發佈到網路

方法 1: 使用免費網頁空間 (如：yay.boo)

• 將 HTML 檔案命名為 index.html
• 將 index.html 及相關檔案上傳至 yay.boo
  (圖片需在同一個資料夾，無子資料夾)
• 設定自訂網址

優點：簡單、免費、無需註冊

限制：檔案大小限制 (約 10MB/檔)，網頁右下角可能有廣告

方法 2: 使用 Canva AI (需教育版或 Pro 版)

• 在 Canva AI 中撰寫程式碼
• 點選「在設計中使用」，選擇「簡報」模板
• 使用「調整尺寸」功能將簡報轉換為「網站」模板
• 點選「發佈網站」並設定網址

優點：整合開發與部署、介面美觀、教育版無部署數量限制、無廣告

限制：聊天記錄可能無法完整保留、部分功能在 Canva 網站上被鎖定

方法 3: 使用 Gemini Canvas (免費版可用)

• 在 Gemini Canvas 中撰寫程式碼
• 點選「共用」按鈕
• 複製公開連結

優點：整合開發與部署、可直接分享連結

限制：使用者需登入 Google 帳號才能使用、學生可能看到程式碼

Canva AI 進階應用

整合多個程式到同一個網站

• 建立一個主要的「網站」設計
• 將各個 Canva AI 生成的程式元件複製到主要網站設計的不同頁面
• 發佈網站時勾選「包含導覽選單」，可透過選單切換不同程式頁面

修改已發佈的 Canva AI 程式

• 找到原來的 Canva AI 聊天記錄
• 向 AI 提出修改需求，生成新的程式碼元件
• 在已發佈的網站設計中，刪除舊的程式元件，貼上新的元件
• 重新發佈網站

下載 Canva AI 程式碼

• 打開已發佈的 Canva AI 網站
• 在程式區域按右鍵，選擇「檢視框架來源」
• 複製完整的 HTML/CSS/JavaScript 程式碼
• 貼到記事本，另存為 .html 檔案
• 可用於本地使用或部署到其他網頁空間，解鎖下載檔案等功能

將 Canva AI 程式嵌入簡報

• 將 Canva AI 生成的程式元件複製到 Canva 簡報的頁面中
• 在簡報模式下，該頁面會呈現為可互動的網頁程式

講師分享的自製工具範例

班級課堂管理工具 (用 ChatGPT 寫)

功能：學生姓名匯入、分組 (限一次)、每日加扣分、小組加分、點名、作業檢核 (每日/區間追蹤)、總分統計/兌獎、資料匯出/匯入、學期重置

資料儲存：瀏覽器本地暫存檔

適用對象：導師 (網頁版)、科任老師 (下載後改檔名分班級)

YouTube 影片無廣告播放工具 (用 ChatGPT 寫)

Chrome 擴充元件：安裝後點擊按鈕，將當前 YouTube 頁面轉為內嵌模式播放 (無廣告)

網頁版：輸入 YouTube 網址，生成內嵌播放頁面 (適用手機/平板)

原理：利用 YouTube 政策允許內嵌播放時減少廣告的特性

注意：教育帳號可能限制 Chrome 擴充功能安裝，可換個人帳號或手動安裝

本地端 LLM 工具介面 (用 Claude 寫的 Web UI)

需先在本地電腦安裝 Olama 及語言模型 (需獨立顯卡)

提供友善的 Web UI 介面，取代命令提示字元操作

功能：模型選擇、聊天記錄、文字朗讀、文字複製、提示詞庫 (內建教學範本，可自訂)、角色扮演機器人

檔案：HTML 檔案，需下載到本地使用

提示詞工具網站

收集常用 AI 提示詞範本 (作文批改、期末評語等)

提供填空式介面，快速生成完整提示詞

可一鍵複製提示詞，貼到任何 AI 模型使用

總結

• AI 極大降低了程式寫作門檻，教師可利用自然語言生成客製化教學工具
• 多種 AI 工具 (ChatGPT, Claude, Gemini, Canva AI) 可用於程式生成，各有特色
• 生成的程式可儲存為 HTML 檔案，用於本地或部署到免費/付費網頁空間
• Canva AI 提供整合式的程式生成與部署平台，特別適合教育用途
• 即使沒有程式基礎，也能透過與 AI 互動、逐步修改，完成複雜功能的工具
• 提醒：AI 生成的文本或題目內容仍需教師自行檢核正確性

© 2025 AI 賦能教師自製教學工具. All rights reserved.

感謝講師張哲剛老師的分享！