基於三師爸（Sensebar）的「寫教學應用程式的五個等級」架構，我們將教學網頁分為五個演進階段。 下方為可在本機點擊執行的對應階段網頁與程式範例，幫助您以實際程式碼與架構理解如何實現與學員的互動。
算完就忘・單機版
將題庫寫在前端，用 JavaScript 計算分數。點擊即時對錯反饋。缺點是重新整理或關閉後，作答結果不保存。適合作為快速課堂練習。
課後回收・表單自動化
使用 Google Apps Script (GAS) 建立 API，前端將答題資料透過 POST 傳入，自動寫入雲端 Google 試算表。適合教師課後靜態收集成績。
本機記憶體即時資料庫・雙端同步翻頁
實現三師爸風格的即時互動課堂！包含「講者投影幕端 (Tutor View)」與「學員作答端 (Student View)」。講師翻頁時學員端會秒級同步翻頁，學員提交答案時講者端 Donut 圖表即時累加更新！
AI 問答批改・用完即走版
串接 Gemini API / Groq API，為問答題提供即時回饋。透過 Netlify/Vercel Serverless Function 隱藏 API Key，避免金鑰在前端外洩。
終極版・個人學習歷程儀表板
融合 AI 即時批改與 Firebase 長期紀錄。學員的每次回答、AI 評語與分數皆寫入資料庫，建立學習分析駕駛艙，落實科技為教學減負。
即時對話・對話上下文脈絡
使用 Groq API（例如 LLaMA 3.3）實現一個真正的聊天助教。可儲存對話上下文，提供多輪對話教學，帶領學生以對談方式探索程式主題。
投影片翻頁同步・即時圓形圖統計
實現「左側課程目錄導航、右側簡報與即時互動」的駕駛艙版面。整合即時投票統計圖表，讓導師能隨時掌控全班作答狀態。