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.5 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/Học lại	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
Chưa nộp bài	Nộp bài	Bắt đầu nộp bài
Chờ đánh giá	Xem lại bài tập đã nộp	Mở lại bài tập đã nộp

Nội dung học thường

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

Kết bài học

• Hiển thị màn hình có Tiêu đề + text mô tả Kết thúc bài học theo cấu hình bài học, align giữa, tiêu đề bold như hình bên dưới và có nút [Thoát khỏi bài học]
  
  • Điều kiện hiển thị màn hình: Tất cả các nội dung trong bài học đã được hoàn thành

• Nhấn nút [Thoát khỏi bài học]: Hiển thị màn hình thông báo theo điều kiện:
  • Với bài học không cấu hình điều kiện hoàn thành hoặc bài học có cấu hình điều kiện hoàn thành và user đạt % điểm Qua bài học, hiển thị % điểm của user 
    

• • Với bài học có cấu hình điều kiện hoàn thành và user Chưa qua bài học , hiển thị % điểm của user, số % tối thiểu cần đạt của user để qua bài.

• • • • • Nhấn nút [Học lại] -> Hiển thị modal Cảnh báo xoá kết quả học -> Xác nhận trên modal -> Hiển thị lại màn hình học bài học hiện tại, focus vào nội dung đầu tiên
        • Nhấn nút [Thoát khỏi bài học]: Quay lại màn hình Danh sách bài học của khoá

Modal Cảnh báo Xoá kết quả học:

Điều kiện hiển thị modal: User chọn 1 bài học ở trạng thái "Đang học" hoặc "Hoàn thành" -> User nhấn nút [Học lại] từ màn hình danh sách bài học 

Hoặc user nhấn nút [Học lại] từ màn hình nội dung Kết thúc bài

User nhấn nút "Xoá" ở modal -> Clear kết quả học của phiên hiện tại, trạng thái học của phiên hiện tại chuyển là "Chưa học", user thực hiện học lại bài học từ nội dung học đầu tiên. 

Xử lý với khoá học có điều kiện phải hoàn thành khoá học khác mới được mở như sau:

• User đã hoàn thành khoá học điều kiện và mở khoá học và đang học
• Sau đó, user nhấn nút [Học lại] ở khoá học điều kiện 
• Hệ thống thực hiện: khoá lại khoá học đã mở
• Sau khi user hoàn thành đủ các khoá học điều kiện sẽ cho mở lại khoá học và tiếp tục học
• Lưu ý: Khi khoá lại khoá học phải lưu lại kết qủa các nội dung đã học, khi mở lại khoá học, user không phải học lại các nội dung đã hoàn thành.

VD: X là đầu vào của Y. X hoàn thành, user đã mở và đang học Y. user mở lại X -> hệ thống khoá lại Y không cho học đến khi X được hoàn thành thì cho phép người học vào tiếp tục học Y. 

Cách tính % bài học: 

• Mỗi nội dung học được tính max là 100%
• % điểm của mỗi câu trắc nghiệm (nếu có nội dung trắc nghiệm) = 100%/số câu trắc nghiệm của nội dung đó
• Với nội dung trắc nghiệm, chỉ tính điểm cho các câu trả lời đúng => %điểm của nội dung trắc nghiệm = % điểm của mỗi câu trắc nghiệm x số lượng câu trả lời đúng
• % điểm của bài học = Tổng %điểm của các nội dung học trong bài học/số lượng nội dung của bài học

Làm tròn đến phần nguyên

VD:

• bài học có 5 nội dung (trong đó có 1 nội dung là trắc nghiệm gồm 10 câu hỏi)
• Người học đã học hết các nội dung không phải trắc nghiệm, trả lời đúng 6 câu hỏi trắc nghiệm
• => % bài học của người học = (100+100+100+100+ 100/10*6)/5 = 92%

Nộp Bài tập 

Cách vào

Người học vào khoá học -> chọn bài tập tự luận (nếu có) -> Người học nhấn vào nút [Nộp bài] hoặc [Xem lại bài tập đã nộp] để vào màn hình nộp bài

UX/UI nộp bài tập

• Panel trái - Thông tin bài tập:
  • Hiển thị tên bài tập
  • Hiển thị text "Nội dung cần làm"
  • Hiển thị mô tả cho bài tập đó theo cấu hình
• Panel phải - Khu vực làm bài:
  • Hiển thị logo Supa
  • Khung nhập nội dung làm bài
    • Editor văn bản: hiển thị placeholder "Nhập bài làm"
    • Đính kèm:

Icon	Chức năng
Image	Upload ảnh, tối đa 5MB, chỉ cho phép upload 1 ảnh
Attachment	Upload file, tối đa 25MB, chỉ cho phép upload 1 file

 Nêu có tệp cùng với ảnh thì cho tệp xuống riêng phía dưới và sử dụng Component File Card (Ant X)

• • Nút nộp bài: 
    • Enable khi: Khi đã có ảnh, tệp hoặc nội dung trong bài tập 
    • Click Nộp bài: Hiển thị thông báo thành công, chuyển trạng thái Bài tập sang "Chờ đánh giá", quay ra màn hình danh sách bài học 

Màn hình hiển thị bài tập đã nộp:

• Hiển thị trạng thái bài tập như sau:
  • Nếu Chưa được đánh giá: trạng thái "Chờ đánh giá"
  • Nếu được đánh giá Đạt: trạng thái "Đạt"
  • Nếu được đánh giá không đạt: trạng thái "Không đạt"
• Nhấn nút [Xem lại bài đã nộp]: Quay lại màn hình nộp bài và cho phép chỉnh sửa lại bài đã nộp và nộp lại
• Thời gian nộp bài: Thời điểm nộp bài mới nhất, dạng hh:mm ngày dd/MM/yyyy
• Hiển thị nội dung text đi kèm, align trái
• Ảnh nộp trong bài tập được phóng to dạng fill (như thiết kế)
• Hiển thị file đính kèm bài học (nếu có)

6.4 Segment Tài liệu

• Hiển thị các file đựơc đính kèm trong khoá học và dung lượng tương ứng của file
• Nhấn vào file -> tải file về thiết bị hiện tại