Edit html component of answer statistic (add choice evaluation tab)

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>

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;
+}

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;

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 ],
       }