Fixed styling and appearance of questions.

frontend/src/components/WrittenQuestionExercise.tsx

@@ -56,12 +56,12 @@ export default function WrittenQuestionExercise({question, wordBank, expected, c
     const ResponseSection = (correct: string | null, reason: string | null) => {
         if (!answered) {
             return (
-                <div>
+                <div className='w-full h-36'>
-                    <div className=' flex-row flex-wrap border-b-4 w-full'>
+                    <div className=' flex-row flex-wrap w-full h-full'>
                         {remainingWords.map((word, index) => (
                             <span 
                             key={index} 
-                            className="border-gray-300 border-b-2 border-2 m-1 p-1 px-3 rounded-xl inline-block cursor-pointer"
+                            className="border-gray-300 border-2 m-1 p-1 px-3 rounded-xl inline-block cursor-pointer"
                             onClick={(event) => handleWordBankClick(word)}>
                                 {word}
                             </span>
@@ -80,12 +80,10 @@ export default function WrittenQuestionExercise({question, wordBank, expected, c
             )
         } else {
             return (
-                <div>
+                <div className=' flex-row flex-wrap border-b-4 w-full h-36'>
-                    <div className=' flex-row flex-wrap border-b-4 w-full'>
+                    <h3>{correct}</h3>
-                        <h3>{correct}</h3>
+                    <p>{reason}</p>
-                        <p>{reason}</p>
+                    <button className='green w-full' onClick={(e) => handleSubmit()}>{!answered ? "Submit" : "Continue"}</button>
-                        <button className='green' onClick={(e) => handleSubmit()}>{!answered ? "Submit" : "Continue"}</button>
-                    </div>
                 </div>
             )
         }
@@ -96,7 +94,7 @@ export default function WrittenQuestionExercise({question, wordBank, expected, c
             <div className='round box h-min no-shadow relative min-h-[60px] flex items-center justify-center mx-5'>
                 {question}
             </div>
-            <div className='flex-row flex-wrap border-b-4 w-full'>
+            <div className='flex-row flex-wrap border-b-4 w-full h-36'>
                 {selectedWords.map((word, index) => (
                     <span 
                         key={index}

frontend/src/components/WrittenVocabularyExercise.tsx

@@ -23,7 +23,6 @@ export default function WrittenQuestionExercise({question, pronunciation, defini
 
     return (
         <div className='v-layout space-y-8 items-center w-full'>
-            <h1>Recall Meaning</h1>
             <div className='round box h-min no-shadow relative min-h-[60px] flex items-center justify-center mx-5'>
                 {question}
             </div>

frontend/src/pages/Lesson.tsx

@@ -66,7 +66,6 @@ export default function Course() {
     return (
         <div className="v-layout p-10">
             <Progress percent={currQuestion / questions.length * 100} back={handleNavigateBack}/>
-            <h1 className="text-center">Course Page</h1>
             <div className="flex flex-col flex-1 mb-8 items-center">
                 {renderQuestion(currQuestion)}
             </div>