Feature/#64

db.json

@@ -1,39 +1,106 @@
 {
   "theTriviaApi": [
     {
-      "category": "society_and_culture",
-      "id": "622a1c367cc59eab6f950408",
-      "correctAnswer": "Rosa Parks",
+      "category": "sport_and_leisure",
+      "id": "62417da50f96c4efe8d773db",
+      "correctAnswer": "San Francisco 49ers",
       "incorrectAnswers": [
-        "Angela Davis",
-        "Dorothy Cotton",
-        "Fanny Lou Hamer"
+        "San Francisco Jaguars",
+        "San Francisco Pistons",
+        "San Francisco Predators"
       ],
       "question": {
-        "text": "Which civil right activist is famous for refusing to give up her seat on a bus to make way for a white person?"
+        "text": "Which of these is an American Football team based in San Francisco?"
       },
       "tags": [
-        "general_knowledge",
-        "people",
-        "society_and_culture"
+        "sport"
       ],
       "type": "text_choice",
       "difficulty": "medium",
       "regions": [],
       "isNiche": false
+    },
+    {
+      "category": "history",
+      "id": "622a1c367cc59eab6f9503ac",
+      "correctAnswer": "Germany",
+      "incorrectAnswers": [
+        "Switzerland",
+        "Denmark",
+        "France"
+      ],
+      "question": {
+        "text": "Which country was first to operate an old age pension scheme?"
+      },
+      "tags": [
+        "history"
+      ],
+      "type": "text_choice",
+      "difficulty": "hard",
+      "regions": [],
+      "isNiche": false
+    },
+    {
+      "category": "arts_and_literature",
+      "id": "649b4f4f828109028d236251",
+      "correctAnswer": "A Spider",
+      "incorrectAnswers": [
+        "A Pig",
+        "A Sheep",
+        "A Horse"
+      ],
+      "question": {
+        "text": "In E.B. White's classic children's book \"Charlotte's Web\", what kind of animal is Charlotte?"
+      },
+      "tags": [
+        "animals",
+        "childrens_literature",
+        "arts_and_literature",
+        "literature"
+      ],
+      "type": "text_choice",
+      "difficulty": "easy",
+      "regions": [],
+      "isNiche": false
     }
   ],
   "openTriviaDb": {
     "response_code": 0,
     "results": [
       {
-        "type": "Ym9vbGVhbg==",
+        "type": "bXVsdGlwbGU=",
+        "difficulty": "bWVkaXVt",
+        "category": "SGlzdG9yeQ==",
+        "question": "V2hlbiBkaWQgdGhlIENyaXNpcyBvZiB0aGUgVGhpcmQgQ2VudHVyeSBiZWdpbj8=",
+        "correct_answer": "MjM1IEFE",
+        "incorrect_answers": [
+          "MjM1IEJD",
+          "MjQyIEFE",
+          "MjEwIEFE"
+        ]
+      },
+      {
+        "type": "bXVsdGlwbGU=",
+        "difficulty": "bWVkaXVt",
+        "category": "RW50ZXJ0YWlubWVudDogVmlkZW8gR2FtZXM=",
+        "question": "V2hpY2ggb2YgdGhlc2UgQ291bnRlci1TdHJpa2UgbWFwcyBpcyBhIGJvbWIgZGVmdXNlIHNjZW5hcmlvPw==",
+        "correct_answer": "UHJvZGlneQ==",
+        "incorrect_answers": [
+          "NzQ3",
+          "SGF2YW5h",
+          "T2lscmln"
+        ]
+      },
+      {
+        "type": "bXVsdGlwbGU=",
         "difficulty": "bWVkaXVt",
-        "category": "RW50ZXJ0YWlubWVudDogSmFwYW5lc2UgQW5pbWUgJiBNYW5nYQ==",
-        "question": "VGhlIGFuaW1hdGVkIGZpbG0gIlNwaXJpdGVkIEF3YXkiIHdvbiB0aGUgQWNhZGVteSBBd2FyZCBmb3IgQmVzdCBBbmltYXRlZCBGZWF0dXJlIGF0IHRoZSA3NXRoIEFjYWRlbXkgQXdhcmRzIGluIDIwMDMu",
-        "correct_answer": "VHJ1ZQ==",
+        "category": "RW50ZXJ0YWlubWVudDogVmlkZW8gR2FtZXM=",
+        "question": "V2hhdCBpcyB0aGUgd29ybGQncyBmaXJzdCB2aWRlbyBnYW1lIGNvbnNvbGU/",
+        "correct_answer": "TWFnbmF2b3ggT2R5c3NleQ==",
         "incorrect_answers": [
-          "RmFsc2U="
+          "Q29sZWNvIFRlbHN0YXI=",
+          "TmludGVuZG8gQ29sb3IgVFYgR2FtZQ==",
+          "QXRhcmkgMjYwMA=="
         ]
       }
     ]
@@ -70,6 +137,71 @@
       ],
       "category": "Code",
       "difficulty": "Easy"
+    },
+    {
+      "id": 1,
+      "question": "How to delete a directory in Linux?",
+      "description": "delete folder",
+      "answers": {
+        "answer_a": "ls",
+        "answer_b": "delete",
+        "answer_c": "remove",
+        "answer_d": "rmdir",
+        "answer_e": null,
+        "answer_f": null
+      },
+      "multiple_correct_answers": "false",
+      "correct_answers": {
+        "answer_a_correct": "false",
+        "answer_b_correct": "false",
+        "answer_c_correct": "false",
+        "answer_d_correct": "true",
+        "answer_e_correct": "false",
+        "answer_f_correct": "false"
+      },
+      "explanation": "rmdir deletes an empty directory",
+      "tip": null,
+      "tags": [],
+      "category": "linux",
+      "difficulty": "Easy"
+    },
+    {
+      "id": 3,
+      "question": "How to check the current disk usage on Linux?",
+      "description": "check current disk usage",
+      "answers": {
+        "answer_a": "df",
+        "answer_b": "usage",
+        "answer_c": "uptime",
+        "answer_d": "free",
+        "answer_e": null,
+        "answer_f": null
+      },
+      "multiple_correct_answers": "false",
+      "correct_answers": {
+        "answer_a_correct": "true",
+        "answer_b_correct": "false",
+        "answer_c_correct": "false",
+        "answer_d_correct": "false",
+        "answer_e_correct": "false",
+        "answer_f_correct": "false"
+      },
+      "correct_answer": "answer_a",
+      "explanation": "df shows you the current disk usage",
+      "tip": "df",
+      "tags": [
+        {
+          "name": "Linux"
+        },
+        {
+          "name": "BASH"
+        },
+        {
+          "name": "cmd"
+        }
+      ],
+      "category": "uncategorized",
+      "difficulty": "easy"
     }
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpquiz.github.io",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

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

@@ -1,7 +1,7 @@
 <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.4.2</label>
+    <label><b>XPQuiz</b>&nbsp;- Version 1.5.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>

src/app/app-routing.module.ts

@@ -7,6 +7,8 @@ import {PathsEnum} from "../model/enums/PathsEnum";
 import {CorrectAnswerWindowComponent} from "./correct-answer-window/correct-answer-window.component";
 import {WrongAnswerWindowComponent} from "./wrong-answer-window/wrong-answer-window.component";
 import {AboutWindowComponent} from "./about-window/about-window.component";
+import {GameModeWindowComponent} from "./game-mode-window/game-mode-window.component";
+import {QuestionTrifectaWindowComponent} from "./question-trifecta-window/question-trifecta-window.component";
 
 const routes: Routes = [
     {
@@ -27,15 +29,23 @@ const routes: Routes = [
       component: ScoreWindowComponent
     },
     {
-      path: PathsEnum.QUIZ,
+      path: PathsEnum.GAME_MODE,
+      component: GameModeWindowComponent,
+    },
+    {
+      path: `${PathsEnum.QUIZ_NORMAL}`,
       component: QuestionWindowComponent,
     },
     {
-      path: `${PathsEnum.CORRECT_ANSWER}/:result`,
+      path: `${PathsEnum.QUIZ_TRIFECTA}`,
+      component: QuestionTrifectaWindowComponent,
+    },
+    {
+      path: `${PathsEnum.CORRECT_ANSWER}/:mode/:result`,
       component: CorrectAnswerWindowComponent,
     },
     {
-      path: `${PathsEnum.WRONG_ANSWER}/:result`,
+      path: `${PathsEnum.WRONG_ANSWER}/:mode/:result`,
       component: WrongAnswerWindowComponent
     }
   ]

src/app/app.module.ts

@@ -14,6 +14,9 @@ import { CorrectAnswerWindowComponent } from './correct-answer-window/correct-an
 import { WrongAnswerWindowComponent } from './wrong-answer-window/wrong-answer-window.component';
 import { AboutWindowComponent } from './about-window/about-window.component';
 import {CopyClipboardDirective} from "./directives/CopyClipboardDirective";
+import { GameModeWindowComponent } from './game-mode-window/game-mode-window.component';
+import { IconTextButtonComponent } from './common/icon-text-button/icon-text-button.component';
+import { QuestionTrifectaWindowComponent } from './question-trifecta-window/question-trifecta-window.component';
 
 @NgModule({
   declarations: [
@@ -26,7 +29,10 @@ import {CopyClipboardDirective} from "./directives/CopyClipboardDirective";
     CorrectAnswerWindowComponent,
     WrongAnswerWindowComponent,
     AboutWindowComponent,
-    CopyClipboardDirective
+    CopyClipboardDirective,
+    GameModeWindowComponent,
+    IconTextButtonComponent,
+    QuestionTrifectaWindowComponent
   ],
     imports: [
         BrowserModule,

src/app/common/icon-text-button/icon-text-button.component.html

@@ -0,0 +1,7 @@
+<button (click)="this.onClick()" [disabled]="this.disabled">
+  <img
+    [ngSrc]="'assets/icons/30x30/' + this.iconPath"
+    alt="" [height]="this.iconSize" [width]="this.iconSize"/>
+  <label>{{this.title}}</label>
+  <p>{{this.description}}</p>
+</button>

src/app/common/icon-text-button/icon-text-button.component.sass

@@ -0,0 +1,13 @@
+button
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  height: 130px
+  width: 170px
+
+  img
+    margin: 5px
+
+  label
+    font-weight: bold

src/app/common/icon-text-button/icon-text-button.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconTextButtonComponent } from './icon-text-button.component';
+
+describe('IconTextButtonComponent', () => {
+  let component: IconTextButtonComponent;
+  let fixture: ComponentFixture<IconTextButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [IconTextButtonComponent]
+    });
+    fixture = TestBed.createComponent(IconTextButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/common/icon-text-button/icon-text-button.component.ts

@@ -0,0 +1,27 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'app-icon-text-button',
+  templateUrl: './icon-text-button.component.html',
+  styleUrls: ['./icon-text-button.component.sass']
+})
+export class IconTextButtonComponent {
+
+  @Input()
+  public iconPath: string = '';
+  @Input()
+  public title: string = '';
+  @Input()
+  public description: string = '';
+  @Input()
+  public disabled: boolean = false;
+  @Output()
+  public onButtonClick: EventEmitter<void> = new EventEmitter<void>();
+
+  public readonly iconSize: number = 30;
+
+  public onClick(): void {
+    this.onButtonClick.emit();
+  }
+
+}

src/app/correct-answer-window/correct-answer-window.component.html

@@ -3,7 +3,7 @@
   <div class="window-body">
     <div class="window-body_title">
       <label><b>Congratulations!</b></label>
-      <label>You earned {{this.questionScore}} points!</label>
+      <label>You earned {{ this.questionScore }} points!</label>
       <label>Come back in 3 hours for another question!</label>
     </div>
     <div class="window-body_buttons">

src/app/correct-answer-window/correct-answer-window.component.ts

@@ -4,7 +4,8 @@ import {PathsEnum} from "../../model/enums/PathsEnum";
 import {AppStorageService} from "../../service/app-storage.service";
 import {EncryptionService} from "../../service/encryption.service";
 import {TemplateService} from "../../service/template.service";
-import {QuestionResultTemplateParams, TemplateEnum} from "../../model/Template";
+import {QuestionResultTemplateParams, QuestionResultTrifectaTemplateParams} from "../../model/Template";
+import {GameMode} from "../../model/enums/GameModesEnum";
 
 @Component({
   selector: 'app-correct-answer-window',
@@ -53,15 +54,17 @@ export class CorrectAnswerWindowComponent implements OnInit {
   }
 
   private saveCurrentScore(): void {
-    this.appStorageService.saveAnswer(true, this.questionScore);
+    this.appStorageService.saveAnswer(true, this.questionScore, 3);
   }
 
   private async retrieveRouteParams(): Promise<void> {
+    const routeGameModeTitle: string = this.route.snapshot.paramMap.get('mode')!;
     const encryptedQuestionResult: string = this.route.snapshot.paramMap.get('result')!;
 
     const decryptedQuestionResult: string = this.encryptionService.decrypt(encryptedQuestionResult);
-    const questionResult: QuestionResultTemplateParams = JSON.parse(decryptedQuestionResult);
-    const questionResultText: string = await this.templateService.render(TemplateEnum.QUESTION_RESULT, questionResult);
+    const questionResult: QuestionResultTemplateParams | QuestionResultTrifectaTemplateParams = JSON.parse(decryptedQuestionResult);
+    const mode: GameMode = GameMode.getByTitle(routeGameModeTitle);
+    const questionResultText: string = await this.templateService.render(mode.templateEnum, questionResult);
 
     this.questionScore = questionResult.questionPoints!;
     this.clipboardText = questionResultText;