update,

03_source/mobile/src/pages/DemoQuizApp/components/Answer.jsx

@@ -0,0 +1,17 @@
+import { IonButton, IonCol, IonRow } from '@ionic/react';
+import styles from './Quiz.module.scss';
+
+export const Answer = ({ answer, handleAnswerClick, question }) => (
+  <IonRow>
+    <IonCol size="12">
+      <IonButton
+        onClick={(e) => handleAnswerClick(e, answer, question)}
+        expand="block"
+        color="light"
+        className={`ion-text-wrap ${styles.answerButton}`}
+      >
+        {question.answers[answer]}
+      </IonButton>
+    </IonCol>
+  </IonRow>
+);

03_source/mobile/src/pages/DemoQuizApp/components/CompletedCard.jsx

@@ -0,0 +1,58 @@
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonGrid,
+  IonNote,
+  IonRow,
+  useIonRouter,
+} from '@ionic/react';
+import styles from './Quiz.module.scss';
+import { updateChosenCategory, updateChosenDifficulty } from '../store/SettingsStore';
+
+export const CompletedCard = ({ completionContainerRef, score, questionsLength }) => {
+  const router = useIonRouter();
+
+  const playAgain = () => {
+    updateChosenCategory(false);
+    updateChosenDifficulty(false);
+    router.push('/');
+  };
+
+  return (
+    <IonGrid className="animate__animated" ref={completionContainerRef}>
+      <IonRow className="ion-text-center">
+        <IonCol size="12">
+          <IonCard>
+            <IonCardHeader>
+              <IonCardSubtitle>Congratulations</IonCardSubtitle>
+              <IonCardTitle>Quiz Complete!</IonCardTitle>
+              <p className={styles.emoji}>🎉</p>
+            </IonCardHeader>
+
+            <IonCardContent>
+              <IonNote>You scored</IonNote>
+
+              <IonCardTitle className="ion-margin-bottom">
+                {score}/{questionsLength}
+              </IonCardTitle>
+
+              <IonButton
+                onClick={playAgain}
+                color="success"
+                expand="block"
+                className="ion-margin-top"
+              >
+                Play Again!
+              </IonButton>
+            </IonCardContent>
+          </IonCard>
+        </IonCol>
+      </IonRow>
+    </IonGrid>
+  );
+};

03_source/mobile/src/pages/DemoQuizApp/components/Quiz.module.scss

@@ -0,0 +1,46 @@
+.difficultyContainer {
+
+    margin-top: -2rem !important;
+}
+
+.startButton {
+
+    background-color: #994ec1;
+    padding: 1.25rem;
+    margin: 1rem;
+    margin-top: -1rem;
+    border-radius: 5px;
+    text-align: center;
+    color: white;
+    border: 2px solid #632485;
+}
+
+.questionTitle {
+
+    font-size: 1rem;
+}
+
+.answerButton {
+
+    height: fit-content;
+    --padding-top: 1rem;
+    --padding-bottom: 1rem;
+}
+
+.mainGrid {
+
+    // margin-top: -2rem;
+}
+
+.mainRow {
+
+    margin-top: -2rem;
+}
+
+.emoji {
+
+    font-size: 4rem;
+    padding: 0;
+    margin: 0;
+    padding-top: 1rem;
+}

03_source/mobile/src/pages/DemoQuizApp/components/QuizStats.jsx

@@ -0,0 +1,25 @@
+import { IonCard, IonCardContent, IonCardSubtitle, IonCol, IonItem, IonLabel, IonNote, IonRow } from "@ionic/react";
+
+export const QuizStats = ({ chosenCategory, chosenDifficulty, currentQuestion, questionsLength, score }) => (
+
+    <IonRow>
+        <IonCol size="12">
+            <IonCard>
+                <IonCardContent className="ion-text-center">
+                    <IonCardSubtitle>{ chosenCategory } | { chosenDifficulty }</IonCardSubtitle>
+                    <IonItem lines="none">
+                        <IonLabel className="ion-text-center">
+                            <IonCardSubtitle>Question</IonCardSubtitle>
+                            <IonNote>{ currentQuestion } / { questionsLength }</IonNote>
+                        </IonLabel>
+
+                        <IonLabel className="ion-text-center">
+                            <IonCardSubtitle>Score</IonCardSubtitle>
+                            <IonNote>{ score }</IonNote>
+                        </IonLabel>
+                    </IonItem>
+                </IonCardContent>
+            </IonCard>
+        </IonCol>
+    </IonRow>
+);

03_source/mobile/src/pages/DemoQuizApp/components/Settings.jsx

@@ -0,0 +1,17 @@
+import { IonCol } from "@ionic/react";
+import { updateChosenCategory, updateChosenDifficulty } from "../store/SettingsStore";
+import styles from "./Settings.module.scss";
+
+export const Category = ({ label, value, set, chosen }) => (
+
+    <IonCol id={ `categoryButton_${ value }` } size="6" className={ `${styles.category} ${chosen && styles.chosen} animate__animated` } onClick={ () => updateChosenCategory(value) }>
+        <p>{ label }</p>
+    </IonCol>
+);
+
+export const Difficulty = ({ label, value, set, chosen }) => (
+
+    <IonCol id={ `difficultyButton_${ value }` } size="4" className={ `${ styles.category } ${ chosen && styles.chosen } animate__animated` } onClick={ () => updateChosenDifficulty(value) }>
+        <p>{ label }</p>
+    </IonCol>
+);

03_source/mobile/src/pages/DemoQuizApp/components/Settings.module.scss

@@ -0,0 +1,20 @@
+.category {
+
+    height: 4rem;
+    border: 5px solid rgb(255, 255, 255);
+    background-color: #994ec1;
+    color: white;
+    border-radius: 10px;
+    text-align: center;
+    justify-content: center;
+    align-content: center;
+    display: flex;
+    align-items: center;
+    font-weight: 700;
+}
+
+.chosen {
+
+    border: 2px solid #3a1d49;
+    font-weight: 700;
+}