AI 工作坊 S2 課後實作練習題

 實作練習：日本 47 都道府縣制霸互動圖

一、 任務目標 建立一個互動式網頁，並透過 GitHub Pages 完成部署。使用者可以在網頁中輸入用戶代號（C01～C05），查詢該用戶曾造訪過的日本縣市，並在 47 都道府縣地圖上依據「造訪頻次」顯示對應的視覺顏色。

二、 顏色視覺對照表

•  0 次：灰色

•  1 次：綠色

•  2 次：黃色

•  3 次：橘色

•  4 次（含）以上：紅色

三、 資料來源說明

• 用戶造訪數據：請參閱 Excel 附檔的 Sheet1 或 Sheet3（包含 C01～C05 之紀錄）。

• 地圖邊界與經緯度：請參考 Excel 附檔的 Sheet2。

【Prompt 參考指令】

你是一位專業的網頁前端開發工程師。請幫我寫一個單一檔案（Single-file HTML, 包含 HTML、CSS 與JavaScript）的互動式網頁，並協助準備發布到GitHub Pages。

以下是詳細的專案規格與需求：

【專案名稱】

日本 47 都道府縣制霸互動圖 (用戶查詢版)

【任務目標】

建立一個網頁，讓使用者輸入用戶代號（C01 ~ C05），輸入後會自動查詢該用戶去過的日本縣市，並在「日本 47 都道府縣地圖」上呈現對應次數的顏色，同時顯示統計資訊。

【資料集（請直接內建在 JS 的 Mock Data 中）】

請將以下 Excel 資料轉換為 JavaScript 的 JSON 物件陣列放置於程式碼中

【地圖與視覺規格】

1. 地圖實現方式：請優先使用輕量且高清晰度的SVG 圖塊（例如使用 D3.js 搭配 Japan TopoJSON，或是內嵌高質量的 Japan SVG 地圖 / GeoJSON 渲染），確保 47 個都道府縣都能正確點亮與互動。

2. 顏色對應規則（根據去過頻次）：

  - 0 次：灰色 (#E0E0E0)

  - 1 次：綠色 (#4CAF50)

  - 2 次：黃色 (#FFEB3B)

  - 3 次：橘色 (#FF9800)

  - 4 次（含）以上：紅色 (#F44336)

3. 互動體驗：

  - 滑鼠懸停（Hover）在特定縣市上時，顯示 Tooltip 浮動視窗，呈現「縣市名稱」與「去過次數」。

  - 提供搜尋/輸入框，支援輸入 C01、C02、C03、C04、C05（大小寫不限），點擊「查詢」或按下Enter 時更新地圖。

  - 地圖旁或下方附上「圖例（Legend）」，說明各顏色代表的頻次。

  - 顯示該用戶的總解鎖縣市數（例如：已造訪 5/47 個縣市，制霸率 10.6%）。

【版面與 UI 設計】

- RWD 響應式設計（支援電腦與手機螢幕觀看）。

- 現代化乾淨風格（卡片式設計、優雅的配色與字體）。

【交付產出需求】

1. 請提供完整的 `index.html` 程式碼（可直接複製執行）。

2. 提供簡明扼要的步驟教學：如何建立 GitHub Repository 並透過 GitHub Pages 免費發布這個網頁。