Học khoá học
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
| Actor | Mô tả |
|---|---|
| Người học (Learner) | Người dùng được gán khóa học và thực hiện học |
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ị:
| Thuộc tính | Quy tắc |
|---|---|
| Nguồn dữ liệu | Khóa học được assign cho user |
| Số lượng hiển thị | Tối đa 5 khóa học / 1 dòng |
| Số dòng | không giới hạn |
| Kiểu hiển thị | Card |
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ị:
| Thành phần | Mô tả |
|---|---|
| Cover image | Hình đại diện khóa học |
| Text | "Khóa học" |
| Tên khóa học | Title |
| Deadline | hiển thị dạng dd/mm |
| Trạng thái | cần học / đã hoàn thành |
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
| Component | Mô tả |
|---|---|
| Tab filter | Cần học / Đã hoàn thành |
| Search | Tìm kiếm khóa học theo tên |
| Grid khóa học | hiển thị card |
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ị
| Thuộc tính | Quy tắc |
|---|---|
| Grid | 8 card / dòng |
| Responsive | tự wrap dòng |
5.7 Action – Mở khóa học
User click vào card khóa học -> hiển thị màn hình Bắt đầu học/Tiếp tục học
6. Màn hình Khóa học – Bắt đầu học
