created mock quiz data and logic changes to quiz component

src/mockData/QuizDetails.tsx

@@ -0,0 +1,57 @@
+interface QuizDetails {
+    question: string;
+    options?: string[];
+    answer: string[];
+    result: boolean;
+    timeLimit: number;
+}
+
+
+let quizDetails: QuizDetails[] = [
+    {
+        question: "How would you correctly display, “Hello, how are you?”?",
+        options: [
+            "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?);"
+        ],
+        answer: ["System.out.println('Hello, how are you?');"],
+        result: false,
+        timeLimit: 0.1
+    },
+    {
+        question: "How do you write 'Hello World' in an alert box?",
+        options: [
+            "msgBox('Hello World')",
+            "alertBox('Hello World');",
+            "msg('Hello World');",
+            "alert('Hello World');"
+        ],
+        answer: ["alert('Hello World');"],
+        result: false,
+        timeLimit: 0.2
+    },
+    {
+        question: "is javascript",
+        options: [
+            "A",
+            "B",
+            "C",
+            "D"
+        ],
+        answer: ["B", "C"],
+        result: false,
+        timeLimit: 1
+    },
+    {
+        question: "Is javascript single threaded or multi threaded? enter the answer in the below box ",
+        options: [],
+        answer: ["single threaded"],
+        result: false,
+        timeLimit: 1
+    }
+];
+
+
+export default quizDetails;

src/mockData/StepDetails.tsx

@@ -7,7 +7,7 @@ import closingDocs from '../assets/icons/Closing_Docs.svg';
 import joiningLetter from '../assets/icons/Joining_Letter.svg';
 import Celebrations from '../assets/icons/Celebrations.svg';
 
-interface stepDetail {
+interface StepDetail {
     stepNumber: number;
     stepName: string;
     descriptionImage: string;
@@ -18,7 +18,7 @@ interface stepDetail {
 }
 
 
-let steps: stepDetail[] = [
+let steps: StepDetail[] = [
     {
         stepNumber: 1,
         stepName: "Skill Information",

src/pages/interviewRounds/Steps.module.scss

@@ -38,6 +38,7 @@ ion-item {
                 font-size: 1.4rem;
                 font-weight: 600;
             }
+            
             .heading {
                 margin: 0;
                 color: #363636;

src/pages/quiz/Options.module.scss

@@ -36,5 +36,21 @@
         }
     }
 
+    .button {
+        text-decoration: none;
+        width: 100%;
+        margin-top: 4rem;
+        ion-button {
+            --background: #DDDDDD;
+            width: 90%;
+            margin: 0 auto;
+        }
+    }
+
+    .active {
+        ion-button {
+            --background: var(--primary-button-color);
+        }
+    }
 
 }

src/pages/quiz/Options.tsx

@@ -1,19 +1,19 @@
-import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+import { IonButton, IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
 import { useState } from 'react';
 import styles from './Options.module.scss';
 
 interface OwnProps {
-    options: string[];
-    isSelected: (option: string) => void;
+    options: string[] | undefined;
+    updateQuestionNumber: () => void;
 }
 
 const Options: React.FC<OwnProps> = (props) => {
 
-    const [selected, setSelected] = useState<string>("null");
+    const [selected, setSelected] = useState<string | undefined>(undefined);
 
-    if (selected !== "null") props.isSelected(selected);
+    // console.log(selected);
 
-    const options = props.options.map((option, key) => {
+    const options = props.options!.map((option, key) => {
         return (
             <IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}>
                 <IonLabel>{option}</IonLabel>
@@ -29,6 +29,11 @@ const Options: React.FC<OwnProps> = (props) => {
                     {options}
                 </IonRadioGroup>
             </IonList>
+
+            <div className={styles.button + " " + (selected ? styles.active : "")}
+                onClick={() => props.updateQuestionNumber()}>
+                <IonButton shape="round" expand='block'>Next</IonButton>
+            </div>
         </div>
     );
 }

src/pages/quiz/Question.tsx

@@ -7,6 +7,7 @@ interface OwnProp {
     questionNumber: number;
     question: string;
     timeLimit: number;
+    updateQuestionNumber: () => void;
 }
 
 
@@ -31,9 +32,16 @@ const Question: React.FC<OwnProp> = (props) => {
             clearTimeout(timeout);
         }
 
-        return () => clearTimeout(timeout);;
+        console.log(seconds);
+
+        if (seconds === 0) {
+            props.updateQuestionNumber();
+        }
+
+        return () => clearTimeout(timeout);
     }, [seconds]);
 
+
     const renderTime = () => {
         return (
             <div className={styles.time}>

src/pages/quiz/Quiz.module.scss

@@ -72,6 +72,10 @@
             }
         }
 
+        // ion-activated {
+        //     --background: var(--primary-button-color);
+        // }
+
         .active {
             ion-button {
                 --background: var(--primary-button-color);

src/pages/quiz/Quiz.tsx

@@ -4,28 +4,23 @@ import { IonButton, IonIcon } from '@ionic/react';
 import Options from './Options';
 import { closeOutline } from 'ionicons/icons'
 import { Link } from 'react-router-dom';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Question from './Question';
-
-// move to mock data
-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?);"
-];
+import quizDetails from '../../mockData/QuizDetails';
 
 const Quiz: React.FC = () => {
 
-    const [selected, setSelected] = useState<boolean>(false);
-
-    const isSelected = (option: string) => {
+    const [questionNumber, setQuestionNumber] = useState<number>(1);
 
-        if (option !== "null") {
-            setSelected(true);
+    const updateQuestionNumber = () => {
+        console.log("update")
+        if (quizDetails.length > questionNumber) {
+            setQuestionNumber((questionNumber) => questionNumber + 1);
         }
     }
 
+    console.log("no", questionNumber);
+
     return (
         <div className={styles.quizContainer}>
             <div className={styles.upfold}>
@@ -36,20 +31,22 @@ const Quiz: React.FC = () => {
                     </Link>
                 </header>
 
-                <Question question='How would you correctly display, “Hello, how are you?”?'
-                    questionNumber={1}
-                    timeLimit={2.5} />
+                <Question question={quizDetails[questionNumber - 1].question}
+                    questionNumber={questionNumber}
+                    timeLimit={quizDetails[questionNumber - 1].timeLimit}
+                    updateQuestionNumber={updateQuestionNumber} />
 
             </div>
 
             <div className={styles.quizOptions}>
                 <div className={styles.options}>
-                    <Options options={options} isSelected={isSelected} />
+                    <Options options={quizDetails[questionNumber - 1].options} updateQuestionNumber={updateQuestionNumber} />
                 </div>
 
-                <Link to="/" className={styles.button + " " + (selected ? styles.active : "")}>
+                {/* <Link to="/" className={styles.button + " " + (selected ? styles.active : "")}>
                     <IonButton shape="round" expand='block'>Next</IonButton>
-                </Link>
+                </Link> */}
+
             </div>
 
         </div>