AI-For-Beginners 课程测验系统：Quiz App 的多语言题库管理与 Azure 静态部署实战指南

• 教程
• 人工智能
• 机器学习
• 深度学习

导读

本文以 etc/quiz-app/README.md 为骨架，系统讲解 AI-For-Beginners 课程内置的课前/课后测验应用（Quiz App）：从题库 JSON 的数据结构与多语言翻译机制，到本地开发环境的启动、构建与代码规范检查，再到基于 GitHub Actions 将应用一键部署到 Azure Static Web App 的完整流程。阅读完本文，你将掌握如何为这套 Vue 2 测验应用新增一种语言翻译、如何通过?loc=查询参数在课程与测验之间联动语言，以及如何把构建产物稳定地发布到云端。

一、Quiz App 在课程中的定位

AI-For-Beginners 是一套覆盖 12 周、24 节课的 AI 入门课程，课程正文分布在 lessons 目录。为了让学习者在上课前评估已有知识、下课后检验学习效果，仓库内置了一个独立的 Vue 测验应用（etc/quiz-app），负责渲染所有课节的课前（Pre）与课后（Post）测验。

这个应用的关键特性包括：

• 纯前端单页应用：基于 Vue 2 + vue-router + vue-i18n 构建，题库以 JSON 文件形式随仓库托管，无需后端数据库；
• 按课节组织的题库：每个课节对应一个lesson-N.json文件，内含该课的课前与课后两套测验；
• 多语言支持：默认提供英语（en）题库，并已附带西班牙语（es）翻译目录，新增语言只需按固定约定添加文件；
• 部署友好：构建产物为静态文件（dist/），可直接发布到 Azure Static Web App 等静态托管服务。

二、项目结构与本地运行

2.1 目录结构

etc/quiz-app/ ├── public/ │ ├── index.html # SPA 入口 HTML │ ├── favicon.ico │ └── routes.json # Azure Static Web App 的路由回退配置 ├── src/ │ ├── assets/translations/ │ │ ├── en/ # 英语（权威）题库 │ │ │ ├── index.js # 汇总 lesson-1.json ~ lesson-24.json │ │ │ └── lesson-N.json │ │ ├── es/ # 西班牙语翻译题库 │ │ │ ├── index.js │ │ │ └── lesson-1.json │ │ └── index.js # 汇总各语言模块 │ ├── components/Quiz.vue # 测验交互组件 │ ├── router/index.js # 路由（/ 与 /quiz/:id） │ ├── views/Home.vue # 首页（测验列表） │ ├── views/NotFound.vue │ ├── App.vue # 顶层布局 + 语言下拉框 │ └── main.js # 入口（注册 vue-i18n 与 router） ├── package.json # 依赖与 npm scripts └── babel.config.js

2.2 环境准备与常用命令

从 package.json 可以看到，应用依赖vue@^2.6.11、vue-router@^3.4.9、vue-i18n@^8.28.2，构建工具为 Vue CLI（@vue/cli-service）。在原文档中给出了四组核心命令，完整整理如下：

# 安装依赖（首次运行前执行） npm install # 开发模式：编译并支持热重载 npm run serve # 生产构建：编译并压缩产物（输出到 dist/） npm run build # 代码规范检查并自动修复 npm run lint

package.json中同时声明了 ESLint 配置：继承plugin:vue/essential与eslint:recommended，解析器使用babel-eslint，这正是npm run lint的执行依据。

三、题库数据格式详解

题库的真实数据存储在 src/assets/translations/en/lesson-1.json 这类 JSON 文件中。以第 1 课为例，其结构为：

[ { "title": "AI for Beginners: Quizzes", "complete": "Congratulations, you completed the quiz!", "error": "Sorry, try again", "quizzes": [ { "id": 101, "title": "Introduction to AI: Pre Quiz", "quiz": [ { "questionText": "A famous 19th century proto-computer engineer was", "answerOptions": [ { "answerText": "Charles Barkley", "isCorrect": false }, { "answerText": "Charles Babbage", "isCorrect": true }, { "answerText": "Charles Darwin", "isCorrect": false } ] } ] }, { "id": 201, "title": "Introduction to AI: Post-Quiz", "quiz": [ ] } ] } ]

关键字段含义：

从 src/components/Quiz.vue 的handleAnswerClick实现可以看出，应用约定每个测验固定包含 3 道题：答对且currentQuestion未到 2 时进入下一题，答对最后一题则触发complete = true显示完成提示；一旦答错则设置error = true，停留在当前题，必须答对才能继续。

handleAnswerClick(isCorrect) { this.error = false; let nextQuestion = this.currentQuestion + 1; if (isCorrect) { // always 3 questions per quiz if (nextQuestion < 3) { this.currentQuestion = nextQuestion; } else { this.complete = true; } } else { this.error = true; } }

四、为测验添加一种新语言翻译（核心操作）

原文档的“Adding a translated quiz set”一节给出了新增翻译的标准流程，结合源码可以细化为以下五个步骤。

第 1 步：创建与en目录对齐的题库结构

在 src/assets/translations 下新建目标语言的目录（例如fr），并按权威语言目录（en）的命名约定放置文件：每个课节一个lesson-N.json，同时提供一个index.js汇总文件。

原文档强调“The canonical quizzes are inassets/translations/en”——即en是权威题库，其他语言必须与其结构对齐，包括文件数量与编号。

第 2 步：在新语言的index.js中导入所有翻译文件

参照 src/assets/translations/en/index.js 的写法，将本语言的各课节 JSON 全部导入并按下标组装成测验对象：

import x1 from "./lesson-1.json"; import x2 from "./lesson-2.json"; // ... 依此类推 const quiz = { 0: x1[0], 1: x2[0], // 按下标映射到 0 ~ 23 }; export default quiz;

从该文件可以看到，目前en目录共引入lesson-1.json至lesson-24.json共 24 个课节文件，每个文件取第 0 个元素，分别映射到索引0至23（对应原文档所说的“索引从 0 开始”）。新增语言时需要保持同样的映射约定。

第 3 步：在语言汇总index.js中注册新语言

编辑 src/assets/translations/index.js，把新语言模块加入messages对象：

import englishQuizzes from './en'; import spanishQuizzes from './es'; import frenchQuizzes from './fr'; // 新增 const messages = { en: englishQuizzes, es: spanishQuizzes, fr: frenchQuizzes, // 新增 }; export default messages;

第 4 步：在App.vue的语言下拉框中添加新语言

编辑 src/App.vue，在<select v-model="locale">中新增<option>，选项文本必须与语言目录名完全一致：

<select v-model="locale"> <option>en</option> <option>es</option> <option>fr</option> </select>

语言切换的联动逻辑同样位于 src/App.vue：监听locale变化后写入this.$root.$i18n.locale，src/main.js 中的 vue-i18n 实例则负责将messages[locale]注入组件。同时，src/App.vue 的created()钩子会优先读取 URL 中的?loc=查询参数作为初始语言，缺省回退到en——这与原文档“以查询参数控制语言”的说明完全对应。

第 5 步：更新课程正文中的测验链接

在已翻译的课程文档中（如 lessons/1-Intro/README.md），凡指向测验的链接都需追加?loc=<语言缩写>查询参数。例如链接到法语版测验时使用?loc=fr，链接到西班牙语版时使用?loc=es。这样学习者从课程跳转到测验时，应用会自动以该语言渲染题库，无需手动切换。

语言解析链路总结

课程文档中的 ?loc=fr → App.vue created() 读取 $route.query.loc → $root.$i18n.locale = 'fr' → Quiz.vue 的 currLocale 计算属性读取该值 → messages['fr'][0].quizzes 渲染对应语言的题目

这条链路在 src/App.vue、src/components/Quiz.vue 与 src/views/Home.vue 三处均有对应实现，且均实现了“无loc参数时默认en”的兜底逻辑。

五、路由与测验交互机制

src/router/index.js 定义了三条路由：

routes: [ { path: '/', name: 'home', component: Home }, { path: '/quiz/:id', name: 'Quiz', component: Quiz }, { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound } ]

• /：首页，由 src/views/Home.vue 渲染，它遍历当前语言下所有课节的测验，生成指向quiz/${quiz.id}的链接列表；
• /quiz/:id：测验页，由 src/components/Quiz.vue 渲染，通过:id定位到具体测验；
• 兜底路由：未匹配路径时进入 404 页。

Quiz 组件通过v-if="route == quiz.id"过滤出当前测验，用currentQuestion控制进度，整体交互（答对前进、答错提示、完成后显示complete文案）正如第三节所述，可在 src/components/Quiz.vue 中逐行验证。

六、部署到 Azure Static Web App

原文档的后半部分详细给出了部署到 Azure Static Web App 的逐步指南，这里完整继承并结合仓库文件补充说明。

6.1 部署前提

由于部署以 GitHub 仓库为源码来源，你需要：

1. 将包含 Quiz App 源码的仓库 fork 到自己的 GitHub 账户（即 fork AI-For-Beginners 仓库，其中 etc/quiz-app 就是待部署的应用目录）；
2. 准备一个 Azure 账号（若没有，先创建 Azure 账户）。

6.2 创建 Azure Static Web App

在 Azure portal 中执行：

1. 点击“Create a resource”，搜索并选择“Static Web App”；
2. 点击“Create”进入创建向导。

6.3 配置创建参数

Basics（基本信息）

Deployment Details（部署来源）

Build Details（构建配置）

6.4 审查并创建

确认以上配置无误后点击“Create”。Azure 会自动在仓库中生成一个 GitHub Actions 工作流文件，路径形如.github/workflows/azure-static-web-apps-<name>.yml，负责后续的构建与发布流程。

6.5 观察自动生成的 GitHub Actions 工作流

创建完成后，前往仓库的“Actions”标签页即可看到该工作流正在运行。它会在每次推送到指定分支或拉取请求时自动构建并部署，工作流结束后，应用即通过 Azure 提供的 URL 对外访问。

原文档给出的工作流示例（此处整理为标准 YAML 格式，并修正了原文中的语法笔误）：

name: Azure Static Web Apps CI/CD on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main jobs: build_and_deploy_job: runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkout@v2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: "upload" app_location: "etc/quiz-app" api_location: "" output_location: "dist"

各with参数与原文档及上述创建向导的配置一一对应：

6.6 路由回退配置（部署的关键细节）

Quiz App 使用了 vue-router 的history模式（见 src/router/index.js 中的mode: 'history'），这类 SPA 在静态托管下刷新非根路径时可能出现 404。仓库已经在 public/routes.json 中预置了路由回退规则：

{ "routes": [ { "route": "/*", "serve": "/index.html" } ] }

该文件会随public/目录一并复制到构建产物中，Azure Static Web App 会依据它把未匹配的路径回退到index.html，从而保证/quiz/101?loc=es这类深链可被正常访问。部署时确认该文件随dist发布即可。

七、多语言体系现状与扩展边界

以仓库当前内容为准，src/assets/translations 下存在两个语言目录：

• en/：权威题库，含lesson-1.json~lesson-24.json共 24 个课节文件，index.js将课节映射到索引 0 ~ 23；
• es/：西班牙语翻译，目前仅提供lesson-1.json与对应的index.js，可作为新增语言时的最小范例参考。

需要留意的是：原文档提到课程总计 40 道测验且编号从 0 开始，而仓库当前en/index.js实际映射的课节索引为 0 ~ 23（24 个课节文件、每个文件含 Pre/Post 两套测验）。在新增翻译、对齐编号时，应以 src/assets/translations/en/index.js 的现状为准，避免索引错位。

另外，语言切换下拉框目前仅有en与es两个选项（见 src/App.vue），每新增一种语言都必须同步修改该下拉框，这是新增翻译流程中容易被遗漏的一环。

八、常见问题排查要点

结合源码与原文档，给出几个实践中易踩的坑：

1. 下拉框没有出现新语言：检查 src/assets/translations/index.js 是否已将新语言模块加入messages，并检查 src/App.vue 的<select>是否新增了对应<option>；
2. ?loc=参数不生效：确认 URL 查询参数名严格为loc（App.vue与Quiz.vue均通过this.$route.query.loc读取），且缩写与语言目录名完全一致；若未带参数，应用会回退到en；
3. 测验点进去是空白：确认路由参数:id与题库 JSON 中的测验id（如101、201）匹配，Quiz 组件以route == quiz.id为渲染条件；
4. 部署后深链刷新 404：确认output_location填写的构建目录与npm run build的实际输出一致（本应用为dist），且 public/routes.json 已随构建产物发布；
5. 每套测验的题数：Quiz 组件的完成判定硬编码为“3 题”（见 src/components/Quiz.vue 中nextQuestion < 3的判断），新增题目时需保持每套 3 题的约定，否则进度逻辑会出现偏差。

结语

Quiz App 虽然是一个体量精巧的 Vue 应用，却完整覆盖了“多语言题库组织 → 语言参数联动 → 静态构建 → 云端自动部署”的典型链路。无论你是想为课程贡献新的语言翻译，还是打算复用这套模式为自己的教学内容搭建测验系统，都可以直接以 etc/quiz-app 为蓝本，参照本文的五个翻译步骤与 Azure 部署流程快速落地。

• 教程
• 人工智能
• 机器学习
• 深度学习