Angular 测验应用程序
4.82/5 (42投票s)
一个通用的 Angular（版本 8）测验应用程序，可用于运行测验、模拟测试、调查等。这是“AngularJs 中的测验应用程序”的更新版本。
引言
测验应用程序如今已成为大多数应用程序的通用需求，无论是调查、模拟测试、准备、自我评估、信息收集，还是实际的客观测试或考试。这个测验应用程序将帮助您在最小或无需修改的情况下满足您的需求。
本文向您展示了仅用几行代码即可在 Angular 2 中创建测验应用程序的简化方法。测验应用程序接受 JSON 格式的问题。因此，您可以轻松地以预定义格式从服务器发送 JSON，Angular 测验应用程序将在客户端呈现测验。测验还包括审查和显示结果部分。如果您希望立即宣布结果，您可以简单地调用另一个包含答案的 JSON，然后立即评估并显示结果。或者，如果您只想将答案提交到服务器，也可以在 quiz.component.ts 的 onSubmit 方法中这样做。
- 您可以在以下网址查看应用程序的实时演示：http://ng2-quiz.anuraggandhi.com/。
- 请持续关注 GitHub 上的频繁更新：https://github.com/softgandhi/ng2-quiz
如果您正在寻找 Angular 1.x 中的测验应用程序，请点击此处。
背景
本文是AngularJs 中的测验应用程序的更新版本。由于自文章撰写以来技术已发生变化，我可能不会继续更新此文章先前版本中的主要功能。但是，我将继续在此文章中添加功能。
本文假设您对 Angular 2、Bootstrap 4 和一些 CSS 有基本了解。要运行本文中的代码，您应该对如何进行 npm install 以及如何使用 angular cli 运行它有所了解。如果您想了解如何通过 angular cli 命令运行应用程序，请访问Angular Cli。
Using the Code
使用代码很简单。只需向测验应用程序提供 JSON，它就会呈现测验。
JSON 格式应如下所示
// aspnet.json
{
"Id": 1,
"name": "Asp.Net Quiz",
"description": "Asp.Net Quiz (contains webform, mvc, web API, etc.)",
"questions": [
{
"Id": 1010,
"Name": "ASP.NET webform separates the HTML output from
program logic using a feature named as",
"QuestionTypeId": 1,
"Options": [
{
"Id": 1055,
"QuestionId": 1010,
"Name": "Exception",
"IsAnswer": false
},
{
"Id": 1056,
"QuestionId": 1010,
"Name": "Code-behind",
"IsAnswer": true
},
{
"Id": 1057,
"QuestionId": 1010,
"Name": "Code-front",
"IsAnswer": false
},
{
"Id": 1058,
"QuestionId": 1010,
"Name": "None of the above",
"IsAnswer": false
}
],
"QuestionType": {
"Id": 1,
"Name": "Multiple Choice",
"IsActive": true
}
},
... [For full code, please see the sample attached.]
注意：您可能不希望将 IsAnswer 属性包含在选项中，因为它对于安全的测验可能不安全。在这种情况下，您可以简单地发送带有 IsAnswer 的问题。一旦用户提交测验，在 quiz.component.ts 中的 onSubmit 方法中，您可以调用带有答案的问题并评估答案。
关于测验应用程序
测验应用程序主要由 3 个组件/视图组成：测验视图、复习、结果。为了简单起见，我将这些视图保存在同一个文件中（结果视图很快将移至单独的组件中）。如果您希望扩展此应用程序，您可以很好地分离这些视图。除此之外，quiz.component.ts 已用作所有视图的组件类，而 styles.css 已用于为应用程序应用 CSS 样式。
测验运行逻辑
该应用程序有一小部分脚本，由控制器：quiz.component.ts 处理。首先，组件在 ngOnInit 事件中调用 loadQuiz('data/aspnet.js') 方法加载问题。测验问题应以预定义的 JSON 格式提供，如 aspnet.json 或 data 文件夹中存在的其他相关 JSON 文件中所述。问题加载后，用户可以回答问题，事件由同一组件捕获。当用户最终提交测验时，您可以将答案以 JSON 格式提交到服务器。或者加载带有答案的问题并评估用户的答案以立即显示测验结果。在示例中，为了简单起见，我采用了后一种方法，但第一种方法也相当简单。
quiz.component.ts 文件如下所示
// quiz.component.ts
...
ngOnInit() {
this.quizes = this.quizService.getAll();
this.quizName = this.quizes[0].id;
this.loadQuiz(this.quizName);
}
loadQuiz(quizName: string) {
this.quizService.get(quizName).subscribe(res => {
this.quiz = res;
this.pager.count = this.quiz.questions.length;
});
}
get filteredQuestions() {
return (this.quiz.questions) ?
this.quiz.questions.slice(this.pager.index, this.pager.index + this.pager.size) : [];
}
onSelect(question: any, option: any) {
if (question.QuestionTypeId == 1) {
question.Options.forEach((x) => { if (x.Id != option.Id) x.Selected = false; });
}
if (this.config.autoMove) {
this.goTo(this.pager.index + 1);
}
}
goTo(index: number) {
if (index >= 0 && index < this.pager.count) {
this.pager.index = index;
this.mode = 'quiz';
}
}
...
[For full code, please see the sample attached.]
目前，我只使用了一个组件。但是，我很快会将结果组件分离到一个单独的组件中。
测验配置
测验配置是一个可选对象，可以存在于您的 <quiz>.json 文件中。config 部分允许您根据自己的意愿自定义测验。测验应用程序读取这些配置设置并在加载测验时应用这些设置。这些设置主要包括：打乱问题、显示/隐藏分页器、允许返回导航、允许自动移动到下一个问题。此配置的详细信息在“测验功能”部分中进行解释。
测验配置如下所示
// csharp.json
...
"config":{
"shuffleQuestions": true,
"showPager": false,
"allowBack": true,
"autoMove": true
}
...
[For full code, please see the sample attached.]
使用的服务
为简单起见，我在 Angular2 组件中只使用了一个服务：quiz.service。它用于检索测验 JSON 文件，填充测验列表，并检查结果。
测验视图（HTML 模板）
测验视图包含测验问题、上一步-下一步按钮、分页和相关内容的 UI。我选择了每页只显示一个问题的结构，但如果您想显示多个问题，您可以相应地更改 pager.size 值。按钮和分页 UI 使用了 Bootstrap。问题和选项的 UI 已在 styles.css 中设置。
测验视图的 HTML 如下所示
// quiz.component.html
<div *ngFor="let question of filteredQuestions;">
<div class="badge badge-info">Question {{pager.index + 1}} of {{pager.count}}.</div>
<h2>{{pager.index + 1}}. <span [innerHTML]="question.Name"></span></h2>
<div class="row text-left options">
<div class="col-md-6" *ngFor="let option of question.Options">
<div class="option">
<label class="" [attr.for]="option.Id">
<input id="{{option.Id}}" type="checkbox"
[(ngModel)]="option.Selected" (change)="onSelect(question, option);" />
{{option.Name}}
</label>
</div>
</div>
</div>
</div>
... [For full code, please see the sample attached.]
如果你了解 Angular 2，这部分很容易理解。为了显示问题和选项，使用了 *ngFor。
复习和结果视图也以类似的方式通过遍历测验问题并显示所需内容来实现。以下是复习和结果视图的屏幕截图。
测验结果视图如下图所示
样式设置
样式和主题采用了 Bootstrap 4。为了根据应用程序的需求进一步设置样式，已在 styles.css 中添加了 CSS 类。我已经尽力减少自定义 CSS 的使用，但是，您可以根据需要添加任意数量的自定义 CSS。所有 CSS 样式都是不言自明的。如果您希望更改应用程序的外观，只需更改 styles.css 中相应的 CSS 类即可轻松实现。我已经尽力使其具有响应性，以便应用程序也能在手机和平板电脑上轻松导航。
测验功能
本节作为使用测验应用程序功能的小文档。
打乱问题
配置部分中的 shuffleQuestions 属性用于指定问题在显示前是否应该随机化。如果为 true，问题将被随机化。默认值为 false。
打乱选项
配置部分中的 shuffleOptions 属性用于指定选项在显示前是否可以随机化。如果为 true，问题将被随机化。默认值为 false。此功能可从测验 JSON 文件中配置。
显示分页器
配置部分中的 showPager 属性指示是否在测验中显示分页器元素。如果为 false，则不显示数字分页器。在这种情况下，用户仍然可以通过第一页、上一页、下一页和最后一页按钮进行导航。默认值为 true。
自动移动
配置部分中的 autoMove 属性指示回答问题后是否自动移动到下一个问题。如果为 true，则无需按“下一页”按钮即可移动到下一个问题。默认值为 false。
动态加载测验
在模拟测试/练习考试中，用户可能希望动态更改测验。为此，您只需调用 loadQuiz 方法并传入新测验的 URL。随附的示例或演示链接说明了这一点。（在示例应用程序中，您可以通过更改右上角的下拉列表来动态加载测验。）
HTML 问题
在许多情况下，您希望包含特殊字符、图像、下标、上标和其他 HTML 元素。通过 Angular sanitize 提供了在问题中添加 HTML 标记的功能。要在问题中添加图像或任何 HTML 格式，只需在问题中添加相应的 HTML 标签即可。
我将继续在此处记录其他功能，以便它们可用。
未来考量
由于时间限制，我无法实现其他有趣的功能，如果您希望使用此测验应用程序，这些功能可能会对您更有帮助。我会在有时间时再添加它们。如果有人在 GitHub 上提供了拉取请求，并且他们以更好的方式实现了任何待定功能或现有功能，我将不胜感激。 :)
我可以想到的一些功能是
测验选项：在许多情况下，我们需要随机化问题、随机化选项或为不同问题设置不同的分数。我计划提供这些功能，这些功能将从测验 JSON 文件中可配置。HTML 问题： 在许多情况下，您希望有特殊字符、下标、上标和其他 html 元素。因此，在我看来，在测验应用程序中提供 html 选项将是一个很好的补充。此功能已实现。- 问题类型： 目前，该应用程序只支持多项选择题。在许多情况下，需要有多项答案类型问题、
true-false等。我很快会提供此功能。 计时器：计时器现在在测验应用程序中可用。计时器是每个测试/模拟测试都希望拥有的另一个重要功能。计时器/秒表选项也将作为可配置元素在测验中提供。问题图片：图片也是大多数测验中最需要的功能之一。我很快就会在这篇文章中提供此功能。问题图片可以通过添加 HTML 问题来提供。- 从题库中抽取： 在某些情况下，您可能希望提供一个包含许多问题的 JSON 题库，并希望测验应用程序随机选择
n个问题用于测验。此功能将很快实现。 - 可选动画：嗯，这不是一个重要的功能，但有些人可能希望在他们的测验应用程序中添加一些动画。因此，我也想提供此功能。
移动友好： 尽管此应用程序具有响应性，并且可以很好地适应移动设备和较小的屏幕，但字体和对齐方式需要根据屏幕尺寸进行调整。因此，拥有一个移动友好的视图也是一个良好且有效的需求。CSS 已优化，并已编写 css3 媒体查询以提供移动设备优化的视图。- 量身定制的问题：在调查中，我们经常需要量身定制的问题。这意味着下一组问题应根据当前调查问题中选择的选项来确定。根据许多用户的电子邮件反馈，我将优先考虑此功能，并在有时间后尽快提供给您。
Angular 2 版本：由于 Angular 2 即将发布，我将考虑使用更好的设计和更灵活的方式在 Angular 2 中重新编写应用程序。
除了上述功能，如果您觉得应该添加更多功能，请告诉我。我将尽力实现它们。
历史
- 2017-01-26
- 第一个版本发布
- 2017-03-05
- 测验改为驼峰命名法
- 通过添加模型，增加了强类型对象