Merge branch 'master' into feature/login-animation

README.md

@@ -1,2 +1,60 @@
 # SciPlay
-Nền tảng giáo dục khoa học tự nhiên dành cho trẻ em!
+
+Nền tảng giáo dục, kích thích tìm tòi, phát triển khoa học tự nhiên dành cho trẻ em!
+
+## Table of contents
+* [Giới thiệu chung](#giới-thiệu-chung)
+* [Tính năng](#tính-năng)
+* [Công nghệ](#công-nghệ)
+* [Nhóm tác giả](#nhóm-tác-giả)
+
+<a name="gt-chung"></a>
+
+## 1. Giới thiệu chung
+
+Nền tảng SciPlay hướng đến việc mang lại một trải nghiệm học tập mới lạ cho trẻ. Các bài học được thiết kế dưới dạng trò chơi tương tác, nơi các bạn trẻ được đóng vai các nhà thám hiểm có thể cùng những người bạn của mình phiêu du, khám phá thế giới khoa học bao la rộng lớn để thu nạp được những kiến thức một cách chủ động, giúp cho việc học tập khoa học tự nhiên trở thành niềm vui, sự say mê và từ đó cũng có được những hiểu biết vô cùng thực tế về thế giới xung quanh.
+
+<a name="tinh-nang"></a>
+
+## 2. Tính năng
+### 2.1. Học tập
+* Mỗi **Khóa học** được thiết kế như một hành tinh với nhiều **Đảo kiến thức** khác nhau. Mỗi **Đảo** tương ứng với một phần kiến thức của khóa học đó, và chứa những bài học phù hợp dành cho học sinh. Các loại bài học mà nền tảng cung cấp như:
+- Docs: Bài học dạng đọc và tương tác, kiến thức được nhân vật trong trò chơi truyền tải qua cuộc đối thoại với nhân vật của người dùng. Sau khi đã đọc xong, người dùng phải nhấp chuột để hiện thêm những đoạn hội thoại tiếp theo.
+- Quiz: Các câu hỏi trắc nghiệm để kiểm tra kiến thức. Người dùng nhấp chuột vào đáp án đúng và nhận kết quả + giải thích (nếu có).
+- Flashcard: Thống kê các khái niệm cần nhớ trong phần kiến thức đang học. Người dùng nhấp chuột để chuyển qua lại giữa khái niệm và giải thích khái niệm.
+- Video: Video bài giảng. Người dùng có thể tạm dừng hoặc tiếp tục xem, tự ý điều chỉnh tốc độ phát cho phù hợp.
+
+### 2.2. Thử thách
+Dựa trên thử thách được công bố vào mỗi cuối tuần hoặc dịp đặc biệt, các bạn học sinh sẽ đóng vai những hiệp sĩ ở trên hòn đảo mang tên Sci-Island, cùng nhau bảo vệ hòn đảo khỏi những tên quái vật đang tiến vào từ ngoài không gian bằng cách trả lời thật nhiều câu hỏi về các kiến thức đã học.
+
+### 2.3. Bảng xếp hạng
+Các bạn học có thể tích lũy kinh nghiệm, số sao đạt được và số giờ học để đua top với những người chơi khác trên hệ thống và đặc biệt là danh sách bạn bè của bản thân, nơi các bạn trẻ có thể cùng học tập, thi đua với những người bạn thực tế của mình.
+
+### 2.4. Diễn đàn
+Các bạn học có thể tham gia giao lưu, làm quen với nhau, hay trao đổi về những câu hỏi, bài giảng, những bài tập khó. Đội ngũ thầy cô của hệ thống sẽ tham gia giải đáp và hỗ trợ các bạn học sinh còn muốn hỏi thêm về các bài giảng hay những câu hỏi khó còn đang thắc mắc.
+
+### 2.5. Cửa hàng
+Đây là nơi các bạn học có thể sử dụng tiền ảo nhận được sau khi hoàn thành bài học hay thử thách, thỏa sức trang trí, nâng cấp, sửa sang, cho trang cá nhân và nhân vật ảo của mình, kích thích tính cá nhân hóa và tăng sức thú vị cho quá trình học tập.
+
+<a name="cong-nghe"></a>
+
+## 3. Công nghệ
+Những công nghệ được sử dụng trong quá trình phát triển sản phẩm:
+- Frontend: React.js
+
+- Backend: Express.js chạy trên nền Node.js
+
+- Database: Google BigQuery + Google Cloud Storage
+
+- Deployment: Vercel
+
+<a name="nhom-tac-gia"></a>
+## 4. Nhóm tác giả
+**Lowlkeys** - năm thành viên vô cùng năng động đến từ khoa Công nghệ thông tin, trường Đại học Công nghệ, ĐHQGHN.
+- Nguyễn Huy Thái, sinh viên hai ngành Công nghệ thông tin (Chât lượng cao)
+- Trần Hồng Quân, sinh viên hai ngành Công nghệ thông tin (Chât lượng cao)
+- Nguyễn Thị Ngọc Mai, sinh viên năm nhất ngành Mạng máy tính và truyền thông (Chất lượng cao)
+- Nguyễn Phương Anh, sinh viên năm nhất ngành Khoa học máy tính (Chất lượng cao)
+- Đỗ Thu Trang, sinh viên năm nhất ngành Công nghệ thông tin định hướng thị trường Nhật Bản
+
+Qua quá trình tìm hiểu về việc học các môn khoa học tự nhiên của học sinh, chúng tôi đề xuất nền tảng học tập SciPlay.

frontend/src/AppRouter.js

@@ -4,9 +4,11 @@ import Home from './pages/Home/Home';
 import Lesson from './pages/Lesson/Lesson';
 import Login from './pages/Login/Login';
 import Learn from './pages/Learn/Learn';
+import Forum from './pages/Forum/Forum';
 import Coursepath from './pages/Course/Coursepath';
 import Quiz from "./pages/Lesson/Quiz/Quiz";
 
+import CourseDetail from './pages/Course/CourseDetail';
 function AppRouter() {
   return (
     <Router>
@@ -15,6 +17,9 @@ function AppRouter() {
           <Route path="/" exact element={<Home/>} />
           <Route path="/login" element={<Login/>} />
           <Route path="/learning" element={<Learn/>} />
+          <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/>} />

frontend/src/pages/Course/CourseDetail.css

@@ -0,0 +1,292 @@
+.physic-course {
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .physic-course .overlap-wrapper {
+    background-color: #ffffff;
+    border: 1px none;
+    height: 1081px;
+    width: 2422px;
+  }
+
+  .physic-course .overlap {
+    background-image: url(../../assets/x-1.png);
+    background-position: 50% 50%;
+    background-size: cover;
+    height: 1081px;
+    position: relative;
+  }
+
+  .physic-course .group {
+    height: 60px;
+    left: 34px;
+    position: absolute;
+    top: 90px;
+    width: 84px;
+  }
+
+  .physic-course .navbar {
+    height: 735px;
+    left: 24px;
+    position: absolute;
+    top: 210px;
+    width: 112px;
+  }
+
+  .physic-course .learn {
+    background-color: #966bd463;
+    border-radius: 26px;
+    height: 97px;
+    left: 0;
+    position: absolute;
+    top: 118px;
+    width: 112px;
+  }
+
+  .physic-course .div {
+    height: 71px;
+    left: 24px;
+    position: relative;
+    top: 24px;
+    width: 65px;
+  }
+
+  .physic-course .icon {
+    height: 49px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 63px;
+  }
+
+  .physic-course .text-wrapper {
+    color: #0fc0f0;
+    font-family: "Montserrat", Helvetica;
+    font-size: 16px;
+    font-weight: 600;
+    height: 20px;
+    left: 15px;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 51px;
+  }
+
+  .physic-course .challenge {
+    height: 68px;
+    left: 14px;
+    position: absolute;
+    top: 265px;
+    width: 86px;
+  }
+
+  .physic-course .img {
+    height: 46px;
+    left: 10px;
+    position: absolute;
+    top: 0;
+    width: 57px;
+  }
+
+  .physic-course .text-wrapper-2 {
+    color: #0fc0f0;
+    font-family: "Montserrat", Helvetica;
+    font-size: 16px;
+    font-weight: 600;
+    height: 20px;
+    left: 0;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 48px;
+  }
+
+  .physic-course .ranking {
+    height: 75px;
+    left: 12px;
+    position: absolute;
+    top: 383px;
+    width: 81px;
+  }
+
+  .physic-course .overlap-group {
+    height: 75px;
+    position: relative;
+    width: 79px;
+  }
+
+  .physic-course .icon-2 {
+    height: 55px;
+    left: 11px;
+    position: absolute;
+    top: 0;
+    width: 53px;
+  }
+
+  .physic-course .text-wrapper-3 {
+    color: #0fc0f0;
+    font-family: "Montserrat", Helvetica;
+    font-size: 16px;
+    font-weight: 600;
+    height: 20px;
+    left: 0;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 55px;
+  }
+
+  .physic-course .overlap-group-4 {
+    height: 70px;
+    left: 11px;
+    position: absolute;
+    top: 520px;
+    width: 77px;
+  }
+
+  .physic-course .icon-3 {
+    height: 50px;
+    left: 6px;
+    position: absolute;
+    top: 0;
+    width: 63px;
+  }
+
+  .physic-course .text-wrapper-4 {
+    color: #0fc0f0;
+    font-family: "Montserrat", Helvetica;
+    font-size: 16px;
+    font-weight: 600;
+    height: 20px;
+    left: 0;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 50px;
+  }
+
+  .physic-course .shop {
+    height: 76px;
+    left: 0;
+    position: absolute;
+    top: 659px;
+    width: 82px;
+  }
+
+  .physic-course .text-wrapper-5 {
+    color: #0fc0f0;
+    font-family: "Montserrat", Helvetica;
+    font-size: 16px;
+    font-weight: 600;
+    height: 20px;
+    left: 0;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 56px;
+  }
+
+  .physic-course .icon-4 {
+    height: 53px;
+    left: 12px;
+    position: absolute;
+    top: 0;
+    width: 56px;
+  }
+
+  .physic-course .home {
+    height: 74px;
+    left: 7px;
+    position: absolute;
+    top: 0;
+    width: 85px;
+  }
+
+  .physic-course .text-wrapper-6 {
+    color: #0fc0f0;
+    font-family: "Montserrat", Helvetica;
+    font-size: 16px;
+    font-weight: 600;
+    height: 20px;
+    left: 0;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 54px;
+  }
+
+  .physic-course .icon-5 {
+    height: 50px;
+    left: 18px;
+    position: absolute;
+    top: 0;
+    width: 50px;
+  }
+
+  .physic-course .x {
+    height: 170px;
+    left: 168px;
+    object-fit: cover;
+    position: absolute;
+    top: 775px;
+    width: 159px;
+  }
+
+  .physic-course .x-level {
+    height: 173px;
+    left: 456px;
+    object-fit: cover;
+    position: absolute;
+    top: 663px;
+    width: 160px;
+  }
+
+  .physic-course .x-2 {
+    height: 168px;
+    left: 832px;
+    object-fit: cover;
+    position: absolute;
+    top: 605px;
+    width: 166px;
+  }
+
+  .physic-course .x-3 {
+    height: 191px;
+    left: 1088px;
+    object-fit: cover;
+    position: absolute;
+    top: 727px;
+    width: 190px;
+  }
+
+  .physic-course .x-4 {
+    height: 206px;
+    left: 1311px;
+    object-fit: cover;
+    position: absolute;
+    top: 346px;
+    width: 192px;
+  }
+
+  .physic-course .x-5 {
+    height: 216px;
+    left: 1686px;
+    object-fit: cover;
+    position: absolute;
+    top: 579px;
+    width: 201px;
+  }
+
+  .physic-course .x-6 {
+    height: 220px;
+    left: 2158px;
+    object-fit: cover;
+    position: absolute;
+    top: 469px;
+    width: 204px;
+  }
+