v1.5.0

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,20 +1,59 @@
 <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>
     <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>
+      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>
     <label>Windows XP icons provided by&nbsp;<b><a
       href="https://www.deviantart.com/marchmountain/art/Windows-XP-High-Resolution-Icon-Pack-916042853">marchmountain
       at DeviantArt</a></b></label>
 
-    <app-icon-button iconPath="home.png" title="Return to home"
-                     (onButtonClick)="this.returnHome()"></app-icon-button>
+    <div class="window-body_buttons">
+      <app-icon-button iconPath="home.png" title="Return home"
+                       (onButtonClick)="this.router.navigateByUrl(PathsEnum.HOME)"></app-icon-button>
+      <app-icon-button iconPath="contact.png" title="Contact us!" [disabled]="this.showFeedbackWindow"
+                       (onButtonClick)="this.toggleFeedbackWindow()"></app-icon-button>
+    </div>
   </div>
 </div>
+
+<div class="window" *ngIf="this.showFeedbackWindow">
+  <app-window-title-bar iconPath="about.png" title="Contact"></app-window-title-bar>
+  <div class="window-body">
+    <form [formGroup]="this.feedbackForm" (ngSubmit)="this.onSubmit()">
+      <label class="window-body_feedback-title">✍️ Feel free to message us about suggestions, feedbacks or compliments!
+        🤔</label>
+
+      <div class="window-body_feedback-inputs">
+        <div class="field-row">
+          <label for="name">Name (*):</label>
+          <input id="name" type="text" formControlName="name" placeholder="Type in your name..."/>
+        </div>
+        <div class="field-row">
+          <label for="message">Message (*):</label>
+          <textarea id="message" rows="8" formControlName="message" placeholder="Write your message..."></textarea>
+        </div>
+      </div>
+
+      <div class="window-body_feedback-inputs-error">
+        <label *ngIf="this.shouldShowErrorMessage('name')">Please type in your name.</label>
+        <label *ngIf="this.shouldShowErrorMessage('message')">Please type your message.</label>
+      </div>
+
+      <div class="window-body_feedback-buttons">
+        <app-icon-button iconPath="no.png" title="Close"
+                         (onButtonClick)="this.toggleFeedbackWindow()"></app-icon-button>
+        <app-icon-button [disabled]="this.shouldDisableSendButton()" iconPath="send.png" title="Send"
+                         type="submit"></app-icon-button>
+      </div>
+    </form>
+  </div>
+</div>
+

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

@@ -1,15 +1,69 @@
-.window-body
-  display: flex
-  flex-direction: column
-  align-items: center
-  justify-content: center
+.window
+  margin: 10px
 
-  label
-    margin: 3px
+  &-body
+    display: flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
 
-    &.main
-      margin-bottom: 10px
+    label
+      margin: 3px
+
+      &.main
+        margin-bottom: 10px
+        font-style: italic
+
+    &_buttons
+      display: flex
+      flex-direction: row
+      align-items: center
+      justify-content: center
+      margin: 5px
+
+      app-icon-button
+        margin: 5px
+
+    label.window-body_feedback-title
       font-style: italic
+      margin-bottom: 10px
+
+    &_feedback-inputs
+      display: flex
+      flex-direction: column
+      align-items: center
+      justify-content: center
+      margin: 10px
+      width: 300px
+
+      .field-row
+        width: 100%
+
+        textarea
+          border: 1px solid #7f9db9
+
+        label
+          width: 25%
+          display: block
+          text-align: end
+          align-self: flex-start
+
+        input, textarea
+          width: 75%
+
+    &_feedback-inputs-error
+      color: red
+      display: flex
+      flex-direction: column
+      align-items: center
+      justify-content: center
+
+    &_feedback-buttons
+      display: flex
+      flex-direction: row
+      align-items: center
+      justify-content: center
+      margin: 5px
 
-  app-icon-button
-    margin-top: 15px
+      app-icon-button
+        margin: 5px