Kinda working BioTrivia v2

apollo-frontend/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { AppComponent } from './app.component';
 import {
   IgxButtonModule,
   IgxIconModule,
+  IgxProgressBarModule,
   IgxRadioModule,
   IgxRippleModule,
 } from 'igniteui-angular';
@@ -18,6 +19,7 @@ import { DashboardMinigamesComponent } from './dashboard-minigames/dashboard-min
 import { MinigameCardComponent } from './minigame-card/minigame-card.component';
 import { MinigameConveyorRecyclingComponent } from './minigame-conveyor-recycling/minigame-conveyor-recycling.component';
 import { MinigameBiotriviaComponent } from './minigame-biotrivia/minigame-biotrivia.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -40,6 +42,7 @@ import { MinigameBiotriviaComponent } from './minigame-biotrivia/minigame-biotri
     IgxRippleModule,
     IgxIconModule,
     IgxRadioModule,
+    IgxProgressBarModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

apollo-frontend/src/app/db.service.ts

@@ -131,7 +131,7 @@ export class DbService {
                 imageUrl: '/assets/images/cards/sinkit2.jpg',
                 info: [
                     {
-                        content: 'Езикът на кита тежи около 4,7 тона. (почти колкото митко и майка му)',
+                        content: 'Езикът на кита тежи около 4,7 тона',
                         heading: 'Интересно'
                     }
                 ]

apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.html

@@ -1,21 +1,39 @@
 <div class="container">
     <div class="start-dialog dialog" *ngIf="stage === 'starting' || stage === 'starting-ongoing'" #startDialog>
-        <h4>Пробвай познанията си за екология</h4>
+        <h4>Пробвай познанията си по екология</h4>
         <p>
             В тази викторина ще има 5 въпроса, които ще тестват вашите познания по екология.
             Накрая, в зависимост от познатите отговори, ще получите по-рядка карта или
             по-обикновена карта</p>
         <button igxButton igxRipple (click)="startGame()">Продължи към играта</button>
         <div class="separator"></div>
-        <button igxButton igxRipple routerLink="" >Върни се в началния екран</button>
+        <button igxButton igxRipple routerLink="">Върни се в началния екран</button>
     </div>
-    <div class="question dialog" *ngIf="stage === 'ongoing' || stage === 'starting-ongoing'" #ongoingDialog style="opacity: 0;">
+    <div class="question dialog" *ngIf="stage === 'ongoing' || stage === 'starting-ongoing' || stage === 'ongoing-ended'" #ongoingDialog
+        style="opacity: 0;">
+        <igx-linear-bar [max]="questions.length" [value]="currQuestionN - 1" class="progress"></igx-linear-bar>
         <h6>{{currQuestion.question}}</h6>
 
-        <igx-radio-group #choise>
+        <div style="color: red;" *ngIf="displayError">Нужен е отговор, за да продължите</div>
-            <igx-radio [(ngModel)]="selected" *ngFor="let choise of currAnswers" name="choise">{{choise}}</igx-radio>
+        
-        </igx-radio-group>
 
-        <button igxButton igxRipple ></button>
+        <igx-radio *ngFor="let choise of currAnswers" name="choise" value="{{choise}}"
+            [checked]="selectedAnswer === choise" (change)="selectedAnswer = choise" [required]="true">{{choise}}
+        </igx-radio>
+        <button igxButton igxRipple (click)=" submitAnswer()">Следващ въпрос</button>
+    </div>
+    <div class="question dialog" style="opacity: 0;" *ngIf="stage === 'ended' || stage === 'ongoing-ended'" #endDialog>
+        <h4>Завършихте викторината</h4>
+        Верни отговори:
+        <igx-linear-bar [max]="questions.length" [value]="guessedQuestions"></igx-linear-bar>
+        <div *ngIf="guessedQuestions < questions.length">
+            <h6>Грешни отговори</h6>
+            <div *ngFor="let answer of getIncorrectAnswers()">
+                <b>{{answer.question.question}}</b><br>
+                Вашият отговор: {{answer.answer}}
+                Правилен отговор: {{answer.question.answer.correctChoise}}
+            </div>
+        </div>
+        <button igxButton igxRipple routerLink="">Върни се в началния екран</button>
     </div>
 </div>

apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.scss

@@ -11,6 +11,7 @@
         max-width: 100%;
     }
     .dialog {
+        overflow: hidden;
         width: 600px;
         padding: 2em;
         box-sizing: border-box;
@@ -21,7 +22,7 @@
         }
         h4 {
             text-align: center;
-            margin: 0 2em;
+            margin: 0 1em;
         }
         h6 {
             text-align: center;
@@ -40,4 +41,10 @@
             margin: .25em;
         }
     }
+
+    .progress {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
 }

apollo-frontend/src/app/minigame-biotrivia/minigame-biotrivia.component.ts

@@ -25,7 +25,7 @@ export class MinigameBiotriviaComponent implements OnInit {
     currQuestion: Question;
     currAnswers: string[];
 
-    previousAnswers: Array<{ question: Question, answer: string }> = [];
+    answers: Array<{ question: Question, answer: string }> = [];
 
     selectedAnswer = '';
     isAnswered(): boolean {
@@ -48,9 +48,10 @@ export class MinigameBiotriviaComponent implements OnInit {
 
         if (this.selectedAnswer === this.currQuestion.answer.correctChoise) this.guessedQuestions++;
 
-        this.previousAnswers.push({
+        this.answers.push({
-            answer: ''
+            answer: this.selectedAnswer,
-        })
+            question: this.currQuestion,
+        });
 
         if (this.currQuestionN >= this.questions.length) {
             this.stage = 'ongoing-ended';
@@ -158,4 +159,8 @@ export class MinigameBiotriviaComponent implements OnInit {
 
         return array;
     }
+
+    getIncorrectAnswers(): { question: Question, answer: string }[] {
+        return this.answers.filter(v => v.answer === v.question.answer.correctChoise);
+    }
 }