diff --git a/src/app/answer-statistics/answer-statistics.component.html b/src/app/answer-statistics/answer-statistics.component.html index cbf02cdfbbb83e4c1573717a9c4566c0c5927e92..de4a9844f00e2bcfd7566206de2387fc5d656f84 100644 --- a/src/app/answer-statistics/answer-statistics.component.html +++ b/src/app/answer-statistics/answer-statistics.component.html @@ -14,7 +14,22 @@ <div align="right"> Responded answers: {{ statistic.answers }} </div> </div> </mat-tab> - <!-- Add second tab with true false answers --> + <mat-tab label="Evaluation"> + <h2 fxLayoutAlign="center">{{ selectedContent.name }}</h2> + <div class="evaluation" *ngFor="let choice of evaluation"> + {{ choice.name }} + <mat-progress-bar [value]="choice.percent" color="primary" *ngIf="choice.correct"> + </mat-progress-bar> + <mat-progress-bar [value]="choice.percent" color="warn" *ngIf="!choice.correct"> + </mat-progress-bar> + <div align="right"> Selected: {{ choice.answers }} times</div> + </div> + <div fxLayoutAlign="center" fxLayoutGap="10px"> + <button mat-raised-button color="primary">Before</button> + <div><b>{{ selectedContent.index }} / {{ selectedContent.length }}</b></div> + <button mat-raised-button color="primary">Next</button> + </div> + </mat-tab> </mat-tab-group> </mat-card> </div> diff --git a/src/app/answer-statistics/answer-statistics.component.scss b/src/app/answer-statistics/answer-statistics.component.scss index 281a08f7ed2f2ca486f880e657d7b1c0d01deae9..4483c337510473d8e0dd76cb0c755c742def225c 100644 --- a/src/app/answer-statistics/answer-statistics.component.scss +++ b/src/app/answer-statistics/answer-statistics.component.scss @@ -12,3 +12,11 @@ mat-select { mat-progress-bar { height: 50px; } + +h1 { + margin-top: 10px; +} + +.evaluation { + margin-top: 10px; +} diff --git a/src/app/answer-statistics/answer-statistics.component.ts b/src/app/answer-statistics/answer-statistics.component.ts index 4113e0c98af82884afae8ea4cdc89f4563132fe4..8985c0ffefdac4eb4a87f193ebee2c3c7727b1c2 100644 --- a/src/app/answer-statistics/answer-statistics.component.ts +++ b/src/app/answer-statistics/answer-statistics.component.ts @@ -6,6 +6,7 @@ import { ContentService } from '../content.service'; import { ContentAnswerService } from '../content-answer.service'; import { AnswerText } from '../answer-text'; import { ChoiceAnswer } from '../choice-answer'; +import { ContentType } from '../content-type'; @Component({ selector: 'app-answer-statistics', @@ -17,9 +18,20 @@ export class AnswerStatisticsComponent implements OnInit { @Input() textAnswers: AnswerText[] = []; @Input() choiceAnswers: ChoiceAnswer[] = []; statistics: any = null; + selectedContent: any = { + name: 'HOW TO MAKE CONTENT', + index: '1', + length: '1' + }; + evaluation: any = [ + { name: 'test', percent: 50, correct: false, answers: 50, }, + { name: 'test', percent: 10, correct: false, answers: 10, }, + { name: 'test', percent: 30, correct: true, answers: 30, }, + { name: 'test', percent: 40, correct: false, answers: 40, } + ]; states = [ { value: '1', viewValue: 'Text answers' }, - { value: '2', viewValue: 'Choice answers' }, + { value: '2', viewValue: 'Choice answers' } ]; selected: number = null; @@ -56,16 +68,20 @@ export class AnswerStatisticsComponent implements OnInit { showStatistic(value) { /** refactor answer class structure for less code and more abstraction*/ this.statistics = []; for (const question of this.content) { - if (value == 1) { - const count = this.countTextAnswers(question.contentId); - this.statistics.push({ - name: question.subject, answers: count, percent: count * 100 / this.textAnswers.length, - }); + if (value === '1') { + if (question.format === ContentType.TEXT) { + const count = this.countTextAnswers(question.contentId); + this.statistics.push({ + name: question.subject, answers: count, percent: count * 100 / this.textAnswers.length, + }); + } } else { - const count = this.countChoiceAnswers(question.contentId); - this.statistics.push({ - name: question.subject, answers: count, percent: count * 100 / this.choiceAnswers.length, - }); + if (question.format === ContentType.CHOICE) { + const count = this.countChoiceAnswers(question.contentId); + this.statistics.push({ + name: question.subject, answers: count, percent: count * 100 / this.choiceAnswers.length, + }); + } } } this.selected = value; diff --git a/src/app/in-memory-data.service.ts b/src/app/in-memory-data.service.ts index d4369cc8eae2e374e949c7d959e1669eaca7c1d9..0c87d6f218172aafdc5bbaeb573403a69cf74adb 100644 --- a/src/app/in-memory-data.service.ts +++ b/src/app/in-memory-data.service.ts @@ -124,6 +124,15 @@ export class InMemoryDataService implements InMemoryDbService { }, { contentId: '5', + revision: '5', + roomId: '1', + subject: 'Choice Content 1', + body: 'testcontent alpha beta', + round: 1, + format: ContentType.CHOICE + }, + { + contentId: '6', revision: '2', roomId: '3', subject: 'Text Content 1', @@ -170,7 +179,7 @@ export class InMemoryDataService implements InMemoryDbService { { id: '1', revision: '1', - contentId: '1', + contentId: '5', round: 0, selectedChoiceIndexes: [ 1, 2 ], }