isCheckbox prop to RadioButton component and replaced it with Ion checkbox

src/components/RadioButton/RadioButton.module.scss

@@ -7,7 +7,7 @@
     border: 1px solid #DBDBDB;
     border-radius: 25px;
     height: 4rem;
-    
+
     .icon {
         width: 2rem;
         height: 2rem;
@@ -24,6 +24,7 @@
         box-shadow: 0px 0px 10px #00000029;
         .icon {
             color: var(--primary-button-color);
+            transform: scale(1.1);
         }
     }
 }

src/components/RadioButton/RadioButton.tsx

@@ -1,5 +1,5 @@
 import styles from "./RadioButton.module.scss";
-import { radioButtonOff, radioButtonOn } from "ionicons/icons";
+import { radioButtonOff, radioButtonOn, checkmarkCircle } from "ionicons/icons";
 import { IonIcon } from "@ionic/react";
 import { useEffect, useState } from "react";
 
@@ -7,6 +7,7 @@ interface OwnProps {
     option: string;
     isChecked: boolean;
     isHighlighted?: boolean;
+    isCheckBox?: boolean;
 }
 
 const RadioButton: React.FC<OwnProps> = (props) => {
@@ -16,6 +17,9 @@ const RadioButton: React.FC<OwnProps> = (props) => {
     useEffect(() => {
         if (props.isChecked) {
             setIcon(radioButtonOn);
+            if (props.isCheckBox) {
+                setIcon(checkmarkCircle);
+            }
         } else {
             setIcon(radioButtonOff);
         }

src/mockData/QuizDetails.ts

@@ -12,7 +12,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         ],
         answer: ["System.out.println('Hello, how are you?');"],
         result: false,
-        timeLimit: 5000,
+        timeLimit: 60,
         type: OptionType.SINGLE_SELECT
     },
     {
@@ -25,7 +25,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         ],
         answer: ["alert('Hello World');"],
         result: false,
-        timeLimit: 5,
+        timeLimit: 30,
         type: OptionType.SINGLE_SELECT
 
     },
@@ -39,7 +39,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         ],
         answer: ["B", "C"],
         result: false,
-        timeLimit: 60,
+        timeLimit: 120,
         type: OptionType.MULTI_SELECT
     },
     {
@@ -47,7 +47,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         options: [],
         answer: ["single threaded"],
         result: false,
-        timeLimit: 60,
+        timeLimit: 120,
         type: OptionType.INPUT_TEXT
     },
     {
@@ -60,7 +60,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         ],
         answer: ["B", "C"],
         result: false,
-        timeLimit: 35,
+        timeLimit: 60,
         type: OptionType.MULTI_SELECT
     },
     {
@@ -73,7 +73,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         ],
         answer: ["B", "C"],
         result: false,
-        timeLimit: 35,
+        timeLimit: 60,
         type: OptionType.MULTI_SELECT
     }
 ];

src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx

@@ -18,7 +18,7 @@ const PreliminaryRoundResults: React.FC = () => {
                         <IonIcon src={goodJobIcon} />
                         <div className={styles.score}>
                             <h5>You have scored</h5>
-                            <h5 className={styles.result}>{(parseInt(localStorage.getItem("answer")!) / Quiz_Details.length) * 100}%</h5>
+                            <h5 className={styles.result}>{((parseInt(localStorage.getItem("answer")!) / Quiz_Details.length) * 100).toFixed(2)}%</h5>
                         </div>
                         <p className={styles.description}>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

src/pages/quiz/Options.tsx

@@ -65,10 +65,6 @@ const Options: React.FC<OwnProps> = (props) => {
         localStorage.setItem("answer", answers.toString());
     }
 
-    const getAnswer = () => {
-
-    }
-
     const options = props.options!.map((option, key) => {
         return (
             <div key={key} onClick={() => setSelected(option)}>
@@ -79,16 +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={(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>
+            <div key={key} onClick={() => selectChecked(option)}>
+                <RadioButton
+                    isCheckBox={true}
+                    option={option}
+                    isChecked={selectedOptions.includes(option)} />
+            </div>
         );
     });