### 🎯 课堂识图竞赛互动网页

你是一位经验丰富的前端开发工程师，请为一个“美丽中国识图大赛”课堂活动制作一个交互式网页。该网页需要在浏览器中完整运行，界面简洁明亮、适合课堂教学投影，所有操作均需通过鼠标或触摸完成。

## 功能需求

### 1. 分组与抽取
- 全班共分为 **8组**，网页显示 8 个小组按钮（第1组～第8组）。
- 活动开始时，选择当前答题的小组。
- 每组开始后，系统为该组**随机生成一套省级行政区图片顺序**，避免重复。

### 2. 答题流程与计时
- 每组答题限时 **1分钟**（60秒），页面显示醒目的倒计时。
- 提供控制按钮：**开始**、**暂停**、**下一个**、**正确答题总数**。
- 点击“开始”后开始倒计时并显示第一张图片；点击“暂停”可暂停倒计时；点击“下一个”可手动切换到该组随机序列中的下一张图片。
- 若某题未回答完整或时间到，该题不得分，并自动停止答题，结束当前小组的挑战。

### 3. 图片展示
- 页面中央展示省级行政区图片，图片由使用者预置或在页面中通过“上传PPT图片素材”功能按省份名称上传。
- 图片应从当前小组的随机顺序中依序出现，不重复。

### 4. 语音识别与判定
- 使用浏览器语音识别接口（如 Web Speech API）实时识别答题者的语音。
- 答题者必须按顺序说出当前图片对应省级行政区的 **“全称-简称-行政中心”**，如“北京市-京-北京”“新疆维吾尔自治区-新-乌鲁木齐”。
- 系统需识别出全称、简称、行政中心三类要素，并允许口语化表达或轻微语序扰动，但最终判定时必须确认三个要素均正确，且出现顺序符合“全称→简称→行政中心”的规则。
- 语音识别结果需在页面实时显示文字；系统自动判断当前答案与图片对应的省份是否匹配。
- 若匹配正确，该题计入“正确答题总数”（显示在对应小组记录中），同时可自动或手动点击“正确”按钮确认分数。

### 5. 积分与排行榜
- 每组最终得分为其“正确答题总数”。
- 网页根据8组得分自动排名：正确题数最多的小组积8分，第二名积7分，依此类推，最后一名积1分；若正确题数相同，则名次并列且占用后续名次（即同分规则由教师现场认定，默认按并列处理）。
- 在页面侧边栏或底部展示各小组的实时积分、当前答题数、正确题数和最终排名。

## 页面UI要求
- 顶部：活动标题“美丽中国识图大赛”；
- 左侧或右侧：8个小组状态面板，显示组号、当前得分、正确题数、积分数；
- 中央区域：图片展示区、倒计时显示、语音识别结果文本框；
- 底部或右侧：操作按钮“开始 / 暂停 / 下一个 / 正确答题总数”，并设置一个“当前小组结束答题”按钮，以便切换小组；
- 整体配色清新活泼，字体大小适合教室投影观看，所有按钮文字清晰醒目。

## 技术要求
- 使用纯 HTML、CSS、JavaScript 实现，确保可在现代 Chrome 或 Edge 浏览器中打开运行。
- 语音识别功能需做好浏览器兼容性提示，若无法识别需给出友好提示。
- 图片素材的加载方式应简单，可支持本地选择图片文件后自动建立“省份名称 → 图片”的映射；若没有图片，也可用对应省级行政区名称文字代替，但正式使用时可加载真实PPT中的图片。
- 随机抽取顺序保证每组不同且每组内不重复。
- 整个页面无需联网，语音识别除外；如有必要，可使用CDN链接，但要保证课堂可用。

## 备注
- 网页需要支持教师手动修正语音判定的结果（即“正确答题总数”按钮可手动加减分）。
- 所有历史记录和成绩可一键重置，方便多轮课堂活动。

请生成一个可直接保存为 `.html` 文件的完整网页源码。