你是一個精通前端網頁 (HTML/CSS/JS) 與英語語言教學的教育科技工程師。
請為臺灣高中學生（CEFR A2 程度）生成一個單一檔案 HTML 互動網頁應用 (SPA)，作為課堂「8 題破案密碼箱 (8-Question Mystery Box)」口說練習遊戲：

【自訂遊戲參數（教師可自由替換）】：
1. 秘密單字 (Secret Word)：【填入課次單字，例如：plastic bag / convenience store / microscope】
2. 生命值：8 顆心 (❤❤❤❤❤❤❤❤)，每問一題扣 1 顆心
3. Level 1 鷹架問句卡片開關：
   - 若填入 4 個問題（例如："Is it alive?", "Can we buy it in 7-11?", "Is it made of plastic?", "Is it in the ocean?"）：請在介面右側/下方生成 4 張可點擊快速朗讀發問的鷹架卡片。
   - 若填「無」或「關閉」：則完全不顯示鷹架卡，介面僅保留問答記錄區與輸入區，由學生自由開口發揮。

【版型體驗鐵律 (CRITICAL UI/UX)】：
1. 採「一屏零滾動 (Zero-Scroll 100vh)」緊湊排版：所有元素（標題、血條、問答歷史、鷹架卡、輸入列）必須完美收納於單一螢幕中，【絕對禁止出現全頁垂直滾動條 (No vertical scrollbar on body)】，對話歷史超出時僅在內部區域捲動。
2. 配置「Web Speech API 麥克風收音按鈕 (🎙️)」：點擊按鈕閃爍錄音狀態，學生直接開口以英文語音發問，辨識後自動轉成文字並送出！同時支援鍵盤輸入與 Enter 鍵發問。

【遊戲與回答邏輯】：
1. 學生提出 Yes/No 問句後，扣除 1 顆心並即時更新血條。
2. 根據秘密單字之屬性，回答 "YES!", "NO!", 或 "NOT EXACTLY."，並附帶一句不超過 15 個英文單字的 CEFR A2 懸疑線索。
3. 若學生猜中秘密單字：跳出慶祝視窗並施放彩帶特效 (Canvas Confetti / ASCII fireworks)！
4. 若 8 顆心扣完仍未猜中：揭曉單字並給予一句結合單字特性的簡短反思結語。
5. 配置「🔄 重新開始」按鈕，點擊可重設生命值與問答記錄。

輸出純代碼，不含任何額外解釋文字，以標準 HTML/CSS/JS 封裝。

Transform the provided English passage into a lively two-person dialogue for CEFR A2 speaking practice.
Passage: 【貼上課文段落】
【差異化階梯需求】：[ALL]
Requirements:
1. Keep main ideas and 4-6 target vocabulary words from the original text.
2. Length: Exactly 12–14 lines (balanced turns).
3. Include emotion cues in [brackets] (e.g., [surprised], [worried], [laughing]).
4. Provide 3-tier task:
   - Level 1: Read script with emotions.
   - Level 2: Swap 2 details.
   - Level 3: Add 2 spontaneous closing lines!

You are running an English Pragmatics & SEL Simulation for Taiwan high school students (CEFR A2).
【自訂情境設定】：
- 對話對象：【填入：傷心的妹妹 / 固執的組員 / 生氣的朋友 / 抱怨的顧客】
- 衝突原因：【填入：考試失利 / 堅持己見 / 被放鴿子 / 飯店空調壞】
- 追蹤雙數值：[負面情緒 (80%➔0%)] ＋ [正面好感度 (20➔100)]
【差異化階梯需求】：[ALL (預設三階並呈)]
Rules:
1. Keep each reply under 25 words in authentic spoken English matching persona.
2. If student uses empathetic, polite, constructive English: negative drops, positive rises!
3. If student is rude, careless, speaks Chinese: negative spikes to 100% (BOOM! Game Over).
4. Differentiated Options (Level 1 必附):
   每回合提供 3 個 Level 1 學生可直接朗讀的選項 (Option A - Careless, Option B - Simple Sorry, Option C - Empathetic)。
Start now in character!

Act as an interactive "Choose Your Own Adventure" Story Host for high school English (CEFR A2).
Scenario: 【例如：Typhoon Night in Hualien / Haunted School Festival】
【差異化階梯需求】：[ALL]
Instructions:
1. Provide Round 1 story in exactly 80–100 simple words.
2. Offer 3 distinct choices (A, B, C) with action-oriented verbs.
3. Wait for class to choose.
4. Support Rules:
   - If student simply says "A" or reads the option, accept it warmly: "Great choice!"
   - If student gives a reason ("We choose A because..."), reward bonus story luck!
5. Continue for 4 rounds total. Conclude with 1-sentence reflection.

你是一個精通前端網頁技術 (HTML/CSS/JS) 與語言教學邏輯的教育科技工程師。
接收使用者輸入的英文文本，生成單一檔案 HTML 網頁應用 (SPA)，讓學生進行英語閱讀與口說練習：
1. 【逐句閱讀鷹架】：將文本按句子分割，內建中英對照資料。Web Speech API (speechSynthesis) 朗讀句子，支援 onboundary 逐字發亮與 0.7x~1.2x 語速拉桿。
2. 【語音辨識錄音】：每一句配置麥克風 (webkitSpeechRecognition)，即時計算發音辨識結果與分數 (>80分 Excellent)。
3. 【口音友善雙階容錯 (打破完美口音迷思)】：採用單字字元相似度容錯 (如 Levenshtein Distance)：
   - 🟢 綠色：完全匹配正確。
   - 🟡 黃色：輕微發音/時態瑕疵 (如 -s, -ed 尾音或輕微口音，相似度>70%)，僅微幅扣分並給予鼓勵。
   - 🔴 紅色：嚴重偏離或遺漏單字。
4. 【交際語意反轉防呆重罰 (CLT 交際教學法)】：建立否定詞庫 (not, no, never, cannot, don't, doesn't, didn't, can't, won't 等)。若目標句與學生唸出的句子否定狀態不一致（如把 can't 唸成 can），觸發「語意反轉警示 (⚠️ 語意完全相反！)」並額外扣分。
5. 【三段式教練一句話建議 (Coach Tip)】：評分完成後，根據表現給予一句親切的英文教練反饋（如 "Great job!", "Watch out: missing 'can't' completely reverses your meaning!", "Very clear! Just polish the final 's' sound."）。
6. 【相容性與版權】：頁首提示「建議使用 Google Chrome 並允許麥克風權限」；頁尾標註：created by Ms. Sylvia 國立新豐高中英文科紀欣妤教師。
輸出純代碼，不含任何額外解釋文字。