From 3ecf6bd356b5bb508a9d25150a455626181cc38c Mon Sep 17 00:00:00 2001 From: Ajay_S Date: Mon, 9 May 2022 11:24:50 +0530 Subject: [PATCH] fixed multiselect checkbox style and added enum for option type --- src/mockData/QuizDetails.ts | 24 +++++++------------ src/models/QuizDetails.ts | 8 ++++++- src/pages/interviewRounds/StepDescreption.tsx | 4 ++-- .../PreliminaryRoundResults.tsx | 4 +--- src/pages/quiz/Options.module.scss | 16 ++++++++----- src/pages/quiz/Options.tsx | 12 ++++++---- src/pages/quiz/Quiz.tsx | 14 +++++------ 7 files changed, 43 insertions(+), 39 deletions(-) diff --git a/src/mockData/QuizDetails.ts b/src/mockData/QuizDetails.ts index 29e7b50..10a70a2 100644 --- a/src/mockData/QuizDetails.ts +++ b/src/mockData/QuizDetails.ts @@ -1,4 +1,5 @@ -import { QuizDetails } from "../models/QuizDetails"; +import { QuizDetails, OptionType } from "../models/QuizDetails"; + const QUIZ_DETAILS: QuizDetails[] = [ { @@ -12,7 +13,7 @@ const QUIZ_DETAILS: QuizDetails[] = [ answer: ["System.out.println('Hello, how are you?');"], result: false, timeLimit: 5, - type: "singleSelect" + type: OptionType.SINGLE_SELECT }, { question: "How do you write 'Hello World' in an alert box?", @@ -25,7 +26,7 @@ const QUIZ_DETAILS: QuizDetails[] = [ answer: ["alert('Hello World');"], result: false, timeLimit: 10, - type: "singleSelect" + type: OptionType.SINGLE_SELECT }, { @@ -38,8 +39,8 @@ const QUIZ_DETAILS: QuizDetails[] = [ ], answer: ["B", "C"], result: false, - timeLimit: 15, - type: "multiSelect" + timeLimit: 60, + type: OptionType.MULTI_SELECT }, { question: "Is javascript single threaded or multi threaded? enter the answer in the below box ", @@ -47,7 +48,7 @@ const QUIZ_DETAILS: QuizDetails[] = [ answer: ["single threaded"], result: false, timeLimit: 60, - type: "textInput" + type: OptionType.INPUT_TEXT }, { question: "is javascript", @@ -60,17 +61,8 @@ const QUIZ_DETAILS: QuizDetails[] = [ answer: ["B", "C"], result: false, timeLimit: 35, - type: "multiSelect" + type: OptionType.MULTI_SELECT }, ]; -export let test = [ - { - a: "ss" - }, - { - a: "aa" - }, -] - export default QUIZ_DETAILS; \ No newline at end of file diff --git a/src/models/QuizDetails.ts b/src/models/QuizDetails.ts index ee4564e..df5983e 100644 --- a/src/models/QuizDetails.ts +++ b/src/models/QuizDetails.ts @@ -1,8 +1,14 @@ +export enum OptionType { + SINGLE_SELECT = "singleSelect", + MULTI_SELECT = "multiSelect", + INPUT_TEXT = "textInput" +} + export interface QuizDetails { question: string; options?: string[]; answer: string[]; result: boolean; timeLimit: number; - type: string; + type: OptionType; } \ No newline at end of file diff --git a/src/pages/interviewRounds/StepDescreption.tsx b/src/pages/interviewRounds/StepDescreption.tsx index f305399..64c617b 100644 --- a/src/pages/interviewRounds/StepDescreption.tsx +++ b/src/pages/interviewRounds/StepDescreption.tsx @@ -50,9 +50,9 @@ const StepsDescription: React.FC = (props) => {

{props.isRoundCompleted ? - +
Completed - +
: {props.buttonText} diff --git a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx index 957f72a..65a4412 100644 --- a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx +++ b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx @@ -2,15 +2,13 @@ import styles from "./PreliminaryRoundResults.module.scss" import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"; import StepHeader from "../../components/stepsHeader/StepHeader"; - 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 ( diff --git a/src/pages/quiz/Options.module.scss b/src/pages/quiz/Options.module.scss index 6550843..43e8f66 100644 --- a/src/pages/quiz/Options.module.scss +++ b/src/pages/quiz/Options.module.scss @@ -30,21 +30,25 @@ // styles for multiselect checkbox .checkBoxHolder { - border: 0.2rem solid #707070; + border: 0.2rem solid lighten($color: #707070, $amount: 20); border-radius: 2.5rem; width: 2rem; height: 2rem; - margin-left: 2rem; + margin-left: 1.5rem; .checkBox { --background-checked: var(--primary-button-color); --checkmark-color: var(--primary-button-color); --border-width: 0; margin: 0; - margin-top: 0.26rem; - margin-left: 0.27rem; - width: 1.2rem; - height: 1.2rem; + margin-top: 0.3rem; + margin-left: 0.3rem; + width: 1rem; + height: 1rem; + } + + &.activeCheck { + border: 0.2rem solid var(--primary-button-color); } } diff --git a/src/pages/quiz/Options.tsx b/src/pages/quiz/Options.tsx index ef4d4bf..ef1adb0 100644 --- a/src/pages/quiz/Options.tsx +++ b/src/pages/quiz/Options.tsx @@ -2,15 +2,15 @@ import { IonButton, IonCheckbox, IonItem, IonLabel, IonList, IonRadio, IonRadioG import { useEffect, useRef, useState } from 'react'; import { Link } from 'react-router-dom'; import styles from './Options.module.scss'; +import { OptionType } from '../../models/QuizDetails' interface OwnProps { options: string[] | undefined; - type: string; + type: OptionType; answer: string[]; lastQuestion: boolean; questionNumber: number; updateQuestionNumber: () => void; - } const Options: React.FC = (props) => { @@ -75,8 +75,12 @@ const Options: React.FC = (props) => { const MultiSelectOptions = props.options!.map((option, key) => { return ( -
- selectChecked(option)} /> +
+ selectChecked(option)} />
{option} diff --git a/src/pages/quiz/Quiz.tsx b/src/pages/quiz/Quiz.tsx index 54153c9..0c2c8b3 100644 --- a/src/pages/quiz/Quiz.tsx +++ b/src/pages/quiz/Quiz.tsx @@ -1,6 +1,6 @@ import styles from './Quiz.module.scss'; -import { IonButton, IonIcon } from '@ionic/react'; +import { IonIcon } from '@ionic/react'; import Options from './Options'; import { closeOutline } from 'ionicons/icons' import { Link } from 'react-router-dom'; @@ -11,7 +11,7 @@ import QUIZ_DETAILS from '../../mockData/QuizDetails'; const Quiz: React.FC = () => { const [questionNumber, setQuestionNumber] = useState(1); - const timeLimit = QUIZ_DETAILS[questionNumber - 1].timeLimit; + const currentQuestion = QUIZ_DETAILS[questionNumber - 1]; const updateQuestionNumber = () => { if (QUIZ_DETAILS.length > questionNumber) { @@ -30,9 +30,9 @@ const Quiz: React.FC = () => {
@@ -40,10 +40,10 @@ const Quiz: React.FC = () => {