Hướng dẫn tạo vòng quay gọi tên học sinh

Trong quá trình giảng dạy, việc tạo ra một môi trường học tập tích cực, sôi nổi và thu hút sự tham gia của học sinh luôn là mục tiêu quan trọng của mỗi giáo viên.

Sự phát triển của trí tuệ nhân tạo (AI), đặc biệt là Gemini, đã mở ra nhiều cơ hội để giáo viên tự tạo các công cụ hỗ trợ giảng dạy một cách nhanh chóng và đơn giản. Chỉ với một câu lệnh mô tả yêu cầu, Gemini có thể tạo ra một ứng dụng vòng quay gọi tên học sinh hoàn chỉnh dưới dạng trang web HTML, giúp giáo viên dễ dàng sử dụng ngay trên máy tính hoặc màn hình trình chiếu. Công cụ này không chỉ lựa chọn học sinh ngẫu nhiên mà còn có thể kết hợp với ngân hàng câu hỏi, hiệu ứng âm thanh, lịch sử lựa chọn và nhiều tính năng hấp dẫn khác.

Câu lệnh tạo vòng quay

Bạn là lập trình viên full-stack cực giỏi. Hãy tạo 1 web app “Vòng Quay Gọi Tên Thông Minh” chạy trực tiếp bằng 1 file HTML duy nhất (HTML + CSS + JavaScript thuần, KHÔNG cần cài gì). Yêu cầu:

1) Giao diện (tiếng Việt, thân thiện lớp học):

Tiêu đề lớn: “🎯 VÒNG QUAY GỌI TÊN THÔNG MINH”

Khu nhập liệu:

Textarea: “Danh sách học sinh” (mỗi dòng 1 tên)

Nút:

“Thêm danh sách”

“Xóa toàn bộ”

“Xáo trộn tên”

Khu câu hỏi:

Textarea: “Chủ đề câu hỏi”

Textarea: “Ngân hàng câu hỏi” (mỗi dòng 1 câu)

Nút: “Tạo câu hỏi tự động” (nếu trống → sinh 10–15 câu hỏi ngắn, đa dạng)

Khu hiển thị chính:

Vòng quay dạng hình tròn (canvas hoặc SVG)

Kim chỉ rõ ràng

Nút lớn: “🎡 QUAY NGAY”

Nút phụ: “🔄 QUAY LẠI”

Checkbox:

“Không lặp lại người đã chọn” (mặc định bật)

“Không lặp lại câu hỏi” (mặc định bật)

Khu kết quả:

Card nổi bật:

“🎉 Học sinh: <TÊN>”

“❓ Câu hỏi: <CÂU HỎI>”

Khu lịch sử:

Hiển thị 10–15 lượt gần nhất (tên + câu hỏi + thời gian)

2) Logic hoạt động:

Dữ liệu vòng quay lấy từ danh sách học sinh.

Khi nhấn “QUAY NGAY”:

Vòng quay chạy animation 4–7 giây

Tốc độ giảm dần tự nhiên (ease-out)

Chọn ngẫu nhiên học sinh (phân phối đều)

Sau khi chọn:

Hiển thị kết quả rõ ràng

Nếu bật “Không lặp lại người đã chọn” → loại khỏi danh sách

Câu hỏi:

Lấy random từ ngân hàng

Không lặp lại cho đến khi hết → tự reset

Nếu không có sẵn → auto generate từ “Chủ đề”

Có nút:

“Reset toàn bộ vòng quay”

“Xuất dữ liệu” → tải file .txt (bao gồm danh sách + lịch sử)

3) Âm thanh & hiệu ứng:

Khi quay:

Âm thanh “tick tick” theo tốc độ quay (Web Audio API)

Khi trúng:

Âm thanh chiến thắng (melody vui nhộn)

Hiệu ứng confetti rơi toàn màn hình

Có:

Nút bật/tắt âm thanh 🔊

Tự kích hoạt audio sau lần click đầu tiên (tránh bị chặn)

4) Kỹ thuật:

Viết bằng HTML + CSS + JavaScript thuần (1 file duy nhất)

Không dùng thư viện ngoài

Code rõ ràng, có comment

Responsive (dùng tốt trên laptop + máy chiếu)

Font chữ to, dễ đọc, màu sắc tươi sáng (phù hợp lớp học)

Hỗ trợ tiếng Việt đầy đủ (UTF-8, không lỗi font)

Tối ưu hiệu năng (không lag khi nhiều tên)

5) Nâng cao (bonus):

Cho phép chỉnh màu từng ô trên vòng quay

Hiển thị % xác suất (debug mode)

Cho phép import danh sách từ file .txt

Hiển thị đồng hồ đếm ngược trước khi quay

Đầu ra:

Trả về đúng 1 khối mã HTML hoàn chỉnh duy nhất

Không giải thích dài dòng

Sau mã, thêm hướng dẫn chạy trong 3 bước ngắn gọn