Added lesson complete page after completing a module.

frontend/src/components/LessonComplete.tsx

@@ -0,0 +1,26 @@
+import DuoSplash from "../assets/img/duo-splash.png";
+import { useNavigate } from "react-router-dom";
+
+interface LessonCompleteProps {
+    home: string;
+  }
+
+export default function LessonComplete({ home } : LessonCompleteProps)
+{
+  const navigate = useNavigate();
+
+  return <div className="flex flex-col justify-center">
+    <div className="flex flex-col p-5 gap-5 items-center">
+      <img src={DuoSplash} alt="Duolingo Logo"></img>
+
+      <h1>Well done! You completed this module!</h1>
+
+      <p className="white">
+        Experience Gained: +100XP
+      </p>
+      <button className="green" onClick={() => navigate(home)}>
+        Continue
+      </button>
+    </div>
+  </div>
+}

frontend/src/pages/Lesson.tsx

@@ -5,6 +5,7 @@ import WrittenVocabularyExercise from "../components/WrittenVocabularyExercise"
 import VerbalQuestionsExercise from "../components/VerbalQuestionsExercise"
 import Progress from '../components/Progress';
 import VerbalPronunciationExercise from '../components/VerbalPronunciationExercise';
+import LessonComplete from '../components/LessonComplete';
 import {_Question, chapters_jp, Question} from "../logic/CourseData";
 import VideoExercise from "../components/VideoExercise";
 
@@ -24,13 +25,14 @@ export default function Lesson()
 
   const onSubmit = () =>
   {
-    if (currQuestion < questions.length - 1)
-      setCurrQuestion(currQuestion + 1);
-    else navigate(home);
+    setCurrQuestion(currQuestion + 1);
   }
 
   const renderQuestion = (currIndex: number) =>
   {
+    if (currIndex >= questions.length) {
+      return <LessonComplete home={home}/>;
+    }
     const chapter = 'Ordering food';
     const question: Question = questions[currQuestion];
     switch (question.type)