created custom radio button component

src/App.tsx

@@ -39,7 +39,6 @@ import Celebration from './pages/celebration/Celebration';
 import SignaturePhoto from './pages/joiningLetter/SignaturePhoto';
 import TechinicalInterviewResults from './pages/technicalInterview/TechinicalInterviewResults';
 
-
 setupIonicReact();
 
 const App: React.FC = () => (

src/components/RadioButton/RadioButton.module.scss

@@ -0,0 +1,29 @@
+.radioHolder {
+    display: flex;
+    align-items: center;
+    min-width: 33.5rem;
+    margin: 0 auto;
+    --background: white;
+    border: 1px solid #DBDBDB;
+    border-radius: 25px;
+    height: 4rem;
+    
+    .icon {
+        width: 2rem;
+        height: 2rem;
+        margin-left: 1.5rem;
+    }
+    .option {
+        margin-left: 2rem;
+        color: #626262;
+        font-size: 1.2rem;
+        font-weight: 200;
+    }
+
+    &.highlighted {
+        box-shadow: 0px 0px 10px #00000029;
+        .icon {
+            color: var(--primary-button-color);
+        }
+    }
+}

src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,35 @@
+import styles from "./RadioButton.module.scss";
+import { radioButtonOff, radioButtonOn } from "ionicons/icons";
+import { IonIcon } from "@ionic/react";
+import { useEffect, useState } from "react";
+
+interface OwnProps {
+    option: string;
+    isChecked: boolean;
+    isHighlighted?: boolean;
+}
+
+const RadioButton: React.FC<OwnProps> = (props) => {
+
+    const [icon, setIcon] = useState(radioButtonOff);
+
+    useEffect(() => {
+        if (props.isChecked) {
+            setIcon(radioButtonOn);
+        } else {
+            setIcon(radioButtonOff);
+        }
+
+    }, [props.isChecked]);
+
+    return (
+        <div className={styles.radioContent}>
+            <div className={styles.radioHolder + " " + (props.isChecked ? styles.highlighted : "")}>
+                <IonIcon icon={icon} className={styles.icon} />
+                <div className={styles.option}>{props.option}</div>
+            </div>
+        </div>
+    );
+}
+
+export default RadioButton;

src/mockData/QuizDetails.ts

@@ -12,7 +12,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         ],
         answer: ["System.out.println('Hello, how are you?');"],
         result: false,
-        timeLimit: 5,
+        timeLimit: 5000,
         type: OptionType.SINGLE_SELECT
     },
     {
@@ -25,7 +25,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         ],
         answer: ["alert('Hello World');"],
         result: false,
-        timeLimit: 10,
+        timeLimit: 5,
         type: OptionType.SINGLE_SELECT
 
     },
@@ -63,6 +63,19 @@ const QUIZ_DETAILS: QuizDetails[] = [
         timeLimit: 35,
         type: OptionType.MULTI_SELECT
     },
+    {
+        question: "is javascript",
+        options: [
+            "A",
+            "B",
+            "C",
+            "D"
+        ],
+        answer: ["B", "C"],
+        result: false,
+        timeLimit: 35,
+        type: OptionType.MULTI_SELECT
+    }
 ];
 
 export default QUIZ_DETAILS;

src/pages/quiz/Options.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import styles from './Options.module.scss';
 import { OptionType } from '../../models/QuizDetails'
+import RadioButton from '../../components/RadioButton/RadioButton';
 
 interface OwnProps {
     options: string[] | undefined;
@@ -22,10 +23,11 @@ const Options: React.FC<OwnProps> = (props) => {
     const inputRef = useRef<HTMLTextAreaElement>(null);
 
     useEffect(() => {
-        setSelected(undefined);
+        setSelected("");
         setSelectedOptions([]);
         setTextInput("");
-    }, [props.options]);
+
+    }, [props.questionNumber]);
 
     const selectChecked = (option: string) => {
         let newOption: string[] = [];
@@ -43,7 +45,8 @@ const Options: React.FC<OwnProps> = (props) => {
                 setAnswers(answers + 1);
             }
         } else if (props.type === "multiSelect") {
-            if (props.answer.length === selectedOptions.length && props.answer.sort().join(',') === selectedOptions.sort().join(',')) {
+            if (props.answer.length === selectedOptions.length &&
+                props.answer.sort().join(',') === selectedOptions.sort().join(',')) {
 
                 setAnswers(answers + 1);
             }
@@ -55,21 +58,22 @@ const Options: React.FC<OwnProps> = (props) => {
     }
 
     const handleInput = () => {
-        setTextInput(inputRef.current?.value!)
+        setTextInput(inputRef.current?.value!);
     }
 
     const setAnswer = () => {
         localStorage.setItem("answer", answers.toString());
     }
 
+    const getAnswer = () => {
 
+    }
 
     const options = props.options!.map((option, key) => {
         return (
-            <IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}>
-                <IonLabel>{option}</IonLabel>
-                <IonRadio mode='md' slot="start" value={option} />
-            </IonItem>
+            <div key={key} onClick={() => setSelected(option)}>
+                <RadioButton option={option} isChecked={selected === option} />
+            </div>
         );
     });
 
@@ -92,9 +96,9 @@ const Options: React.FC<OwnProps> = (props) => {
         <div className={styles.optionHolder}>
             <IonList>
                 {props.type === "singleSelect" &&
-                    <IonRadioGroup onIonChange={e => setSelected(e.detail.value)} allowEmptySelection={true} className={styles.options}>
+                    <div className={styles.options}>
                         {options}
-                    </IonRadioGroup>
+                    </div>
                 }
                 {props.type === "multiSelect" &&
                     <div className={styles.options}>