跳到主要內容

🪄 AI 神助攻!零程式碼打造專屬「課堂互動網頁」實戰講義

進入數位時代,不論是第一線的教育工作者還是內容創作者,常常需要各式軟體來輔助作業。然而,繁瑣的安裝步驟與隱私外洩的疑慮總是讓人卻步。今天除了為大家開箱兩款「免安裝、即開即用」的開源網頁端神器外,更加碼帶來「自己的工具自己做」的多元教學情境與實戰練習題,帶你一步步成為數位教學神隊友!

 

 

1.智慧課堂助手 (Smart Classroom)

專為教師量身定制的「數位教室大禮包」,採用 WebRTC 即時技術與無伺服器架構。免除繁瑣部署,點開即用,將課堂上的各種情境完美整合在一起。

🎤 語音感知系統

透過麥克風偵測全班噪音,吵雜時自動扣分,安靜時加分,班級經營神隊友!

📱 IRS 互動問答

學生免裝 APP,掃描螢幕 QR Code 即可連線答題,教師端即時觀看統計圖表。

🎲 隨機與計分結合

支援男女混合抽籤、自動分組,並與全域的計分板完美互通。

⏱️ 多元動態計時

內建大時鐘、速按計時器以及具有動畫效果的番茄鐘模式。

🔥 實戰教學情境與應用

🏫 實戰情境一:低年級的「無痛秩序管理」

每次分組討論總是吵到掀屋頂?開啟「語音感知系統」,設定好噪音容忍值與自動扣分機制。你會發現學生為了保護小組分數,會開始互相提醒「小聲一點」,老師再也不用扯著嗓子管秩序!

🎓 實戰情境二:中高年級的「即時檢核測驗」

教完一個段落想知道學生懂不懂?立刻切換到「IRS 互動問答」,學生只要拿出手機或平板掃描大螢幕的 QR Code 就能作答。系統會即時生成圓餅圖,哪裡不懂馬上重點複習,大大提升課堂參與度。

2.螢幕錄影工具 Pro (Screenrecorder)

極致輕量化且注重隱私的免安裝前端錄製器。您的畫面與聲音絕對不會上傳到任何伺服器,全由瀏覽器本機記憶體即時運算產生檔案。

🔒 100% 本地運算

完全無伺服器干涉,隱私安全掛保證,再機密的會議也能安心錄製。

🎛️ 專業級雙軌混音

前端即時把「電腦內部播放聲音」與「麥克風解說聲」混合錄製。

🖼️ 浮動子母攝影機

內建可自由調整大小、拖曳的 Webcam 視窗,錄製教學影片臨場感十足。

💾 高畫質直接封裝

支援暫停與繼續控制,結束後立刻封裝為 WebM/MP4 並提供一鍵下載。

🔥 實戰教學情境與應用

🔄 實戰情境一:翻轉教室的「非同步課程」

老師在家錄製數學解題過程或 PPT 簡報時,可以開啟「浮動子母攝影機」將自己的畫面放在右下角,同時利用「雙軌混音」播放影片教材音效與自己的麥克風解說。一鏡到底,錄完直接產出高畫質影片上傳平台。

🔐 實戰情境二:行政系統的「機密操作教學」

教導新進教師如何使用校務行政系統時,往往會帶到學生的個資畫面。使用這款「100% 本地運算」的錄影工具,由於檔案只存留在你的瀏覽器記憶體中,不怕機密畫面被偷偷上傳到任何雲端伺服器,資安防護大升級!

3.自己的工具自己做!6大痛點情境大公開

身為老師,一定遇過市面上的軟體「剛好少了一個關鍵功能」的窘境。沒關係,現在有 AI 神助攻,你可以自己寫!以下幫大家整理了 6 種常見的教學痛點情境,快來挑選你想挑戰設計哪一種工具:

📝 語文科:生字筆順闖關

情境:學生覺得寫生字很無聊。
工具構想:用 Canvas 繪圖板結合筆順動畫,寫對發出過關音效,讓生字練習變遊戲!

🍕 數學科:動態分數圓餅圖

情境:分數概念太抽象,黑板畫不圓。
工具構想:設計可拖曳滑桿、動態切割等分並塗色的圓餅圖互動網頁,視覺化呈現等值分數。

🪑 班級經營:智慧座位大師

情境:排座位考量太多,總是排到眼花。
工具構想:支援「特定學生避開」、「男女梅花座」等條件設定的拖曳式座位表產生器。

🗣️ 英語科:情境單字錄音機

情境:學生回家不敢開口唸英文。
工具構想:隨機跳出單字,內建語音辨識 API,唸對給星星,還能播放老師預錄的標準發音。

🏆 體育/活動:全螢幕賽程計分板

情境:運動會或大活動,遠處看不清分數。
工具構想:超大字體的極簡計分板,支援鍵盤快捷鍵加減分、換邊,以及勝利撒花特效。

❤️ 輔導/特教:心情溫度計打卡版

情境:孩子有時難以用口語表達情緒。
工具構想:每日早自習讓學生點擊不同表情符號打卡,後台自動生成全班情緒光譜圖。

4.實戰演練:換你來當神隊友 (練習題)

看完了這麼多情境,手是不是有點癢了呢?我們來做個簡單的「AI 詠唱(Prompt)與企劃練習題」,幫你暖暖身!建議老師們可以拿出一張白紙,跟著以下步驟思考:

📝 任務一:AI 指令填空練習

情境:你想做一個「班級經營用的倒數計時器」,並且時間到時要有提示音。
請試著完成以下向 AI 許願的指令:

「請幫我用單一 HTML 檔案寫一個倒數計時器,介面風格要是 [請填寫:例如 森林系/科技風/極簡風] 的,並且在時間歸零時 [請填寫:例如 發出爆炸音效/跳出過關動畫/全螢幕閃爍紅光]。」

🧩 任務二:問題與工具配對

面對以下真實教學挑戰,你會想開發什麼工具來解決?(沒有標準答案,請發揮創意!)

  • 挑戰 A:學生分組討論時,總是忘記控制音量。 ➔ 你的構想工具:____________________
  • 挑戰 B:平時考改考卷很花時間,又想馬上知道哪一題錯最多。 ➔ 你的構想工具:____________________

💡 任務三:終極挑戰 - 寫下你的痛點

請回想你目前教學上遇到最大的一個困難,並試著用這句話造句:
「如果有一個網頁小工具,它可以幫我 _____________________,那就太好了!」
(完成造句後,這就是你第一次請 AI 寫程式的最佳起手式喔!)

5.加碼贈送:零基礎專用!AI 萬用防呆詠唱咒語

很多老師第一次請 AI (如 Gemini 或 ChatGPT) 寫程式時,最怕遇到 AI 吐出一堆需要安裝環境、架設伺服器的複雜代碼(例如 Node.js 或 Python)。為了解決這個痛點,我特別為各位老師設計了這段「最高防呆等級的 Prompt (提示詞)」。只要複製這段咒語,加上你自己的需求,AI 就會乖乖寫出「免伺服器、點擊兩下就能直接用」的純網頁工具喔!

✨ 防呆詠唱咒語 (請自由選取複製)

你現在是一位精通教育科技的資深前端工程師。我的需求是開發一個【請填寫:例如 班級抽籤與計分工具】

為了確保完全沒有程式背景的老師也能輕鬆使用,請嚴格遵守以下「最高防呆準則」來生成程式碼:

  1. 單一檔案輸出:請將所有的 HTML、CSS 與 JavaScript 程式碼,全部整併在「單一個 .html 檔案」中,絕對不要拆分成多個檔案或引用本地端素材。
  2. 零伺服器依賴 (Serverless):絕對不要使用 Node.js、Python、PHP 或任何後端資料庫。所有的運算與邏輯必須 100% 在瀏覽器端運行。
  3. 免安裝即開即用:不需要 npm 或任何終端機指令。只要將你給的程式碼存成 .html 檔,點擊兩下用瀏覽器開啟就能立刻完美運行。
  4. 本機資料儲存:如果工具需要記錄數據(如分數、學生名單),請一律使用瀏覽器的 localStorage,確保重新整理後資料不會消失,且斷網也能用。
  5. 教學現場化 UI:請採用適合教學場景的現代化介面,字體要大、按鈕要清晰,並支援手機與大螢幕平板。視覺風格請設定為【請填寫:例如 童趣可愛風 / 專業極簡風】

請直接提供完整的 HTML 程式碼,確保複製貼上即可使用,不要省略任何關鍵邏輯。

6.加碼預告:準時下班不是夢!AI 實戰研習

老師們,今天又陪著夕陽加班了嗎?備課、做簡報、找素材、算成績... 每天被無盡的工作追著跑?是時候把繁瑣的庶務交給 AI,把屬於你的下班時間找回來了!臺北市日新自造教育及科技中心特別邀請到小弟我(臺北市國語實小 黃健哲),將帶來滿滿 3 小時的實戰乾貨!不講空泛的理論,只教你如何打造專屬的「AI 教學分身」,大幅壓縮備課工時,輕鬆提升教學品質!

🎯 精彩實戰亮點,招招擊中痛點

🤖 打造專屬 AI 助理

別再跟 AI 雞同鴨講!掌握「G-C-F 萬用提示詞公式」,教案初稿一次到位,省下反覆試錯的焦慮。

📊 一鍵生成教學簡報

備課殺手鐧 NotebookLM 登場!匯入你的專屬課綱,自動產出無幻覺的教學簡報,排版抓重點瞬間搞定。

🎨 零版權爭議教材產出

告別網海撈圖的痛苦!學會「先規劃、再生圖」秘技,幾分鐘精準生成專屬無字知識圖表。

💬 釋放課後輔導時間

讓 AI 化身特定角色!運用蘇格拉底詰問法引導學生反思,把無極限的耐心交給 AI 助教。

📈 秒解成績數據

丟掉繁瑣的 Excel!讓 AI 幫你快速分析成績趨勢,並掌握「AI 倫理守則」,防禦性省時最安心。

📅 研習報名資訊看這邊

不管你是 AI 新手還是想精進指令的高手,這堂課都會讓你帶著滿滿的「省時自動化工具」滿載而歸!名額有限,趕快登入全教網卡位!

  • 📌 主題:讓 AI 成為你的教學『分身』,準時下班不是夢-GEM教學應用實戰
  • ⏰ 時間:114 年 04 月 24 日(星期五)13:30 - 16:30(共 3 小時)
  • 📍 地點:線上研習課程(免出門,準時上線學習!)
  • 👨‍🏫 講座:臺北市國語實小 黃健哲老師
  • 🔗 報名:請至「全國教師在職進修資訊網」報名 點我前往報名頁面
辦理依據:依臺北市政府教育局 114 年 11 月 28 日北市教資字第 1143114233 號函及本校 114 學年度臺北市日新自造教育及科技中心計畫辦理。
#準時下班不是夢#教師研習#AI教學應用#NotebookLM#日新科技中心#教師增能#AI自動化

7.研習簡報與資源總匯

想帶領老師們一起用 AI 變出專屬的課堂小工具嗎?為您準備了這份精美的上課簡報,歡迎直接點擊下方預覽或全螢幕觀看!

迫不及待想嘗試更多超棒的教學網頁工具了嗎?

👉 點擊前往免費課堂工具總匯
免責聲明:本文提及之開源工具及 AI 生成技術,其運行結果可能因設備環境或瀏覽器版本而異。建議於正式教學前先行測試,以確保課堂順利進行。

留言

這個網誌中的熱門文章

讓 AI 成為你的教學「分身」,準時下班不是夢—— GEM 教學應用實戰 (Google Educator Masterclass)

各位老師,辛苦了!在現今的教育現場,繁重的行政報表、課綱教案與親師溝通,總是把時間切割得零碎,「準時下班」似乎成了都市傳說。這份「GEM 教學應用實戰講義」,並非要讓 AI 取代您的教學專業,而是帶您打造一個不知疲倦、隨傳隨到的「數位分身」。     寫在前面:為什麼我們需要 AI 教學分身? 教師的角色早已不只是「傳道、授業、解惑」。透過掌握關鍵 AI 應用,我們要把省下來的時間,還給您自己,或是還給那些真正需要您陪伴的學生。 💡 核心心法: 「AI 負責打底與高效產出,老師負責審核與靈魂注入。」 第一章:課前準備與專屬「百寶箱」建置 在開始詠唱提示詞之前,建立一個順暢的數位工作環境是成功的一半。 1-1 雙螢幕/分割畫面操作(線上研習必備) 在線上實作研習中,最常發生的悲劇就是「切去操作 AI 視窗,就找不到講師的畫面了」。 Windows 系統秘技: 點選瀏覽器視窗上方標題列,按下鍵盤 Windows鍵 + 左/右方向鍵 ,視窗會瞬間對半貼齊螢幕。 Mac 系統秘技: 將游標懸停在視窗左上角的「綠色全螢幕按鈕」上,選擇「將視窗平鋪於螢幕左/右側」。 最佳配置: 左半邊放置 Google Meet 畫面(看講師示範),右半邊開啟您的 AI 助手與百寶箱網頁。 1-2 專屬百寶箱:線上指令庫快速連結 本次研習主辦方已經為大家建置了最強大的線上指令庫。我們不需要到處找檔案,請直接點選以下連結開啟這兩個專屬網站,它們就是你未來的「虛擬大腦」: 📖 GEM 教學「分身」 教師減負全方位應用指南 ⚙️ GEM 行政「引擎」 國中小處室效能提升指南 第二章:基礎賦能 —— 讓 AI 秒懂你的「5 元素萬用公式」與風險控管 很多人覺得 AI 給的答案「很廢、像官樣文章」,原因在於我們的指令太模糊。如果你遇到百寶箱中沒有的情境,請記住這個萬用公式。 2-1 破解黑盒子:5 元素提示詞公式 要讓 AI 產出精準的內容,請牢記: 「對象 + 任務 + 限制 + 格式 + 目的」 【對象】: 年級、程度、班級特性(例:針對注意力不集中的國一學生)。 【任務】: 教材、評語、活動、回覆(例:設計一份閱讀測驗)。 【限制】: 字數、時間、堂數、語氣(例:限 300 字,語氣要幽默)。 【格式】: 表格、條列、逐字稿、題庫(例:請用表格呈現,欄位包含....

2026高齡駕駛換照懶人包:70歲新制、75歲認知功能測驗、繳回駕照TPASS回饋一次看

家中長輩滿70歲、仍會騎車或開車出門嗎?預計2026年5月31日,高齡駕駛換照制度正式下修到70歲,但這不是要禁止長輩開車,而是透過體檢、交通安全教育與分級把關,讓長輩更安心、家人也更放心。本文已把容易誤會的期限、認知功能檢測與TPASS回饋方式完整整理,陪你用最清楚的方式看懂新制。     導讀區:這篇先幫你抓重點 這次高齡換照新制最容易被誤會的地方有三個:第一,不是所有人都要立刻衝去監理站,原則上要等監理所、站通知;第二,70歲到未滿75歲與75歲以上流程不同;第三,繳回駕照的3.6萬元不是一次領現金,而是符合資格後依實際搭乘大眾運輸支出給50%回饋。 70歲新制 體檢合格,加上免費安全教育與危險感知體驗,通過後駕照可使用到75歲。 75歲以上 維持每3年換照,需體檢、認知功能檢測或提出未患中度以上失智症證明。 放下方向盤 70歲以上自願繳回名下所有駕照,可申請TPASS乘車回饋,2年最高3.6萬元。 文章目錄 點擊快速跳轉 1. 2026高齡換照新制先看懂 2. 70歲與75歲流程差在哪 3. 換照流程照著做就好 4. 認知功能檢測考什麼 5. 出門前證件與費用清單 6. 逾期未換照的罰則 7. 繳回駕照與TPASS回饋 8. 家人陪辦提醒與常見問題 1. 2026高齡換照新制先看懂 預計2026年5月31日起,台灣高齡駕駛換照制度進入新的分級管理階段。過去大家比較熟悉的是75歲以上高齡駕駛換照,現在新制把關懷年齡提早到70歲,重點不是把長輩的車鑰匙收走,而是讓長輩在身體狀況還不錯的時候,透過體格檢查、安全教育課程與危險感知體驗,重新確認自己是否適合繼續騎車或開車。 這件事對很多家庭很實際。長輩可能每天騎機車買菜、接孫子、去醫院回診,也可能習慣自己開車到市場、活動中心或鄰近鄉鎮辦事。交通工具對長輩來說不只是移動方式,也是一種生活自主感。所以談高齡換照時,語氣不應該是「你老了不能開」,而是「我們一起確認怎麼出門比較安全」。 最重要的一句話 滿70歲以上長者原則上等監理所、站寄發換照通知再辦理,不需要因為聽到新制就急著提前換照。若有違規、吊扣、逾期或個案通知,則依監理機關通知內容辦理。 如果你是子女或晚輩,建議先不要用命令式口氣要求長輩放棄駕駛。比較好的做法,是陪他一起看通知書、安排體檢、理解流程,也一起討論如果未來少開車,附近有哪些公車、捷運、...

「2026台北鼠患危機:25年首見漢他病毒!見鼠地圖與滅鼠生態反撲全解析」

哈囉大家好!最近生活在台北的大家,出門走跳時有沒有覺得心裡毛毛的呢?2026年的台北街頭,不僅天氣變化多端,還迎來了一場讓人不容忽視的「鼠患風暴」。不僅是路上看到米奇的機率變高了,更可怕的是,伴隨而來的漢他病毒已經敲響了公衛警報!今天這篇文章,我將帶大家深入了解這次的鼠患危機、民間與市府的滅鼠大作戰,以及我們在撲滅老鼠的同時,必須正視的生態悲歌。準備好了嗎?讓我們一起看下去吧!     1. 25年首見!漢他病毒拉響台北公衛警報 時間拉回今年1月,台北市出現了讓所有醫療人員高度戒備的新聞—— 25年來首宗漢他病毒(Hantavirus)死亡案例 。一位居住在大安區的70多歲長輩因為感染不幸離世,緊接著今年又出現了第二宗確診案例。這不僅僅是冰冷的數字,更意味著藏匿在城市暗處的鼠患,已經直接威脅到市民的生命安全與健康。 漢他病毒主要透過老鼠的排泄物、尿液傳播,當帶有病毒的微粒飄散在空氣中被我們不小心吸入,或是接觸到受污染的物品,都有極高的感染風險。面對這樣無形的敵人,我們絕對不能掉以輕心,出入髒亂場所記得戴好口罩喔! 2. 抓鼠大作戰:民間見鼠地圖與市府對策 為了對抗這場危機,不僅官方動起來,民間力量也卯足了全力。熱心網友特別開發了數位化的 「見鼠地圖 Rat Radar (ratdar.taipei)」 ,透過民眾通報,讓大家可以隨時掌握各區的鼠患熱點與毒餌標記,出門時盡量避開高風險區域。 此外,蔣萬安市長也正式宣布,自5月11日起,全市行政區將同步展開清潔行動。市府更成軍了由環保局人員組成的 「鼠類偵防師」團隊 ,超過百名人力將深入社區協助民眾尋找老鼠源頭。為了壓制鼠群數量,據市議會資料指出,市府採購了約1公噸(1000公斤)的老鼠藥投入環境防治,這絕對是一場必須謹慎面對的硬仗! 2例 漢他確診案例 百人 鼠類偵防師 1公噸 採購老鼠藥 3. 滅鼠的隱形代價:猛禽與生態圈的悲歌 然而,當城市大量使用化學鼠藥來保護人類家園時,大自然卻默默承受了沉重的代價。根據 台灣猛禽研究會 的警告與過往數據顯示,在被尋獲的死亡猛禽中,竟然高達 61%的體內被檢測出鼠藥成分 !這數據真的讓人非常心痛。 這就是可怕的「次級毒殺」。老鼠吃下毒藥後不會立刻死亡,行動變得遲緩的牠們,反而成為了鳳頭蒼鷹、領角鴞等城市猛禽最容易捕捉的獵物。毒素就這樣順著食物鏈,一層一層在生態系...