Merge branch 'feat/last-update' of https://github.com/huythai855/SciPlay

 into feat/last-update

frontend/src/AppRouter.js

@@ -36,6 +36,8 @@ function AppRouter() {
           <Route path="/quiz" element={<Quiz/>} />
           <Route path="/physic-page" element={<Coursepath/>} />
           <Route path="/course-path" element={<Coursepath/>} />
+          <Route path="/" element={<Login/>} />
+          <Route path = "/interactive" element={<Interactive/>} />
 
           {/* 404 page if you guy wanna edit :> */}
           {/*<Route path='*' element={<Home/>} />   */}

frontend/src/pages/Learn/Interactive/Interactive.css

@@ -13,9 +13,9 @@
     height: 1078.88px;
     position: relative;
     width: 1922.01px;
-
   }
 
+
   .interactive-theory .overlap {
     height: 970px;
     left: 235px;

frontend/src/pages/Learn/Interactive/Interactive.js

@@ -23,4 +23,5 @@ function Interactive() {
     );
 }
 
-export default Interactive;
+export default Interactive;
+

frontend/src/pages/Learn/Interactive/LessonDetails.js

@@ -21,6 +21,7 @@ const LessonDetails = () => {
     useEffect(() => {
         async function fetchLessonData() {
             try {
+
                 const response = await axios.get(`
                     http://localhost:3000/api/lesson?user_id=${userId}&lesson_id=${lessonId}`
                 );
@@ -32,21 +33,19 @@ const LessonDetails = () => {
             }
         }
         fetchLessonData();
-
     }, [userId, lessonId]);
+
 
     const showNextLine = () => {
         if(lessonData !== null) {
             if (currentLineIndex <= lessonData.lesson.content.content.length - 1) {
                 setCurrentLineIndex(currentLineIndex + 1);
             }
-
             if(lessonData.lesson.content.content[currentLineIndex].lines !== undefined) {
                 setDisplayedText(lessonData.lesson.content.content[currentLineIndex].lines[0]);
             }
 
         }
-
     };
 
     const typingSpeed = 30; // Tốc độ đánh chữ (ms)
@@ -57,7 +56,6 @@ const LessonDetails = () => {
                 <div className="overlap">
                     <img className="learner" alt="Learner" src={Learner} />
 
-
                     <div className="text-box">
                         <div className="overlap-group">
 
@@ -73,12 +71,9 @@ const LessonDetails = () => {
                             <div className="next-button">
                                 <button type="button" class="btn btn-primary" onClick={showNextLine}>Tiếp theo</button>
                             </div>
-
-
                         </div>
                     </div>
 
-
                     <img className="mentor" alt="Mentor" src={Mentor} />
                 </div>
                 <img className="logo" alt="Logo" src={Logo} />
@@ -88,4 +83,4 @@ const LessonDetails = () => {
     );
 };
 
-export default LessonDetails;
+export default LessonDetails;

frontend/src/pages/Learn/Interactive/LineItem.js

@@ -5,4 +5,5 @@ const LineItem = ({line}) => {
   return <p>{line}</p>;
 };
 
-export default LineItem;
+
+export default LineItem;

frontend/src/pages/Learn/Interactive/TypewriterEffect.js

@@ -26,4 +26,5 @@ const TypewriterEffect = ({ text, speed }) => {
   );
 };
 
-export default TypewriterEffect;
+
+export default TypewriterEffect;