Merge pull request #20 from huythai855/feature/test-flashcard

feat: add flashcard lesson

frontend/src/AppRouter.js

@@ -7,6 +7,7 @@ import Rankings from "./pages/Rankings/Rankings";
 import Learn from './pages/Learn/Learn';
 import Forum from './pages/Forum/Forum';
 import Coursepath from './pages/Course/Coursepath';
+import Flashcard from './pages/Learn/Flashcard/Flashcard';
 import CourseDetail from './pages/Course/CourseDetail';
 import Quiz from "./pages/Lesson/Quiz/Quiz";
 
@@ -19,15 +20,17 @@ function AppRouter() {
           <Route path="/login" element={<Login/>} />
           <Route path="/rankings" element={<Rankings/>} />
           <Route path="/learning" element={<Learn/>} />
+          <Route path="/lesson" element={<Lesson />} />
+
+          <Route path="/" element={<Login/>} />
+          <Route path="/flashcard" element={<Flashcard/>}/>
           <Route path="/forum" element={<Forum/>} />
           <Route path="/coursepath" element={<Coursepath/>} />
           <Route path="/coursedetail" element={<CourseDetail/>} />
-          {/* <Route path="/homepage" element={<HomePage />} /> */}
           <Route path="/lesson/:id" element={<Lesson />} />
           <Route path="/quiz" element={<Quiz/>} />
           <Route path="/physic-page" element={<Coursepath/>} />
           <Route path="/course-path" element={<Coursepath/>} />
-          <Route path="/" element={<Login/>} />
 
           {/* 404 page if you guy wanna edit :> */}
           {/*<Route path='*' element={<Home/>} />   */}

frontend/src/pages/Learn/Flashcard/Flashcard.css

@@ -0,0 +1,119 @@
+
+
+body { 
+    font-family: sans-serif;
+
+ }
+
+ .scene {
+    background-image: "../../../assets/backquiz.png";
+ }
+.scene {
+  display: inline-block;
+  width: 900px;
+  height: 500px;
+/*   border: 1px solid #CCC; */
+  margin: 40px 0;
+  perspective: 600px;
+  align-content: center;
+}
+
+.btn-btn-primary{
+    position: relative;
+    top: 60px;
+    left: 490px;
+}
+
+.card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  transform-style: preserve-3d;
+  transform-origin: center right;   
+  transition: transform 0.8s;
+  left:580px;
+  top:100px;
+    align-content: center;
+
+    display: flex;
+    flex-direction: column; /* Để căn chỉnh theo chiều dọc */
+    align-items: center;
+}
+
+.card.is-flipped {
+  transform: translateX(-100%) rotateY(-180deg);
+}
+
+.card__face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: 50px;
+  padding-top: 180px;
+  line-height: fit-content;
+  color: white;
+  text-align: center;
+  align-items: center;
+  font-weight: bold;
+  font-size: 40px;
+  backface-visibility: hidden;
+
+  flex-direction: column; /* Để căn chỉnh theo chiều dọc */
+  align-items: center;
+}
+
+.card__face--front {
+  background: rgb(241, 142, 65);
+}
+
+.card__face--back {
+  background: slateblue;
+  transform: rotateY(180deg);
+}
+
+
+
+
+.trang-flashcard {
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
+    zoom:80%;
+  }
+
+  .trang-flashcard .overlap-group-wrapper {
+    background-color: #ffffff;
+    border: 1px none;
+    height: 1081px;
+    width: 1920px;
+  }
+
+  .trang-flashcard .overlap-group {
+    background-image: url(../../../assets/backquiz.png);
+    background-position: 50% 50%;
+    background-size: cover;
+
+    /* height: 1081px; */
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .trang-flashcard .group {
+    height: 324px;
+    left: 264px;
+    position: absolute;
+    top: 685px;
+    width: 254px;
+  }
+
+  .trang-flashcard .logo {
+    height: 60px;
+    left: 22px;
+    position: absolute;
+    top: 31px;
+    width: 84px;
+  }

frontend/src/pages/Learn/Flashcard/Flashcard.js

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+import './Flashcard.css'
+import Astro from "../../../assets/astronuant.png"
+import Logo from "../../../assets/logo.png"
+
+
+function Flashcard() {
+    const [isFlipped, setIsFlipped] = useState(false);
+    const [onClick, setOnClick] = useState(false);
+
+    const [cardIndex, setCardIndex] = useState(0);
+    const [totalCard, setTotalCard] = useState(0);
+
+
+
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const lessonId = urlSearchParams.get('lesson_id');
+    const userId = urlSearchParams.get('user_id');
+
+
+
+
+    const [lessonData, setLessonData] = useState({});
+    const [cardContent, setCardContent] = useState([]);
+    let FandB = [];
+
+    const handleClick = () => {
+        setOnClick(true);
+        setIsFlipped(!isFlipped);
+    }
+
+
+    useEffect(() => {
+        async function fetchData() {
+            try {
+                const res = await axios.get(`http://localhost:3000/api/lesson?lesson_id=${lessonId}&user_id=${userId}`);
+                console.log("LessonId: ", lessonId);
+                console.log("UserId: ", userId);
+
+                // console.log(res.data.lesson.content);
+                setLessonData(res.data);
+
+                if(res.data.lesson !== undefined) {
+                    // await res.data.lesson.content.content.forEach(card => {
+                    //     FandB.push({front: card.front, back: card.back});
+                    //     // console.log("Card: ", card);
+                    // });
+                    // setTotalCard(FandB.length);
+                    // console.log("Card length: ", FandB.length);
+                    // console.log(FandB[0].back);
+                    setCardContent(res.data.lesson.content.content);
+                    setTotalCard(cardContent.length);
+                    console.log("Card content: ", cardContent);
+                    console.log(cardContent.length);
+                }
+
+            }
+            catch (err) {
+                console.log(err);
+            }
+        }
+        fetchData();
+    }, []);
+
+
+
+
+    return (
+
+        <div className="trang-flashcard">
+            <div className="overlap-group-wrapper">
+                <div className="overlap-group">
+                    <img className="group" alt="Group" src={Astro} />
+                    <img className="logo" alt="Logo" src={Logo} />
+
+                    {totalCard}
+
+                    {totalCard <= 0 ? <div></div> :
+                        <div>
+                            <div className="scene scene--card">
+                                <div className={`card ${isFlipped ? 'is-flipped' : ''}`}>
+                                    <div className="card__face card__face--front" onClick={handleClick}>{cardContent[cardIndex].front}</div>
+                                    <div className="card__face card__face--back" onClick={handleClick}>{cardContent[cardIndex].back}</div>
+
+                            </div>
+                            <div className="btn-btn-primary">
+                                <button class="btn btn-primary" onClick={() => {setCardIndex((cardIndex + 1)%totalCard); setIsFlipped(false)}}>Tiếp</button>
+                            </div>
+                            </div>
+                        </div>
+
+                    }
+
+                </div>
+
+
+            </div>
+
+        </div>
+
+
+
+
+    );
+}
+
+export default Flashcard;

frontend/src/pages/Learn/Learn.css

@@ -16,8 +16,14 @@
 }
 
 .learning .overlap {
-  height: 1121px;
-  position: relative;
+  background-image: url(../../assets/background.png);
+  background-position: 50% 50%;
+  background-size: cover;
+  height: 1080px;
+  width: 1920px;
+  position: absolute;
+  top: -9px;
+  left: 0px;
 }
 
 .learning .background {

frontend/src/pages/Login/Login.js

@@ -35,9 +35,9 @@ function Login({ history }) {
     if(data !== {"status": "unreceived"}) {
 
       if(data.error === true) {
-        async function waitOneSecond() {
-          await new Promise(resolve => setTimeout(resolve, 1000));
-        }
+        // async function waitOneSecond() {
+        //   await new Promise(resolve => setTimeout(resolve, 1000));
+        // }
         window.location.href = "http://localhost:3001/login?error=true";
       }
       else {