partially created quiz and options component

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>

src/common/styles/global.scss

@@ -16,3 +16,7 @@ ion-button {
     font-family: 'Poppins', sans-serif;
 }
 
+ion-label {
+    font-family: 'Poppins', sans-serif !important;
+}
+

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;
+                }
+            }
+        }
+    }
+
+
+}

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;

src/pages/Quiz/Quiz.module.scss

@@ -0,0 +1,3 @@
+.container {
+    // margin: 5rem;
+}

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;

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;

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>