From a59ed2686dedd3d69e6b6eed25819796b93c7bfa Mon Sep 17 00:00:00 2001
From: Ajay_S <sajayy01234@gmail.com>
Date: Fri, 22 Apr 2022 10:36:43 +0530
Subject: [PATCH] partially created quiz and options component

---
 src/App.tsx                                   |  4 +++
 src/common/styles/global.scss                 |  4 +++
 src/pages/Quiz/Options.module.scss            | 26 +++++++++++++++
 src/pages/Quiz/Options.tsx                    | 33 +++++++++++++++++++
 src/pages/Quiz/Quiz.module.scss               |  3 ++
 src/pages/Quiz/Quiz.tsx                       | 20 +++++++++++
 src/pages/interviewRounds/Steps.module.scss   |  1 -
 .../preliminaryRound/PreliminaryRound.tsx     |  2 +-
 8 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/Quiz/Options.module.scss
 create mode 100644 src/pages/Quiz/Options.tsx
 create mode 100644 src/pages/Quiz/Quiz.module.scss
 create mode 100644 src/pages/Quiz/Quiz.tsx

diff --git a/src/App.tsx b/src/App.tsx
index baa25b6..3d6b533 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,6 +23,7 @@ import ConnectWithUs from './pages/connectWithUs/ConnectWithUs';
 import InterviewRounds from './pages/interviewRounds/InterviewRounds';
 import SkillInformationStep from './pages/skillInformationStep/SkillInformationStep';
 import PreliminaryRound from './pages/preliminaryRound/PreliminaryRound';
+import Quiz from './pages/Quiz/Quiz';
 
 
 
@@ -38,6 +39,9 @@ const App: React.FC = () => (
         <Route exact path="/skillInformationStep">
           <SkillInformationStep />
         </Route>
+        <Route exact path="/Quiz">
+          <Quiz />
+        </Route>
         <Route exact path="/PreliminaryRound">
           <PreliminaryRound />
         </Route>
diff --git a/src/common/styles/global.scss b/src/common/styles/global.scss
index affe456..89cd28b 100644
--- a/src/common/styles/global.scss
+++ b/src/common/styles/global.scss
@@ -16,3 +16,7 @@ ion-button {
     font-family: 'Poppins', sans-serif;
 }
 
+ion-label {
+    font-family: 'Poppins', sans-serif !important;
+}
+
diff --git a/src/pages/Quiz/Options.module.scss b/src/pages/Quiz/Options.module.scss
new file mode 100644
index 0000000..5f6b06a
--- /dev/null
+++ b/src/pages/Quiz/Options.module.scss
@@ -0,0 +1,26 @@
+.optionHolder {
+    ion-list {
+        ion-radio-group {
+            ion-item {
+                width: 92%;
+                margin: 0 auto;
+                --background: white;
+                border: 1px solid #DBDBDB;
+                border-radius: 25px;
+                margin: 2rem 0;
+                ion-label {
+                    --color: #626262;
+                    font-size: 1.4rem !important;
+        
+                }
+                ion-radio {
+                    --color: var(--primary-button-color);
+                    --color-checked: var(--primary-button-color);
+                    margin-left: 1.5rem;
+                }
+            }
+        }
+    }
+
+
+}
\ No newline at end of file
diff --git a/src/pages/Quiz/Options.tsx b/src/pages/Quiz/Options.tsx
new file mode 100644
index 0000000..e1a589f
--- /dev/null
+++ b/src/pages/Quiz/Options.tsx
@@ -0,0 +1,33 @@
+import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+import { useState } from 'react';
+import styles from './Options.module.scss';
+
+interface OwnProps {
+    options: string[];
+}
+
+const Options: React.FC<OwnProps> = (props) => {
+
+    const [selected, setSelected] = useState<string>('');
+
+    const options = props.options.map((option, key) => {
+        return (
+            <IonItem lines='none' key={key}>
+                <IonLabel>{option}</IonLabel>
+                <IonRadio mode='md' slot="start" value={option} />
+            </IonItem>
+        );
+    });
+
+    return (
+        <div className={styles.optionHolder}>
+            <IonList>
+                <IonRadioGroup onIonChange={e => setSelected(e.detail.value)}>
+                    {options}
+                </IonRadioGroup>
+            </IonList>
+        </div>
+    )
+}
+
+export default Options;
\ No newline at end of file
diff --git a/src/pages/Quiz/Quiz.module.scss b/src/pages/Quiz/Quiz.module.scss
new file mode 100644
index 0000000..e85c3c2
--- /dev/null
+++ b/src/pages/Quiz/Quiz.module.scss
@@ -0,0 +1,3 @@
+.container {
+    // margin: 5rem;
+}
\ No newline at end of file
diff --git a/src/pages/Quiz/Quiz.tsx b/src/pages/Quiz/Quiz.tsx
new file mode 100644
index 0000000..7e979f8
--- /dev/null
+++ b/src/pages/Quiz/Quiz.tsx
@@ -0,0 +1,20 @@
+import { IonCheckbox, IonItem, IonLabel, IonPage, IonRadio } from '@ionic/react';
+import Options from './Options';
+import styles from './Quiz.module.scss';
+
+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?);"
+]
+
+const Quiz: React.FC = () => {
+    return (
+        <div className={styles.container}>
+            <Options options={options} />
+        </div>
+    );
+}
+
+export default Quiz;
\ No newline at end of file
diff --git a/src/pages/interviewRounds/Steps.module.scss b/src/pages/interviewRounds/Steps.module.scss
index cb86c45..3ff3c34 100644
--- a/src/pages/interviewRounds/Steps.module.scss
+++ b/src/pages/interviewRounds/Steps.module.scss
@@ -1,5 +1,4 @@
 ion-item {
-    // background-color: #F7F7F7;
     --background: #F7F7F7;
     width: 100vw;
     border-bottom: 0.2rem solid #ffffff;
diff --git a/src/pages/preliminaryRound/PreliminaryRound.tsx b/src/pages/preliminaryRound/PreliminaryRound.tsx
index 7e3a984..31b6d01 100644
--- a/src/pages/preliminaryRound/PreliminaryRound.tsx
+++ b/src/pages/preliminaryRound/PreliminaryRound.tsx
@@ -38,7 +38,7 @@ const PreliminaryRound: React.FC = () => {
                         </div>
                     </div>
 
-                    <IonButton shape="round" expand='block'>Done!</IonButton>
+                    <IonButton shape="round" expand='block'>Start quiz</IonButton>
 
                     <div className={styles.wish}>All the best!</div>
                 </div>