AI Agent 教學應用工作坊 (二)

本場講義

課程大綱說明工作坊定位、簡介、適合參與者、學習成果、活動流程與報名資訊；四個實作模組從環境建置到自主練習小工具現已全部完成，建議依序操作：Module 1 完成 ChatGPT App、VS Code 擴充套件的安裝設定，並申請 GitHub 帳號與 GitHub Education；Module 2 把 PDF 考古題轉為一題一張乾淨圖片與標準答案 JSON；Module 3 不套用現成 skill，改用 AI Agent 提示從零設計並打造一套工具，把問題集資料夾變成雙擊即用的學生自測網頁與教師端成績彙整頁；Module 4 則是給沒跟上 Module 3 的學員，直接套用同一個現成 skill 一句話自動生成同樣的成品。

若曾參加工作坊（一），或想在現場前先複習 AI Agent 對話介面與設定基礎，可參考下方的 ChatGPT Work 與 Codex 設定指南。

課程大綱Course Outline工作坊定位、簡介、適合參與者、學習成果、活動流程與報名資訊。Workshop positioning, overview, audience, learning outcomes, agenda, and registration. Module 1：AI Agent 實作環境建置Module 1: AI Agent Hands-on Environment Setup安裝設定 ChatGPT App、VS Code 擴充套件，並申請 GitHub 帳號與 GitHub Education。Install and configure the ChatGPT app and VS Code extensions, and apply for a GitHub account and GitHub Education. Module 2：考古題下載、切題與清理實作教學Module 2: Exam Paper Download, Slice & Cleanup Tutorial跟著做一次「PDF 考古題 → 一題一張乾淨圖片＋標準答案 JSON」，用工作坊講師寫好的三個 custom skill 串起下載、切題、清理三個階段。Hands-on walkthrough turning a downloaded exam PDF into clean per-question images and an answer-key JSON, using three chained custom skills written for this workshop. Module 3：從問題集資料夾產生自主測驗網頁實作教學Module 3: Quiz App Generation Tutorial接續 Module 2 的成果，不直接套用現成 skill，改用 AI Agent 提示從零設計並打造一套能生成雙擊即用、不用架站的學生自我測驗網頁與教師端成績彙整頁的工具。Continuing from Module 2, skip the pre-built skill and use AI-agent prompts to design and build, from scratch, a tool that generates a double-click, no-server student quiz page and a teacher CSV-aggregator page. Module 4：一句話產生自主測驗網頁快速教學Module 4: Quiz App Quickstart Tutorial給沒跟上 Module 3 的學員：不拆解步驟，直接用一句話請 build-quiz-app skill 自動生成同樣的學生自測網頁與教師端成績彙整頁。For anyone who didn't finish Module 3: skip the step-by-step breakdown and use one prompt to let the build-quiz-app skill generate the same quiz page and teacher aggregator automatically. ChatGPT Work 與 Codex 設定指南ChatGPT Work and Codex Setup Guide先選擇 Chat、ChatGPT Work 或 Codex；使用 Codex 時，先限制工作區並採用先要求核准。Choose Chat, ChatGPT Work, or Codex; for Codex, limit the workspace and use Ask for approval first. 自學教材範例 DemoSelf-Learning Material Demo已部署於 GitHub Pages 的考古題自主學習教材範例網站，展示 Module 2–4 產出成品的實際應用。A self-learning material demo site deployed on GitHub Pages, built from past exam papers and showing a real-world application of the Module 2–4 output. ChatGPT Sites 自學教材 DemoChatGPT Sites Self-Learning Demo與 GitHub Pages 版本相同的 C 程式設計自主學習教材示範網站。The same C programming self-learning material demo that is deployed on GitHub Pages.

下載檔案

前測／後測問卷

工作坊當天請用手機掃描 QR Code 填寫問卷：用左側「問卷顯示」切換前測／後測，再掃描對應的 QR Code。報到時填前測，工作坊結束前填後測。

前測問卷

後測問卷

AI Agent Teaching Applications Workshop (2)

This Workshop

The course outline covers the workshop's positioning, overview, audience, learning outcomes, agenda, and registration; the four hands-on modules take you from environment setup to a self-practice tool and are now all complete — follow them in order: Module 1 installs and configures the ChatGPT app and VS Code extensions, and applies for a GitHub account and GitHub Education;Module 2 turns PDF exam papers into clean per-question images and an answer-key JSON; Module 3 skips the pre-built skill and uses AI-agent prompts to design and build, from scratch, a tool that turns a problem-set folder into a double-click student quiz page and a teacher CSV-aggregator page; Module 4 is for anyone who didn't finish Module 3 — it applies that same pre-built skill directly to generate the same result automatically with one prompt.

If you attended Workshop (1), or want to review the AI Agent chat interface and setup basics beforehand, see the ChatGPT Work and Codex setup guide below.

Downloads

Pre/Post-test Forms

On the workshop day, scan the QR code with your phone. Use the "Show form" switch in the sidebar to pick Pre-test or Post-test, then scan its code — pre-test at check-in, post-test right before the workshop ends.

Pre-test Form

Post-test Form