教程人工智能机器学习深度学习【免费下载链接】AI-For-Beginners12 Weeks, 24 Lessons, AI for All!项目地址https://gitcode.com/GitHub_Trending/ai/AI-For-Beginners点击查看免费下载本指南围绕 AI-For-Beginners 课程仓库中的测验应用Quiz App位于 etc/quiz-app展开系统讲解其作为课程课前/课后测验pre- and post-lecture quizzes的运作方式、如何为其添加一门全新的语言翻译、本地开发构建的完整命令以及如何借助 Azure Static Web Apps 与 GitHub Actions 一键发布上线。读完本文你将掌握从克隆测验项目 → 接入新语言 → 本地调试 → 云端部署的完整闭环能力并理解测验数据、路由与国际化机制的源码级实现细节。一、测验应用在课程中的角色AI-For-Beginners 是面向初学者的 12 周、24 课 AI 课程。每一课都配有课前测验Pre-Quiz与课后测验Post-Quiz用于帮助学习者检验学习效果。这些测验由一个独立的 Vue 2 应用承载即etc/quiz-app目录前端框架Vue 2vue^2.6.11路由使用vue-router^3.4.9国际化使用vue-i18n^8.28.2见 package.json测验数据以 JSON 形式集中存放于src/assets/translations/其中en目录为所有语言的标准源canonical应用通过vue-cli-service提供serve/build/lint三条核心命令见 package.json。全课程共有40 个测验编号从 0 开始。测验按课程分组存放在lesson-1.json至lesson-24.json中每个文件内的quizzes数组通常同时包含该课的课前与课后测验。以 lesson-1.json 为例其中包含id: 101的 Introduction to AI: Pre Quiz 与id: 201的 Introduction to AI: Post-Quiz每个测验固定 3 道选择题每题含questionText与带isCorrect标记的answerOptions。二、添加一门新的语言翻译核心扩展流程官方文档明确给出了接入新语言的四步流程下面结合仓库源码逐条展开。1. 在assets/translations下创建对应语言目录在 src/assets/translations 下以语言代码命名新建目录如fr、cs在其中放置与en目录结构一致的lesson-N.json文件并确保lesson-N.json的编号与课程编号严格对齐全课程 40 个测验编号从 0 开始。翻译时以en目录内容为基准逐文件对照保持 JSON 结构、id、isCorrect判定逻辑完全不变仅翻译title、questionText、answerText、complete、error等文案字段。2. 在语言目录内维护index.js汇总导入参照 en/index.js 的写法在你的语言目录中新建index.js逐行import所有lesson-N.json并按{ 0 : x1[0], 1 : x2[0], ... 23 : x24[0] }的映射关系导出使测验编号023与课程文件一一对应。3. 在顶层index.js注册新语言编辑 translations/index.js将新语言的汇总模块引入并挂入messages对象例如当前仓库已经同时挂载了en与es两种语言import englishQuizzes from ./en; import spanishQuizzes from ./es; const messages { en: englishQuizzes, es: spanishQuizzes, }; export default messages;新增语言时在import与messages中分别补上对应条目即可。4. 在App.vue的下拉菜单中加入语言项编辑 App.vue在select v-modellocale中追加option其值必须与语言目录的文件夹名完全一致select v-modellocale optionen/option optiones/option !-- 新增optionfr/option -- /select从源码可以看出语言选择的完整链路App.vue的created()钩子优先读取路由查询参数?loc作为初始 locale缺省时回退为enApp.vue用户切换下拉框时watch.locale会同步写入this.$root.$i18n.localeApp.vue而 Quiz.vue 则通过currLocale计算属性读取该值渲染对应语言数据。因此只要messages中注册了该语言下拉框选择即可生效。5. 在翻译后的课程文档中接入语言参数最后如果被翻译的课程 Markdown 文档里存在指向测验的链接需要为这些链接追加?loc查询参数例如法语版本应形如?locfr。这样学习者从课程页进入测验时应用即可直接以对应语言呈现题目。三、本地开发安装、调试与构建测验应用基于 Vue CLI 5环境要求为 Node.js 与 npm。常用命令如下见 README 与 package.json# 安装全部依赖 npm install # 开发模式编译并热重载Hot-Reload npm run serve # 生产模式编译并压缩 npm run build # 代码检查与自动修复 npm run lintnpm run serve启动开发服务器修改源码后页面自动刷新适合本地验证新增语言是否生效npm run build将产物输出到dist目录这是后续 Azure 部署中output_location对应的目录npm run lint基于eslinteslint-plugin-vue对src进行语法与风格校验见 package.json。路由与页面结构应用路由由 src/router/index.js 定义共三条路径组件说明/Home首页/quiz/:idQuiz测验页:id即测验编号如 101、201/:pathMatch(.*)*NotFound兜底 404 页测验页面的交互逻辑集中在 Quiz.vue 中点击选项后调用handleAnswerClick(option.isCorrect)答对则进入下一题每题固定 3 道见源码注释 always 3 questions per quiz答完显示complete文案答错则显示error文案并可重新作答。四、部署到 Azure Static Web Apps分步指南官方 README 提供了一套完整的 Azure 静态站点部署路径以下按步骤整理其中涉及的 Azure 控制台操作以官方文档为准本仓库不包含 Azure 凭据或配置。第 1 步Fork 仓库确保静态 Web 应用代码位于你自己的 GitHub 仓库中先 fork 本仓库或包含测验应用代码的仓库后续 Azure 将基于该仓库执行构建与发布。第 2 步创建 Azure Static Web App 资源注册/登录 Azure 账户进入 Azure 门户点击创建资源搜索Static Web App点击创建进入配置向导。第 3 步配置 Static Web App基础信息Basics配置项说明订阅Subscription选择你的 Azure 订阅资源组Resource Group新建或复用现有资源组名称Name为静态 Web 应用命名区域Region选择离目标用户最近的区域部署详细信息Deployment Details来源Source选择GitHubGitHub 账户授权 Azure 访问你的 GitHub 账户组织Organization选择包含代码的组织仓库Repository选择包含静态 Web 应用代码的仓库分支Branch选择要部署的分支通常为main。构建详细信息Build Details构建预设Build Presets选择应用使用的框架本项目为Vue应用位置App Location应用源码所在目录本仓库中测验应用位于etc/quiz-app故填写etc/quiz-appAPI 位置API Location若存在 API 则填写其目录本项目可选/留空输出位置Output Location构建产物目录npm run build的输出为dist。第 4 步检查并创建核对配置后点击创建。Azure 会自动完成两件事创建所需的云端资源并在你的 GitHub 仓库中生成 GitHub Actions workflow 文件路径形如.github/workflows/azure-static-web-apps-name.yml。第 5 步了解自动生成的 Workflow该 workflow 负责完整的构建 部署流程。仓库文档给出了一个典型的示例文件下节详述其核心是调用Azure/static-web-apps-deployv1动作完成上传。第 6 步监控部署进入 GitHub 仓库的Actions标签页可以看到 workflow 正在运行它将构建测验应用并部署到 Azure Static Web Apps。workflow 成功完成后应用即通过 Azure 提供的 URL 对外提供服务。五、示例 GitHub Actions Workflow 文件详解README 提供了部署用 workflow 的示例以下是整理为合法 YAML 后的版本原文档中api_location一行存在引号配对笔误此处已修正其余参数与语义保持原样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/checkoutv2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deployv1 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: # API 源码路径可选 output_location: dist # 构建产物目录可选关键参数说明参数值作用azure_static_web_apps_api_token仓库 SecretAzure 侧生成的部署令牌创建 Static Web App 后自动注入仓库 Secretrepo_tokensecrets.GITHUB_TOKENGitHub 提供的自动令牌用于部署过程访问仓库actionupload上传构建产物PR 关闭时 Azure 会自动生成close分支逻辑完成环境清理app_locationetc/quiz-app必须与 Azure 控制台中的应用位置一致指向仓库内的测验应用根目录output_locationdist对应npm run build的产物目录触发器设计上push到main触发生产部署pull_requestopened/synchronize/reopened/closed触发预发布环境构建方便在合并前预览测验应用的效果。六、源码结构速览与后续拓展建议测验数据组织方式路径职责src/assets/translations/en/英文标准测验数据lesson-1.json~lesson-24.jsonsrc/assets/translations/en/index.js将 24 个课程文件映射为编号 023 的测验字典src/assets/translations/index.js汇总各语言en、es并导出messagessrc/components/Quiz.vue测验渲染与答题交互src/App.vue语言下拉框与?loc参数解析src/router/index.js/quiz/:id路由定义从源码可以进一步确认的事实测验编号规则与课程存在对应关系如lesson-1.json中的101课前与201课后从命名看百位对应课程编号、末两位区分课前/课后见 lesson-1.json 与 lesson-1.json接入新语言时务必保持这些id不变否则/quiz/:id路由将无法命中语言切换完全由vue-i18n的全局 locale 驱动与路由参数解耦后又通过?loc查询参数完成课程页 → 测验页的语言传递答题器实现为每题必答对才能前进的强校验模式答错即显示错误提示属于教学场景的刻意设计。常见排查建议新增语言后下拉框出现但切换无效检查顶层 translations/index.js 是否已注册该语言测验加载为空核对语言目录内lesson-N.json的编号是否与课程一一对应且index.js的键映射023与en目录一致Azure 部署后页面 404确认控制台中的App Location与 workflow 中的app_location均指向etc/quiz-app且output_location为dist构建失败先在本地完整执行npm install npm run build确保dist可正常产出后再检查 workflow 配置。七、结语本文以etc/quiz-app测验应用为主体完整覆盖了多语言扩展四步流程、本地开发构建命令、Azure Static Web Apps 六步部署三大主线并结合 App.vue、Quiz.vue、translations 等源码文件还原了语言切换、路由匹配与答题校验的底层实现。无论你是想为课程新增一门语言的测验、在本地二次开发测验样式还是希望将测验应用快速部署上线都可以直接套用本指南的操作路径。赞分享教程人工智能机器学习深度学习【免费下载链接】AI-For-Beginners12 Weeks, 24 Lessons, AI for All!项目地址https://gitcode.com/GitHub_Trending/ai/AI-For-Beginners点击查看免费下载相关推荐AI-For-Beginners 课程测验应用Quiz App完整指南本地运行、多语言扩展与 Azure 静态部署AI For Beginners 课程测验应用Quiz App完整指南本地运行、多语言扩展与 Azure 静态部署 这篇指南以 etc/quiz app教程人工智能机器学习深度学习Web-Dev-For-Beginners 测验应用实战指南多语言题库扩展、本地运行与 Azure 静态 Web 应用部署Web Dev For Beginners 测验应用实战指南多语言题库扩展、本地运行与 Azure 静态 Web 应用部署 本文围绕微软 Web Dev Fo文档教程前端Data-Science-For-Beginners 测验应用多语言测验集管理、本地构建与 Azure 静态站点部署Data Science For Beginners 测验应用多语言测验集管理、本地构建与 Azure 静态站点部署 本文以本仓库中测验应用quiz app数据科学教程上一篇bRPC 快速上手与调优指南高性能低延迟 RPC 框架进生产的完整路径下一篇老路由器变身容器服务器ImmortalWrt 3 步装好 Docker创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
AI-For-Beginners 课程测验应用实战指南：多语言扩展、本地开发与 Azure 静态站点部署
教程人工智能机器学习深度学习【免费下载链接】AI-For-Beginners12 Weeks, 24 Lessons, AI for All!项目地址https://gitcode.com/GitHub_Trending/ai/AI-For-Beginners点击查看免费下载本指南围绕 AI-For-Beginners 课程仓库中的测验应用Quiz App位于 etc/quiz-app展开系统讲解其作为课程课前/课后测验pre- and post-lecture quizzes的运作方式、如何为其添加一门全新的语言翻译、本地开发构建的完整命令以及如何借助 Azure Static Web Apps 与 GitHub Actions 一键发布上线。读完本文你将掌握从克隆测验项目 → 接入新语言 → 本地调试 → 云端部署的完整闭环能力并理解测验数据、路由与国际化机制的源码级实现细节。一、测验应用在课程中的角色AI-For-Beginners 是面向初学者的 12 周、24 课 AI 课程。每一课都配有课前测验Pre-Quiz与课后测验Post-Quiz用于帮助学习者检验学习效果。这些测验由一个独立的 Vue 2 应用承载即etc/quiz-app目录前端框架Vue 2vue^2.6.11路由使用vue-router^3.4.9国际化使用vue-i18n^8.28.2见 package.json测验数据以 JSON 形式集中存放于src/assets/translations/其中en目录为所有语言的标准源canonical应用通过vue-cli-service提供serve/build/lint三条核心命令见 package.json。全课程共有40 个测验编号从 0 开始。测验按课程分组存放在lesson-1.json至lesson-24.json中每个文件内的quizzes数组通常同时包含该课的课前与课后测验。以 lesson-1.json 为例其中包含id: 101的 Introduction to AI: Pre Quiz 与id: 201的 Introduction to AI: Post-Quiz每个测验固定 3 道选择题每题含questionText与带isCorrect标记的answerOptions。二、添加一门新的语言翻译核心扩展流程官方文档明确给出了接入新语言的四步流程下面结合仓库源码逐条展开。1. 在assets/translations下创建对应语言目录在 src/assets/translations 下以语言代码命名新建目录如fr、cs在其中放置与en目录结构一致的lesson-N.json文件并确保lesson-N.json的编号与课程编号严格对齐全课程 40 个测验编号从 0 开始。翻译时以en目录内容为基准逐文件对照保持 JSON 结构、id、isCorrect判定逻辑完全不变仅翻译title、questionText、answerText、complete、error等文案字段。2. 在语言目录内维护index.js汇总导入参照 en/index.js 的写法在你的语言目录中新建index.js逐行import所有lesson-N.json并按{ 0 : x1[0], 1 : x2[0], ... 23 : x24[0] }的映射关系导出使测验编号023与课程文件一一对应。3. 在顶层index.js注册新语言编辑 translations/index.js将新语言的汇总模块引入并挂入messages对象例如当前仓库已经同时挂载了en与es两种语言import englishQuizzes from ./en; import spanishQuizzes from ./es; const messages { en: englishQuizzes, es: spanishQuizzes, }; export default messages;新增语言时在import与messages中分别补上对应条目即可。4. 在App.vue的下拉菜单中加入语言项编辑 App.vue在select v-modellocale中追加option其值必须与语言目录的文件夹名完全一致select v-modellocale optionen/option optiones/option !-- 新增optionfr/option -- /select从源码可以看出语言选择的完整链路App.vue的created()钩子优先读取路由查询参数?loc作为初始 locale缺省时回退为enApp.vue用户切换下拉框时watch.locale会同步写入this.$root.$i18n.localeApp.vue而 Quiz.vue 则通过currLocale计算属性读取该值渲染对应语言数据。因此只要messages中注册了该语言下拉框选择即可生效。5. 在翻译后的课程文档中接入语言参数最后如果被翻译的课程 Markdown 文档里存在指向测验的链接需要为这些链接追加?loc查询参数例如法语版本应形如?locfr。这样学习者从课程页进入测验时应用即可直接以对应语言呈现题目。三、本地开发安装、调试与构建测验应用基于 Vue CLI 5环境要求为 Node.js 与 npm。常用命令如下见 README 与 package.json# 安装全部依赖 npm install # 开发模式编译并热重载Hot-Reload npm run serve # 生产模式编译并压缩 npm run build # 代码检查与自动修复 npm run lintnpm run serve启动开发服务器修改源码后页面自动刷新适合本地验证新增语言是否生效npm run build将产物输出到dist目录这是后续 Azure 部署中output_location对应的目录npm run lint基于eslinteslint-plugin-vue对src进行语法与风格校验见 package.json。路由与页面结构应用路由由 src/router/index.js 定义共三条路径组件说明/Home首页/quiz/:idQuiz测验页:id即测验编号如 101、201/:pathMatch(.*)*NotFound兜底 404 页测验页面的交互逻辑集中在 Quiz.vue 中点击选项后调用handleAnswerClick(option.isCorrect)答对则进入下一题每题固定 3 道见源码注释 always 3 questions per quiz答完显示complete文案答错则显示error文案并可重新作答。四、部署到 Azure Static Web Apps分步指南官方 README 提供了一套完整的 Azure 静态站点部署路径以下按步骤整理其中涉及的 Azure 控制台操作以官方文档为准本仓库不包含 Azure 凭据或配置。第 1 步Fork 仓库确保静态 Web 应用代码位于你自己的 GitHub 仓库中先 fork 本仓库或包含测验应用代码的仓库后续 Azure 将基于该仓库执行构建与发布。第 2 步创建 Azure Static Web App 资源注册/登录 Azure 账户进入 Azure 门户点击创建资源搜索Static Web App点击创建进入配置向导。第 3 步配置 Static Web App基础信息Basics配置项说明订阅Subscription选择你的 Azure 订阅资源组Resource Group新建或复用现有资源组名称Name为静态 Web 应用命名区域Region选择离目标用户最近的区域部署详细信息Deployment Details来源Source选择GitHubGitHub 账户授权 Azure 访问你的 GitHub 账户组织Organization选择包含代码的组织仓库Repository选择包含静态 Web 应用代码的仓库分支Branch选择要部署的分支通常为main。构建详细信息Build Details构建预设Build Presets选择应用使用的框架本项目为Vue应用位置App Location应用源码所在目录本仓库中测验应用位于etc/quiz-app故填写etc/quiz-appAPI 位置API Location若存在 API 则填写其目录本项目可选/留空输出位置Output Location构建产物目录npm run build的输出为dist。第 4 步检查并创建核对配置后点击创建。Azure 会自动完成两件事创建所需的云端资源并在你的 GitHub 仓库中生成 GitHub Actions workflow 文件路径形如.github/workflows/azure-static-web-apps-name.yml。第 5 步了解自动生成的 Workflow该 workflow 负责完整的构建 部署流程。仓库文档给出了一个典型的示例文件下节详述其核心是调用Azure/static-web-apps-deployv1动作完成上传。第 6 步监控部署进入 GitHub 仓库的Actions标签页可以看到 workflow 正在运行它将构建测验应用并部署到 Azure Static Web Apps。workflow 成功完成后应用即通过 Azure 提供的 URL 对外提供服务。五、示例 GitHub Actions Workflow 文件详解README 提供了部署用 workflow 的示例以下是整理为合法 YAML 后的版本原文档中api_location一行存在引号配对笔误此处已修正其余参数与语义保持原样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/checkoutv2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deployv1 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: # API 源码路径可选 output_location: dist # 构建产物目录可选关键参数说明参数值作用azure_static_web_apps_api_token仓库 SecretAzure 侧生成的部署令牌创建 Static Web App 后自动注入仓库 Secretrepo_tokensecrets.GITHUB_TOKENGitHub 提供的自动令牌用于部署过程访问仓库actionupload上传构建产物PR 关闭时 Azure 会自动生成close分支逻辑完成环境清理app_locationetc/quiz-app必须与 Azure 控制台中的应用位置一致指向仓库内的测验应用根目录output_locationdist对应npm run build的产物目录触发器设计上push到main触发生产部署pull_requestopened/synchronize/reopened/closed触发预发布环境构建方便在合并前预览测验应用的效果。六、源码结构速览与后续拓展建议测验数据组织方式路径职责src/assets/translations/en/英文标准测验数据lesson-1.json~lesson-24.jsonsrc/assets/translations/en/index.js将 24 个课程文件映射为编号 023 的测验字典src/assets/translations/index.js汇总各语言en、es并导出messagessrc/components/Quiz.vue测验渲染与答题交互src/App.vue语言下拉框与?loc参数解析src/router/index.js/quiz/:id路由定义从源码可以进一步确认的事实测验编号规则与课程存在对应关系如lesson-1.json中的101课前与201课后从命名看百位对应课程编号、末两位区分课前/课后见 lesson-1.json 与 lesson-1.json接入新语言时务必保持这些id不变否则/quiz/:id路由将无法命中语言切换完全由vue-i18n的全局 locale 驱动与路由参数解耦后又通过?loc查询参数完成课程页 → 测验页的语言传递答题器实现为每题必答对才能前进的强校验模式答错即显示错误提示属于教学场景的刻意设计。常见排查建议新增语言后下拉框出现但切换无效检查顶层 translations/index.js 是否已注册该语言测验加载为空核对语言目录内lesson-N.json的编号是否与课程一一对应且index.js的键映射023与en目录一致Azure 部署后页面 404确认控制台中的App Location与 workflow 中的app_location均指向etc/quiz-app且output_location为dist构建失败先在本地完整执行npm install npm run build确保dist可正常产出后再检查 workflow 配置。七、结语本文以etc/quiz-app测验应用为主体完整覆盖了多语言扩展四步流程、本地开发构建命令、Azure Static Web Apps 六步部署三大主线并结合 App.vue、Quiz.vue、translations 等源码文件还原了语言切换、路由匹配与答题校验的底层实现。无论你是想为课程新增一门语言的测验、在本地二次开发测验样式还是希望将测验应用快速部署上线都可以直接套用本指南的操作路径。赞分享教程人工智能机器学习深度学习【免费下载链接】AI-For-Beginners12 Weeks, 24 Lessons, AI for All!项目地址https://gitcode.com/GitHub_Trending/ai/AI-For-Beginners点击查看免费下载相关推荐AI-For-Beginners 课程测验应用Quiz App完整指南本地运行、多语言扩展与 Azure 静态部署AI For Beginners 课程测验应用Quiz App完整指南本地运行、多语言扩展与 Azure 静态部署 这篇指南以 etc/quiz app教程人工智能机器学习深度学习Web-Dev-For-Beginners 测验应用实战指南多语言题库扩展、本地运行与 Azure 静态 Web 应用部署Web Dev For Beginners 测验应用实战指南多语言题库扩展、本地运行与 Azure 静态 Web 应用部署 本文围绕微软 Web Dev Fo文档教程前端Data-Science-For-Beginners 测验应用多语言测验集管理、本地构建与 Azure 静态站点部署Data Science For Beginners 测验应用多语言测验集管理、本地构建与 Azure 静态站点部署 本文以本仓库中测验应用quiz app数据科学教程上一篇bRPC 快速上手与调优指南高性能低延迟 RPC 框架进生产的完整路径下一篇老路由器变身容器服务器ImmortalWrt 3 步装好 Docker创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
