用現有的 skill 建置客製化的線上測驗系統

這份教學示範怎麼用現有的 skill 建置一個客製化的線上測驗系統：先請 Codex 用一句話把純文字題庫直接做成線上測驗系統——全班能同時連線作答，還有老師自己看的即時監考儀表板；再依你的喜好客製化它的外觀。本教學以「專案根目錄」為基準：題庫原始檔放在專案根目錄下的 repo/ 資料夾，Codex 產生出來的伺服器程式則放在專案根目錄下的 server/ 資料夾。repo/ 裡放的是三份純文字的 Markdown 題庫（各科各 50～100 題，每題是一段程式碼加六個選項 A～F、外加標準答案，全部寫在同一份文字檔裡），你不用先弄懂這是不是 build-exam-server skill 看得懂的格式，也不用自己分成「先轉檔、再套 skill」兩句話講：把 repo 在哪裡講清楚、講出你要的成品是什麼（學生作答頁＋教師儀表板），剩下的流程交給 Codex 自己判斷、自己處理就好。

完成測驗系統之後，這份教學再示範怎麼客製化它：把題目圖片裡的程式碼片段換一套不同的語法上色配色（例如換成類似某個編輯器的深色風格），用幾句對話先比較幾種選擇、挑一個喜歡的，再請 Codex 全部套用更新。教學的最後一節，會示範怎麼把這次定案的調整同步存回 skill 本身，讓下次套用同一套流程時就是新的客製化預設值，不用再重講一次。

共 200 題，每一題都是六個選項（A～F）。跑完這份教學裡的提示語之後，repo/ 旁邊會多出一個 server/ 資料夾，裡面是可以直接執行的伺服器成品，已經依這三組題庫設定完成。

學習目標

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

• 知道遇到純文字題庫時，不用自己先轉檔、分成好幾句話講，一句話交代好題庫在哪裡、要做出什麼成品，讓 Codex 自己判斷該怎麼處理最好。
• 不用弄懂伺服器程式怎麼寫，只靠幾句自然語言指令，把文字題庫變成全班能同時連線作答的線上測驗。
• 知道完成後怎麼用幾句話請 Codex 幫題目裡的程式碼換一套不同的顯示配色，並理解這種「先看幾個選項、挑一個再全部套用」的來回對話模式。
• 知道流程確定之後，怎麼用一句話請 Codex 把這次的調整（例如程式碼配色）同步存回本地端的 skill 本身，讓下次套用同一套流程時就是新的預設值。
• 知道怎麼啟動伺服器、把正確的網址交給學生，並且判斷連得上／連不上的常見原因。
• 知道教師端「即時監考儀表板」在哪裡、卡片上每個顏色與數字代表什麼。
• 知道這個工具「能做什麼、不能做什麼」，避免拿來做不適合的正式測驗。

先備條件

• 手上已經有像 repo/ 這樣「一份文字檔就是一整份題庫」的素材（題目、程式碼、選項、答案都寫在同一份 Markdown 或文字檔裡）。本教學直接使用專案內建的三份練習題庫，共 200 題。
• 已經能開啟並使用 Codex，並且已經打開這個專案的資料夾。
• 電腦上要有真的能執行 Python 的直譯器（見下方提醒——這跟編輯器裡的「Python 語法標示套件」是兩回事）。
• 考試當下，教師電腦與所有要作答的學生裝置（手機、平板、筆電都可以）要連在同一個 Wi-Fi／區網。
• 不需要另外申請任何帳號，資料全部留在教室內的區域網路上，不會上傳到網路。

如果你的專案裡已經有 .agents/skills/build-exam-server/ 這個工具，請在提示語中講清楚它的位置，讓 Codex 能讀取並依說明執行；如果還沒有，把需求講清楚就好，讓 Codex 自己判斷要不要另外寫一支小工具。

先確認 Python 3 已經裝好：打開 PowerShell，輸入 python --version（找不到就再試 python3 --version）。如果出現版本號（例如 Python 3.12.4）就代表已經裝好，可以跳過這一步。如果出現錯誤訊息，或跳出「你要開啟市集嗎」的視窗，代表電腦還沒有能執行的 Python：到 Windows 的 Microsoft Store 搜尋「Python 3.12」，點取得安裝即可（不需要系統管理員權限，也不用另外設定 PATH）。安裝完成後，請關閉並重新打開一個新的 PowerShell 視窗再試一次 python --version。

把文字題目「畫」成圖片這一步，需要 Codex 自己想辦法（常見做法是把每一題排版成一個網頁，再用瀏覽器截圖）。如果你的 Codex 環境裡剛好沒有現成的截圖工具，它可能會先跟你討論一下要怎麼處理，或請你確認能不能安裝——這是正常的來回，耐心回覆、讓它繼續嘗試就好，不代表哪裡故障了。

一句話生成測驗系統

不用先確認題庫是不是圖片格式，也不用自己拆成「先轉檔」「再套 skill」兩句話，一句話講清楚題庫在哪裡、要做出什麼成品就好：

repo 裡是題庫，做一個線上測驗系統，
要有學生作答頁跟老師即時監考儀表板，過程你自己判斷怎麼處理。

Codex 看過 repo/ 之後，會發現裡面是純文字的 Markdown（題目、程式碼、六個選項都寫在文字檔裡），跟本專案內 .agents/skills/build-exam-server/ 這個 skill 原本預期的「每題一張圖片＋JSON 答案檔」格式不一樣。這時候不需要你多做任何補充，Codex 會自己判斷：先把每一題轉成一張圖片、整理成一份 JSON 答案檔，再套用 build-exam-server skill，在 repo/ 旁邊產生一個 server/ 資料夾，裡面包含伺服器程式、學生作答頁、教師儀表板頁與設定檔。因為這三份題庫都是六個選項（A～F），Codex 也會自動在設定裡多記一筆選項字母（choiceLetters）的細節，一樣不需要自己特別交代。做完之後可以請 Codex 抽一兩張轉出來的題目圖片給你看，確認題目、程式碼、選項都有正確顯示。

如果之後題庫內容更新過、需要重新跑一次這句話，Codex 會把這視為更新：先讀取既有的 server/config.json 再合併異動，並保留 server/data/sessions.json 裡的作答紀錄，不會在未確認前清除它。

啟動伺服器

跟雙擊 HTML 開啟的網頁不一樣，這裡需要在 PowerShell 打一行指令，並且讓這個黑色視窗維持開啟，直到考試結束：

cd server
python server.py

如果打 python 出現「不是內部或外部命令」之類的錯誤，改打 python3 server.py 試試看；兩個都不行，代表 Python 還沒裝好，回到上面「先備條件」處理。

指令執行後，畫面應該會停在類似這樣的內容，而且不會自動結束（這是正常的，代表伺服器正在執行）：

Student page:    http://192.168.1.23:8000/
Dashboard page:  http://192.168.1.23:8000/dashboard
(this machine)   http://localhost:8000/

Press Ctrl+C to stop.

192.168.1.23 只是範例，每台電腦、每個 Wi-Fi 環境印出來的數字都不一樣，請以自己電腦實際印出來的那組為準，不要照抄這裡的範例。Student page 那一行是要交給學生的網址；Dashboard page（多了 /dashboard）是老師自己看的監考頁面，兩個不要給錯對象。

第一次執行可能會跳出防火牆詢問：Windows 可能會跳出「Windows Defender 防火牆已封鎖此應用程式的部分功能」視窗，請勾選「私人網路」並按允許存取；如果按了取消或忽略，學生的裝置會連不上。

教師端：即時監考儀表板

打開 Dashboard page 那個網址（網址結尾是 /dashboard），畫面每 3 秒會自動更新一次，每位已經打開學生作答頁的人會各自出現一張卡片：

畫面上方有一個依考科篩選的下拉選單，以及整班的統計（已加入／作答中／已交卷人數、平均得分率）。右上角的「清除名單」按鈕會清空目前畫面上的作答紀錄，換下一班上課、或是想重新測試時再使用，平常上課中不要誤按。

動手做：換一套程式碼配色

題目做完之後，如果想調整程式碼片段的顯示配色（例如想要更接近某個編輯器的風格），不需要自己去改設定檔或重新排版，直接用幾句話請 Codex 先做幾個選項讓你比較，挑一個之後再請它套用到全部題目：

題目裡的程式碼片段換一套不同的語法上色配色，
先做兩三種常見的深色系配色讓我看看效果，我再挑一個。

Codex 會挑幾種常見的配色（例如深色系的不同風格），各用同一段程式碼做一張範例圖給你比較，不會直接把兩百張題目圖片全部重新產生一次，你可以先看效果再決定。

就用第二種，把全部題目的程式碼配色換成這一種。

確定之後，Codex 會把三組題庫、總共兩百題的圖片全部重新產生一次，套用你選的配色；伺服器本身的程式不需要修改，學生作答頁跟教師儀表板也不用重新設定，重新整理頁面就能看到新的配色。這種「先給幾個選項比較、挑定再全部套用」的來回方式，遇到其他外觀類的客製化（例如版面留白、字體大小）也一樣適用。等這次配色真的定案、不會再改了，記得看最後一節「定案後，存回 skill 本身」，把這次的調整存回去，不然這個結果只會留在這一次產生的題庫裡。

課堂結束後

• 要結束伺服器，回到那個黑色的 PowerShell 視窗，按 Ctrl+C，或直接把視窗關掉即可。
• 學生的作答紀錄會留在 server/data/sessions.json 這個檔案裡，下次重新執行 python server.py 時會自動接續，不會不見。
• 換下一班上同一科之前，用儀表板的「清除名單」按鈕清空舊的名字，不需要重新啟動程式；如果是不同天要整個重新開始，也可以直接刪除 server/data/sessions.json 這個檔案。

定案後，存回 skill 本身

到目前為止，換配色這件事只改到「這一次」由 Codex 產生出來的題目圖片。實際被拿來畫圖、決定配色的規則，通常是寫在 Codex 幫你生成的那支「文字轉圖片」小工具裡，而不是 .agents/skills/build-exam-server/ 這個正式 skill 本身——那個 skill 只負責把已經是圖片格式的題庫組裝成伺服器，不管圖片畫出來時是什麼顏色。也就是說，如果之後拿同一個流程去處理下一批新題庫、或是把整套流程搬到別的專案重新做一次，畫出來的圖片預設還是原本的配色，不會自動帶著這次選定的深色系——除非把同一句話再講一次。

確認這次的配色（以及過程中其他你確定不會再改的調整）就是你要的之後，用一句話請 Codex 把這些改動同步寫回對應的工具本身：

把剛剛確認好的所有調整（包括程式碼配色）同步更新回對應的本地端 skill／工具，
讓下次再用同一套流程處理題庫的時候，預設就是這個結果。

Codex 會自己判斷這次的調整實際寫在哪裡——可能是產生題目圖片用的那支轉換工具，也可能是 .agents/skills/build-exam-server/ 底下的樣板檔案（如果連伺服器頁面的樣式也一起調整過）——並把確認過的設定值同步寫進對應的檔案，而不是只留在這次 repo/、server/ 底下的產出裡。這麼一來，這次的調整就從「這一次的結果」變成新的預設值：以後不管是同一個專案新增題庫，還是把整套流程搬到別的專案重新跑一次，一開始產生出來的就已經是這一版設定，不用每次都重新講一次。

這一步只在你確定滿意、不會再改的時候才做。如果還在比較配色、還沒定案，先照「動手做：換一套程式碼配色」那一節的做法產生範例來比較就好，等真的定案了再用這句話收尾，把改動存回 skill／工具；之後如果又想換另一套設定，一樣是先試、確定了再存回去。