changed input to text area in options component

src/mockData/QuizDetails.ts

@@ -46,7 +46,7 @@ const QUIZ_DETAILS: QuizDetails[] = [
         options: [],
         answer: ["single threaded"],
         result: false,
-        timeLimit: 40,
+        timeLimit: 60,
         type: "textInput"
     },
     {

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 {

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>

src/pages/quiz/Question.module.scss

@@ -1,5 +1,4 @@
 section {
-
     .questionHolder {
         display: flex;
         flex-direction: column;

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(() => {