Hệ thống Tạo câu hỏi – Khởi đầu của một hành trình học tập chủ động

Câu hỏi không chỉ để hỏi

Lúc bắt đầu thiết kế hệ thống Tạo câu hỏi cho EduplaX, mình nhận ra: câu hỏi không đơn thuần là để kiểm tra mà là để kích hoạt tư duy. Một hệ thống tốt không chỉ cho phép tạo câu hỏi, mà còn phải giúp giáo viên nghĩ sâu hơn về mục tiêu giảng dạy, về mức độ nhận thức mà học sinh cần đạt được.

Và từ đó, vấn đề mở ra: Làm sao để thiết kế một hệ thống tạo câu hỏi đủ mạnh mẽ, nhưng vẫn nhẹ nhàng với người dùng?

Chương 01: UI Breakdown – Một câu hỏi, nhiều lớp nghĩa

Giao diện "Tạo câu hỏi" được thiết kế như một canvas gọn gàng nhưng nhiều chiều. Đây là nơi giáo viên không chỉ nhập dữ liệu, mà thật sự thiết kế câu hỏi – theo đúng nghĩa của từ này trong giáo dục.

Kết cấu chính:

• Khối nhập nội dung câu hỏi (center-top)

  Đặt ở vị trí trung tâm dễ thấy, có hỗ trợ chèn khoảng trống trực tiếp (fill-in-the-blank), gợi mở khả năng tạo câu hỏi điền từ hoặc trắc nghiệm tích hợp.

  
  

• Tùy chọn metadata (top-right)

  Gồm 3 dropdown: Mục đích, Hình thức, Loại câu hỏi – giúp hệ thống nhận biết intent và logic hiển thị tương ứng. Mỗi thay đổi sẽ cập nhật ngay phần cấu trúc câu hỏi bên dưới.

  
  

• Danh sách đáp án động (center)

  Giao diện này hỗ trợ nhập số lượng đáp án không giới hạn, thêm/xóa nhanh, đồng thời tự động gán ký hiệu A/B/C/D… Đáp án đúng có thể chọn qua radio button.

  
  

• Lời giải (bottom)

  Không bắt buộc, nhưng được khuyến khích điền. Nằm riêng một khối giúp dễ phân biệt giữa nội dung và phần giảng giải.

  
  

• Sidebar trái – Cây thư mục + metadata phụ

  Một trong những điểm mạnh UI này là cho phép gắn nhanh câu hỏi vào từng nhánh kiến thức theo cấu trúc chương-trường-lớp. Giáo viên có thể tích vào một hoặc nhiều vị trí để tagging chính xác.

  
  

• Thêm giá trị/hashtag

  Phần này mở rộng khả năng phân loại theo kỹ năng (như "phân tích", "nhớ", "áp dụng"), giúp việc thống kê và đánh giá năng lực trở nên khả thi.

Design note thú vị

Việc cho phép nhập đáp án sai bằng đoạn văn dài (như C) là một điểm nổi bật – không nhiều hệ thống hỗ trợ dạng này, vì dễ lỗi hiển thị. Tuy nhiên, nó lại cực kỳ cần thiết với môn Ngữ văn, Tiếng Anh, Lịch sử. Việc tạo sai lầm có chủ đích giúp học sinh tư duy phản biện cao hơn.

Chương 02: Design Decisions – Giữa sức mạnh và sự tối giản

Một trong những lựa chọn lớn nhất là tối ưu cho tốc độ thao tác thay vì nhồi nhét chức năng. Ban đầu, có ý tưởng thêm flow tạo câu hỏi theo từng bước (wizard), nhưng sau khi test với vài giáo viên, phản hồi là: “Càng ít bước càng tốt. Chúng tôi chỉ muốn gõ câu hỏi và chọn đúng đáp án.”

Vì vậy, mình chọn giải pháp layout dạng một trang duy nhất, các thành phần được hiển thị/ẩn đi tùy theo loại câu hỏi được chọn.

Một lựa chọn khác là không bắt người dùng nhập tất cả metadata. Thay vào đó, hệ thống chỉ yêu cầu bắt buộc các trường cơ bản (nội dung, loại câu hỏi, đáp án đúng). Các tag khác được gợi ý tự động từ lịch sử, hoặc có thể bổ sung sau trong lúc giao bài.

Chương 03: Reflection – Khi câu hỏi cũng cần trả lời

Nhìn lại, bài học quan trọng nhất không nằm ở việc dùng component gì, mà là hiểu được tư duy của giáo viên khi tạo câu hỏi: họ không muốn bị “trói buộc” bởi form mẫu, nhưng vẫn cần cấu trúc đủ chặt để tránh sai sót (ví dụ: quên tick đáp án đúng).

Sau các đợt usability test, mình thấy rõ một pattern thú vị: khi hệ thống càng “giữ trật tự” giúp người dùng, người dùng càng thoải mái sáng tạo.

Hệ thống tạo câu hỏi của EduplaX vì thế được thiết kế như một canvas có định hướng: không bắt buộc theo thứ tự, nhưng luôn nhắc nhở nhẹ nhàng khi có điều thiếu.

Hệ thống giao bài - Nhiệm vụ nhỏ, trải nghiệm lớn

Lúc mới nhận đề bài "thiết kế luồng giao bài", mình cứ tưởng đây là một tính năng nhỏ. Chỉ cần có dropdown chọn lớp, ngày bắt đầu, ngày kết thúc, nhấn Giao bài là xong.

Nhưng khi bắt tay vào làm, mình mới hiểu: việc "giao một bài tập" không chỉ là đẩy nội dung đi, mà là thiết lập một trải nghiệm học tập – nơi giáo viên chủ động kiểm soát, và học sinh hiểu rõ mình cần làm gì, khi nào, và vì sao.

Chap 01: UI Breakdown – Tối giản nhưng không đơn giản

Dưới đây là phân tích cấu trúc UI của phần:

Cấu trúc chính:

• Thông tin bài kiểm tra (góc trái trên)

  Cho phép chọn bài đã tạo sẵn hoặc tạo mới ngay tại đây. Giao diện popup “Tạo đề kiểm tra nhanh” hỗ trợ teacher không bị ngắt flow khi muốn soạn đề mới.

  
  

• Thiết lập khối/lớp/môn

  Giao bài không thể "giao chung chung". Do đó, giao diện cung cấp dropdown chọn Khối lớp, Môn học, Lớp cụ thể, đảm bảo bài tập được phân bổ chính xác tới học sinh theo phân quyền hệ thống.

  
  

• Thời gian làm bài & deadline nộp

  Có thể tùy chỉnh cả thời gian được phép làm bài (thời lượng) lẫn khung thời gian mở bài.
  → Đây là điểm tạo sự khác biệt giữa kiểm tra lớp (có giờ giới hạn) và bài luyện tập (có thể mở dài ngày).

  
  

• Thiết lập cho từng nhóm học sinh

  Tính năng nâng cao như gán bài cho một nhóm cụ thể (VD: học sinh yếu, nhóm bổ sung…) giúp teacher quản lý tốt hơn trong lớp học phân tầng.

  
  

• Phản hồi/giám sát

  Dù chưa phải giao diện chấm bài, nhưng phần cấu hình cũng cho phép bật/tắt phản hồi ngay sau làm bài hoặc sau hạn nộp. Tính năng này rất được giáo viên yêu thích vì có thể kiểm soát tiến độ.

Khi người dùng nhấn nút Giao bài, một hộp thoại (modal) sẽ được mở ra, cho phép người dùng:

• Chọn lớp học & học sinh: Dropdown lọc lớp và nhóm học sinh cụ thể.

• Nhập tên bài kiểm tra & mô tả: Tên có giới hạn ký tự (0/50), mô tả có giới hạn 0/200 ký tự.

• Xem trước bài kiểm tra đã chọn: hiển thị theo dạng thẻ, có icon minh họa và loại bài kiểm tra (VD: Tự luận).

• Thông tin cấu hình nâng cao:

  • Hệ số điểm: ví dụ hệ số 1 hoặc các mức tuỳ chọn.

  • Công thức tính điểm: chọn “Điểm đầu tiên”, “Điểm cao nhất”,...

  • Thời gian bắt đầu và nộp bài: chọn ngày giờ rõ ràng.

  • Tuỳ chọn khác: bật/tắt “Làm lại nhiều lần”, “Nộp trễ”, “Xem đáp án”.

Nút Giao bài (màu xanh dương) chỉ hiển thị khi các trường quan trọng được nhập đầy đủ. Có thể huỷ bằng nút “Hủy” phía dưới.

Chap 02: Design Decision – Linh hoạt nhưng không lộn xộn

1. Chọn lớp và nhóm học sinh – Tư duy phân tầng

Việc phân lớp và học sinh theo hai dropdown riêng biệt là chủ đích nhằm hỗ trợ giáo viên:

• Giao bài cho toàn bộ lớp, hoặc

• Tuỳ chọn nhóm học sinh cụ thể (ví dụ học sinh cần luyện thêm, hoặc bài kiểm tra lại).

Việc này giúp giáo viên tiết kiệm thời gian thiết lập, đồng thời tăng tính linh hoạt của hệ thống.

2. Nhập tên bài kiểm tra và mô tả – Tối giản nhưng đủ thông tin

Thay vì yêu cầu mô tả dài dòng, hệ thống chỉ yêu cầu 50 ký tự cho tiêu đề và 200 cho mô tả. Điều này dựa trên quan sát thực tế: phần lớn giáo viên chỉ cần ghi chú ngắn để phân biệt bài. Quá nhiều trường sẽ làm họ mệt mỏi và dễ bỏ qua.

3. Hiển thị bài kiểm tra đã chọn – Thẻ gọn gàng có icon minh hoạ

Mỗi đề kiểm tra được hiển thị dưới dạng card nhỏ kèm icon (VD: Tự luận, Trắc nghiệm,...), vừa giúp nhận diện nhanh, vừa giữ cho giao diện sạch sẽ, không bị “choáng ngợp” nếu chọn nhiều đề (tối đa 50 đề).

4. Các cấu hình nâng cao (hệ số, chấm điểm, thời gian, quyền)

Những tính năng như “Chấm điểm theo lần đầu”, “Làm lại nhiều lần”, “Nộp trễ”, “Xem đáp án” được nhóm riêng về bên phải để:

• Tách biệt phần “Giao cho ai” và “Cấu hình bài kiểm tra”

• Không gây rối mắt khi nhập thông tin chính

• Cho phép giáo viên điều chỉnh sâu, nếu cần.

Đây là lựa chọn "mở rộng dần", tức là UI mặc định đơn giản, nhưng vẫn sẵn sàng cho người dùng nâng cao.

5. Modal thay vì mở trang mới – Giữ trải nghiệm liền mạch

Modal được sử dụng thay vì redirect sang trang mới, nhằm:

• Tránh mất thông tin đang điền ở trang tạo bài

• Giao diện nhẹ, không gây gián đoạn luồng thao tác

• Phù hợp với việc giao nhanh – hành vi thường gặp của giáo viên

6. Trạng thái nút Giao bài – Chỉ kích hoạt khi đủ dữ liệu

Nút “Giao bài” mặc định bị disable (xám) cho đến khi người dùng nhập đầy đủ dữ liệu cần thiết. Điều này giúp:

• Tránh lỗi “giao nhầm” khi thiếu tên hoặc lớp

• Hướng dẫn hành động rõ ràng, giảm tải nhận thức

Chap 03: Reflection

Có một điều thú vị mà mình nhận ra sau khi hoàn thiện tính năng “Giao bài”, đó là: thiết kế cho giáo viên cũng giống như thiết kế cho… một “người rất bận”.

Trong quá trình phỏng vấn người dùng, hầu hết giáo viên đều nói rằng họ “muốn mọi thứ càng nhanh càng tốt”, nhất là khi phải giao bài cho nhiều lớp cùng lúc. Điều này khiến mình phải suy nghĩ lại toàn bộ logic ban đầu.

Điều mình cảm thấy mình đã làm tốt là:

• Modal giao bài được giữ lại trong trang tạo bài, nhờ đó giáo viên có thể vừa soạn vừa giao mà không bị gián đoạn luồng suy nghĩ. Điều này cải thiện rõ rệt tốc độ thao tác.

• Các tùy chọn như “nộp trễ” hay “xem đáp án sau khi làm bài” ban đầu tưởng là nâng cao, nhưng thực tế lại được sử dụng rất thường xuyên. Việc gom các tùy chọn đó vào một cụm cố định giúp giảm đáng kể lỗi thao tác.

• Dropdown chọn lớp và nhóm học sinh hoạt động mượt mà, đơn giản, nhưng hiệu quả.

  
  

Design note:

Giao bài không đơn thuần là "chọn lớp và nhấn nút". Nó là quá trình giáo viên xây dựng một hành trình cho học sinh, với nhiều yếu tố cần kiểm soát – nhưng không được gây rối.

Thiết kế tốt trong trường hợp này, không phải là nhiều tuỳ chọn, mà là tuỳ chọn đúng nơi – đúng lúc – đúng người.

Hệ thống Làm bài – “Chạm tay vào cuộc thi thật sự”

Trong một lần tham gia buổi khảo sát thực tế tại một trường trung học, mình đã chứng kiến một khoảnh khắc khá cảm động. Một bạn học sinh nói nhỏ với mình: “Anh ơi, em bấm nộp rồi, nhưng em không biết là em sai câu nào. Em muốn biết là mình có tiến bộ không ấy.”

Câu nói ấy ám ảnh mình. Không chỉ vì cảm giác tiếc nuối của bạn ấy, mà còn vì nó đại diện cho nỗi mơ hồ rất phổ biến trong các nền tảng thi trực tuyến: học sinh không được phản hồi ngay, không được biết mình đang làm đúng hay sai, dẫn đến cảm giác "thi cử" mà không "học được gì".

Thế là khi đến phần thiết kế giao diện Làm bài, mình và team đã quyết định không xây dựng chỉ một giao diện thi, mà là một trải nghiệm “vừa kiểm tra – vừa học tập”, có cảm xúc và có phản hồi tức thì.

Chap 01. UI Breakdown – Từ góc nhìn người làm bài

Giao diện tổng thể

Học sinh được chào đón bằng một giao diện gọn gàng, chia làm hai cột:

• Bên trái là bộ điều hướng thông minh với đồng hồ đếm ngược, bảng câu hỏi, trạng thái làm bài (đang làm – đã làm – bỏ qua – sai – đúng).

• Bên phải là nội dung câu hỏi: rõ ràng, tối giản, tập trung hoàn toàn vào phần lựa chọn và thao tác.

Các loại câu hỏi

• Trắc nghiệm đơn (Single Choice): 4 đáp án – chỉ chọn được 1.

• Trắc nghiệm nhiều đáp án (Multiple Choice): học sinh được chọn số lượng đáp án đúng nhất định – khi đủ thì các ô khác sẽ tự disable.

• Tự luận/Điền từ: khung nhập văn bản hỗ trợ định dạng và gợi ý trực quan.

Phản hồi sau khi trả lời

Ngay khi ấn “Kế tiếp”, hệ thống hiển thị:

• Đáp án đúng (màu xanh)

• Đáp án học sinh chọn nếu sai (màu đỏ)

• Các đáp án có thể chấp nhận khác nếu có (giao diện tag tròn)

Nhờ đó, học sinh không chỉ biết đúng/sai mà còn hiểu được sự đa dạng của phương án đúng trong nhiều trường hợp mở.

Chap 02. Design Decision – Những lựa chọn không ngẫu nhiên

• Phản hồi tức thì sau mỗi câu: Giúp học sinh điều chỉnh tư duy ngay, thay vì chờ kết quả tổng. Đáp ứng nhu cầu học tập song song với kiểm tra.

• Bảng điều hướng bên trái: Giúp học sinh biết tiến độ và tình trạng từng câu hỏi. Tránh mất kiểm soát hoặc bị “quên câu”.

• Màu sắc phân loại câu hỏi (hiện tại, đúng, sai, bỏ qua): Được lấy cảm hứng từ mô hình phản hồi màu của game (gamification subtle).

• Không hiển thị tổng điểm trước khi nộp: Tránh áp lực thi cử, tạo tâm lý làm bài tự nhiên hơn.

• Hạn chế thao tác rườm rà: Loại bỏ bất kỳ yếu tố gây nhiễu như chat, sidebar không cần thiết.

Chap 03. Reflection – Học được gì sau khi thiết kế “một kỳ thi tử tế”

Nhìn lại, phần làm bài có lẽ là nơi mình học được nhiều nhất về “thiết kế có trách nhiệm”. Đó không chỉ là làm cho đẹp – mà là làm sao để người dùng (đặc biệt là học sinh) không cảm thấy bị chán nản, bị đánh giá hay bị bỏ rơi giữa bài thi.

Mình đã từng nghĩ “làm bài kiểm tra” chỉ cần đúng. Nhưng thực ra, cái quan trọng hơn là giữ được động lực học tiếp sau khi nộp bài. Và phần UI nhỏ bé này, với từng sắc xanh, dấu tích, lời nhắc “bạn đã chọn đủ đáp án” chính là sự bảo chứng cho mục tiêu ấy.

🎓 Tổng kết hệ thống bài tập EduplaX: Từ tay người thầy đến màn hình học trò

Một hệ thống sinh ra từ những câu hỏi đơn giản…

“Làm sao để giáo viên không phải tốn 3 tiếng nhập câu hỏi mà vẫn quản lý được cả kho đề?”
“Làm sao để giao bài đúng lớp, đúng trình độ – mà không lặp lại quy trình mỗi lần?”
“Làm sao để học sinh làm bài mà không bị stress, vẫn học được cái sai của mình?”

Chúng mình bắt đầu bằng việc đi tìm lời giải cho những câu hỏi nhỏ đó. Và rồi, sau nhiều lần prototyping – test – sửa – test tiếp, hệ thống bài tập EduplaX ra đời như một hành trình ba chặng:
Giáo viên tạo câu hỏi → Giao bài → Học sinh làm bài và nhận phản hồi ngay.

Hành trình 3 chặng: Gắn kết trải nghiệm, chia sẻ mục tiêu

1. Tạo câu hỏi – nơi thầy cô trở thành người biên tập tri thức

   Giao diện thân thiện, hỗ trợ nhiều dạng câu hỏi (trắc nghiệm, tự luận…), cho phép gắn hashtag, phân loại độ khó, lưu nháp và preview. Trải nghiệm viết câu hỏi trở nên nhẹ nhàng như viết blog, nhưng vẫn đảm bảo đầy đủ metadata để tái sử dụng sau này.

   
   

2. Giao bài – nơi logic được tự động hóa, không còn lặp lại vô ích

   Giao diện giao bài theo lớp, theo học sinh, cho phép đặt thời hạn, cho phép làm lại, nộp trễ, xem đáp án… Hệ thống giúp giáo viên kiểm soát logic phức tạp mà không cần đau đầu lập kế hoạch từng lần.

   
   

3. Làm bài – nơi học sinh học được từ chính sai lầm của mình

   Mỗi câu hỏi được phản hồi tức thì sau khi trả lời: đúng thì động viên, sai thì hiện đáp án đúng kèm phương án chấp nhận khác. Học sinh không chỉ biết điểm – mà biết lý do. Và đó mới là nền tảng của việc học.

Tư duy sản phẩm: Kết nối vai trò – thống nhất trải nghiệm

Chúng mình không thiết kế ba công cụ riêng biệt.
Mà là một vòng tròn học tập, nơi:

• Giáo viên tạo nội dung → hệ thống tự động hoá giao bài → học sinh tương tác → dữ liệu quay lại để phân tích & cải thiện đề.

• UI xuyên suốt: từ font, màu, layout đến thao tác đều giữ consistency, giúp người dùng không cần học lại mỗi lần chuyển bước.

• Mỗi quyết định thiết kế đều được cân nhắc dựa trên một triết lý chung: “Giáo dục nên thông minh nhưng không làm khó.”

Điều khiến chúng mình tự hào nhất?

Không phải giao diện đẹp, cũng không phải chức năng “xịn”.
Mà là khi một thầy giáo lớn tuổi nói với mình:

“Hệ thống này làm chú muốn giao bài cho học sinh ngay vì mọi thứ đơn giản quá, ngứa tay ngứa chân thật.”

Hay khi một học sinh bảo:

“Làm xong biết đáp án ngay, em có thể tự biết điểm cao hay thấp và bắt đầu ôn lại ngay sau khi nộp bài chứ không còn chờ kết quả trong mơ hồ nữa.”