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

Tổng quan & Đáp án nhanh: Hướng dẫn tạo vòng quay gọi tên học sinh bằng Gemini

Đầu tiên thầy cô cần mở Gemini chế độ Canvas để sử dụng tạo vòng quay gọi tên học sinh.

Dưới đây là quy trình thực hiện chi tiết từng bước kèm bảng tham chiếu nhanh đã được kiểm chứng thực tế.

---

Hướng dẫn thực hiện chi tiết từng bước

Bước 1: Sau đó chúng ta paste prompt tạo vòng quay gọi tên học sinh

• Sau đó chúng ta paste prompt tạo vòng quay gọi tên học sinh. Thầy cô tham khảo prompt vòng quay gọi tên học sinh dưới đây.

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

Bước 2: Sau đó bạn chờ để Gemini tiến hành tạo mã và thiết kế vòng quay

• Sau đó bạn chờ để Gemini tiến hành tạo mã và thiết kế vòng quay gọi tên học sinh. Ở bên cạnh bạn sẽ thấy ngay vòng quay cơ bản để thầy cô thiết lập danh sách học sinh và câu hỏi cho học sinh.

Bước 3: Bây giờ thầy cô mở phần Mã sau đó copy toàn bộ mã vào Notepad

• Bây giờ thầy cô mở phần Mã sau đó copy toàn bộ mã vào Notepad, rồi đặt tên file có đuôi .html rồi lưu lại file này.

Bước 4: *📋 Câu lệnh (Prompt) thực chiến — Chạm nút Copy góc phải để sao chép

• 📋 Câu lệnh (Prompt) thực chiến — Chạm nút Copy góc phải để sao chép:

Bước 5: Bạn là lập trình viên full-stack cực giỏi

• 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:

---

📊 Bảng cấu trúc tối ưu câu lệnh (Prompt) hiệu quả cao

Thành phần trong Prompt	Vai trò cốt lõi	Ví dụ áp dụng thực tế
1. Vai trò (Role)	Định hình chuyên môn của AI	“Đóng vai chuyên gia phân tích dữ liệu / kế toán trưởng…”
2. Bối cảnh (Context)	Cung cấp dữ liệu & mục tiêu cụ thể	“Tôi có bảng số liệu bán hàng quý 4 tại thị trường Việt Nam…”
3. Nhiệm vụ (Task)	Chỉ định rõ các bước cần xử lý	“Hãy phân tích 3 điểm nghẽn và đề xuất giải pháp…”
4. Định dạng (Format)	Kiểm soát hình thức kết quả đầu ra	“Trình bày dưới dạng bảng Markdown ngắn gọn, dễ copy”

---

[!TIP] Kinh nghiệm thực tế tại Việt Nam: Khi thao tác nhập công thức, câu lệnh hoặc phím tắt trong quá trình hướng dẫn tạo vòng quay gọi tên học sinh bằng gemini, bạn nên chuyển tạm bộ gõ Unikey / EVKey sang chế độ tiếng Anh (E) bằng phím tắt Ctrl + Shift hoặc Alt + Z để tránh lỗi nuốt chữ hoặc nhảy dấu ngoài ý muốn.

---

🔗 Tiện ích & Công cụ thực chiến liên quan

• Tính lương Gross sang Net & thuế TNCN tự động: Bảng tính lương Gross Net chuẩn cập nhật mới nhất.
• Kho tài nguyên đồ họa & font chữ Việt hóa: Tải mẫu PSD chuẩn chất lượng cao.
• Tạo mã QR WiFi & VietQR không giới hạn: Tạo mã QR miễn phí không hết hạn.
• Xem lịch âm dương & ngày hoàng đạo: Tra cứu lịch vạn niên & ngày hoàng đạo.