Sắp xếp chỗ ngồi lớp học như một trò chơi trực tuyến - Seat Stealer

Bối cảnh

• Đây là một side project bắt đầu từ thời học sinh cấp ba, khi tôi muốn biến việc xếp chỗ ngồi nhàm chán và phiền phức thành thứ gì đó thú vị hơn
• Ý tưởng là để học sinh tự tham gia bằng thiết bị của mình và tranh giành chỗ ngồi mong muốn
• Khi đó danh sách học sinh cũng bị hardcode, mã nguồn thì hoàn toàn thành một mớ spaghetti, nhưng vẫn cho ra một sản phẩm trông khá ổn
• Tôi không thể quên ngày đầu tiên trình diễn sau khi xin phép giáo viên chủ nhiệm. Phản ứng cực kỳ nhiệt tình, và dự án đã được dùng suốt cả năm

Xây dựng lại

• Sau khi tốt nghiệp, tôi nhận được liên lạc từ trường. Họ yêu cầu chỉnh sửa chương trình này cho phù hợp với lớp hiện tại.
• Nhưng code đã quá rối, hơn nữa danh sách học sinh và sơ đồ chỗ ngồi đều bị hardcode, nên tôi quyết định rebuild để có một dự án có thể bảo trì được
• Cấu trúc
  • Backend: để toàn bộ dữ liệu học sinh được xử lý ở phía client, backend chỉ đóng vai trò như một "game server" truyền dữ liệu.
    • Node.JS
    • Socket.IO
  • Frontend - admin: quản lý toàn bộ dữ liệu học sinh và điều phối tiến trình trò chơi. Màn hình này được thiết kế với giả định sẽ được trình chiếu lên TV.
    • SvelteKit
    • Socket.IO
  • Frontend - học sinh: kết nối với admin thông qua backend để gửi nhận dữ liệu.
    • SvelteKit
    • Socket.IO
• Một trình chỉnh sửa với UI thân thiện đã được đưa vào để có thể dễ dàng sửa sơ đồ chỗ ngồi và danh sách học sinh.

Kịch bản

1. Khi bắt đầu "xếp chỗ ngồi trực tuyến" từ trang admin và tải lên tệp dữ liệu học sinh, một "phòng" mới sẽ được tạo và hiện ra mã QR để học sinh có thể truy cập.
2. Học sinh dùng thiết bị riêng quét mã QR để vào trò chơi. Ở trang admin có thể kiểm tra và quản lý trạng thái kết nối của học sinh.
3. Khi admin bắt đầu trò chơi, trang của học sinh sẽ hiện màn hình "chọn chỗ". Sau khi bỏ phiếu cho chỗ mình muốn, lựa chọn đó sẽ được ghi lại ở trang admin.
4. Khi tất cả học sinh hoàn tất bỏ phiếu, trang admin sẽ hiển thị kết quả.
5. Những học sinh chọn trùng một chỗ sẽ chơi một trò đơn giản ngay tại lớp
   • Oẳn tù tì, xúc xắc, minigame, v.v. tùy quyền quyết định của giáo viên
6. Học sinh chiến thắng trong trò chơi sẽ chiếm được chỗ đó.
7. Lặp lại cho đến khi tất cả học sinh đều được xếp chỗ

Cảm nghĩ

• Để công khai minh bạch rằng dữ liệu học sinh không bị thu thập hay sử dụng, tôi đã đưa dự án thành mã nguồn mở.
• Vì được thiết kế với tiền đề chạy trong môi trường trường học, điều khó nhất là xử lý được mọi tình huống ngoại lệ khác nhau.
  • Nếu học sinh bị mất kết nối giữa chừng, hệ thống sẽ thử kết nối lại; nếu thất bại thì khi vào lại vẫn có thể tiếp tục từ phần đang làm dở.
  • Nếu học sinh vắng mặt, trò chơi vẫn có thể tiếp tục ngay cả khi em đó không tham gia.
  • Nếu học sinh đi muộn, vẫn có thể vào giữa chừng và tiếp tục tham gia.
  • Nếu có trường hợp mạo danh học sinh khác, có thể xử lý bằng cách buộc rời phòng.
• Tôi cũng đã làm một hướng dẫn sử dụng thân thiện để có thể dùng cho nhiều lớp học khác nhau và đăng lên YouTube.
  • https://youtu.be/C4ezwIrIfjc
• Vì vẫn đang trong kỳ nghỉ nên tôi chưa thể thấy kết quả của dự án; điều đó khiến tôi lần đầu tiên mong chờ học kỳ mùa xuân.
• Nếu xung quanh bạn có giáo viên, mong bạn chia sẻ giúp. Xin cảm ơn.

[seoulrain]

Trên Chrome, dù thêm tên học sinh thì số đếm vẫn không tăng.

[2147483647]

Vì việc phải viết tất cả tên có thể khá bất tiện, nên sẽ tốt hơn nếu có thể đổi sang chỉ dùng số.

[joon14]

Dễ thương thật haha
Dù có vài chỗ nhỏ cần chỉnh sửa, tôi sẽ thử chia sẻ với các giáo viên xung quanh.

[geeksk553]

Ý tưởng thú vị đấy!