Added progress bar and forced re-rendering of question component.

frontend/src/pages/Lesson.tsx

@@ -1,21 +1,41 @@
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Icon } from '@iconify/react';
 import { useState } from 'react';
 import WrittenQuestionExercise from "../components/WrittenQuestionExercise"
+import Progress from '../components/Progress';
 
 export default function Course() {
     const location = useLocation();
     const navigate = useNavigate();
     const { questions } = location.state;
-    const [currQuestion, setCurrQuestion] = useState(0);
+    const [currQuestion, setCurrQuestion] = useState<number>(0);
 
-    const renderLessonContent = () => {
+    const handleNavigateBack = () => {
+      navigate(-1);
+    };
+
+    const handleQuestionSubmit = () => {
+        if (currQuestion < questions.length - 1) {
+            setCurrQuestion(currQuestion + 1);
+        } else {
+            navigate("/review");
+        }
+  }
+
+    const renderQuestion = (questionIndex: number) => {
       const {question, wordBank, expected, type, exercise} = questions[currQuestion];
         switch (type) {
           case 'written':
             switch (exercise) {
               case 'questions':
-                return <WrittenQuestionExercise question={question} wordBank={wordBank} expected={expected} chapter={"Travel"} language={"Japanese"} setCurrQuestion={setCurrQuestion}/>;
+                return <WrittenQuestionExercise 
+                      key={currQuestion}
+                      question={question} 
+                      wordBank={wordBank} 
+                      expected={expected} 
+                      chapter={"Travel"} 
+                      language={"Japanese"} 
+                      onQuestionSubmit={handleQuestionSubmit}
+                      />;
             //   case 'vocabulary':
             //     return <WrittenVocabularyLesson />;
               default:
@@ -37,10 +57,10 @@ export default function Course() {
     
     return (
         <div className="v-layout p-10">
-            <Icon icon="mdi:arrow-left" className="back-button" onClick={() => navigate(-1)} />
+            <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">
-                {renderLessonContent()}
+                {renderQuestion(currQuestion)}
             </div>
         </div>
     )