fixed multiselect checkbox style and added enum for option type

src/mockData/QuizDetails.ts

@@ -1,4 +1,5 @@
-import { QuizDetails } from "../models/QuizDetails";
+import { QuizDetails, OptionType } from "../models/QuizDetails";
+
 
 const QUIZ_DETAILS: QuizDetails[] = [
     {
@@ -12,7 +13,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         answer: ["System.out.println('Hello, how are you?');"],
         result: false,
         timeLimit: 5,
-        type: "singleSelect"
+        type: OptionType.SINGLE_SELECT
     },
     {
         question: "How do you write 'Hello World' in an alert box?",
@@ -25,7 +26,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         answer: ["alert('Hello World');"],
         result: false,
         timeLimit: 10,
-        type: "singleSelect"
+        type: OptionType.SINGLE_SELECT
 
     },
     {
@@ -38,8 +39,8 @@ const QUIZ_DETAILS: QuizDetails[] = [
         ],
         answer: ["B", "C"],
         result: false,
-        timeLimit: 15,
-        type: "multiSelect"
+        timeLimit: 60,
+        type: OptionType.MULTI_SELECT
     },
     {
         question: "Is javascript single threaded or multi threaded? enter the answer in the below box ",
@@ -47,7 +48,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         answer: ["single threaded"],
         result: false,
         timeLimit: 60,
-        type: "textInput"
+        type: OptionType.INPUT_TEXT
     },
     {
         question: "is javascript",
@@ -60,17 +61,8 @@ const QUIZ_DETAILS: QuizDetails[] = [
         answer: ["B", "C"],
         result: false,
         timeLimit: 35,
-        type: "multiSelect"
+        type: OptionType.MULTI_SELECT
     },
 ];
 
-export let test = [
-    {
-        a: "ss"
-    },
-    {
-        a: "aa"
-    },
-]
-
 export default QUIZ_DETAILS;

src/models/QuizDetails.ts

@@ -1,8 +1,14 @@
+export enum OptionType {
+    SINGLE_SELECT = "singleSelect",
+    MULTI_SELECT = "multiSelect",
+    INPUT_TEXT = "textInput"
+}
+
 export interface QuizDetails {
     question: string;
     options?: string[];
     answer: string[];
     result: boolean;
     timeLimit: number;
-    type: string;
+    type: OptionType;
 }

src/pages/interviewRounds/StepDescreption.tsx

@@ -50,9 +50,9 @@ const StepsDescription: React.FC<Props> = (props) => {
             </p>
 
             {props.isRoundCompleted ?
-                <Link to="/interviewRounds" className={styles.button}>
+                <div className={styles.button}>
                     <IonButton shape="round" expand='block' disabled={true}>Completed</IonButton>
-                </Link>
+                </div>
                 :
                 <Link to={props.link} className={styles.button}>
                     <IonButton shape="round" expand='block'>{props.buttonText}</IonButton>

src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx

@@ -2,15 +2,13 @@ import styles from "./PreliminaryRoundResults.module.scss"
 
 import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
 import StepHeader from "../../components/stepsHeader/StepHeader";
-
 import goodJobIcon from "../../assets/icons/good_job.svg";
-
 import { closeCircle, checkmarkCircle } from "ionicons/icons";
 import { Link } from "react-router-dom";
 import Quiz_Details from '../../mockData/QuizDetails';
 
-
 const PreliminaryRoundResults: React.FC = () => {
+
     return (
         <IonPage>
             <StepHeader stepNumber={2} roundName="Preliminary Round" />

src/pages/quiz/Options.module.scss

@@ -30,21 +30,25 @@
 
         // styles for multiselect checkbox
         .checkBoxHolder {
-            border: 0.2rem solid #707070;
+            border: 0.2rem solid lighten($color: #707070, $amount: 20);
             border-radius: 2.5rem;
             width: 2rem;
             height: 2rem;
-            margin-left: 2rem;
+            margin-left: 1.5rem;
 
             .checkBox {
                 --background-checked: var(--primary-button-color);
                 --checkmark-color: var(--primary-button-color);
                 --border-width: 0;
                 margin: 0;
-                margin-top: 0.26rem;
-                margin-left: 0.27rem;
-                width: 1.2rem;
-                height: 1.2rem;
+                margin-top: 0.3rem;
+                margin-left: 0.3rem;
+                width: 1rem;
+                height: 1rem;
+            }
+
+            &.activeCheck {
+                border: 0.2rem solid var(--primary-button-color);
             }
         }
 

src/pages/quiz/Options.tsx

@@ -2,15 +2,15 @@ import { IonButton, IonCheckbox, IonItem, IonLabel, IonList, IonRadio, IonRadioG
 import { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import styles from './Options.module.scss';
+import { OptionType } from '../../models/QuizDetails'
 
 interface OwnProps {
     options: string[] | undefined;
-    type: string;
+    type: OptionType;
     answer: string[];
     lastQuestion: boolean;
     questionNumber: number;
     updateQuestionNumber: () => void;
-
 }
 
 const Options: React.FC<OwnProps> = (props) => {
@@ -75,8 +75,12 @@ const Options: React.FC<OwnProps> = (props) => {
     const MultiSelectOptions = props.options!.map((option, key) => {
         return (
             <IonItem lines='none' key={key} className={(selectedOptions.includes(option)) ? styles.highlighted : ""}>
-                <div className={styles.checkBoxHolder}>
-                    <IonCheckbox slot="start" mode='ios' className={styles.checkBox} onIonChange={e => selectChecked(option)} />
+                <div className={(selectedOptions.includes(option)) ? (styles.activeCheck + " " + styles.checkBoxHolder) : styles.checkBoxHolder}>
+                    <IonCheckbox
+                        slot="start"
+                        mode='ios'
+                        className={styles.checkBox}
+                        onIonChange={e => selectChecked(option)} />
                 </div>
                 <IonLabel className={styles.multiSelectLabel}>{option}</IonLabel>
             </IonItem>

src/pages/quiz/Quiz.tsx

@@ -1,6 +1,6 @@
 import styles from './Quiz.module.scss';
 
-import { IonButton, IonIcon } from '@ionic/react';
+import { IonIcon } from '@ionic/react';
 import Options from './Options';
 import { closeOutline } from 'ionicons/icons'
 import { Link } from 'react-router-dom';
@@ -11,7 +11,7 @@ import QUIZ_DETAILS from '../../mockData/QuizDetails';
 const Quiz: React.FC = () => {
 
     const [questionNumber, setQuestionNumber] = useState<number>(1);
-    const timeLimit = QUIZ_DETAILS[questionNumber - 1].timeLimit;
+    const currentQuestion = QUIZ_DETAILS[questionNumber - 1];
 
     const updateQuestionNumber = () => {
         if (QUIZ_DETAILS.length > questionNumber) {
@@ -30,9 +30,9 @@ const Quiz: React.FC = () => {
                 </header>
 
                 <Question
-                    question={QUIZ_DETAILS[questionNumber - 1].question}
+                    question={currentQuestion.question}
                     questionNumber={questionNumber}
-                    timeLimit={timeLimit}
+                    timeLimit={currentQuestion.timeLimit}
                     updateQuestionNumber={updateQuestionNumber} />
 
             </div>
@@ -40,10 +40,10 @@ const Quiz: React.FC = () => {
             <div className={styles.quizOptions}>
                 <div className={styles.options}>
                     <Options
-                        options={QUIZ_DETAILS[questionNumber - 1].options}
+                        options={currentQuestion.options}
                         updateQuestionNumber={updateQuestionNumber}
-                        type={QUIZ_DETAILS[questionNumber - 1].type}
-                        answer={QUIZ_DETAILS[questionNumber - 1].answer}
+                        type={currentQuestion.type}
+                        answer={currentQuestion.answer}
                         lastQuestion={QUIZ_DETAILS.length === questionNumber}
                         questionNumber={questionNumber} />
                 </div>