#53 checkpoint

Author: isahann

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "xpquiz.github.io",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -34,6 +34,7 @@
     "@angular/compiler-cli": "^16.1.0",
     "@types/jasmine": "~4.3.0",
     "@types/mustache": "^4.2.2",
+    "@types/node": "^20.12.7",
     "jasmine-core": "~4.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

package.json

@@ -1,11 +1,12 @@
 <div class="window">
   <app-window-title-bar iconPath="about.png" title="About XPQuiz"></app-window-title-bar>
   <div class="window-body">
-    <label><b>XPQuiz</b>&nbsp;- Version 1.3.3</label>
+    <label><b>XPQuiz</b>&nbsp;- Version 1.4.0</label>
     <label class="main">Created by&nbsp;<b><a href="https://isahann.github.io">Isahann Hanacleto</a></b></label>
 
     <label>Source code at&nbsp;<b><a href="https://github.com/xpquiz/xpquiz.github.io">GitHub</a></b></label>
-    <label>Questions provided by&nbsp;<b><a href="https://the-trivia-api.com/">The Trivia API</a></b></label>
+    <label>Questions provided by&nbsp;<b><a href="https://the-trivia-api.com/">The Trivia API</a></b>,&nbsp;<b><a
+      href="https://opentdb.com/">Open Trivia Database</a></b>&nbsp;and&nbsp;<b><a href="https://quizapi.io/">QuizAPI</a></b></label>
     <label>Windows XP theming provided by&nbsp;<b><a href="https://botoxparty.github.io/XP.css/">XP.css</a></b></label>
     <label>Windows XP sounds provided by&nbsp;<b><a href="https://archive.org/details/windowsxpstartup_201910/">The
       Internet Archive</a></b></label>

src/app/about-window/about-window.component.html

@@ -1,12 +1,12 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {TriviaService} from "../../service/trivia.service";
-import {TriviaResponse} from "../../model/TriviaResponse";
 import {Router} from "@angular/router";
 import {PathsEnum} from "../../model/enums/PathsEnum";
 import {AppStorageService} from "../../service/app-storage.service";
 import {QuestionResultTemplateParams} from "../../model/Template";
 import {EncryptionService} from "../../service/encryption.service";
 import {Subscription} from "rxjs";
+import {Question} from "../../model/questions/Question";
 
 @Component({
   selector: 'app-question-window',
@@ -46,7 +46,10 @@ export class QuestionWindowComponent implements OnInit, OnDestroy {
     }
 
     this.startLoadingProgressBar();
-    this.loadQuestion();
+
+    while(!this.questionLoaded) {
+      await this.loadQuestion();
+    }
   }
 
   public ngOnDestroy() {
@@ -64,20 +67,23 @@ export class QuestionWindowComponent implements OnInit, OnDestroy {
     return selectedAnswer ? `> ${answer} <` : answer;
   }
 
-  private loadQuestion(): void {
-    this.getQuizzesSubscription = this.triviaService.getQuizzes().subscribe((response: TriviaResponse[]): void => {
-      const singleQuiz: TriviaResponse = response[0];
+  private async loadQuestion(): Promise<void> {
+    const questions: Question[] = await this.triviaService.fetchQuestion()
+
+    if (questions.length === 0)
+      return;
+
+    const singleQuiz: Question = questions[0];
 
-      this.question = singleQuiz.question.text;
-      this.correctAnswer = singleQuiz.correctAnswer;
-      this.answers = [singleQuiz.correctAnswer, ...singleQuiz.incorrectAnswers]
-        .map((value) => ({value, sort: Math.random()}))
-        .sort((a, b) => a.sort - b.sort)
-        .map(({value}) => value);
+    this.question = singleQuiz.question;
+    this.correctAnswer = singleQuiz.correctAnswer;
+    this.answers = [singleQuiz.correctAnswer, ...singleQuiz.incorrectAnswers]
+      .map((value) => ({value, sort: Math.random()}))
+      .sort((a, b) => a.sort - b.sort)
+      .map(({value}) => value);
 
-      this.questionPoints = this.sumQuestionPoints(singleQuiz.difficulty, singleQuiz.isNiche);
-      this.questionLoaded = true;
-    });
+    this.questionPoints = this.sumQuestionPoints(singleQuiz.difficulty, singleQuiz.isNiche);
+    this.questionLoaded = true;
   }
 
   public async confirmAnswer(): Promise<void> {
@@ -130,15 +136,15 @@ export class QuestionWindowComponent implements OnInit, OnDestroy {
     let revertProgressBar: boolean = false;
 
     while (true) {
-      if(this.loadingProgressBar === 100) {
+      if (this.loadingProgressBar === 100) {
         revertProgressBar = true;
 
-        if(this.questionLoaded){
+        if (this.questionLoaded) {
           this.showQuestion = true;
           await this.questionReadySound.play();
           break;
         }
-      } else if(this.loadingProgressBar === 0) {
+      } else if (this.loadingProgressBar === 0) {
         revertProgressBar = false;
       }
 

src/app/question-window/question-window.component.ts

@@ -0,0 +1,13 @@
+export interface OpenTriviaDBResponse {
+  response_code: 0 | 1 | 2 | 3 | 4 | 5,
+  results: OpenTriviaDBQuestion[]
+}
+
+interface OpenTriviaDBQuestion {
+  type: string;
+  difficulty: string,
+  category: 'easy' | 'medium' | 'hard',
+  question: string,
+  correct_answer: string,
+  incorrect_answers: string[]
+}

src/model/questions/OpenTriviaDBResponse.ts

@@ -0,0 +1,7 @@
+export interface Question {
+  question: string;
+  correctAnswer: string;
+  incorrectAnswers: string[];
+  difficulty: 'easy' | 'medium' | 'hard';
+  isNiche: boolean;
+}

src/model/questions/Question.ts

@@ -0,0 +1,36 @@
+export interface QuizAPIResponse {
+  id: number,
+  question: string,
+  description: string,
+  answers: QuizAPIResponseAnswers
+  multiple_correct_answers: boolean,
+  correct_answers: QuizAPIResponseCorrectAnswers
+  correct_answer: string,
+  explanation: string,
+  tip: string,
+  tags: QuizAPIResponseTag[],
+  category: string,
+  difficulty: 'Easy' | 'Medium' | 'Hard'
+}
+
+export interface QuizAPIResponseAnswers {
+  answer_a: string | null,
+  answer_b: string | null,
+  answer_c: string | null,
+  answer_d: string | null,
+  answer_e: string | null,
+  answer_f: string | null,
+}
+
+export interface QuizAPIResponseCorrectAnswers {
+  answer_a_correct: boolean,
+  answer_b_correct: boolean,
+  answer_c_correct: boolean,
+  answer_d_correct: boolean,
+  answer_e_correct: boolean,
+  answer_f_correct: boolean,
+}
+
+interface QuizAPIResponseTag {
+  name: string
+}

src/model/questions/QuizAPIResponse.ts

@@ -1,4 +1,4 @@
-export interface TriviaResponse {
+export interface TheTriviaApiResponse {
   category:
     | 'music'
     | 'sport_and_leisure'
@@ -15,12 +15,12 @@ export interface TriviaResponse {
   difficulty: 'easy' | 'medium' | 'hard';
   regions: string[];
   isNiche: boolean;
-  question: Question;
+  question: TheTriviaApiQuestion;
   correctAnswer: string;
   incorrectAnswers: string[];
   type: 'text_choice';
 }
 
-interface Question {
+interface TheTriviaApiQuestion {
   text: string;
 }