### 🎯 课堂省级行政区识图竞赛网页

你是一位资深教育技术专家和前端开发工程师，擅长构建课堂互动教学工具。请设计并生成一个可直接在浏览器中运行的完整 HTML 网页，用于八年级地理课堂“美丽中国识图大赛”。该网页需满足以下所有功能与教学规则。

### 任务目标
创建一个课堂竞赛交互网页：8个小组轮流答题，每组限时1分钟，通过语音识别判断学生是否按顺序正确说出省级行政区的“全称-简称-行政中心”，识别正确后自动进入下一题；最终根据每组答对题数排名积分。

### 页面功能与结构要求
1. **竞赛首页**：
   - 显示活动标题“美丽中国识图大赛”。
   - 输入或展示8个小组名称（默认第一组至第八组，可自行修改）。
   - 设置“开始比赛”按钮。

2. **答题界面**：
   - 清晰展示当前图片（省级行政区轮廓图），图片下方附提示“请说出全称-简称-行政中心”。
   - 显示当前答题小组名称、当前题号、剩余时间，以及该组已答题数。
   - 控制按钮：**开始计时**、**暂停/继续**、**下一题**（仅在当前题已答对时可用）、**结束本轮**，以及**显示总积分榜**。
   - 当每题开始时自动播放/显示当前行政区的图片；答题时语音识别实时监听，识别成功后自动跳转到下一张图片。
   - 若倒计时结束，强制停止答题并记录本轮完成题数（未说完整的题目不计入）。

3. **积分排名界面**：
   - 根据每组最终回答正确的题数进行排名：积分规则为答对题目最多的小组得8分，第二名得7分，依次递减，最后一名得1分（若并列则按并列名次规则处理，如两个第一则都获8分，下一名按7分或实际名次处理）。
   - 点击“显示积分榜”按钮，展示所有小组的答对题数和获得积分，并按积分从高到低排序。

4. **数据与题库要求**：
   - 内置中国34个省级行政区的地理轮廓图资源。由于网页需离线/免外部依赖，可使用简化的中文字形或 SVG 路径来近似轮廓，或使用占位图片区域显示“【新疆维吾尔自治区轮廓】”文字，也可直接使用行政区的名称作为图片文字的替代。说明：确保每组每次显示的图片与实际给分答案一致。
   - 将34个行政区按难度分为三组：
     - 简单题：多为常用名称且简称明显的省份，例如“北京市-京-北京”“广东省-粤-广州”等；
     - 中等题：包含两个简称或名称与简称关联适中的省份，例如“四川省-川或蜀-成都”“云南省-云或滇-昆明”等；
     - 较难题：名称较长、简称非常见，或简称与全称差异大的区域，例如“新疆维吾尔自治区-新-乌鲁木齐”“内蒙古自治区-内蒙古-呼和浩特”“宁夏回族自治区-宁-银川”“香港特别行政区-港-香港”“澳门特别行政区-澳-澳门”等。
   - 每组竞赛包含10道题，从题库中随机抽取：前3题从简单题抽取，第4-7题从中等题抽取，第8-10题从较难题抽取。8个小组抽取的顺序均不同，保证难度递进且组间相当。
   - 每组题号从1到10依次变难，界面题号应清晰显示。

5. **语音识别功能**：
   - 使用浏览器 Web Speech API（优先使用免费内置模型），页面加载时初始化语音识别；若浏览器不支持，则须弹出提示并提供文本输入框作为备用。
   - 识别时不限制语序，但必须包含“全称-简称-行政中心”的全部关键内容。可采用语意识别规则：
     - 全称与简称不能混淆或错误，例如“新疆维吾尔自治区”若被识别为“新疆维吾尔族自治区”则判错；“四川省”简称“川或蜀”，若只说出一个简称但答案是“川或蜀”，但只要答案为“川或蜀”之一且包含“四川省-成都”即判对，但须在答案中明确显示可接受的多个简称。多个简称需要全部识别到才算对，除非该行政区只有一个常用简称。
     - 学生描述中若包含其他词语、停顿、重复，只要关键词命中即可判对。例如“这个应该是四川省吧，简称川，行政中心在成都”应识别为正确。
   - 成功条件：在1分钟倒计时内，语音中包含当前行政区的“全称关键词”和“简称关键词”（有多个简称时须含全部简称）以及“行政中心关键词”。无需严格按照顺序，但关键要素必须齐全，且全称必须准确匹配（不能有错别字或少数民族误读）。
   - 当前题目识别正确后，立即播放提示音（可选），并自动加载下一题；若识别错误，不要跳题，等待学生重新表述。

6. **计时与控制逻辑**：
   - 一组比赛开始后倒计时从60秒递减，界面显示mm:ss格式。
   - 开始按钮：点击后允许开始答题，并自动开始倒计时、开始语音识别。
   - 暂停按钮：暂停倒计时和识别（可用来处理课堂突发情况），再次点击继续。
   - 当识别正确并切换到下一题后，若还未到1分钟，倒计时继续不重置。
   - 当倒计时归零时，停止语音识别并结束本轮，记录当前组已正确数，然后自动进入下一组（或回到首页让老师选择下一组）。
   - “结束本轮”按钮：可由老师手动结束本轮，记录已正确题数并停止倒计时。

7. **多组和轮次管理**：
   - 每组答题完毕后，自动切换到下一组（或提供“下一组”按钮），显示下一组的姓名和界面，每次重新抽取题目（保证8组题目组间难度相似但内容不重复）。
   - 所有8组完成后，显示“最终排名”按钮，点击进入积分计算和排行榜。

8. **教师端控制区**：
   - 设计明显但不过分遮挡的功能按钮：开始、暂停、结束本轮。
   - 提供“管理后台”面板，可查看当前语音识别的实时转写文本、识别可信度（如果API支持），以及判断逻辑的匹配详情（便于老师判断是否合理）。
   - 后台应有手动纠正识别错误的方法：若系统误判，老师可以点击“不算正确”或“手动标记为正确”按钮，方便课堂控制。

### 输出约束
- 输出为一个完整、无外部依赖、可直接保存为 `.html` 文件运行的 HTML 文档，里面包含 CSS 样式和 JavaScript 代码。
- 无需使用第三方库，优先使用内置模型，不消耗云计算积分。
- 界面清晰、美观、适合投影仪展示，字体可读，颜色对比度高。
- 适配桌面浏览器，不限制特定浏览器；但需兼容常见浏览器（Chrome/Edge/Firefox/Safari），若某些功能不支持则给出备用方案。
- 代码添加中文注释，方便二次修改。

### 质量标准
1. 游戏流程完整：首页→每组答题→所有组结算→总积分排名。
2. 倒计时、暂停、语音识别、图片跳转等核心功能逻辑准确、稳定。
3. 判断算法必须能够处理自然口语中的冗余信息，准确匹配关键词。
4. 每个题目出现时，页面明确展示当前是第几组第几题，并带有进度条。
5. 最终能按规则计算积分并清晰呈现排名，方便老师登记分数。

### 附加说明
- 由于实际轮廓图片无法嵌入，可采用“图片占位+行政区名”的方式显示在题目区域，老师可自行替换为真实图片路径。网页中内置一个 `getImageUrl(areaName)` 函数，如果存在 `images/` 文件夹下与行政区同名的图片则显示，否则显示文字占位。
- 多个简称对照词典可内置于代码中，请尽量保证所有34个省级行政区的全称、简称和行政中心信息准确。以下为完整清单，请严格按照此数据开发：
  1. 北京市-京-北京
  2. 天津市-津-天津
  3. 河北省-冀-石家庄
  4. 山西省-晋-太原
  5. 内蒙古自治区-内蒙古-呼和浩特
  6. 辽宁省-辽-沈阳
  7. 吉林省-吉-长春
  8. 黑龙江省-黑-哈尔滨
  9. 上海市-沪-上海
  10. 江苏省-苏-南京
  11. 浙江省-浙-杭州
  12. 安徽省-皖-合肥
  13. 福建省-闽-福州
  14. 江西省-赣-南昌
  15. 山东省-鲁-济南
  16. 河南省-豫-郑州
  17. 湖北省-鄂-武汉
  18. 湖南省-湘-长沙
  19. 广东省-粤-广州
  20. 广西壮族自治区-桂-南宁
  21. 海南省-琼-海口
  22. 重庆市-渝-重庆
  23. 四川省-川或蜀-成都
  24.