From 1a66dd07e8027bdaf94f9584c89ea692e3c17ef6 Mon Sep 17 00:00:00 2001 From: Ajay_S Date: Wed, 4 May 2022 17:20:26 +0530 Subject: [PATCH] created multiSelect and text input for quiz --- src/mockData/QuizDetails.ts | 28 +++++++++--- src/models/QuizDetails.ts | 1 + src/pages/quiz/Options.module.scss | 65 ++++++++++++++++++++++++++- src/pages/quiz/Options.tsx | 72 +++++++++++++++++++++++++++--- src/pages/quiz/Question.tsx | 39 ++++++++-------- src/pages/quiz/Quiz.tsx | 5 ++- 6 files changed, 176 insertions(+), 34 deletions(-) diff --git a/src/mockData/QuizDetails.ts b/src/mockData/QuizDetails.ts index 3b0c156..319714f 100644 --- a/src/mockData/QuizDetails.ts +++ b/src/mockData/QuizDetails.ts @@ -11,7 +11,8 @@ const Quiz_Details: QuizDetails[] = [ ], answer: ["System.out.println('Hello, how are you?');"], result: false, - timeLimit: 10 + timeLimit: 10, + type: "singleSelect" }, { question: "How do you write 'Hello World' in an alert box?", @@ -23,7 +24,9 @@ const Quiz_Details: QuizDetails[] = [ ], answer: ["alert('Hello World');"], result: false, - timeLimit: 10 + timeLimit: 10, + type: "singleSelect" + }, { question: "is javascript", @@ -35,15 +38,30 @@ const Quiz_Details: QuizDetails[] = [ ], answer: ["B", "C"], result: false, - timeLimit: 35 + timeLimit: 35, + type: "multiSelect" }, { question: "Is javascript single threaded or multi threaded? enter the answer in the below box ", options: [], answer: ["single threaded"], result: false, - timeLimit: 40 - } + timeLimit: 40, + type: "textInpit" + }, + { + question: "is javascript", + options: [ + "A", + "B", + "C", + "D" + ], + answer: ["B", "C"], + result: false, + timeLimit: 35, + type: "multiSelect" + }, ]; diff --git a/src/models/QuizDetails.ts b/src/models/QuizDetails.ts index 8b4f4c4..ee4564e 100644 --- a/src/models/QuizDetails.ts +++ b/src/models/QuizDetails.ts @@ -4,4 +4,5 @@ export interface QuizDetails { answer: string[]; result: boolean; timeLimit: number; + type: string; } \ No newline at end of file diff --git a/src/pages/quiz/Options.module.scss b/src/pages/quiz/Options.module.scss index f74641a..34eea92 100644 --- a/src/pages/quiz/Options.module.scss +++ b/src/pages/quiz/Options.module.scss @@ -1,12 +1,75 @@ .optionHolder { ion-list { - ion-radio-group { + + ion-item { + width: 99%; + margin: 0 auto; + --background: white; + border: 1px solid #DBDBDB; + border-radius: 25px; + + ion-label { + --color: #626262; + font-size: 1.2rem !important; + font-weight: 200; + + } + ion-radio { + --color-checked: var(--primary-button-color); + margin-left: 1.5rem; + } + } + + .highlighted { + box-shadow: 0px 0px 10px #00000029; + + ion-radio { + --color: var(--primary-button-color); + } + } + + // styles for multiselect checkbox + .checkBoxHolder { + border: 0.2rem solid #707070; + border-radius: 2.5rem; + width: 2rem; + height: 2rem; + margin-left: 2rem; + + .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; + } + } + + .multiSelectLabel { + margin-left: 2rem; + } + + .options { display: flex; flex-direction: column; align-items: center; justify-content: space-around; height: 40vh; + + .textInput { + width: 95%; + margin: 0 auto; + width: 30rem; + height: 4rem; + font-size: 1.4rem; + border-radius: 2.5rem; + padding-left: 2rem; + } + ion-item { width: 99%; margin: 0 auto; diff --git a/src/pages/quiz/Options.tsx b/src/pages/quiz/Options.tsx index 7e3c873..373a3a3 100644 --- a/src/pages/quiz/Options.tsx +++ b/src/pages/quiz/Options.tsx @@ -1,17 +1,46 @@ -import { IonButton, IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react'; -import { useState } from 'react'; +import { IonButton, IonCheckbox, IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react'; +import { useEffect, useRef, useState } from 'react'; +import Input from '../../components/formInput/Input'; import styles from './Options.module.scss'; interface OwnProps { options: string[] | undefined; + type: string; updateQuestionNumber: () => void; } const Options: React.FC = (props) => { const [selected, setSelected] = useState(undefined); + const [selectedOptions, setSelectedOptions] = useState([]); + const [textInput, setTextInput] = useState(""); + const [answers, setAnswers] = useState([]); + const inputRef = useRef(null); - // console.log(selected); + + useEffect(() => { + console.log("render"); + setSelected(undefined); + setSelectedOptions([]); + }, [props.options]); + + const selectChecked = (option: string) => { + let newOption: string[] = []; + if (selectedOptions.includes(option)) { + newOption = selectedOptions.filter(oldOption => oldOption !== option); + } else { + newOption = selectedOptions.concat([option]); + } + setSelectedOptions(newOption); + } + + console.log(selectedOptions); + console.log(selected); + + const handleInput = () => { + setTextInput(inputRef.current?.value!) + console.log(textInput); + } const options = props.options!.map((option, key) => { return ( @@ -22,19 +51,48 @@ const Options: React.FC = (props) => { ); }); + const MultiSelectOptions = props.options!.map((option, key) => { + return ( + +
+ selectChecked(option)} /> +
+ {option} + + ); + }); + return (
- setSelected(e.detail.value)}> - {options} - + {props.type === "singleSelect" && + setSelected(e.detail.value)} allowEmptySelection={true} className={styles.options}> + {options} + + } + {props.type === "multiSelect" && +
+ {MultiSelectOptions} +
+ } + {props.type === "textInpit" && +
+ +
+ } +
props.updateQuestionNumber()}> Next
-
+ ); } diff --git a/src/pages/quiz/Question.tsx b/src/pages/quiz/Question.tsx index a5bcb46..eac0982 100644 --- a/src/pages/quiz/Question.tsx +++ b/src/pages/quiz/Question.tsx @@ -10,29 +10,28 @@ interface OwnProp { updateQuestionNumber: () => void; } - -let timeout: NodeJS.Timeout; - const Question: React.FC = (props) => { const [seconds, setSeconds] = useState(props.timeLimit); const [duration, setDuration] = useState(props.timeLimit); const displaySeconds = seconds % 60; - useEffect(() => { - setSeconds(props.timeLimit); - setDuration(props.timeLimit); - }, [props.questionNumber]); + // useEffect(() => { + // setSeconds(props.timeLimit); + // setDuration(props.timeLimit); + // }, [props.questionNumber]); + + // useEffect(() => { + // console.log(seconds); + // setTimeout(() => { + // if (seconds > 0) { + // setSeconds(seconds - 1); + // } else { + // props.updateQuestionNumber(); + // } + // }, 1000); - useEffect(() => { - setTimeout(() => { - if (seconds > 0) { - setSeconds(seconds - 1); - } else { - props.updateQuestionNumber(); - } - }, 1000); - }, [seconds]); + // }, [seconds]); const renderTime = () => { return ( @@ -59,12 +58,12 @@ const Question: React.FC = (props) => { { - return { shouldRepeat: true, delay: 1.5 } - }} + // onComplete={() => { + // return { shouldRepeat: true, delay: 1.5 } + // }} strokeWidth={5} > {renderTime} diff --git a/src/pages/quiz/Quiz.tsx b/src/pages/quiz/Quiz.tsx index d551864..da46d7f 100644 --- a/src/pages/quiz/Quiz.tsx +++ b/src/pages/quiz/Quiz.tsx @@ -38,7 +38,10 @@ const Quiz: React.FC = () => {
- +
{/*