# 互動溫習小工具｜網站整理版

把教師提供的選擇題製作成可離線開啟的單一 HTML。這份內容可作可重用指示保存；在本培訓的 Gemini Canvas 操作中，請另開對話進入 Canvas，先貼上整份指示（含內置題庫），再送出簡短製作要求。不要把貼上提示詞描述為已匯入或已啟用 Skill。

## 作品要求
- 使用繁體中文，輸出一個完整 HTML，內含 CSS、JavaScript 和題目資料；不依賴外部字型、圖片、程式庫、API、登入或網絡。
- 教師要求「內置五題」時，使用本指示末的地圖判讀示例題庫；另提供題目時，以新題庫為準，不混用。保留題目、選項順序、正確答案、提示與解釋。若題目資料缺漏或答案互相矛盾，先指出具體問題，不自行猜答案。
- 每次顯示一題與清楚的單選選項，提供「檢查答案」「下一題」和「重新開始」按鈕，顯示「第幾題／共幾題」及進度。
- 尚未選答案時，提示先選一項；不記成答錯，不前進。
- 答錯先顯示該題提示，留在原題讓學生重試；尚未答對時不顯示正確答案或完整解釋，不允許跳到下一題。
- 答對後顯示正確解釋並開放下一題；鎖定本題已完成狀態，重複點擊不能重複計分。
- 以「首次答對題數」作為成績，另顯示已完成題數。第一次有效提交答對才增加首次答對題數；錯後重試答對仍算完成，但不補計首次答對。成績分母為所用題庫的總題數；內置示例為五題。
- 完成所有題目後顯示首次答對題數、總題數及鼓勵重新練習的文字；不要只因最後全部答對就一律顯示滿分。
- 重新開始必須清除題號、選項、提示、鎖定狀態、首次作答紀錄和分數，回到第一題。重新載入頁面也可從頭開始，不儲存個人資料。

## 可用性
預設使用米白背景、深綠主色及清楚的大按鈕；教師另指定時依其要求。使用語意化標籤、可鍵盤操作的單選選項與按鈕、可見的焦點樣式、清楚的文字回饋與適當對比。不要只靠紅綠顏色表示對錯。畫面適合手機、平板及桌面，文字不能被裁切。

## 交付與自查
交付可保存為 .html 的完整程式及簡短使用方法。檢查未選答案、答錯重試、答對前進、重複提交、完成結果與重新開始六種流程；未實際執行的測試需標示尚未實測。下載後斷網開啟仍應正常運作。

## 內置地圖判讀題庫（網站練習用）

只在教師要求使用內置題目時採用；教師可另提供自己的題庫。

1. 地圖的北箭頭朝上。圖書館在操場右方，圖書館位於操場的哪個方向？
A. 西方
B. 東方
C. 北方
D. 南方
答案：B
提示：先以操場為起點，再想想北方朝上時，右方對應哪個方向。
解釋：北方朝上時，右方是東方。以操場為起點向右到達圖書館，所以圖書館在操場東方。

2. 地圖的北箭頭朝上。校門在課室下方，從課室往校門應向哪個方向走？
A. 東方
B. 西方
C. 南方
D. 北方
答案：C
提示：起點是課室；在北方朝上的地圖，下方與北方相反。
解釋：北方朝上時，下方是南方。校門位於課室下方，因此從課室到校門要向南走。

3. 圖例寫明「藍色波浪線＝河流；綠色圓圈＝公園」。圖上的藍色波浪線代表甚麼？
A. 道路
B. 公園
C. 學校
D. 河流
答案：D
提示：圖例是解讀符號的依據，對照藍色波浪線旁邊的名稱。
解釋：這張地圖的圖例明確把藍色波浪線定義為河流；不能只憑顏色或自己的猜測改變符號意思。

4. 某地圖上 1 厘米代表實際 100 米。學校與公園在圖上相距 3 厘米，實際距離是多少？
A. 300 米
B. 30 米
C. 100 米
D. 3,000 米
答案：A
提示：圖上每 1 厘米對應 100 米；把三段 1 厘米代表的距離合起來。
解釋：圖上 3 厘米對應 3 × 100＝300 米。比例尺把圖上距離與實際距離連繫起來。

5. 圖書館在操場東方。同學說「所以操場也在圖書館東方」。怎樣修正這句話？
A. 兩個地點永遠互在東方
B. 操場在圖書館北方
C. 操場在圖書館西方
D. 單靠已知相對位置仍不能判斷
答案：C
提示：把觀察起點由操場換成圖書館，回頭看的方向會與原來相反。
解釋：由操場向東到圖書館，反過來由圖書館返回操場就是向西。因此操場在圖書館西方。
