测验应用程序

目的与范围

本文档描述了 ML-For-Beginners 存储库中的测验应用程序系统。该应用程序提供交互式的课前和课后测验，用于测试用户在机器学习课程主题上的知识。该系统支持多种语言，以使学习内容能够为全球受众所访问。

系统概览

测验应用程序构建为独立的 Vue.js 应用程序，用于显示带有选择题的教育性测验。该应用程序从多种语言的结构化 JSON 文件中加载测验内容，并允许用户通过简单的用户界面在语言之间切换。

高层架构

来源: quiz-app/package.json quiz-app/src/App.vue

技术栈

组件	技术	版本	目的
前端框架	Vue.js	2.6.11	用于构建 UI 的核心框架
路由	Vue Router	3.5.3	不同测验之间的导航
国际化	Vue-i18n	8.26.7	多语言支持
开发	Vue CLI	5.0.8	构建工具和开发环境

来源: quiz-app/package.json10-15

组件结构

测验应用程序围绕主 App 组件及其包含的 Quiz 组件，拥有一个简单的组件结构。

来源: quiz-app/src/App.vue1-22 quiz-app/src/App.vue26

国际化系统

该应用程序使用 Vue-i18n 实现多语言支持，允许以用户偏好的语言显示测验内容。

翻译文件结构

来源: quiz-app/src/assets/translations/index.js1-22 quiz-app/src/App.vue31

实现细节

翻译通过 index.js 文件加载，该文件导入所有语言文件并为 Vue-i18n 创建一个 messages 对象。

来源: quiz-app/src/assets/translations/index.js1-22 quiz-app/src/App.vue17

语言选择

应用程序允许用户通过导航栏中的下拉选择器选择他们偏好的语言。

来源: quiz-app/src/App.vue6-14 quiz-app/src/App.vue40-44

测验数据结构

测验内容以结构化 JSON 文件形式存储，支持每种语言。这种结构允许一致的测验呈现，同时支持多种语言。

来源: quiz-app/src/assets/translations/fr.json1-57

翻译文件格式

每个语言文件包含一个 JSON 数组，其中包含一个具有以下结构的单个对象

来源: quiz-app/src/assets/translations/fr.json1-57

示例测验结构

这是来自翻译文件的测验对象结构的示例

属性	描述	示例
id	测验的唯一标识符	1
title	向用户显示的测验标题	"Introduction au machine learning: Quiz préalable"
quiz	问题对象的数组	[ { questionText, answerOptions }, ... ]
questionText	问题文本	"Les applications de machine learning sont toutes autour de nous"
answerOptions	可能答案的数组	[ { answerText, isCorrect }, ... ]
answerText	答案选项的文本	"Vrai"
isCorrect	这是否是正确答案	"true" 或 "false"

来源: quiz-app/src/assets/translations/fr.json7-57

应用程序流程

以下序列图说明了从初始加载到测验完成的测验应用程序的完整流程

来源: quiz-app/src/App.vue30-49 quiz-app/src/assets/translations/index.js1-22

用户界面

测验应用程序提供了一个干净、易于访问的用户界面，具有一致的样式。

UI 组件

来源: quiz-app/src/App.vue1-22 quiz-app/src/App.vue53-111

样式

该应用程序使用 App.vue 中定义的自定义 CSS 样式，以确保应用程序整体上具有一致且响应式的用户体验。

UI 元素	CSS 类	目的
测验容器	.card	测验内容的容器
答案按钮	.btn, .ans-btn	测验答案的样式化按钮
成功消息	.message	显示测验完成状态
错误消息	.error	显示错误反馈

来源: quiz-app/src/App.vue53-111

添加新语言

该应用程序易于通过以下方式适应新的语言翻译：

创建具有与现有翻译文件相同结构的新 JSON 文件（例如 de.json）
在 translations/index.js 中添加导入和注册
在 App.vue 中为语言选择器添加新选项

来源: quiz-app/src/assets/translations/index.js1-22 quiz-app/src/App.vue6-14

结论

测验应用程序提供了一种互动方式，让用户可以测试他们在 ML-For-Beginners 课程中涵盖的机器学习概念的知识。其 Vue.js 实现提供了响应式用户体验，而结构化数据格式则可以轻松添加新的测验和语言。

多语言支持使教育内容能够为全球受众所访问，这与课程旨在广泛普及机器学习教育的目标一致。