diff --git a/frontend/src/components/LessonComplete.tsx b/frontend/src/components/LessonComplete.tsx new file mode 100644 index 0000000..cccffbf --- /dev/null +++ b/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
+
+ Duolingo Logo + +

Well done! You completed this module!

+ +

+ Experience Gained: +100XP +

+ +
+
+} diff --git a/frontend/src/pages/Lesson.tsx b/frontend/src/pages/Lesson.tsx index c9f6cf3..6a67beb 100644 --- a/frontend/src/pages/Lesson.tsx +++ b/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 ; + } const chapter = 'Ordering food'; const question: Question = questions[currQuestion]; switch (question.type)