From 22450e8d60466d8b580218737b1d8cc2a26a5877 Mon Sep 17 00:00:00 2001 From: Ajay_S Date: Mon, 2 May 2022 15:57:46 +0530 Subject: [PATCH] created mock quiz data and logic changes to quiz component --- src/mockData/QuizDetails.tsx | 57 +++++++++++++++++++++ src/mockData/StepDetails.tsx | 4 +- src/pages/interviewRounds/Steps.module.scss | 1 + src/pages/quiz/Options.module.scss | 16 ++++++ src/pages/quiz/Options.tsx | 17 +++--- src/pages/quiz/Question.tsx | 10 +++- src/pages/quiz/Quiz.module.scss | 4 ++ src/pages/quiz/Quiz.tsx | 37 ++++++------- 8 files changed, 117 insertions(+), 29 deletions(-) create mode 100644 src/mockData/QuizDetails.tsx diff --git a/src/mockData/QuizDetails.tsx b/src/mockData/QuizDetails.tsx new file mode 100644 index 0000000..666adac --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/mockData/StepDetails.tsx b/src/mockData/StepDetails.tsx index 9b2cf78..fbbbe75 100644 --- a/src/mockData/StepDetails.tsx +++ b/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", diff --git a/src/pages/interviewRounds/Steps.module.scss b/src/pages/interviewRounds/Steps.module.scss index f7b4a45..2e5b016 100644 --- a/src/pages/interviewRounds/Steps.module.scss +++ b/src/pages/interviewRounds/Steps.module.scss @@ -38,6 +38,7 @@ ion-item { font-size: 1.4rem; font-weight: 600; } + .heading { margin: 0; color: #363636; diff --git a/src/pages/quiz/Options.module.scss b/src/pages/quiz/Options.module.scss index 885e1e7..f74641a 100644 --- a/src/pages/quiz/Options.module.scss +++ b/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); + } + } } \ No newline at end of file diff --git a/src/pages/quiz/Options.tsx b/src/pages/quiz/Options.tsx index 81b4ac3..7e3c873 100644 --- a/src/pages/quiz/Options.tsx +++ b/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 = (props) => { - const [selected, setSelected] = useState("null"); + const [selected, setSelected] = useState(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 ( {option} @@ -29,6 +29,11 @@ const Options: React.FC = (props) => { {options} + +
props.updateQuestionNumber()}> + Next +
); } diff --git a/src/pages/quiz/Question.tsx b/src/pages/quiz/Question.tsx index d57f2fe..a02a208 100644 --- a/src/pages/quiz/Question.tsx +++ b/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 = (props) => { clearTimeout(timeout); } - return () => clearTimeout(timeout);; + console.log(seconds); + + if (seconds === 0) { + props.updateQuestionNumber(); + } + + return () => clearTimeout(timeout); }, [seconds]); + const renderTime = () => { return (
diff --git a/src/pages/quiz/Quiz.module.scss b/src/pages/quiz/Quiz.module.scss index b480ba7..0c408bf 100644 --- a/src/pages/quiz/Quiz.module.scss +++ b/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); diff --git a/src/pages/quiz/Quiz.tsx b/src/pages/quiz/Quiz.tsx index 49901a7..373a2da 100644 --- a/src/pages/quiz/Quiz.tsx +++ b/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(false); - - const isSelected = (option: string) => { + const [questionNumber, setQuestionNumber] = useState(1); - if (option !== "null") { - setSelected(true); + const updateQuestionNumber = () => { + console.log("update") + if (quizDetails.length > questionNumber) { + setQuestionNumber((questionNumber) => questionNumber + 1); } } + console.log("no", questionNumber); + return (
@@ -36,20 +31,22 @@ const Quiz: React.FC = () => { - +
- +
- + {/* Next - + */} +