partially completed quiz page functionality

src/App.tsx

@@ -39,10 +39,10 @@ const App: React.FC = () => (
         <Route exact path="/skillInformationStep">
           <SkillInformationStep />
         </Route>
-        <Route exact path="/Quiz">
+        <Route exact path="/quiz">
           <Quiz />
         </Route>
-        <Route exact path="/PreliminaryRound">
+        <Route exact path="/preliminaryRound">
           <PreliminaryRound />
         </Route>
         <Route exact path="/">

src/assets/icons/desktop-particles.svg

@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1372.384" height="684.949" viewBox="0 0 1372.384 684.949">
+  <g id="Group_4325" data-name="Group 4325" transform="translate(6.384 -91.801)">
+    <g id="Ellipse_14" data-name="Ellipse 14" transform="translate(199 194.552) rotate(-180)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
+      <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
+      <circle cx="13.5" cy="13.5" r="11" fill="none"/>
+    </g>
+    <g id="Ellipse_105" data-name="Ellipse 105" transform="translate(488 662.552) rotate(-180)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
+      <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
+      <circle cx="13.5" cy="13.5" r="11" fill="none"/>
+    </g>
+    <g id="Ellipse_17" data-name="Ellipse 17" transform="translate(256 414.552) rotate(-180)" fill="none" stroke="#313131" stroke-width="5">
+      <circle cx="8.5" cy="8.5" r="8.5" stroke="none"/>
+      <circle cx="8.5" cy="8.5" r="6" fill="none"/>
+    </g>
+    <path id="Polygon_1" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(448.042 262.052) rotate(-137)" fill="#626262"/>
+    <path id="Polygon_22" data-name="Polygon 22" d="M10.5,0,21,19H0Z" transform="translate(53.042 580.941) rotate(-137)" fill="#626262"/>
+    <path id="Polygon_3" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(187.358 469.552) rotate(-137)" fill="#626262"/>
+    <path id="Polygon_23" data-name="Polygon 23" d="M5.362,0l5.362,9.7H0Z" transform="translate(146.843 623.851) rotate(-137)" fill="#626262"/>
+    <path id="Polygon_2" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(427.82 552.723) rotate(-137)" fill="#2e2e2e"/>
+    <path id="Polygon_24" data-name="Polygon 24" d="M10.855,0,21.71,19.642H0Z" transform="translate(427.82 757.78) rotate(-137)" fill="#2e2e2e"/>
+    <rect id="Rectangle_40" data-name="Rectangle 40" width="15" height="15" transform="matrix(-0.883, 0.469, -0.469, -0.883, 172, 277.796)" fill="#383838"/>
+    <rect id="Rectangle_296" data-name="Rectangle 296" width="8.483" height="8.483" transform="matrix(-0.883, 0.469, -0.469, -0.883, 388.5, 665.796)" fill="#383838"/>
+    <rect id="Rectangle_41" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(435.696 169.606) rotate(115)" fill="#383838"/>
+    <rect id="Rectangle_297" data-name="Rectangle 297" width="14.685" height="14.685" transform="translate(129.444 668.901) rotate(115)" fill="#383838"/>
+    <rect id="Rectangle_43" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(278.583 593.532) rotate(115)" fill="#383838"/>
+    <rect id="Rectangle_42" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(425.938 425) rotate(115)" fill="#383838"/>
+    <rect id="Rectangle_301" data-name="Rectangle 301" width="14.685" height="14.685" transform="translate(312.521 234.634) rotate(115)" fill="#383838"/>
+    <rect id="Rectangle_299" data-name="Rectangle 299" width="14.685" height="14.685" transform="translate(235.938 760.057) rotate(115)" fill="#383838"/>
+    <rect id="Rectangle_298" data-name="Rectangle 298" width="14.685" height="14.685" transform="translate(298.098 502.258) rotate(115)" fill="#383838"/>
+    <rect id="Rectangle_300" data-name="Rectangle 300" width="14.685" height="14.685" transform="translate(298.098 707.315) rotate(115)" fill="#383838"/>
+    <circle id="Ellipse_15" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(402 295.552) rotate(-180)" fill="#383838"/>
+    <circle id="Ellipse_107" data-name="Ellipse 107" cx="5" cy="5" r="5" transform="translate(288.583 105.185) rotate(-180)" fill="#383838"/>
+    <circle id="Ellipse_106" data-name="Ellipse 106" cx="5" cy="5" r="5" transform="translate(7 614.441) rotate(-180)" fill="#383838"/>
+    <circle id="Ellipse_16" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(142 209.552) rotate(-180)" fill="#383838"/>
+    <circle id="Ellipse_18" data-name="Ellipse 18" cx="16.5" cy="16.5" r="16.5" transform="translate(139 502.552) rotate(-180)" fill="#383838"/>
+    <circle id="Ellipse_104" data-name="Ellipse 104" cx="6.5" cy="6.5" r="6.5" transform="translate(266 658.552) rotate(-180)" fill="#383838"/>
+    <g id="Ellipse_14-2" data-name="Ellipse 14" transform="translate(1050 674)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
+      <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
+      <circle cx="13.5" cy="13.5" r="11" fill="none"/>
+    </g>
+    <g id="Ellipse_105-2" data-name="Ellipse 105" transform="translate(1339 206)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
+      <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
+      <circle cx="13.5" cy="13.5" r="11" fill="none"/>
+    </g>
+    <g id="Ellipse_17-2" data-name="Ellipse 17" transform="translate(1117 454)" fill="none" stroke="#313131" stroke-width="5">
+      <circle cx="8.5" cy="8.5" r="8.5" stroke="none"/>
+      <circle cx="8.5" cy="8.5" r="6" fill="none"/>
+    </g>
+    <path id="Polygon_1-2" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(1310.684 620.822) rotate(-43)" fill="#626262"/>
+    <path id="Polygon_22-2" data-name="Polygon 22" d="M10.5,0,21,19H0Z" transform="translate(915.684 301.933) rotate(-43)" fill="#626262"/>
+    <path id="Polygon_3-2" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(1057.515 406.314) rotate(-43)" fill="#626262"/>
+    <path id="Polygon_23-2" data-name="Polygon 23" d="M5.362,0l5.362,9.7H0Z" transform="translate(1017 252.015) rotate(-43)" fill="#626262"/>
+    <path id="Polygon_2-2" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(1289.942 330.635) rotate(-43)" fill="#2e2e2e"/>
+    <path id="Polygon_24-2" data-name="Polygon 24" d="M10.855,0,21.71,19.642H0Z" transform="translate(1289.942 125.578) rotate(-43)" fill="#2e2e2e"/>
+    <rect id="Rectangle_40-2" data-name="Rectangle 40" width="15" height="15" transform="matrix(-0.883, -0.469, 0.469, -0.883, 1042.958, 604)" fill="#383838"/>
+    <rect id="Rectangle_296-2" data-name="Rectangle 296" width="8.483" height="8.483" transform="matrix(-0.883, -0.469, 0.469, -0.883, 1262.518, 210.246)" fill="#383838"/>
+    <rect id="Rectangle_41-2" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(1300.387 705.152) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_297-2" data-name="Rectangle 297" width="14.685" height="14.685" transform="translate(994.135 205.857) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_43-2" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(1147.805 279.113) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_42-2" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(1290.629 449.758) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_301-2" data-name="Rectangle 301" width="14.685" height="14.685" transform="translate(1177.212 640.124) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_299-2" data-name="Rectangle 299" width="14.685" height="14.685" transform="translate(1100.629 114.701) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_298-2" data-name="Rectangle 298" width="14.685" height="14.685" transform="translate(1162.789 372.5) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_300-2" data-name="Rectangle 300" width="14.685" height="14.685" transform="translate(1162.789 167.443) rotate(-115)" fill="#383838"/>
+    <circle id="Ellipse_15-2" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(1270 573)" fill="#383838"/>
+    <circle id="Ellipse_107-2" data-name="Ellipse 107" cx="5" cy="5" r="5" transform="translate(1156.583 763.366)" fill="#383838"/>
+    <circle id="Ellipse_106-2" data-name="Ellipse 106" cx="5" cy="5" r="5" transform="translate(875 254.111)" fill="#383838"/>
+    <circle id="Ellipse_16-2" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(1004 659)" fill="#383838"/>
+    <circle id="Ellipse_18-2" data-name="Ellipse 18" cx="10" cy="10" r="10" transform="translate(984 366)" fill="#383838"/>
+    <circle id="Ellipse_104-2" data-name="Ellipse 104" cx="6.5" cy="6.5" r="6.5" transform="translate(1131 210)" fill="#383838"/>
+    <g id="Ellipse_14-3" data-name="Ellipse 14" transform="translate(623.5 674)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
+      <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
+      <circle cx="13.5" cy="13.5" r="11" fill="none"/>
+    </g>
+    <g id="Ellipse_105-3" data-name="Ellipse 105" transform="translate(912.5 206)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
+      <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
+      <circle cx="13.5" cy="13.5" r="11" fill="none"/>
+    </g>
+    <g id="Ellipse_17-3" data-name="Ellipse 17" transform="translate(690.5 454)" fill="none" stroke="#313131" stroke-width="5">
+      <circle cx="8.5" cy="8.5" r="8.5" stroke="none"/>
+      <circle cx="8.5" cy="8.5" r="6" fill="none"/>
+    </g>
+    <path id="Polygon_1-3" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(884.184 620.822) rotate(-43)" fill="#626262"/>
+    <path id="Polygon_22-3" data-name="Polygon 22" d="M10.5,0,21,19H0Z" transform="translate(489.184 301.933) rotate(-43)" fill="#626262"/>
+    <path id="Polygon_3-3" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(631.015 406.314) rotate(-43)" fill="#626262"/>
+    <path id="Polygon_23-3" data-name="Polygon 23" d="M5.362,0l5.362,9.7H0Z" transform="translate(590.5 252.015) rotate(-43)" fill="#626262"/>
+    <path id="Polygon_2-3" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(863.442 330.635) rotate(-43)" fill="#2e2e2e"/>
+    <path id="Polygon_24-3" data-name="Polygon 24" d="M10.855,0,21.71,19.642H0Z" transform="translate(863.442 125.578) rotate(-43)" fill="#2e2e2e"/>
+    <rect id="Rectangle_40-3" data-name="Rectangle 40" width="15" height="15" transform="matrix(-0.883, -0.469, 0.469, -0.883, 616.458, 604)" fill="#383838"/>
+    <rect id="Rectangle_296-3" data-name="Rectangle 296" width="8.483" height="8.483" transform="matrix(-0.883, -0.469, 0.469, -0.883, 836.018, 210.246)" fill="#383838"/>
+    <rect id="Rectangle_41-3" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(873.887 705.152) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_297-3" data-name="Rectangle 297" width="14.685" height="14.685" transform="translate(567.635 205.857) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_43-3" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(721.305 279.113) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_42-3" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(864.129 449.758) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_301-3" data-name="Rectangle 301" width="14.685" height="14.685" transform="translate(750.712 640.124) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_299-3" data-name="Rectangle 299" width="14.685" height="14.685" transform="translate(674.129 114.701) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_298-3" data-name="Rectangle 298" width="14.685" height="14.685" transform="translate(736.289 372.5) rotate(-115)" fill="#383838"/>
+    <rect id="Rectangle_300-3" data-name="Rectangle 300" width="14.685" height="14.685" transform="translate(736.289 167.443) rotate(-115)" fill="#383838"/>
+    <circle id="Ellipse_15-3" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(843.5 573)" fill="#383838"/>
+    <circle id="Ellipse_106-3" data-name="Ellipse 106" cx="5" cy="5" r="5" transform="translate(448.5 254.111)" fill="#383838"/>
+    <circle id="Ellipse_16-3" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(577.5 659)" fill="#383838"/>
+    <circle id="Ellipse_18-3" data-name="Ellipse 18" cx="10" cy="10" r="10" transform="translate(557.5 366)" fill="#383838"/>
+    <circle id="Ellipse_104-3" data-name="Ellipse 104" cx="6.5" cy="6.5" r="6.5" transform="translate(704.5 210)" fill="#383838"/>
+  </g>
+</svg>

src/pages/Quiz/Options.module.scss

@@ -1,22 +1,36 @@
 .optionHolder {
     ion-list {
         ion-radio-group {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-around;
+            height: 40vh;
+
             ion-item {
-                width: 92%;
+                width: 99%;
                 margin: 0 auto;
                 --background: white;
                 border: 1px solid #DBDBDB;
                 border-radius: 25px;
-                margin: 2rem 0;
+
                 ion-label {
                     --color: #626262;
-                    font-size: 1.4rem !important;
+                    font-size: 1.2rem !important;
+                    font-weight: 200;
         
                 }
                 ion-radio {
-                    --color: var(--primary-button-color);
                     --color-checked: var(--primary-button-color);
-                    margin-left: 1.5rem;
+                    margin-left: 1.5rem;       
+                }
+            }
+
+            .highlighted {
+                box-shadow: 0px 0px 10px #00000029;
+
+                ion-radio {
+                    --color: var(--primary-button-color);
                 }
             }
         }

src/pages/Quiz/Options.tsx

@@ -4,15 +4,18 @@ import styles from './Options.module.scss';
 
 interface OwnProps {
     options: string[];
+    isSelected: (option: string) => void;
 }
 
 const Options: React.FC<OwnProps> = (props) => {
 
-    const [selected, setSelected] = useState<string>('');
+    const [selected, setSelected] = useState<string>("null");
+
+    if (selected !== "null") props.isSelected(selected);
 
     const options = props.options.map((option, key) => {
         return (
-            <IonItem lines='none' key={key}>
+            <IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}>
                 <IonLabel>{option}</IonLabel>
                 <IonRadio mode='md' slot="start" value={option} />
             </IonItem>
@@ -27,7 +30,7 @@ const Options: React.FC<OwnProps> = (props) => {
                 </IonRadioGroup>
             </IonList>
         </div>
-    )
+    );
 }
 
 export default Options;

src/pages/Quiz/Quiz.module.scss

@@ -1,3 +1,115 @@
-.container {
-    // margin: 5rem;
+.quizContainer {
+    .upfold {
+        height: 40vh;
+        background-color: #151515;
+        position: relative;
+
+        &::after {
+            content: "";
+            display: block;
+            width: 0;
+            height: 0;
+            border-left: 68vw solid #262626;
+            border-right: 75vw solid white;
+            border-top: 3rem solid transparent;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+        }
+
+        .header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 54.5%;
+            margin-left: auto;
+            height: 10vh;
+
+            h4 {
+                color: white;
+                font-size: 2.4rem;
+                font-weight: 200;
+                letter-spacing: 0.024rem;
+                margin-top: 0;
+                align-self: flex-end;
+            }
+
+            ion-icon {
+                color: white;
+                margin-right: 3rem;
+                width: 3rem;
+                height: 4rem;
+                align-self: flex-end;
+
+            }
+        }
+
+        .questionHolder {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            text-align: center;
+            color: white;
+            width: 90%;
+            margin: 0 auto;
+            height: 27vh;
+            background-image: url("../../assets/icons/desktop-particles.svg");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 150% 150%;
+
+            .questionNumber {
+                font-size: 1.3rem;
+                font-weight: 600;
+            }
+            .question {
+                font-size: 1.8rem;
+                font-weight: 300;
+            }
+
+            .quizTimer {
+                .border {
+                    width: 6rem;
+                    height: 6rem;
+                    border-radius: 50%;
+                    border: 0.2rem solid #6BD534;
+                    .time {
+                        margin-top: 1.8rem;
+                        font-size: 1.4rem;
+                    }
+                }
+            }
+        }
+    }
+
+    .quizOptions {
+        height: 60vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+
+        .options {
+            width: 90%;
+            margin: 0 auto;
+        }
+    
+        .button {
+            text-decoration: none;
+            width: 100%;
+            ion-button {
+                --background: #DDDDDD;
+                width: 90%;
+                margin: 0 auto;
+            }
+        }
+
+        .active {
+            ion-button {
+                --background: var(--primary-button-color);
+            }
+        }
+    }
+
 }

src/pages/Quiz/Quiz.tsx

@@ -1,18 +1,65 @@
-import { IonCheckbox, IonItem, IonLabel, IonPage, IonRadio } from '@ionic/react';
-import Options from './Options';
 import styles from './Quiz.module.scss';
 
+import { IonButton, IonCheckbox, IonIcon, IonItem, IonLabel, IonPage, IonRadio } from '@ionic/react';
+import Options from './Options';
+import { closeOutline } from 'ionicons/icons'
+import { Link } from 'react-router-dom';
+import { useState } from 'react';
+
+
 const options: string[] = [
     "System.out.println(“Hello, how are you?”);",
     "println('Hello, how are you?');",
     "out.print(Hello, how are you?);",
     "System.out.println(Hello, how are you?);"
-]
+];
 
 const Quiz: React.FC = () => {
+
+    const [selected, setSelected] = useState<boolean>(false);
+
+    const isSelected = (option: string) => {
+
+        if (option !== "null") {
+            setSelected(true);
+        }
+    }
+
     return (
-        <div className={styles.container}>
-            <Options options={options} />
+        <div className={styles.quizContainer}>
+            <div className={styles.upfold}>
+                <header className={styles.header}>
+                    <h4 className={styles.heading}>Quiz</h4>
+                    <IonIcon icon={closeOutline} />
+                </header>
+
+                <div className={styles.questionHolder}>
+
+                    <div className={styles.questionNumber}>Question 01</div>
+
+                    <div className={styles.question}>
+                        How would you correctly display, “Hello, how are you?”?
+                    </div>
+
+                    <div className={styles.quizTimer}>
+                        <div className={styles.border}>
+                            <div className={styles.time}>01:00</div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div className={styles.quizOptions}>
+                <div className={styles.options}>
+                    <Options options={options} isSelected={isSelected} />
+                </div>
+
+                <Link to="/" className={styles.button + " " + (selected ? styles.active : "")}>
+                    <IonButton shape="round" expand='block'>Next</IonButton>
+                </Link>
+            </div>
+
         </div>
     );
 }