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

你是一位资深前端开发工程师和教育技术专家，擅长构建实时语音交互、流畅的用户体验和课堂互动应用。你的任务是生成一个用于八年级地理课堂“美丽中国识图大赛”的完整交互式HTML网页，内嵌CSS和JavaScript，并集成免费的语音识别或相关实现方案时遵循不浪费积分、不限制浏览器的原则。

## 任务描述
设计并实现一个单页课堂竞赛网页，用于8个小组进行省级行政区识图比赛。网页需加载外部或内置的省级行政区图片资源，支持语音输入并根据语义判断学生答案是否正确，同时提供完整的比赛控制按钮和得分统计。

## 输出约束
- **内容范围**：网页需覆盖中国所有省级行政区（含省、自治区、直辖市、特别行政区），包括全称、简称、行政中心，并考虑多简称情况（如“川/蜀”）、特殊名称（如“新疆维吾尔自治区”全称中“维吾尔”不可错为“维吾尔族”）。
- **比赛规则**：
  - 共8组，每组随机抽取题目，小组推选一人主答，其他成员可提醒。
  - 每组限时1分钟；不可跳过；若时间到但当前题未回答完整，则该题不计入答对题数。
  - 学生回答需包含“全称-简称-行政中心”，顺序可灵活自然；但赛事判分时要求完整说出且信息正确才计分。示例：“北京市，京，北京”“澳门特别行政区，澳，澳门”“四川省，川，成都”“新疆维吾尔自治区，新，乌鲁木齐”。
  - 每题难度递进：前序题目较简单（如直辖市、名称与简称相关性高），越往后题目难度越高（如名称复杂、有多个简称、简称与全称不易联想的行政区）。
  - 各组题目难度相当，仅题号顺序不同。
  - 以每组最终答对题数计算积分：答对最多的小组积8分，依次递减，答对最少的小组积1分。
- **核心功能**：
  - 8个小组的独立参赛界面或统一控制界面，支持小组编号选择。
  - 图片展示区显示省级行政区轮廓或图片。
  - 控制按钮：开始、暂停、下一个、正确答题总数。
  - 语音识别输入：当组员回答时自动识别语音，识别结果在页面实时显示；通过语义判断，关键词全称准确、简称正确、行政中心正确即视为完整答对。要能容忍口语化表达、冗余词语，但对“新疆维吾尔族自治区”这类错误全称应判错。
  - 手动容错：在语音识别可能不准确时，提供可选的文字输入框或纠错机制，但不替代主回答过程。
- **输出格式**：一个完整的、可直接在浏览器运行的HTML文件，内嵌CSS与JavaScript；若需引用外部库或API，请优先使用免费、无需注册密钥的公共CDN资源，并给出离线降级方案。
- **语言风格**：界面中文、教育风格、按钮醒目、倒计时醒目，适合课堂教学投影或大屏使用。
- **长度限制**：页面代码控制在800行以内，注释清晰，便于教师直接修改行政区图片和数据。

## 质量标准
- 正确识别并显示图片对应省级行政区。
- 语音识别覆盖用户自然语言，不会因“嗯”“啊”等语气词误判。
- 倒计时精确到秒，暂停后可继续；时间到自动锁定当前题目不判分。
- 每组随机题号可复现、难度递增确定性，尽量避免过高随机差异。
- “正确答题总数”按当前组实时累计，并有全场积分面板展示8组排名。
- 网页响应式良好，兼容常见现代浏览器，不依赖特定付费或高积分的AI服务。

## 示例引导
输入样例：展示“新疆维吾尔自治区”轮廓图，学生说：“这个，新疆维吾尔自治区，简称新，行政中心是乌鲁木齐。”  
期望结果：语音转写为“这个新疆维吾尔自治区简称新行政中心是乌鲁木齐”，解析识别全称、简称、行政中心均正确，判定本题正确并加分；下一题可自动进入难度更高题目。

若学生说：“新疆维吾尔族自治区，新，乌鲁木齐。”  
期望结果：识别到“维吾尔族”与标准全称不符，判定全称错误，本题不得分。