Học khoá học

Link figma: https://www.figma.com/design/jM4Xopoh41pK1UhYEnxWUq/Workplace-Home?node-id=20547-24401&m=dev

1. Tổng quan chức năng

1.1 Mục tiêu

Chức năng Khóa học cho phép người học:

• Xem danh sách các khóa học được gán (assigned)

• Xem toàn bộ khóa học

• Bắt đầu hoặc tiếp tục học khóa học

• Theo dõi tiến độ học tập

2. Actor

3. Entry Flow

Người học đăng nhập hệ thống
        ↓
Hệ thống mở Menu mặc định focus vào "Của tôi"
        ↓
Hiển thị block "Khoá học"

4. Màn hình "Của tôi" – Block Khóa học

 

4.1 Hiển thị danh sách khóa học

Block Khóa học hiển thị:

4.2 Quy tắc sắp xếp khóa học

Khóa học được sắp xếp theo thứ tự:

Rule 1 – Deadline: deadline sớm hơn → hiển thị trước

Rule 2 – Publish date:

Nếu cùng deadline: publish date sớm hơn → hiển thị trước

4.3 Card khóa học

Mỗi card hiển thị:

---

4.4 Action – Xem tất cả

Người học click: Xem tất cả

→ Điều hướng đến màn hình: Tất cả khóa học

5. Màn hình "Tất cả khóa học"

 

5.1 Thành phần giao diện

5.2 Tab filter

Tab: Cần học

Hiển thị các khóa học: status != completed

Tab: Đã hoàn thành

Hiển thị các khoá học: status = completed

5.3 Search

Cho phép tìm theo: tên khoá học, search contain

NFR: Người dùng nhập đến đâu, kết quả trả ra đến đó trong vòng 2s. Người dùng xoá các kí tự nhập trong ô search -> tự động reload page. 

5.4 Layout hiển thị

5.7 Action – Mở khóa học

User click vào card khóa học -> hiển thị màn hình danh sách bài học

6. Màn hình ds bài học

6.1 Ảnh khoá học

• Hiển thị ảnh của khoá học hoặc ảnh mặc định như thiết kế nếu khoá học không được upload ảnh

6.2 Progress khóa học

Được tính theo: số bài học hoàn thành / tổng số bài học

6.3 Segment Bài học

Quy tắc focus bài học

Điều kiện	Hành vi hệ thống
Khóa học chưa học bài nào	Focus vào bài học đầu tiên
Khóa học đã có bài học đang học	Focus vào bài học đang học
Tất cả bài học đã hoàn thành	Focus vào bài học đầu tiên

Nút hiển thị theo trạng thái

Căn cứ vào trạng thái của bài học để hiển thị nút tương ứng:

Trạng thái bài học	Nút hiển thị	Hành động
Chưa bắt đầu	Bắt đầu học	Bắt đầu bài học
Đang học	Tiếp tục học	Mở lại bài học
Hoàn thành	Xem lại / Học lại	Mở lại bài học
Khóa	Không hiển thị nút	Không cho truy cập

Nội dung học

 

 

Cách vào

Từ segment Bài học, người dùng chọn bài học cần học -> click nút "Bắt đầu học" hoặc "Tiếp tục học" hoặc "Xem lại" hoặc "Học lại"

Layout tổng thể 

Màn hình chia thành 2 khu vực chính

Panel trái – Navigation nội dung

Field	Meaning
1	Nội dung hiện tại
7	Tổng số nội dung

• Hiển thị Danh sách các nội dung trong bài học 
  

Trạng thái	Hiển thị	Ý nghĩa
Completed	Icon check màu xanh	Đã học xong
Current	Highlight tím Bài học hiện đang học sẽ được thể hiện active.	Nội dung đang học
Not started	nền trắng	Chưa học
Locked	icon khóa Khi hover vào các bài học ở dưới sẽ hiển thị là đang khóa do chưa học xong bài học này.	Chưa mở

Quy tắc khoá nội dung: content[i-1] chưa hoàn thành

Panel phải – Nội dung học 

Panel phải hiển thị nội dung học của content hiện tại.

Nút hành động: Tiếp tục 

• Click -> Chuyển sang nội dung/câu hỏi tiếp theo

Điều kiện	Action
Là nội dung trắc nghiệm, không phải câu hỏi cuối	Chuyển câu hỏi tiếp theo
Là nội dung trắc nghiệm, là câu hỏi cuối và không phải là nội dung cuối của bài học	Chuyển nội dung tiếp
Không phải nội dung cuối và không phải là nội dung trắc nghiệp	Chuyển nội dung tiếp
Là nội dung cuối	Hoàn thành bài học

Nút hành động: Thoát bài học

• Hiển thị ở: Góc dưới bên trái
• Click -> Quay lại màn hình danh sách bài học
• Progress vẫn được lưu.

Logic hoàn thành nội dung

• Với nội dung không phải trắc nghiệm hoặc câu hỏi cuối của nội dung trắc nghiệm:
  • Khi user nhấn Tiếp tục: content status → COMPLETED
  • Sau đó: mở khóa nội dung tiếp theo