從問題集資料夾產生自主測驗網頁實作教學

Module 2 教學帶你把考古題 PDF 變成「一題一張乾淨圖片 ＋ 正確答案」的問題集資料夾。這份教學接著往下一步走：不用學任何程式或技術名詞，只靠打字跟 Codex 對話，把這種問題集資料夾變成一個雙擊就能打開的學生自我測驗網頁。

工作坊講師其實已經事先準備好一個現成的小幫手，一句話就能請 Codex 用它把這整件事快速做完 那是 Module 4 教的捷徑。這份教學刻意不用那個現成的小幫手，而是從只有「問題集資料夾」這個起點出發，你自己一句一句跟 Codex 描述你想要什麼、看它做出來的東西對不對，再決定要不要調整 目的是讓你熟悉「怎麼跟 AI Agent 講清楚需求」這件事本身，而不是只會套用別人寫好的東西。等你做完這份教學，會發現自己（跟 Codex）做出來的東西，其實跟 Module 4 一句話生成的成品是同一件事；那時候再回頭比較，你會更清楚兩種做法各自的味道。

本教學對應 module3/ 資料夾，裡面目前只有兩組問題集資料夾（題目圖片 ＋ 正確答案），沒有任何預先做好的成品 這是刻意維持的乾淨起點：這份教學的重點是你（跟 Codex）從這兩組資料夾出發，用自己的話講清楚需求，沒有現成範例可以照抄，過程比結果更重要。如果你的專案裡還沒有這兩組資料夾，可以下載 module3-repo.tar，解壓後把 repo/ 資料夾放進 module3/。

這兩份問題集資料夾，其實就是 Module 2 教學做出來的東西 只是換了一組資料，重跑一次「下載／切題／清理」流程而已。module3/ 底下沒有留原始 PDF、也沒有第三組待處理的資料 「動手做」單元會告訴你怎麼自己準備一組全新資料，驗證你請 Codex 做出來的東西是不是真的能重複拿來用，不用每換一組資料就重新講一次需求。

學習目標

做完這份教學，你應該能夠：

• 只用一般人聽得懂的話，跟 Codex 說清楚你想要一個什麼樣的測驗網頁，不用先學任何程式或技術名詞。
• 知道怎麼實際打開、試用 Codex 幫你做出來的網頁，親自確認它真的堪用，而不是「Codex 說做完了」就直接相信。
• 遇到看不懂或不順的地方，知道怎麼把自己實際看到的狀況講清楚，請 Codex 幫你排除，而不是自己動手去改任何檔案。
• 換一組全新的題目資料，也能請 Codex 用同樣的方式再做一次，並確認原本做好的測驗不會受影響。
• 理解這樣「自己一句一句跟 Codex 討論做出來」的東西，跟 Module 4 教的「套用現成小幫手一句話生成」，其實做出來的成品是類似的，差別只在於做的過程。

先備條件

• 已經完成 Module 2：考古題下載、切題與清理實作教學，手上至少有一組「題目圖片 ＋ 正確答案」的問題集資料夾。本教學直接沿用 module3/repo/115、module3/repo/math-115a 這兩組已經做好的資料當範例，你也可以換成自己練習做出來的資料夾。
• 已經能開啟並使用 Codex。若還沒設定好工作環境，請先參考 Module 1：AI Agent 實作環境建置。
• 不需要會寫程式、不需要另外安裝任何軟體或套件、也不需要開啟終端機打指令 全程只要打字跟 Codex 用一般的話對話，加上用滑鼠雙擊檔案來試用成果就好。
• 這一整套流程都是離線的、不需要網路連線（Module 2 的下載階段才需要網路）。

關於 Module 4 教的那個現成小幫手：工作坊講師已經事先幫大家準備好一個包好的工具，一句話就能請 Codex 用它把整件事快速做完，那是 Module 4 的內容。這份教學刻意不用那個現成工具，全程只描述「我想要一個做到 X 的網頁」這種需求，讓 Codex 從問題集資料夾本身出發幫你想清楚、動手做 目的是練習怎麼把需求講清楚，不是抄捷徑。

整體設計總覽

先講結論，用一句話說清楚整份教學在做什麼：「我手上有一份題目跟正確答案，麻煩幫我做成一個學生可以自己打開作答、寫完馬上看到分數的網頁。」不用先弄懂任何技術名詞，就跟你平常請人幫忙做事一樣 把「我想要什麼」講清楚，剩下怎麼做，全部交給 Codex。

整份教學只有三件事，順序做完就好：

1. 把你想要的成品講清楚：用平常說話的方式，跟 Codex 描述學生要看到什麼畫面、要能做什麼事。
2. 自己打開來試用一次：不是「Codex 說做完了」就代表真的沒問題，一定要自己實際打開、作答一次看看，有問題就直接告訴 Codex。
3. 換一組新題目再試一次：驗證這個做法真的能重複使用，不是只對這一組資料剛好有效。

這整件事只要跟 Codex 一起做過一次，以後每多一份新的題目（例如換一個班級、換一份考題），只要照第一步的方式再講一次需求，並提醒 Codex 加進同一個工具裡就好，不用從頭再來一次。

跟 Codex 說清楚你要什麼

全程只靠打字對話，不用寫程式

這一步只做一件事：跟 Codex 描述你想要的學生自我測驗網頁。下面示範三種說法，從最精簡到最完整，都是一般人聽得懂的話，沒有任何程式或技術名詞。不管挑哪一種當開場白，Codex 都做得出堪用的成品；說得越完整，通常第一次做出來就越貼近你心裡想要的樣子，但即使只用最短的版本，你也隨時可以在做完之後，再用一般的話請 Codex 補調整。

版本一：最精簡的說法

只講最核心的需求，其他細節交給 Codex 自己判斷：

我這裡有一個資料夾 module3/repo/115，裡面是題目圖片和正確答案。

麻煩幫我做一個網頁，讓學生可以自己打開來做練習題，寫完可以看到分數。

這個網頁要能直接雙擊打開就能用，不需要架設網站、也不需要連網路。

版本二：多補充幾個要求

在版本一的基礎上，多講清楚一點學生實際操作時會遇到的畫面：

我這裡有一個資料夾 module3/repo/115，裡面是一張一張的題目圖片，還有
一份記錄正確答案的資料。

麻煩幫我做一個網頁，讓學生可以自己打開來練習作答：
- 學生可以自己選擇這次要練習幾題，不用每次都寫完全部的題目。
- 一題一題顯示題目圖片，讓學生選 (A)(B)(C)(D) 等選項作答。
- 全部作答完、按下送出後，馬上顯示這次考了幾分、每一題答對還是答錯。

這個網頁要能直接雙擊打開就能用，不需要架設網站、也不需要連網路，任何
一台電腦都能直接使用。

版本三：講得更完整

把學生從打開網頁到看到結果的每一步都講清楚，做出來的成品會最貼近實際需求：

我這裡有一個資料夾，裡面是一張一張的題目圖片，還有一份記錄每一題正確
答案的資料，資料夾路徑是 module3/repo/115。

麻煩幫我做一個網頁，讓學生可以自己打開來練習作答，具體是：
- 學生打開網頁後，先輸入自己的姓名，再選擇這次要練習幾題（從 1 題到
  全部題目都可以選）。
- 系統隨機抽出這麼多題，一題一題顯示題目圖片，讓學生選 (A)(B)(C)(D)
  等選項作答；如果某一題的正確答案不只一個選項，也要能正確處理。
- 全部作答完、按下送出之後，馬上顯示這次考了幾分、每一題答對還是答錯。
- 提供一個按鈕，讓學生可以把這次作答的詳細結果存成一個檔案、能直接用
  Excel 打開，檔名裡要帶學生的姓名跟作答的日期時間，方便留一份紀錄。

最重要的一點：完成的網頁必須是「雙擊就能打開」的單一個檔案，不需要
連網路、不需要架設任何伺服器，任何一台電腦都能直接使用。

做完之後，麻煩把成品放到一個新的資料夾裡，不要跟原本的題目圖片資料夾
混在一起，並且告訴我成品檔案確切存在哪裡、要怎麼打開來試用。

把這三段話當成起點就好，實際打字給 Codex 的時候，可以照自己的說法調整，不用一字不漏照抄；重點是把「學生要看到什麼、要能做什麼」講清楚，其他都交給 Codex 判斷。

打開來試用看看

不要只信任「Codex 說做完了」

• 確認資料夾裡真的多了一個新的網頁檔案。
• 直接對著這個檔案點兩下（雙擊）打開，不用另外開瀏覽器輸入網址，看看畫面有沒有正常出現。
• 自己當一次「假學生」：輸入一個姓名、選少一點的題數（例如 5 題）、實際作答，按下送出，確認會出現分數，而且每一題的對錯看起來合理。
• 如果請 Codex 加了下載結果的功能，試著按按看，確認真的會存出一個檔案，並且能直接用 Excel 打開來看。

如果哪一項卡住、畫面看起來怪怪的，或是出現你看不懂的訊息 直接把你實際看到的狀況，原原本本描述給 Codex 聽，請它幫你檢查、修好，不用自己動手改任何東西，也不用猜是哪裡出了問題。

動手做：換一組新題目再做一次

module3/ 目前只有 repo/115、repo/math-115a 這兩組資料，沒有預先準備第三組。這個空白正好是驗證「請 Codex 做出來的東西是不是真的能重複使用」最直接的方式：找一組全新的題目資料，看看能不能不用重新講一次完整需求，就直接把新題目加進同一個工具裡。如果可以，代表這次的做法是通用的；如果每換一組資料都要從頭再講一次、甚至舊的測驗因此壞掉，代表哪個環節還需要跟 Codex 討論清楚。

第一步：準備一組新的題目資料夾

資料來源不重要，挑一種你方便的方式就好：拿你自己手邊已經有的任何一份考古題 PDF；或回到 Module 2，換一個你感興趣的學年度或科目，照「下載 → 切題 → 清理」完整流程重新走一次。做完之後，你會得到一組新的「題目圖片 ＋ 正確答案」資料夾，存到 module3/repo/<新資料夾名稱>/（跟現有的 115、math-115a 平級）。

第二步：跟 Codex 說一聲，請它加進同一個工具

我有一組新的題目資料夾，路徑是 module3/repo/<新資料夾名稱>，內容跟
之前那兩組一樣是「題目圖片 + 正確答案」。

麻煩比照之前做的方式，幫我做出一樣的雙擊即用測驗網頁，加進同一個
工具裡就好，不用整套重新做一次，也不要影響到已經做好的那幾份測驗。

做完之後，照上面「打開來試用看看」的方式重新測一次：確認新題目的測驗能正常運作，而且原本已經做好的測驗完全不受影響 這正好證明「加新題目不用重新設計」這件事真的成立。

常見狀況怎麼辦

下面這些狀況，都不需要你自己動手排查，只要把觀察到的現象照著描述給 Codex，請它幫你檢查、修好就好：

下一步

之後想再加更多測驗，只要重複「Module 2 切題清理 → 跟 Codex 說一聲加進同一個工具 → 打開來試用」這個循環就好。

做到這裡，你應該會發現自己（跟 Codex）一句一句討論做出來的東西，跟 Module 4：一句話產生自主測驗網頁快速教學 裡用現成小幫手一句話生成的成品，其實是同一件事，只是這一份教學讓你多練習了一次「怎麼把需求講清楚」。之後如果只是想快速拿到成品、不想每次都重新講一次細節，可以直接改用 Module 4 的捷徑。

正式交給學生前，記得成品是雙擊即用、不需要伺服器、不需要網路的單一個檔案。

如果問題集內容是有版權疑慮的考古題（例如技專校院入學測驗中心的試題），交付雙擊即用的網頁之前，記得再次確認自己有沒有合法散布這些內容的權利。