calculated quiz logic and added the quiz results in results page

src/mockData/QuizDetails.ts

@@ -47,7 +47,7 @@ const Quiz_Details: QuizDetails[] = [
         answer: ["single threaded"],
         result: false,
         timeLimit: 40,
-        type: "textInpit"
+        type: "textInput"
     },
     {
         question: "is javascript",
@@ -64,5 +64,13 @@ const Quiz_Details: QuizDetails[] = [
     },
 ];
 
+export let test = [
+    {
+        a: "ss"
+    },
+    {
+        a: "aa"
+    },
+]
 
 export default Quiz_Details;

src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx

@@ -7,6 +7,8 @@ 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 (
@@ -18,7 +20,7 @@ const PreliminaryRoundResults: React.FC = () => {
                         <IonIcon src={goodJobIcon} />
                         <div className={styles.score}>
                             <h5>You have scored</h5>
-                            <h5 className={styles.result}>85%</h5>
+                            <h5 className={styles.result}>{(parseInt(localStorage.getItem("answer")!) / Quiz_Details.length) * 100}%</h5>
                         </div>
                         <p className={styles.description}>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
@@ -29,11 +31,11 @@ const PreliminaryRoundResults: React.FC = () => {
                         <div className={styles.resultsHolder}>
                             <div className={styles.correct}>
                                 <IonIcon icon={checkmarkCircle} />
-                                <div>17 Questions</div>
+                                <div>{localStorage.getItem("answer")} Questions</div>
                             </div>
                             <div className={styles.wrong}>
                                 <IonIcon icon={closeCircle} />
-                                <div>3 Questions</div>
+                                <div>{Quiz_Details.length - parseInt(localStorage.getItem("answer")!)} Questions</div>
                             </div>
                         </div>
                         <div className={styles.buttonHolder}>

src/pages/quiz/Options.tsx

@@ -1,27 +1,31 @@
 import { IonButton, IonCheckbox, IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
 import { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
 import Input from '../../components/formInput/Input';
 import styles from './Options.module.scss';
 
 interface OwnProps {
     options: string[] | undefined;
     type: string;
+    answer: string[];
+    lastQuestion: boolean;
+    questionNumber: number;
     updateQuestionNumber: () => void;
+
 }
 
 const Options: React.FC<OwnProps> = (props) => {
 
     const [selected, setSelected] = useState<string | undefined>(undefined);
     const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
-    const [textInput, setTextInput] = useState<String>("");
-    const [answers, setAnswers] = useState<string[]>([]);
+    const [textInput, setTextInput] = useState<string>("");
+    const [answers, setAnswers] = useState<number>(0);
     const inputRef = useRef<HTMLInputElement>(null);
 
-
     useEffect(() => {
-        console.log("render");
         setSelected(undefined);
         setSelectedOptions([]);
+        setTextInput("");
     }, [props.options]);
 
     const selectChecked = (option: string) => {
@@ -34,14 +38,37 @@ const Options: React.FC<OwnProps> = (props) => {
         setSelectedOptions(newOption);
     }
 
-    console.log(selectedOptions);
-    console.log(selected);
+    const validateAnswer = () => {
+        if (props.type === "singleSelect") {
+            if (props.answer.includes(selected!)) {
+                setAnswers(answers + 1);
+            }
+        } else if (props.type === "multiSelect") {
+            if (props.answer.length === selectedOptions.length && props.answer.sort().join(',') === selectedOptions.sort().join(',')) {
+
+                setAnswers(answers + 1);
+            }
+        } else if (props.type === "textInput") {
+            if (props.answer.includes(textInput)) {
+                setAnswers(answers + 1);
+            }
+        }
+    }
 
     const handleInput = () => {
         setTextInput(inputRef.current?.value!)
-        console.log(textInput);
     }
 
+    if ((selected || textInput)) {
+        console.log("decision");
+    }
+
+    if (props.lastQuestion) {
+        console.log("last");
+        localStorage.setItem("answer", answers.toString());
+    }
+
+
     const options = props.options!.map((option, key) => {
         return (
             <IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}>
@@ -75,7 +102,7 @@ const Options: React.FC<OwnProps> = (props) => {
                         {MultiSelectOptions}
                     </div>
                 }
-                {props.type === "textInpit" &&
+                {props.type === "textInput" &&
                     <div className={styles.options}>
                         <input
                             type="text"
@@ -85,13 +112,20 @@ const Options: React.FC<OwnProps> = (props) => {
                             onChange={handleInput} />
                     </div>
                 }
-
             </IonList>
 
-            <div className={styles.button + " " + (selected ? styles.active : "")}
-                onClick={() => props.updateQuestionNumber()}>
-                <IonButton shape="round" expand='block'>Next</IonButton>
-            </div>
+            {!props.lastQuestion &&
+                <div className={styles.button + " " + ((selected || selectedOptions.length > 0 || textInput) ? styles.active : "")}
+                    onClick={(selected || selectedOptions.length > 0 || textInput) ? () => { props.updateQuestionNumber(); validateAnswer(); } : undefined}>
+                    <IonButton shape="round" expand='block'>Next</IonButton>
+                </div>
+            }
+
+            {props.lastQuestion &&
+                < Link to="/preliminaryRoundResults" className={styles.button + " " + (selected ? styles.active : "")}>
+                    <IonButton shape="round" expand='block'>Next Step</IonButton>
+                </Link>
+            }
         </div >
     );
 }

src/pages/quiz/Quiz.tsx

@@ -41,7 +41,10 @@ const Quiz: React.FC = () => {
                     <Options
                         options={Quiz_Details[questionNumber - 1].options}
                         updateQuestionNumber={updateQuestionNumber}
-                        type={Quiz_Details[questionNumber - 1].type} />
+                        type={Quiz_Details[questionNumber - 1].type}
+                        answer={Quiz_Details[questionNumber - 1].answer}
+                        lastQuestion={Quiz_Details.length === questionNumber}
+                        questionNumber={questionNumber} />
                 </div>
 
                 {/* <Link to="/" className={styles.button + " " + (selected ? styles.active : "")}>