練習五：Gemini CLI 互動網頁生成


生成結構化資料 → AI 建立互動網頁 → Python 驗證 → 瀏覽器預覽

體驗用 AI 從零打造一個可運行的互動問答網頁

#S1B 資訊科技 #互動網頁 #JSON 資料
本練習目標
結構化資料

用提示詞生成 JSON 格式的問答題資料，理解結構化資料的概念。

網頁生成

讓 AI 根據 JSON 資料生成一個可互動的 HTML 問答遊戲網頁。

自動驗證

用 Python 程式驗證 JSON 資料的正確性，並生成統計報告。

關鍵能力：

結構化資料（JSON）× 網頁技術（HTML/CSS/JS）× 自動驗證（Python）

什麼是 JSON？

JSON 簡介

JSON（JavaScript Object Notation）是一種輕量的資料格式， 用「鍵值對」來組織資料，人和電腦都能輕鬆讀懂。

示例：
{
"name": "Tom",
"class": "S1B",
"score": 95
}

為什麼用 JSON？

JSON 是網頁與程式之間交換資料的標準格式。學習 JSON 可以讓你：

組織資料

用清晰的結構儲存問題、答案、設定等。

重複使用

同一份 JSON 可被 Python 和網頁共同使用。

步驟 0：環境準備檢查

按下 Win + R 輸入 wt 打開終端機：

# 檢查 Python 版本

python --version

# 檢查 Gemini CLI 版本

gemini --version

看到版本號

代表環境已就緒，可直接進入練習。

找不到 gemini

請改用：npx @google/gemini-cli

步驟 1：建立練習資料夾

在 PowerShell 依序輸入以下指令：

1 cd "$HOME\Desktop"

(無法進入桌面請嘗試：cd "$HOME\OneDrive\Desktop")

2 cd gemini-cli-class

3 mkdir S1B_姓名_Gemini-CLI_練習五 （已建立可跳過）

4 cd S1B_姓名_Gemini-CLI_練習五

5 pwd

# 應顯示 "...Desktop/gemini-cli-class/S1B_姓名_Gemini-CLI_練習五"

步驟 2：啟動 Gemini CLI

依照你的安裝狀態，擇一啟動：

方式 A：已安裝

gemini

方式 B：未安裝

npx @google/gemini-cli

重點：在 Gemini CLI 內執行系統命令要加「!」（按 ESC 退出）

步驟 3：生成問答題 JSON 資料

在 Gemini CLI 對話框內貼上：

請在「當前資料夾」產出一個 JSON 檔案 quiz_data.json（UTF-8，不要 BOM）：

內容要求：

  • 主題：電腦與資訊科技基礎知識（可涵蓋硬件、軟件、網絡、檔案管理等）
  • 包含 10 道選擇題，每題 4 個選項（A/B/C/D），只有 1 個正確答案
  • 題目必須用繁體中文出題
  • 難度分佈：3 題簡單、4 題中等、3 題困難
  • JSON 結構如下：
    {
      "title": "電腦與資訊科技基礎知識問答",
      "total": 10,
      "questions": [
        {
          "id": 1,
          "difficulty": "簡單",
          "question": "題目內容",
          "options": {"A": "...", "B": "...", "C": "...", "D": "..."},
          "answer": "A"
        }
      ]
    }

輸出要求：只在當前文件夾輸出一個 quiz_data.json，不要額外解釋。

步驟 4：用 Shell 模式檢查 JSON

重點：確認 JSON 檔案已生成且格式正確

# 確認檔案存在

!ls

# 查看 JSON 內容前 15 行

!powershell -NoProfile -Command "Get-Content quiz_data.json -TotalCount 15"

檢查重點：

  • 檔案是否存在且有內容
  • JSON 的大括號 { } 和方括號 [ ] 是否匹配
  • 每道題是否都有 question、options、answer 欄位

步驟 5：生成互動問答網頁 (HTML)

在 Gemini CLI 對話框內貼上：

請讀取同資料夾的 quiz_data.json，生成一個互動問答網頁 quiz.html（UTF-8）：

功能要求：

  • 將 JSON 中的題目資料直接嵌入 HTML 的 <script> 中
  • 每次顯示一道題目，作答後顯示下一題
  • 選擇答案後，立即顯示「正確」或「錯誤」（並顯示正確答案）
  • 全部作答完後，顯示最終得分（例如：7/10）和答對百分比
  • 頁面要有標題（使用 JSON 中的 title）、進度條、分數統計
  • 使用美觀的 CSS 樣式（圓角、陰影、顏色區分正確/錯誤）
  • 不需要外部檔案，所有 CSS 和 JS 都內嵌在 HTML 中
  • 在最後結果頁加上一個「重新開始」按鈕

輸出要求：只在當前文件夾輸出一個 quiz.html，不要額外解釋。

步驟 6：預覽網頁並試玩

# 用瀏覽器打開問答網頁

!start quiz.html

手動測試清單：

  • 網頁是否正常顯示標題和第一道題目
  • 點擊選項後是否顯示正確/錯誤的回饋
  • 進度條是否隨題目推進
  • 完成所有題目後是否顯示總分
  • 「重新開始」按鈕是否運作正常

如果網頁有問題，可以在 Gemini CLI 中描述問題，讓 AI 幫你修正！

步驟 7：生成 JSON 驗證程式 (py)

在 Gemini CLI 對話框內貼上：

請寫一個 Python 程式 validate_quiz.py：

  • 讀取 quiz_data.json（UTF-8）
  • 驗證 JSON 結構是否合法（能否被正確解析）
  • 檢查每道題是否都有必要欄位：id、difficulty、question、options、answer
  • 檢查 options 是否都有 A、B、C、D 四個選項
  • 檢查 answer 是否為 A/B/C/D 其中之一
  • 統計各難度的題目數量
  • 統計正確答案的分佈（A 幾題、B 幾題、C 幾題、D 幾題）
  • 將驗證結果用繁體中文輸出到 validation_report.txt（UTF-8），包含：
    • 驗證時間
    • 驗證結果（通過/不通過）
    • 總題數、各難度題數、答案分佈
    • 所有題目的題目列表（編號 + 題目 + 正確答案）
  • 不可使用第三方套件（只用 Python 標準庫）

輸出要求：只在當前文件夾輸出一個 validate_quiz.py，不要額外解釋。

步驟 8：執行驗證並查看報告

# 1) 確認所有檔案齊全

!ls

# 2) 執行驗證程式

!python validate_quiz.py

# 3) 用記事本查看驗證報告

!notepad validation_report.txt

檢查報告內容：

  • JSON 結構是否通過驗證
  • 10 道題目是否全部合格
  • 難度分佈是否符合要求（3 簡單 / 4 中等 / 3 困難）

步驟 9：匯出對話紀錄

用以下命令將你與 Gemini CLI 溝通的過程存下來：

/chat share chat_history.md

完成後用 !ls 確認檔案是否存在。

反思：寫下你的總結

!notepad reflection.txt

反思內容（必填）：

  1. 你覺得用 JSON 格式儲存資料，比起直接寫在程式碼裡有什麼好處？
  2. AI 生成的互動網頁有沒有需要修正的地方？你是怎樣描述問題讓 AI 修正的？
  3. 如果讓你自選題目主題（例如：數學、科學、歷史等），你會選什麼？為什麼？

作業檢查清單

請確認 S1B_姓名_Gemini-CLI_練習五 資料夾中包含以下 6 個檔案：

quiz_data.json
quiz.html
validate_quiz.py
validation_report.txt
reflection.txt
chat_history.md
上傳整個資料夾至 Google Drive
第 1 / 15 頁
← 上一頁 → 下一頁 | Tom