Prompt tạo ứng dụng gọi tên ngẫu nhiên

1. Giới thiệu tiện ích

Tiện ích "Gọi tên ngẫu nhiên" là giải pháp hoàn hảo giúp giáo viên tổ chức lớp học thêm phần sôi động và minh bạch thông qua những vòng quay may mắn đầy kịch tính. Với giao diện hiện đại và tính năng tùy biến linh hoạt, công cụ này không chỉ hỗ trợ gọi tên học sinh mà còn tích hợp các yếu tố vui nhộn để tạo tiếng cười trong giờ học. Đây là một phần trong hệ sinh thái học liệu số sáng tạo, được tối ưu hóa để thầy cô dễ dàng ứng dụng ngay trên các bài giảng điện tử hoặc nhúng trực tiếp vào blog cá nhân.

2. Prompt tạo tiện ích gọi tên ngẫy nhiên (dùng trên Gemini)

PROMPT: TẠO ỨNG DỤNG GỌI TÊN NGẪU NHIÊN

#NGỮ CẢNH: Bạn là một chuyên gia lập trình web front-end và thiết kế các ứng dụng, trò chơi tương tác bằng HTML/CSS/JS phục vụ cho mục đích giáo dục. Code phải được tối ưu hóa đặc biệt để tích hợp lên nền tảng Blogger (Học liệu số). #DỮ LIỆU: Danh sách tên học sinh (có thể nhập thủ công hoặc tải lên từ file). #HƯỚNG DẪN Hãy viết mã nguồn HTML, CSS và JavaScript hoàn chỉnh trong một file duy nhất để tạo ra một tiện ích vòng quay gọi tên. Thiết kế giao diện trực quan, chữ to rõ ràng, các yếu tố hoạt ảnh mượt mà để học sinh có thể quan sát từ cuối lớp học. #KẾT QUẢ CẦN ĐẠT: ## Tên trò chơi & Bố cục: - Tiêu đề: "GỌI TÊN NGẪU NHIÊN" (chữ màu vàng, không có bóng mờ màu trắng). - Nền chung của toàn bộ ứng dụng: Màu xanh biển đậm (#003366). - Bố cục dọc: Khu vực Vòng quay và nút Quay nằm ở phía trên, khu vực Nhập danh sách nằm ở phía dưới (khung nhập text được rút gọn chiều cao cho vừa vặn). ## Thiết kế Vòng quay: - Bánh xe nhiều màu sắc rực rỡ xen kẽ nhau, KHÔNG CÓ đường viền màu đen bao quanh. - Tên học sinh trên bánh xe: Chữ hiển thị to, được căn phải và đẩy ra sát mép viền ngoài cùng của vòng quay để tránh bị cắt chữ. ## Chế độ Toàn màn hình (Fullscreen): - Có một nút "Toàn màn hình" ở góc phải. - Khi bật toàn màn hình: Tự động ẩn tiêu đề và phần nhập danh sách. Vòng quay phóng to tối đa chiếm trọn không gian (căn giữa). Nút "QUAY" tự động di chuyển sang căn giữa ở lề bên trái màn hình để không che lấp vòng quay. ## Danh sách & Cài đặt: - Có khu vực textarea để tự nhập tên (mỗi tên 1 dòng). - Có nút tải danh sách trực tiếp từ file văn bản (.txt) hoặc file (.csv). - Có ô input để giáo viên chủ động điều chỉnh thời gian quay (tính bằng giây). ## Yếu tố vui nhộn & Modal kết quả: - Có âm thanh "tạch tạch" khi quay và âm thanh chúc mừng khi dừng lại (Bắt buộc dùng Web Audio API để tạo âm thanh trực tiếp bằng code, tuyệt đối không dùng link file âm thanh ngoài). - Khi vòng quay dừng, hiển thị Popup (Modal) báo tên học sinh trúng thưởng. Nếu tên quá dài phải tự động ngắt dòng hợp lý (có line-height và word-wrap) để chữ không đè lên nhau. - Bên dưới tên trúng thưởng, bốc thăm hiển thị ngẫu nhiên một “hành động vui/hình phạt/phần thưởng” (Ví dụ: Hát 1 bài, Trả lời bằng tiếng Anh, Được cộng 1 điểm...). ## Yêu cầu kỹ thuật cốt lõi (BẮT BUỘC): - Toàn bộ mã nguồn phải bọc gọn trong một thẻ

duy nhất. Các id, class CSS phải có tiền tố riêng để không xung đột với web. - TUYỆT ĐỐI KHÔNG sử dụng bất kỳ thư viện bên thứ 3 nào (không jQuery, không thư viện Canvas ngoài). Phải dùng thuần HTML/CSS/JS.

3. Hướng dẫn sử dụng

Để sử dụng tiện ích này một cách độc lập trên máy tính, thầy cô hãy sao chép toàn bộ mã nguồn HTML ở phía dưới và dán vào phần mềm Notepad (Search (góc dưới, bên trái laptop/Gõ Notepad/ Nhấn vào để mở).

Khi lưu file, thầy cô chọn "Save As", đặt tên file có đuôi là .html (ví dụ: vongquay.html) và lưu ý chọn định dạng Encoding là UTF-8 để hiển thị tiếng Việt không bị lỗi font. Sau khi lưu, thầy cô chỉ cần mở file này bằng các trình duyệt web phổ biến như Chrome hoặc Microsoft Edge là có thể sử dụng ngay mà không cần kết nối mạng.

4. Kết luận

Hy vọng tiện ích gọi tên ngẫu nhiên này sẽ trở thành người bạn đồng hành đắc lực giúp quý thầy cô nâng cao hiệu quả tương tác và tạo sự công bằng trong mọi tiết học. Việc ứng dụng các công cụ học liệu số vào giảng dạy không chỉ giúp bài giảng thêm sinh động mà còn thể hiện sự sáng tạo không ngừng trong sự nghiệp giáo dục 4.0. Thầy cô hãy tiếp tục đồng hành và theo dõi để cập nhật thêm nhiều tiện ích dạy học miễn phí và hữu ích khác trong thời gian tới. 

Nội dung chính