Hướng dẫn tạo game kéo thả Đoàn tàu tri thức

Việc biến những câu hỏi ôn tập khô khan thành trò chơi tương tác sẽ giúp học sinh hứng thú hơn trong quá trình học tập. Thay vì chỉ trả lời từng câu hỏi theo cách truyền thống, giáo viên có thể tạo ra một hoạt động kéo thả sinh động để học sinh vừa chơi vừa ghi nhớ kiến thức. Với sự hỗ trợ của ChatGPT, bạn không cần biết lập trình vẫn có thể tạo được một trò chơi HTML hoàn chỉnh chỉ từ một câu lệnh.

Trong bài viết này, bạn sẽ có được câu lệnh tạo game Đoàn tàu tri thức tương tác với chủ đề đoàn tàu học tập. Nhiệm vụ của người chơi là kéo các toa tàu vào đúng vị trí trên đường ray theo trình tự câu hỏi và đáp án. Mỗi toa tàu đều chứa đáp án của câu hỏi trước và đồng thời đưa ra câu hỏi tiếp theo, giúp học sinh luyện tập theo hình thức nối chuỗi kiến thức rất trực quan và dễ hiểu.

Cách tạo trò chơi kéo thả Đoàn tàu tri thức

Bước 1:

Bạn truy cập vào Gemini sau đó chuyển sang chế độ Canvas để tiến hành tạo trò chơi. Sau đó chúng ta copy prompt tạo trò chơi kéo thả Đoàn tàu tri thức vào giao diện. 

Hãy tạo một trò chơi HTML tương tác tên: ĐOÀN TÀU TRI THỨC.

Yêu cầu:

- Tạo file HTML chạy offline, gồm HTML + CSS + JavaScript trong một file.

- Giao diện hoạt hình 2D, màu sắc tươi sáng, phù hợp học sinh tiểu học.

- Chủ đề: đoàn tàu học tập.

- Có đầu tàu, đường ray, các toa tàu, kho toa kéo thả.

- Học sinh kéo toa từ kho phía dưới lên đường ray để nối đúng thứ tự.

Cơ chế chơi:

- Toa đầu tiên là câu hỏi mở đầu.

- Mỗi toa có 2 phần:

 + Bên trái: ĐÁP ÁN cho câu hỏi ở toa trước.

 + Bên phải: CÂU HỎI tiếp theo.

- Nếu kéo đúng toa:
 
 + Toa gắn vào đường ray.
 + Có âm thanh đúng.
 + Có hiệu ứng bật nhẹ.

- Nếu kéo sai toa:
 + Toa quay lại kho.
    + Có hiệu ứng rung.
    + Có âm thanh sai.
- Khi hoàn thành:
   + Có pháo giấy.
   + Hiện thông báo chúc mừng.
  + Đoàn tàu chạy từ trái sang phải qua màn hình.

Bố cục:

- Phần trên: tiêu đề ĐOÀN TÀU TRI THỨC.

- Bên phải có nút:
 + Làm lại
 + Kiểm tra
 + Trộn toa
- Khu vực giữa:
 + Đầu tàu bên trái.
 + Các ô trống để thả toa.
 + Có thanh cuộn ngang để xem toa cuối.

- Khu vực dưới:
 + Kho toa kéo thả.

 + Có thanh cuộn ngang.
Dữ liệu để giáo viên điền:

const firstQuestion = "Ai là vị vua đầu tiên lập ra nước ta?";

const data = [

  {

    id: 1,

    answer: "Vua Hùng",

    question: "Theo truyền thuyết, ai là người đã sáng tạo ra bánh chưng và bánh giầy?",

  },

  {

    id: 2,

    answer: "Lang Liêu", 

    question: "Cậu bé lên ba tuổi bỗng lớn nhanh như thổi để đánh giặc Ân tên là gì?",

  },

  {

    id: 3,

    answer: "Thánh Gióng",

    question: "Hai nữ anh hùng đầu tiên cưỡi voi đánh giặc là ai?",

  },

  {

    id: 4,

    answer: "Hai Bà Trưng",

    question: "Ai đã cắm cọc gỗ trên sông Bạch Đằng để đánh tan quân Nam Hán?",

  },

  {

    id: 5,

    answer: "GIÁO VIÊN ĐIỀN ĐÁP ÁN",

    question: "GIÁO VIÊN ĐIỀN CÂU HỎI TIẾP THEO",

  },

  {

    id: 6,

    answer: "Ngô Quyền",

    question: "Hoàn thành!",

    label: "Kết thúc"

  }

];

Yêu cầu kỹ thuật:

- Cho phép kéo thả bằng chuột.

- Các toa trong kho phải bị trộn ngẫu nhiên.

- Khi thả đúng, toa biến mất khỏi kho và xuất hiện trên đường ray.

- Khi thêm toa mới, tự động cuộn đến ô trống tiếp theo.

- Toa cuối phải luôn kéo thả được, không bị che khuất.

- Có thanh cuộn ngang rõ ràng ở đường ray và kho toa.

- Giao diện responsive, dùng tốt trên màn hình laptop.

- Font chữ to, dễ đọc.

- Không để hình ảnh hoặc chữ bị đè lên nhau.

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

- Không cần internet.

- Toàn bộ code nằm trong một file HTML duy nhất.

Yêu cầu thẩm mỹ:

- Màu chủ đạo: xanh da trời, vàng, đỏ, xanh lá.

- Toa tàu bo góc, có bánh xe.

- Phần đáp án bên trái nền vàng.

- Phần câu hỏi bên phải nền trắng.

- Ô trống có viền nét đứt.

- Có hiệu ứng vui nhộn nhưng không rối mắt.

Hãy tạo đầy đủ code HTML hoàn chỉnh để tôi chỉ cần lưu thành file .html và mở bằng Chrome là chơi được.

Bước 2:

Chờ một lúc và bạn sẽ nhìn thấy trò chơi Đoàn tàu tri thức ở bên cạnh. Hãy chơi thử game và nếu có vấn đề hoặc bạn cần thay đổi phần nào thì nhập yêu cầu chỉnh sửa lại ở khung bên trái.  Cuối cùng bạn nhấn vào biểu tượng download để tiến hành tải file html mã của game xuống máy tính.

Khi cần chạy game bạn chỉ cần nhấn vào file html để chạy trên bất cứ trình duyệt nào đều được. 

Dưới đây là giao diện game Đoàn tàu tri thức. Học sinh sẽ đọc câu hỏi và tiến hành kéo thả tạo câu trả lời đúng để hoàn thành đoàn tàu.