Finish quiz answer result modal

src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.html

@@ -1,12 +1,28 @@
-<div class="modal-header">
-  <h4 class="modal-title">Correct!</h4>
-  <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
-</div>
-<div class="modal-body">
-  <div class="">
-    <img alt="album cover" src="{{track.album.images[0].url}}">
+<div class="result-modal">
+  <div class="modal-header" [ngClass]="(result.isCorrect ? 'result-modal--correct' : 'result-modal--incorrect')">
+    <h4 class="modal-title">{{result.isCorrect ? 'Correct!' : 'Incorrect!'}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
+  </div>
+  <div class="modal-body d-flex flex-column">
+    <div class="pt-0 p-1 mx-auto">
+      {{resultMessage}}
+    </div>
+    <div class="d-flex flex-row ">
+      <img class="result-modal__album-cover" alt="album cover" src="{{result.track.album.images[0].url}}">
+      <div class="d-flex flex-column justify-content-around p-3">
+        <div>
+          {{result.track.name}}
+        </div>
+        <div>
+          {{result.track.artists[0].name}}
+        </div>
+        <div>
+          {{result.track.album.name}}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer" [ngClass]="(result.isCorrect ? 'result-modal--correct' : 'result-modal--incorrect')">
+    <button type="button" class="btn btn-outline-dark" (click)="close()">{{closeButtonText}}</button>
   </div>
-</div>
-<div class="modal-footer">
-  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
 </div>

src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.scss

@@ -0,0 +1,20 @@
+@use '../../../../../assets/sass/base/variables' as *;
+
+.result-modal {
+  color: $taeyeon-black;
+  font-weight: bold;  
+
+  &--correct {
+    background: $green;
+  }
+
+  &--incorrect {
+    background: $red;
+  }
+
+  &__album-cover {
+    height: 175px; //10rem
+    width: 175px;
+    border-radius: 20px;
+  }
+}

src/app/_shared/components/modals/quiz-answer/quiz-answer.modal.ts

@@ -1,17 +1,41 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { Track } from "../../../models/user-top-items-response.model";
+import { QuizResult } from "../../../models/result-modal.model";
+import { CommonModule } from "@angular/common";
+import { Router } from "@angular/router";
 
 @Component({
   standalone: true,
   selector: 'app-quiz-answer-modal',
   templateUrl: './quiz-answer.modal.html',
   styleUrls: ['./quiz-answer.modal.scss'],
+  imports: [CommonModule]
 })
-export class QuizAnswerModal {
-  @Input() track!: Track;
+export class QuizAnswerModal implements OnInit {
+  @Input() result!: QuizResult;
 
   activeModal: NgbActiveModal = this.activeModalRef;
+  closeButtonText: string = "Close";
+  resultMessage: string = "";
 
-  constructor(private activeModalRef: NgbActiveModal) { }
+  constructor(
+    private activeModalRef: NgbActiveModal,
+    private router: Router) { }
+
+  ngOnInit(): void {
+    if (this.result.isCorrect)
+      this.resultMessage = "You got it right!";
+    else
+      this.resultMessage = "The right answer is..."
+
+    if (this.result.isLastQuestion)
+      this.closeButtonText = "Home";
+  }
+
+  close(): void {
+    if (this.result.isLastQuestion) 
+      this.router.navigate(['./home']);
+    else 
+      this.activeModal.close('Close click')
+  }
 }

src/app/_shared/models/result-modal.model.ts

@@ -0,0 +1,9 @@
+import { Track } from "./user-top-items-response.model";
+
+export interface QuizResult {
+  isCorrect: boolean;
+  isLastQuestion: boolean;
+
+  track: Track;
+  score: number;
+}

src/app/components/play/play.component.ts

@@ -8,6 +8,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { FormsModule } from '@angular/forms';
 import { HARD_MODE_DURATION, HARD_MODE_TIMER, NORMAL_DURATION, NORMAL_TIMER, NUMBER_OF_SONGS, VOLUME_DECREMENTER, VOLUME_INCREMENTER } from '../../_shared/constants/settings.constants';
 import { QuizSettings } from '../../_shared/models/quiz.model';
+import { QuizResult } from '../../_shared/models/result-modal.model';
 import { QuizAnswerModal } from '../../_shared/components/modals/quiz-answer/quiz-answer.modal';
 import { NgbModal, NgbModalModule, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 
@@ -179,9 +180,11 @@ export class PlayComponent implements OnInit {
       console.log('correct');
       this.quizScore++;
       const modalRef: NgbModalRef = this.modalService.open(QuizAnswerModal);
-      modalRef.componentInstance.track = this.selectedAnswer;
+      (modalRef.componentInstance.result as QuizResult) = { isCorrect: true, isLastQuestion: (this.quizIndex === 4), score: this.quizScore, track: this.quizSongs[this.quizIndex]!};
     } else {
-      // this.nextTrack();
+      console.log('incorrect');
+      const modalRef: NgbModalRef = this.modalService.open(QuizAnswerModal);
+      (modalRef.componentInstance.result as QuizResult) = { isCorrect: false, isLastQuestion: (this.quizIndex === 4), score: this.quizScore, track: this.quizSongs[this.quizIndex]!};
     }
   }
 

src/assets/sass/base/_variables.scss

@@ -2,6 +2,9 @@
 $taeyeon-white: #eeeeee;
 $taeyeon-gray: #6E7280;
 $taeyeon-dark-gray: #31364A;
+$taeyeon-black: #444444;
+$taeyeon-red: #d9534c;
+$taeyeon-green: #3c8f4f;
 
 // Color system
 $gray-100: #f8f9fa;
@@ -30,10 +33,10 @@ $red-light: #ffc4c5;
 // BOOTSTRAP VARIABLE COLORS TO CALL
 $primary: $taeyeon-dark-gray;
 $secondary: $taeyeon-gray;
-$success: $green;
+$success: $taeyeon-green;
 $info: $cyan;
 $warning: $yellow;
-$danger: $red;
+$danger: $taeyeon-red;
 $danger-light: $red-light;
 $light: $gray-100;
 $dark: $gray-800;

src/styles.scss

@@ -16,7 +16,7 @@ html body {
   // background-color: #31364A;
   border: 0px;
   border-radius: 5px;
-  color: $taeyeon-white;
+  // color: $taeyeon-white;
   font-size: 20px;
   font-weight: 600;
   opacity: 0.5;