Làm mới trình chỉnh sửa khoá học, chương và bài học
Các trang giảng viên dùng để sửa khoá học, chương và từng loại bài học giờ theo cùng kiểu với trang quản trị tổ chức. Mỗi trang có một nút Lưu ở thanh trên, các mục phẳng, và nút xoá nằm riêng ở cuối trang. Tính năng giữ nguyên.
Tình trạng ngày 24/10/2026
- Giai đoạn
- PR chưa mở, chờ review. Code đã push lên nhánh, chưa merge, chưa có trên beta hay production.
- Nhánh
- SP-851/course-editor-rework, một commit ac167faf.
- Base
- origin/main tại 1d13d171. Phần "Trước" trong ảnh và video chụp từ đúng commit này.
- PR
- Chưa mở. Link PR sẽ được thêm khi mở.
- Ticket
- SP-851
- Phạm vi
- Chỉ đổi frontend, ở các trang giảng viên và quản trị dùng để sửa khoá học. Học viên không thấy gì khác. Backend, API và cơ sở dữ liệu không đổi.
- Ảnh và video
- Toàn bộ ảnh chụp và video lấy từ môi trường chạy trên máy với dữ liệu mẫu. Tên người và số liệu không có thật.
Vì sao làm lại
Trang sửa khoá học và bài học cũ mỗi chỗ lưu một kiểu. Có trang để nút Lưu trong một khung giữa trang, có trang có hai nút lưu cho hai phần khác nhau. Ở trang bài học, nút Xóa màu đỏ nằm ngay cạnh nút Cập nhật, bấm nhầm là mất bài.
Trang quản trị tổ chức (SP-792) đã chuyển sang kiểu phẳng với một nút Lưu ở trên cùng. Đợt này đưa toàn bộ phần soạn khoá học về cùng kiểu đó. Giảng viên quen một trang là dùng được mọi trang khác.
Thay đổi chính
Một nút Lưu ở trên
Thanh tiêu đề cố định có nút Lưu, chấm "Có thay đổi chưa lưu" và nút Bỏ thay đổi.
Mục phẳng
Không còn khung thẻ. Mỗi nhóm trường là một mục có biểu tượng và tiêu đề.
Vùng nguy hiểm
Nút xoá chương và bài học xuống cuối trang, xa nút Lưu.
Danh sách tham khảo
Tài liệu tham khảo là một danh sách, liên kết mới được đánh dấu Chưa lưu.
Danh sách và trình soạn
Trang câu hỏi chia làm danh sách bên trái, trình soạn bên phải.
Video giới thiệu
Dài 3 phút 57 giây. Phần đầu là giao diện cũ, phần sau là giao diện mới. Giọng đọc tiếng Anh, phụ đề tiếng Việt bật sẵn. Có thể đổi sang phụ đề tiếng Anh trong nút phụ đề của trình phát. Chấm xanh là con trỏ chuột.
Trong video
- 0:00 Thẻ mở đầu.
- 0:13 Giao diện cũ, có nhãn "TRƯỚC" ở góc. Thông tin khoá học với nút Lưu nằm trong khung Tổng quan.
- 0:24 Bài đọc. Nút Xóa đỏ cạnh Cập nhật, phần Tài liệu tham khảo có nút Cập nhật riêng.
- 0:38 Cài đặt khoá học có hai nút Lưu, một cho Lịch làm bài tập, một cho Thu thập phản hồi.
- 0:49 Trang câu hỏi quiz chèn thêm thanh bên thứ hai cạnh cây nội dung.
- 0:55 Thẻ "SAU". Từ đây là giao diện mới.
- 1:01 Thông tin khoá học: breadcrumb, dòng trạng thái, một nút Lưu ở thanh trên. Cuộn qua các mục phẳng.
- 1:20 Sửa phần Tóm tắt. Thanh trên hiện chấm "Có thay đổi chưa lưu" và nút Bỏ thay đổi. Bấm Bỏ thay đổi, trang về như cũ.
- 1:32 Sửa lại rồi bấm Lưu. Thông báo "Khoá học đã được cập nhật thành công" hiện ở góc dưới bên trái khoảng 3 giây.
- 1:43 Cài đặt khoá học. Trạng thái, Đăng ký và Bán công khai vẫn lưu ngay khi đổi (chỉ di chuột qua, không đổi). Thêm một điều kiện Thu thập phản hồi, thanh trên báo chưa lưu, rồi Bỏ thay đổi.
- 2:03 Trang chương: Thông tin cơ bản, Tài liệu tham khảo, Vùng nguy hiểm.
- 2:11 Bài đọc. Thêm tài liệu "Bài tập Python trên W3Schools", dòng mới có chấm Chưa lưu, rồi Bỏ thay đổi.
- 2:32 Vùng nguy hiểm, nút "Xóa bài học", hộp thoại xác nhận, bấm Hủy.
- 2:42 Quiz và trang câu hỏi: danh sách 12 câu bên trái, trình soạn bên phải. Sửa câu 5, thanh trên báo chưa lưu. Di chuột qua Thêm câu hỏi và Nhập từ tệp, rồi Bỏ thay đổi.
- 3:12 Bài luận: mục Chấm điểm với 4 tiêu chí, 100 / 100 điểm.
- 3:21 Bài học cuộc thi: cuộc thi liên kết và nút Mở trang cuộc thi.
- 3:29 Bộ bài tập: danh sách 3 bài có nút đổi thứ tự, hộp chọn Thêm bài tập, đóng lại mà không thêm gì.
- 3:44 Cây nội dung khoá học: chương là nhóm phẳng, nút Thêm bài học luôn hiện. Kết thúc ở Thông tin khoá học.
Thay đổi gì và vì sao
Một nút Lưu ở thanh trên, có trạng thái chưa lưu
Mọi trang sửa (khoá học, chương, từng loại bài học, trang câu hỏi quiz) có một thanh tiêu đề cố định khi cuộn. Khi chưa sửa gì, nút Lưu mờ đi. Khi có thay đổi, thanh hiện chấm cam "Có thay đổi chưa lưu" và nút Bỏ thay đổi. Bỏ thay đổi đưa trang về giá trị đã lưu.
Trước đây trang Thông tin khoá học để nút Lưu trong khung Tổng quan, giữa trang. Các trang bài học có nút Cập nhật ở trên và thêm một nút Cập nhật khác cho tài liệu tham khảo. Giờ mỗi trang chỉ còn một chỗ lưu.
Các mục phẳng thay cho khung thẻ
Khung thẻ, đường kẻ và tiêu đề tím bên trong biểu mẫu được thay bằng các mục phẳng. Mỗi mục có biểu tượng, tiêu đề và đôi khi một dòng mô tả. Bài học nào cũng theo cùng thứ tự: Thông tin cơ bản, Nội dung, các mục riêng của loại bài (Lịch làm bài, Chấm điểm...), Cài đặt, Tài liệu tham khảo, Vùng nguy hiểm. Các ô đánh dấu (checkbox) trở thành công tắc có mô tả. Đầu trang có dòng thông tin ngắn: trạng thái, loại bài, số câu hỏi hoặc số bài tập.
Trước và sau của từng trang nằm ở phần Trước và sau từng màn hình.
Vùng nguy hiểm cho thao tác xoá
Nút Xóa đỏ từng nằm ngay cạnh nút Cập nhật ở đầu trang chương và bài học. Giờ nút xoá nằm trong mục "Vùng nguy hiểm" ở cuối trang, xa nút Lưu. Hộp thoại xác nhận giữ nguyên như cũ.
Tài liệu tham khảo là một danh sách
Tài liệu tham khảo của chương và bài học giờ là một danh sách, có số lượng ở đầu, nút xoá ở mỗi dòng và ô thêm liên kết hoặc tệp ở cuối. Liên kết mới có chấm cam "Chưa lưu" cho đến khi bấm Lưu ở thanh trên. Nút "Lưu tài nguyên" và "Cập nhật" riêng của phần này không còn. Khung vàng báo chưa lưu cũng bỏ, vì thanh trên đã báo.
Câu hỏi quiz: danh sách bên trái, trình soạn bên phải
Trang câu hỏi cũ chèn một thanh bên thứ hai cạnh cây nội dung khoá học, có nút Quay lại riêng. Giờ trang có breadcrumb về bài quiz, một nút Lưu ở thanh trên, khung danh sách câu hỏi (Thêm câu hỏi, Nhập từ tệp, loại và nút xoá ở mỗi dòng, tổng số câu và tổng điểm) và trình soạn chia mục Loại câu hỏi, Đáp án, Giải thích.
Nội dung câu hỏi chờ nút Lưu ở thanh trên như mọi trang khác. Thêm, xoá và nhập câu hỏi vẫn chạy ngay khi bấm, như trước.
Quy tắc lưu ở Cài đặt khoá học
Trang này có hai kiểu lưu, và đợt này giữ nguyên kiểu nào ra kiểu đó. Trạng thái, đăng ký và bán công khai vẫn lưu ngay khi đổi, như trước. Lịch làm bài tập và Thu thập phản hồi thành bản nháp, lưu chung bằng một nút Lưu ở thanh trên.
| Phần | Cách lưu |
|---|---|
| Trạng thái khoá học | Lưu ngay khi đổi, như trước. |
| Trạng thái đăng ký | Lưu ngay khi đổi, như trước. |
| Bán công khai (B2C) | Lưu ngay khi bật hoặc tắt, như trước. |
| Lịch làm bài tập | Bản nháp. Lưu bằng nút Lưu ở thanh trên. Trước đây có nút Lưu và Xoá riêng. |
| Thu thập phản hồi | Bản nháp. Lưu cùng nút Lưu ở thanh trên. Trước đây có nút Lưu riêng. |
Nút Lưu ở thanh trên lưu cả hai bản nháp. Mỗi bản nháp chỉ được xoá khỏi trang khi phần đó lưu thành công, nên nếu một phần lỗi thì phần đó vẫn còn để lưu lại. Nếu vừa đổi trạng thái và lần lưu trạng thái còn đang chạy, nút Lưu đợi nó xong rồi mới lưu tiếp.
Trước và sau từng màn hình
Ảnh bên trái là bản đang chạy (origin/main), ảnh bên phải là bản mới. Cả hai dùng cùng dữ liệu mẫu: khoá "Lập trình Python cơ bản" ở trạng thái Nháp, 2 chương, 9 bài học. Bấm vào ảnh để xem cỡ lớn.
Thông tin khoá học
Cài đặt khoá học
Chương
Bài đọc
Quiz
Câu hỏi quiz
Bài luận
Bài học cuộc thi
Bộ bài tập
Cây nội dung khoá học
Cả hai ảnh cuộn danh sách bài học tới cùng một chỗ. Ở bản cũ, khi chương có nhiều bài, muốn thêm bài phải cuộn hết danh sách. Ở bản mới, nút Thêm bài học luôn ở trong tầm nhìn. Kéo thả để đổi thứ tự vẫn như cũ.
Phạm vi
- Ai thấy thay đổi. Giảng viên và quản trị viên khi tạo hoặc sửa khoá học, chương và bài học. Học viên không thấy gì khác, trang học không đổi.
- Tính năng. Mọi trường, nút, thao tác và đường dẫn cũ vẫn còn. Không bỏ tính năng nào.
- Các trang có đổi. Tạo khoá học, Thông tin khoá học, Cài đặt khoá học, chương, và mọi loại bài học: bài đọc, video, slide, quiz và trang câu hỏi, bài luận, bài tập, H5P, lớp học trực tuyến, cuộc thi, bộ bài tập. Ảnh trên trang này không chụp video, slide, bài tập, H5P và lớp học trực tuyến, nhưng chúng dùng cùng bố cục.
- Dữ liệu. Không đổi backend, API hay cơ sở dữ liệu. Không cần chuyển đổi dữ liệu khi triển khai.
Lỗi đã sửa trong đợt này
Có lỗi đã có sẵn trên bản đang chạy, có lỗi tìm ra khi review bản làm lại. Tất cả đều sửa trong commit này.
- Chuyển nhanh giữa các bài học bị kẹt ở "Đang tải". Khi bấm từ bài này sang bài khác cùng loại, hoặc sang tạo bài mới, biểu mẫu có thể đứng mãi ở màn hình tải. Giờ mỗi bài học mở một biểu mẫu mới, nên dữ liệu về muộn của bài trước không còn đổ nhầm vào bài sau.
- Trang câu hỏi quiz báo chưa lưu ngay khi mở. Nhãn "Chưa lưu" hiện dù chưa sửa gì, và Bỏ thay đổi không xoá được nó. Ảnh "Trước" ở phần Câu hỏi quiz cho thấy lỗi này trên bản cũ.
- Cài đặt khoá học làm mất ngày làm bài hoặc bản nháp. Nếu bấm Lưu khi trang đang lưu một phần khác, trang có thể xoá bản nháp Lịch làm bài tập hoặc Thu thập phản hồi mà không lưu gì. Giờ mỗi bản nháp chỉ bị xoá khi phần đó lưu thành công.
- Bài luận và video bị xoá trắng sau khi tạo. Vừa tạo xong bài luận, biểu mẫu tự đưa về giá trị mặc định. Vừa tạo xong bài video, video đã chọn biến khỏi ô chọn. Giờ cả hai giữ đúng những gì vừa lưu.
- H5P vẫn báo chưa lưu sau khi đã lưu. Sau khi bấm Lưu, trang H5P vẫn hiện "Có thay đổi chưa lưu". Giờ trang về trạng thái sạch sau khi lưu.
Thay đổi về cách hoạt động cần biết
- Không gửi lại được cùng một Lịch làm bài tập. Nút Lưu chỉ bật khi có thay đổi. Bản cũ cho bấm Lưu lại Lịch làm bài tập với đúng ngày đã lưu, bản mới thì không, vì không có gì để lưu.
- Nút Quay lại được thay bằng breadcrumb. Nút "Quay lại" ở góc phải các trang cũ không còn. Dùng breadcrumb ở đầu trang để quay về, ví dụ "Khoá học / Lập trình Python cơ bản / Chương 1: Nền tảng Python / Bài kiểm tra kiến thức cơ bản" ở trang câu hỏi quiz.
- Chọn câu hỏi khác vẫn bỏ phần sửa chưa lưu. Ở trang câu hỏi quiz, nếu đang sửa một câu mà bấm sang câu khác, phần sửa chưa lưu bị bỏ, không có hộp thoại hỏi lại. Bản cũ cũng vậy, đợt này chưa đổi. Hãy bấm Lưu trước khi chuyển câu.
Giới hạn đã biết, chưa sửa
- Lịch chọn ngày hiện tên tháng tiếng Việt khi giao diện là tiếng Anh. Lỗi nằm ở tên tháng trong ô chọn ngày. Chưa sửa trong đợt này.
- Khoá miễn phí vẫn hiện số gợi ý 1000000 trong ô giá. Đây là chữ mờ gợi ý trong ô trống, không phải giá thật. Khoá trong ảnh có giá 0. Chưa sửa trong đợt này.
- Video mẫu không có mã nanoid hiện ô chọn video trống. Ở trang sửa bài video, nếu video trong dữ liệu mẫu thiếu mã nanoid thì ô chọn không hiện video đang dùng, dù dòng thời lượng vẫn có. Đây là vấn đề dữ liệu mẫu trên máy, không phải lỗi của bố cục mới. Nên kiểm tra lại với video thật trên beta.
- Chưa kiểm tra trên beta. Mọi ảnh và video đến từ môi trường chạy trên máy với dữ liệu mẫu.
Cách kiểm tra trên beta sau khi merge
Khoảng 15 phút, với tài khoản giảng viên có một khoá học nháp để thử. Đừng thử trên khoá đang có học viên.
Thông tin khoá học
Sửa Tóm tắt. Thanh trên phải hiện "Có thay đổi chưa lưu". Bấm Bỏ thay đổi, giá trị cũ quay lại và nút Lưu mờ đi. Sửa lần nữa, bấm Lưu, tải lại trang và xem giá trị mới còn đó.
Cài đặt khoá học
Đổi trạng thái đăng ký và thấy nó lưu ngay. Đổi Lịch làm bài tập và thêm một điều kiện Thu thập phản hồi, bấm một nút Lưu ở thanh trên, tải lại trang và xem cả hai đã lưu.
Chương và bài đọc
Thêm một tài liệu tham khảo, dòng mới phải có chấm "Chưa lưu". Bấm Lưu, chấm mất. Bấm "Xóa bài học" trong Vùng nguy hiểm, thấy hộp thoại xác nhận, rồi bấm Hủy.
Quiz
Mở trang câu hỏi. Ngay khi mở, nút Lưu phải mờ. Sửa một câu, bấm Lưu, tải lại trang. Thêm rồi xoá một câu hỏi để thấy hai thao tác này chạy ngay.
Các loại bài khác
Tạo một bài luận và một bài video mới. Sau khi tạo, biểu mẫu phải giữ đúng nội dung vừa nhập và video vừa chọn. Mở một bài H5P, bấm Lưu, trang không còn báo chưa lưu.
Chuyển nhanh giữa các bài
Bấm liên tục qua vài bài học trong cây nội dung rồi bấm Thêm bài học. Không trang nào được kẹt ở màn hình tải.
Phía học viên
Mở khoá học bằng tài khoản học viên. Trang học phải giống hệt trước.
Các bước để đưa lên
- Mở PR từ nhánh SP-851/course-editor-rework, review và duyệt.
- Merge vào main. Bản này tự lên beta. Không cần chuyển đổi dữ liệu hay đổi cấu hình.
- Chạy lượt kiểm tra trên beta ở phần trên.
- Chuyển SP-851 sang Testing sau khi kiểm tra beta, và sang Done khi bản này có trong một bản phát hành production.