From 4961364eb4c219b29d84687cfe614bd46e9cba53 Mon Sep 17 00:00:00 2001
From: Ajay_S <sajayy01234@gmail.com>
Date: Fri, 6 May 2022 10:29:53 +0530
Subject: [PATCH] changed input to text area in options component

---
 src/mockData/QuizDetails.ts         |  2 +-
 src/pages/quiz/Options.module.scss  |  3 +--
 src/pages/quiz/Options.tsx          | 12 +++++++-----
 src/pages/quiz/Question.module.scss |  1 -
 src/pages/quiz/Question.tsx         |  2 --
 5 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/mockData/QuizDetails.ts b/src/mockData/QuizDetails.ts
index 1c1c612..29e7b50 100644
--- a/src/mockData/QuizDetails.ts
+++ b/src/mockData/QuizDetails.ts
@@ -46,7 +46,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         options: [],
         answer: ["single threaded"],
         result: false,
-        timeLimit: 40,
+        timeLimit: 60,
         type: "textInput"
     },
     {
diff --git a/src/pages/quiz/Options.module.scss b/src/pages/quiz/Options.module.scss
index 34eea92..6550843 100644
--- a/src/pages/quiz/Options.module.scss
+++ b/src/pages/quiz/Options.module.scss
@@ -63,11 +63,10 @@
             .textInput {
                 width: 95%;
                 margin: 0 auto;
-                width: 30rem;
-                height: 4rem;
                 font-size: 1.4rem;
                 border-radius: 2.5rem;
                 padding-left: 2rem;
+                padding-top: 2rem;
             }
 
             ion-item {
diff --git a/src/pages/quiz/Options.tsx b/src/pages/quiz/Options.tsx
index 8b3ca6b..ef4d4bf 100644
--- a/src/pages/quiz/Options.tsx
+++ b/src/pages/quiz/Options.tsx
@@ -19,7 +19,7 @@ const Options: React.FC<OwnProps> = (props) => {
     const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
     const [textInput, setTextInput] = useState<string>("");
     const [answers, setAnswers] = useState<number>(0);
-    const inputRef = useRef<HTMLInputElement>(null);
+    const inputRef = useRef<HTMLTextAreaElement>(null);
 
     useEffect(() => {
         setSelected(undefined);
@@ -98,12 +98,14 @@ const Options: React.FC<OwnProps> = (props) => {
                 }
                 {props.type === "textInput" &&
                     <div className={styles.options}>
-                        <input
-                            type="text"
+                        <textarea
                             className={styles.textInput}
-                            placeholder="enter your answer"
+                            rows={20}
+                            cols={35}
+                            placeholder="enter your answer here"
                             ref={inputRef}
-                            onChange={handleInput} />
+                            onChange={handleInput}>
+                        </textarea>
                     </div>
                 }
             </IonList>
diff --git a/src/pages/quiz/Question.module.scss b/src/pages/quiz/Question.module.scss
index 88f7ef5..ff4a507 100644
--- a/src/pages/quiz/Question.module.scss
+++ b/src/pages/quiz/Question.module.scss
@@ -1,5 +1,4 @@
 section {
-
     .questionHolder {
         display: flex;
         flex-direction: column;
diff --git a/src/pages/quiz/Question.tsx b/src/pages/quiz/Question.tsx
index 3bc5c72..16536b3 100644
--- a/src/pages/quiz/Question.tsx
+++ b/src/pages/quiz/Question.tsx
@@ -14,7 +14,6 @@ interface OwnProp {
 const Question: React.FC<OwnProp> = (props) => {
 
     const [seconds, setSeconds] = useState<number>(props.timeLimit);
-    const [duration, setDuration] = useState<number>(props.timeLimit);
     const displaySeconds = seconds % 60;
     const percentage = Math.round(seconds / props.timeLimit * 100);
     const time = `${secondsToMinutes(seconds).toString().padStart(2, '0')}:${displaySeconds.toString().padStart(2, '0')}`
@@ -22,7 +21,6 @@ const Question: React.FC<OwnProp> = (props) => {
 
     useEffect(() => {
         setSeconds(props.timeLimit);
-        setDuration(props.timeLimit);
     }, [props.questionNumber]);
 
     useEffect(() => {