菜单

测验评估系统

相关源文件

测验评估系统是一个基于 Vue.js 的应用程序,它提供互动式测验,以测试学习者在整个初学者 Web 开发课程中的理解程度。本页面记录了测验系统的目的、架构和组件,并解释了它如何提供与学习模块集成的多语言评估。

有关测验内容结构和翻译过程的信息,请参阅 测验内容和翻译

概述

测验评估系统允许学习者在每个课程的开始和结束时测试他们的知识。它具有

  • 每个模块的课前和课后测验
  • 带自动反馈的多项选择题
  • 支持 15 种以上语言的完整国际化
  • 跨设备响应式设计

该系统构建为一个独立的 Vue.js 应用程序,可以集成到课程网站中或独立访问。

来源: quiz-app/README.md1-4 quiz-app/package.json1-22

架构

组件结构

该测验应用程序遵循标准的 Vue.js 架构,使用 Vue 3 的 Composition API。主应用程序组件 (App.vue) 集成了 Vue Router 用于视图之间的导航,并集成了翻译系统以实现国际化。

来源: quiz-app/src/App.vue1-20 quiz-app/src/main.js1-11 quiz-app/package.json12-15

测验数据结构

每个语言的测验文件都包含一个 JSON 结构,定义了课程的所有测验。该结构是分层的,包含一系列测验,每个测验又包含多个带有答案选项的问题。

来源: quiz-app/README.md10-42 quiz-app/src/assets/translations/zh_tw.json1-50

翻译系统

测验评估系统通过结构化的翻译系统支持多种语言。翻译文件是包含不同语言测验内容的 JSON 文档。

翻译架构

翻译系统导入各个语言文件,并在中央 index.js 文件中注册它们,使翻译在整个应用程序中可用。

来源: quiz-app/src/assets/translations/index.js1-37 quiz-app/README.md44-66

支持的语言

该系统目前支持以下语言

语言代码语言名称
en英语
fr法语
es西班牙语
zh_cn中文(简体)
zh_tw中文(繁体)
ko韩语
id印度尼西亚语
hi印地语
it意大利语
ja日语
el希腊语
ms马来语
nl荷兰语
taTamil
pt-BR葡萄牙语(巴西)

来源: quiz-app/src/assets/translations/index.js2-16

用户体验流程

用户与测验评估系统的交互遵循典型的流程模式

  1. 用户访问测验应用程序
  2. 应用程序加载并以适当的语言进行初始化
  3. 用户导航到特定的测验
  4. 测验从翻译系统中加载问题
  5. 用户回答问题并获得即时反馈
  6. 完成后,用户将收到最终分数,并且可以导航到其他测验

来源: quiz-app/src/App.vue6-19 quiz-app/README.md68-108

开发与部署

测验评估系统的设计宗旨是

  1. 易于扩展,支持新的翻译
  2. 可作为独立应用程序部署
  3. 可集成到更广泛的课程网站中

本地开发

要为本地开发设置测验应用程序

  1. 克隆仓库
  2. 导航到 quiz-app 目录
  3. 使用 npm install 安装依赖项
  4. 使用 npm run dev 运行开发服务器

来源: quiz-app/README.md68-107

部署

测验应用程序可以部署到各种托管平台

  1. 使用 npm run build 构建应用程序
  2. 部署 dist 目录中的生成文件
  3. 对于 Azure 部署,请使用具有 GitHub Actions 集成的静态 Web 应用

来源: quiz-app/README.md116-177

与课程集成

测验评估系统通过在学习路径的关键点提供评估机会,与初学者 Web 开发课程集成

  • 课前测验在主题开始前测试初步知识
  • 课后测验在完成课程后验证学习成果
  • 结果提供即时反馈以加强学习
  • 所有模块中一致的测验结构创造了熟悉的学习模式

来源: quiz-app/README.md3-4 quiz-app/src/assets/translations/zh_tw.json8-59