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

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