为什么我的测验结果无法正确显示? [英] Why are my quiz results not displaying correctly?

查看：70 发布时间：2021/4/6 20:34:13 angular

本文介绍了为什么我的测验结果无法正确显示?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用Angular 9进行测验ResultsComponent，但是很难使结果正确显示在Mat手风琴中.我有一个userAnswers数组，correctAnswers数组和一个包含quizData数组对象的quizData.ts外部文件，并且向用户显示了结果摘要，特别是您的答案"，正确答案(s)"，说明"，和经过时间"测验中的每个问题.

在测试应用程序时，用户答案选项号有时似乎与正确的选项文本不符；正确答案也是如此.在选择题中，选项应显示为"1和2"，而不是"1、2".在正确的答案和解释中.我已经将正确的选项字符串(带有"1和2")传递给了ResultsComponent，但是在有几个M/C问题的情况下，它应该是一组正确选项的字符串.同样在测试中，有时当用户答案和正确答案不同时，即使用户答案不正确，也会显示正确的复选标记.

我正在共享以下代码段，但您可以在此处查看整个测验:

测试2:输入1,1,1,1

问题2-应该有x而不是复选标记，解释应显示为"1和2"

 选项1-可测试性，应进行编程选项4-可证明性，应满足上述所有条件

问题3，选项1-应该为Injectable()

 选项2-应该是构造函数

问题4，选项1-声明一个对象，在组件中应为

 选项3-声明一个对象，应标记为Injectable()

未显示经过的秒数

测试3:输入4,4,4,4

问题1-选项1-将服务传递给客户端，应为提供客户端部分服务，应具有x而不是复选标记

问题2-选项4-可测试性应满足上述所有条件

问题3-选项4-函数，应为NgModule，应带有x而不是复选标记

问题4-选项3-声明一个对象，应该将其标记为Injectable()

未显示经过的秒数

解决方案

您的results.html使用了错误的索引.应该是:-

 < section class ="quizSummary"><细节>< summary i18n>单击以查看您的测验的更详细的摘要</summary>< mat-accordion [multi] ="true"；#accordion ="matAccordion">< mat-expansionpanelclass =测验摘要问题"；* ngFor ＝"让问题为quizData.questions;让我=索引(打开的)="panelOpenState = true"；(关闭)＝"panelOpenState ＝ false".hideToggle ="true"< mat-expansion-panel-header>< mat-panel-description>< mat-icon class =手风琴图标"* ngIf =！panelOpenState"> add</mat-icon>< mat-icon class =手风琴图标"* ngIf ="panelOpenState">删除/mat-icon</mat-panel-description>< mat-panel-title>< span class ="question-leader"i18n>问题#{{i + 1}}:</span>& nbsp;& nbsp;< span class =问题文本"；i18n> {{question?.questionText}}</span></mat-panel-title>< ng-模板matExpansionPanelContent>< ul class =测验摘要字段"* ngIf ="correctAnswers.length> = 1"< li i18n>< span class =领导者">您的答案:</span>< ng-container * ngIf =" results..userAnswers [i]"选项{{results.userAnswers [i] |加入}}& mdash;< ng-container * ngFor ="让结果项?.userAnswers [i];let isLast = last>{{question?.options [item-1] .text}}< span * ngIf =！isLast">AND</span></ng-container>< mat-icon class =正确".* ngIf ="checkIfAnswersAreCorrect(correctAnswers，结果?userAnswers，i)"完成/mat-icon< mat-icon class =错误".* ngIf =！checkIfAnswersAreCorrect(correctAnswers，results?.userAnswers，i)"清除</mat-icon></ng-container>< span * ngIf ="！results..userAnswers [i] ||结果?userAnswers.length === 0>(未提供答案)</span></li>< li i18n>< span class =领导者">正确答案:</span>< span * ngIf ="correctAnswers.length === 1">选项{{correctAnswers [i]}}& mdash;{{Question?.options [i] .text}}</span>< span * ngIf =" correctAnswers.length>1"选项{{correctAnswers [i] [0] |加入}}& mdash;< ng-container * ngFor ="让correctAnswers [i] [0]项目；let isLast = last>{{question?.options [item-1] .text}}< span * ngIf =！isLast">AND</span></ng-container></span></li>< li i18n>< span class =领导者">说明:</span>< span * ngIf ="correctAnswers [i] [0] .length === 1"选项{{correctAnswers [i]}}是正确的，因为{{问题?.解释}}.</span>< span * ngIf =" correctAnswers [i] [0] .length>1"选项{{correctAnswers [i] [0] |加入}}是正确的，因为{{问题?.解释}}.</span></li>< li i18n>< span class =领导者">经过的时间:</span>< span> {{results.elapsedTimes [i]}}秒</span></li></ul></ng-template></mat-expansion-panel-header></mat-expansion-panel></mat手风琴>< mat-action-row class ="mat-手风琴按钮"><按钮垫-凸起按钮的颜色＝主要的".(click)="openAllPanels()"< strong>展开所有</strong>& nbsp;< mat-icon> unfold_more</mat-icon></button>& nbsp;<按钮垫-凸起按钮的颜色＝主要的".(click)="closeAllPanels()"< strong>全部折叠</strong>& nbsp;< mat-icon> unfold_less</mat-icon></button></mat-action-row></细节></section>

为了显示而不是，我在选项中创建了一个如下所示的连接管道:-

从'@ angular/core'导入{Pipe，PipeTransform};

  @Pipe({名称:"join"})导出类JoinPipe实现PipeTransform {transform(value:any，args ?: any):任何{console.log(value);返回value.join(和")}}

对于没有答案提供的问题和选项是问题:-我更新了上面的模板，并在dependency-injection-quiz.component.ts中使用checkIfAnswersCorrectly()方法进行了更改:-

  this.quizService.userAnswers.push(this.answer + 1);

到

  this.quizService.userAnswers.push(this.answer?this.answer + 1:this.answer)；

在某些情况下，对于问题4中没有经过的时间，我在dependency-injection-quiz.component.ts results()方法中添加了:-

  this.quizService.resetAll();

对于QuizMetaData问题，您想使所有字段为可选.所以我像这样初始化它:-

  quizMetadata:部分< QuizMetadata>= {};

要了解Partial，可以检查:-

  resetQuestions(){this.quizData = JSON.parse(JSON.stringify(QUIZ_DATA));}

并在重新启动方法中调用它:-

  restart(){this.quizService.resetAll();this.quizService.resetQuestions();this.timerService.elapsedTimes = [];this.timerService.completionTime = 0;this.router.navigate(['/intro']);}

并将quizdata的初始化更改为:-

  quizData:测验= JSON.parse(JSON.stringify(QUIZ_DATA));

对于声音不正确且无法选择多个答案的问题，请将question.component.ts中的setSelected方法更改为:-

  setSelected(optionIndex:number):void {this.quizStarted = true;this.correctMessage = this.quizService.correctMessage;this.isCorrectAnswerSelected = this.isCorrect(this.currentQuestion.options [optionIndex] .correct，optionIndex);this.answer.emit(optionIndex);if(this.correctAnswers.length == 1){this.currentQuestion.options.forEach(o => o.selected = false);}this.currentQuestion.options [optionIndex] .selected = true;如果 (optionIndex> = 0&&this.currentQuestion&&this.currentQuestion.options&&this.currentQuestion.options [optionIndex] ['正确']){this.timerService.stopTimer();this.quizService.correctSound.play();optionIndex = null;} 别的 {console.log('In else');this.quizService.incorrectSound.play();}this.alreadyAnswered = true;}

为了推送多个答案，将以下内容更改为dependency-injection-quiz.component.ts:-

  answer:number [] = [];下一个问题() {this.checkIfAnsweredCorrectly();this.answer = [];this.animationState $ .next('animationStarted');this.quizService.nextQuestion();}selectedAnswer(data){const correctAnswers = this.question.options.filter((options)=> options.correct);if(correctAnswers.length> 1&& this.answer.indexOf(data)=== -1){this.answer.push(data);} 别的 {this.answer [0] =数据；}}

和result.component.ts中:-

  checkIfAnswersAreCorrect(correctAnswers，userAnswers，index:number):布尔值{return！(！userAnswers [index] || userAnswers [index] .length === 0 || userAnswers [index] .find((ans)=> correctAnswers [index] [0] .indexOf(ans)===-1));}

声音不正确

对于在Dependency-injection-quiz.component.html中没有显示的问题:-

来自:-

 < section id ="question"[class.answered] =" answer">< span * ngIf ="！answer"i18n> {{question..questionText}}& nbsp;< span * ngIf =" numberOfCorrectOptions>1"< em>({{numberOfCorrectOptions}}选项是正确的.)</span></span>< span * ngIf =" answer"i18n> {{说明文字}}</span></section>

到

 < section id ="question"[class.answered] =" answer">< span * ngIf ="！answer ||answer.length === 0"i18n> {{question..questionText}}& nbsp;< span * ngIf =" numberOfCorrectOptions>1"< em>({{numberOfCorrectOptions}}选项是正确的.)</span></span>< span * ngIf =" answer&&answer.length>0；i18n> {{说明文字}}</span></section>

正在工作的Stackblitz:- https://stackblitz.com/edit/angular-9-quiz-app-tmgqor

I am working on a quiz ResultsComponent using Angular 9, but having difficulty getting the results to display correctly in the mat-accordion with the data. I have a userAnswers array, correctAnswers array and a quizData.ts external file containing the quizData array object, and I am showing a summary of the results to the user, specifically "Your Answer(s)", "Correct Answer(s)", "Explanation" and "Elapsed Time" for each question in the quiz.

In testing the app, the user answer option number(s) sometimes do not seem to correspond with the correct option text; the same goes for the correct answers. In the multiple choice questions, options should be displayed as "1 and 2", not "1, 2" in the correct answers and explanation. I've passed the correct options string (with "1 and 2") to the ResultsComponent, but it should probably be an array of strings of correct options in case of several M/C questions. Also in testing, sometimes when the user answer and correct answer are different, the correct checkmark is shown, even when the user answer is not correct.

I am sharing a snippet of the code below, but you can view the entire quiz here: http://stackblitz.com/edit/angular-9-quiz-app. I would appreciate your help with these issues. Thank you.

EDIT: I need to use the Results model so that I can have:
{ answer: [1,2], time: 18 }, { answer: [4], time: 2 }, ...
and use Results in the template instead of using userAnswers and elapsedTimes
<section class="quizSummary"> <details> <summary i18n>Click to view a more detailed summary of your quiz</summary> <mat-accordion [multi]="true" #accordion="matAccordion"> <mat-expansion-panel class="quiz-summary-question" *ngFor="let question of quizData.questions; let i = index" (opened)="panelOpenState = true" (closed)="panelOpenState = false" hideToggle="true"> <mat-expansion-panel-header> <mat-panel-description> <mat-icon class="accordion-icon" *ngIf="!panelOpenState">add</mat-icon> <mat-icon class="accordion-icon" *ngIf="panelOpenState">remove</mat-icon> </mat-panel-description> <mat-panel-title> Question #{{ i + 1 }}:    {{ question?.questionText }} </mat-panel-title> <ng-template matExpansionPanelContent> <ul class="quiz-summary-fields" *ngIf="correctAnswers[i].length > 1"> <li i18n> Your Answer: Option {{ userAnswers[i] }} — {{ question?.options[i].text }} <mat-icon class="correct" *ngIf="checkIfAnswersAreCorrect(correctAnswers, userAnswers)">done</mat-icon> <mat-icon class="incorrect" *ngIf="!checkIfAnswersAreCorrect(correctAnswers, userAnswers)">clear</mat-icon> (no answer provided) </li> <li i18n> Correct Answer(s): Option {{ correctAnswers[i] }} — {{ question?.options[i].text }} 1"> Options {{ correctAnswers[i] }} — {{ question?.options[i].text }} </li> <li i18n> Explanation: Option {{ correctAnswers[i] }} was correct because {{ question?.explanation }}. 1"> Options {{ correctAnswers[i] }} were correct because {{ question?.explanation }}. </li> <li i18n> Elapsed Time: {{ elapsedTimes[i] }} second </li> </ul> <ul class="quiz-summary-fields" *ngIf="correctAnswers[i].length === 1"> <li i18n> Your Answer: Option {{ userAnswers[i] }} — {{ question?.options[i].text }} <mat-icon class="correct" *ngIf="checkIfAnswersAreCorrect(correctAnswers, userAnswers)">done</mat-icon> <mat-icon class="incorrect" *ngIf="!checkIfAnswersAreCorrect(correctAnswers, userAnswers)">clear</mat-icon> (no answer provided) </li> <li i18n> Correct Answer(s): Option {{ correctAnswers[i] }} — {{ question?.options[i].text }} 1"> Options {{ correctAnswers[i] }} — {{ question?.options[i].text }} </li> <li i18n> Explanation: Option {{ correctAnswers[i] }} was correct because {{ question?.explanation }}. 1"> Options {{ correctAnswers[i] }} were correct because {{ question?.explanation }}. </li> <li i18n> Elapsed Time: {{ elapsedTimes[i] }} seconds </li> </ul> </ng-template> </mat-expansion-panel-header> </mat-expansion-panel> </mat-accordion> ...
in results.component.ts:
checkIfAnswersAreCorrect(correctAnswers: [], userAnswers: []) { const resultsComparisonArray = new Array(); for (let i = 0; i < correctAnswers.length; i++) { resultsComparisonArray.push(correctAnswers[i] === userAnswers[i] ? true : false); } return resultsComparisonArray; }
Test 1: If I enter 2,4,2,3 for question 1,2,3,4

in question 3, Option 2 - function, should be constructor

in question 4, Option 3 - Declare an object, should be mark as Injectable()

Test 2: entering 1,1,1,1

in question 2 - should have an x instead of checkmark, explanation should show "1 and 2"
Option 1 - Testability, should be Programming Option 4 - Testabliity, should be All of the above
in question 3, Option 1 - should be Injectable()
Option 2 - should be constructor
in question 4, Option 1 - Declare an object, should be Require in the component
Option 3 - Declare an object, should be Mark as Injectable()
and number of elapsed seconds not shown

Test 3: entering 4,4,4,4

in question 1 - Option 1 - Pass service to the client, should be Give the client part service, should have x instead of checkmark

in question 2 - Option 4 - Testability, should be All of the above

in question 3 - Option 4 - function, should be NgModule, should have x instead of checkmark

in question 4 - Option 3 - Declare an object, should be Mark dependency as Injectable()

number of elapsed seconds not shown

解决方案
Your results.html was using wrong indexes. It should be :-
<section class="quizSummary"> <details> <summary i18n>Click to view a more detailed summary of your quiz…</summary> <mat-accordion [multi]="true" #accordion="matAccordion"> <mat-expansion-panel class="quiz-summary-question" *ngFor="let question of quizData.questions; let i = index" (opened)="panelOpenState = true" (closed)="panelOpenState = false" hideToggle="true"> <mat-expansion-panel-header> <mat-panel-description> <mat-icon class="accordion-icon" *ngIf="!panelOpenState">add</mat-icon> <mat-icon class="accordion-icon" *ngIf="panelOpenState">remove</mat-icon> </mat-panel-description> <mat-panel-title> Question #{{ i + 1 }}:    {{ question?.questionText }} </mat-panel-title> <ng-template matExpansionPanelContent> <ul class="quiz-summary-fields" *ngIf="correctAnswers.length >= 1"> <li i18n> Your Answer(s): <ng-container *ngIf="results?.userAnswers[i]"> Option {{ results.userAnswers[i] | join }} — <ng-container *ngFor="let item of results?.userAnswers[i]; let isLast = last"> {{ question?.options[item - 1].text }} AND </ng-container> <mat-icon class="correct" *ngIf="checkIfAnswersAreCorrect(correctAnswers, results?.userAnswers, i)">done</mat-icon> <mat-icon class="incorrect" *ngIf="!checkIfAnswersAreCorrect(correctAnswers, results?.userAnswers, i)">clear</mat-icon> </ng-container> (no answer provided) </li> <li i18n> Correct Answer(s): Option {{ correctAnswers[i] }} — {{ question?.options[i].text }} 1"> Options {{ correctAnswers[i][0] | join }} — <ng-container *ngFor="let item of correctAnswers[i][0]; let isLast = last"> {{ question?.options[item - 1].text }} AND </ng-container> </li> <li i18n> Explanation: Option {{ correctAnswers[i] }} was correct because {{ question?.explanation }}. 1"> Options {{ correctAnswers[i][0] | join }} were correct because {{ question?.explanation }}. </li> <li i18n> Elapsed Time: {{ results.elapsedTimes[i] }} seconds </li> </ul> </ng-template> </mat-expansion-panel-header> </mat-expansion-panel> </mat-accordion> <mat-action-row class="mat-accordion-buttons"> <button mat-raised-button color="primary" (click)="openAllPanels()"> Expand All  <mat-icon>unfold_more</mat-icon> </button>   <button mat-raised-button color="primary" (click)="closeAllPanels()"> Collapse All  <mat-icon>unfold_less</mat-icon> </button> </mat-action-row> </details> </section>
For showing and instead of , in options i created a join pipe like below :-

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'join' }) export class JoinPipe implements PipeTransform { transform(value: any, args?: any): any { console.log(value); return value.join(" and ") } }
For No Answers provided issue and option was issue :- i updated the template above and with that in dependency-injection-quiz.component.ts checkIfAnswersCorrectly() Method i changed :-
this.quizService.userAnswers.push(this.answer + 1);
to
this.quizService.userAnswers.push(this.answer ? this.answer + 1 : this.answer);
For no elapsed time in question 4 in some cases, in dependency-injection-quiz.component.ts results() method i added :-
this.quizService.resetAll();
For QuizMetaData Issue, you want to make all fields optional. So I initialized it like :-
quizMetadata: Partial<QuizMetadata> = {};
For knowing about Partial you can check :- https://medium.com/dev-genius/crafting-perfect-interface-for-a-crud-in-angular-with-utility-types-44873e516a1e

For fixing showing correct answer when selected i moved :-
this.correctMessage = this.quizService.correctMessage;
from ngOnInit to setSelected method.

For leader text in same line in result.component.css i changed your leader class from :-
.leader { font-weight: $font-weight-max; }
to
.leader { font-weight: $font-weight-max; display: inline; }
For Reset Issue added resetQuestions Method to quiz service :-
resetQuestions() { this.quizData = JSON.parse(JSON.stringify(QUIZ_DATA)); }
and called it in restart method :-
restart() { this.quizService.resetAll(); this.quizService.resetQuestions(); this.timerService.elapsedTimes = []; this.timerService.completionTime = 0; this.router.navigate(['/intro']); }
and changed the initialization of quizdata to :-
quizData: Quiz = JSON.parse(JSON.stringify(QUIZ_DATA));
For incorrect sound and not able to select multiple answers, changed your setSelected method in question.component.ts to :-
setSelected(optionIndex: number): void { this.quizStarted = true; this.correctMessage = this.quizService.correctMessage; this.isCorrectAnswerSelected = this.isCorrect(this.currentQuestion.options[optionIndex].correct, optionIndex); this.answer.emit(optionIndex); if(this.correctAnswers.length == 1) { this.currentQuestion.options.forEach(o => o.selected = false); } this.currentQuestion.options[optionIndex].selected = true; if ( optionIndex >= 0 && this.currentQuestion && this.currentQuestion.options && this.currentQuestion.options[optionIndex]['correct'] ) { this.timerService.stopTimer(); this.quizService.correctSound.play(); optionIndex = null; } else { console.log('In else'); this.quizService.incorrectSound.play(); } this.alreadyAnswered = true; }
For pushing multiple answers changed following things into dependency-injection-quiz.component.ts :-
answer: number[] = []; nextQuestion() { this.checkIfAnsweredCorrectly(); this.answer = []; this.animationState$.next('animationStarted'); this.quizService.nextQuestion(); } selectedAnswer(data) { const correctAnswers = this.question.options.filter((options) => options.correct); if(correctAnswers.length > 1 && this.answer.indexOf(data) === -1) { this.answer.push(data); } else { this.answer[0] = data; } }
and in result.component.ts :-
checkIfAnswersAreCorrect(correctAnswers, userAnswers,index:number): boolean { return !(!userAnswers[index] || userAnswers[index].length ===0 || userAnswers[index].find((ans) => correctAnswers[index][0].indexOf(ans) === -1)); }
For Incorrect Sound

For No Question Displayed In dependency-injection-quiz.component.html:-

from :-
<section id="question" [class.answered]="answer"> {{ question?.questionText }}  1"> ({{ numberOfCorrectOptions }} options are correct.) {{ explanationText }} </section>
to
<section id="question" [class.answered]="answer"> {{ question?.questionText }}  1"> ({{ numberOfCorrectOptions }} options are correct.) 0" i18n>{{ explanationText }} </section>
Working Stackblitz :- https://stackblitz.com/edit/angular-9-quiz-app-tmgqor

这篇关于为什么我的测验结果无法正确显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

为什么我的测验结果无法正确显示? [英] Why are my quiz results not displaying correctly?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

为什么我的测验结果无法正确显示? [英] Why are my quiz results not displaying correctly?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭