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

Hiển thị text theo nội dung

• Nếu khoá học có chứa nội dung có file thuyết minh -> hiển thị icon và text "Có nội dung âm thanh"  

   

  

   

  ở khung bên phải, ngay dưới tên bài học
• Luôn hiển thị icon và text "Cần kết nối Internet" 

   

  

   

  ở khung bên phải, ngay dưới tên bài học, bên cạnh icon và text "Có nội dung âm thanh"

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.

Nút hành động: Mở rộng hiển thị nội dung học

• Click -> collapse Panel trái, toàn màn hình hiển thị nội dung học của Panel phải

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

UX/UI nội dung học theo từng loại

Học "Đoạn văn bản"

• Ngay khi chuyển sang nội dung văn bản có chứa file mp3 thuyết minh, hiển thị modal thông tin "Bài học có thuyết minh": 
  • Người dùng nhấn "Tôi đã hiểu" -> Quay lại màn hình hiển thị nội dung học hiện tại

• Hiển thị thanh audio: Chỉ hiển thị khi nội dung có chứa file mp3 ở phần thuyết minh
  • Thành phần

    UI	Mô tả
    Play/Pause	icon play
    Current time	thời gian đã nghe
    Total time	tổng thời lượng
    Progress bar	thanh tiến độ audio

  • Logic Audio

Hành động	Kết quả
Click play	phát audio
Click pause	dừng audio
Click progress	tua audio

• Panel phải - Nội dung học 
  • Header: Hiển thị Logo Supa
  • Icon audio: Chỉ hiển thị khi nội dung có chứa file mp3 ở phần thuyết minh
  • Hiển thị tiêu đề của nội dung, nếu tiêu đề dài quá thì wraptext
  • Hiển thị nội dung học: Hiển thị đúng Đoạn văn bản, Bullet, text... theo đúng định dạng được soạn ở khoá học
  • Scroll nội dung: Nếu nội dung dài, Panel nội dung cho phép Scroll, không scroll toàn trang.

Học "Đoạn Slide ảnh"

• Khi người học chưa xem tới ảnh cuối cùng thì nút sẽ có tác dụng là next tới ảnh tiếp theo.

 

• Khi xem tới ảnh cuối cùng thì nút biến thành nút [Tiếp theo], cho phép qua bài học khác.

 

• Với Slide ảnh có kèm ghi chú, hiển thị ảnh và text ghi chú theo kích thước như thiết kế, text Ghi chú được align center với ảnh

• Với nội dung Đoạn Slide ảnh có file mp3 thuyết minh:
  • Ngay khi vào nội dung, cũng hiển thị modal thông tin "Bài học có thuyết minh" như mô tả ở nội dung "Đoạn văn bản"
  • Hiển thị thanh audio và icon audio như mô tả ở nội dung "Đoạn văn bản"

Học "Video - youtube"

• Mặc định khi mới vào nội dung

 

• • Nếu nội dung chọn tự động phát -> phát luôn video ngay khi vào nội dung
  • Nếu nội dung không chọn tự động phát -> hiển thị như hình, user chủ động bấm play
• Video không được tua, Chỉ khi xem hết video mới có thể hiện lên nút để đi tới nội dung tiếp theo.

Học "Trắc nghiệm"

• Header: Hiển thị logo Supa
• Thanh tiến trình câu hỏi: Dựa theo số câu hỏi trong quiz và câu hỏi user đã trả lời, mầu tím là hiển thị % số câu hỏi đã trả lời/tổng số câu hỏi
• Nội dung câu hỏi và đáp án

Thành phần	Mô tả
Media	Hình ảnh (optional), chỉ hiển thị nếu câu hỏi có cấu hình ảnh minh hoạ Hiển thị ở giữa khung, kích thước mặc định theo thiết kế Có thể click để phóng to, UI xem ở thiết kế
Question text	Nội dung câu hỏi Hiển thị ngay bên dưới Media Nếu không có media, hiển thị nội dung câu hỏi ở giữa theo chiều dọc của khung hiển thị câu hỏi Text câu hỏi: align trái
Danh sách đáp án	Đáp án dài thì wraptext, max = 5 dòng như thiết kế, nếu dài quá thì hiển thị thanh scroll nội tại của đáp án đó.  Text đáp án align trái Tuỳ vào số lượng đáp án đúng được cấu hình để hiển thị radio/checkbox: Nếu chỉ có 1 đáp án đúng được cấu hình -> hiển thị radio Nếu có > 1 đáp án đúng được cấu hình -> hiển thị checkbox User click vào 1 đáp án -> Highlight đáp án được chọn

•  Khi chưa chọn đáp án nào, hiển thị:

 

• Sau khi chọn đáp án thì hiện nút tiếp tục và bắt buộc bấm tiếp tục để hoàn thành trả lời câu hỏi Quiz 

 

• Khi trả lời sai hiển thị thông báo kèm nội dung đã setup trong khóa học (nếu không có thì để trống!)

• Khi trả lời đúng hiển thị thông báo kèm nội dung đã setup trong khóa học (nếu không có thì để trống!)

 

• Với câu hỏi Quiz có đặt thời gian trong setup thì sẽ hiện hết thời gian, câu hỏi k được tính điểm và bắt buộc tiếp tục sang nội dung khác