{
  "title": "Dự án 5: Rạp Xiếc Phép Thuật",
  "subtitle": "Học và rèn luyện kỹ năng Bài 15 môn Web",
  "description": [
    {
      "text": "Chào mừng các em học sinh lớp 4! Trong dự án 5 này, chúng ta sẽ lập trình ứng dụng 'Rạp Xiếc Phép Thuật'.",
      "bold": false
    },
    {
      "text": " Em sẽ thực hành và sử dụng các kiến thức đã học ở Bài 15 kết hợp với các kiến thức từ các bài trước để xây dựng giao diện tương tác sinh động.",
      "bold": false
    }
  ],
  "knowledge_title": "Kiến thức trọng tâm",
  "knowledge_tags": [
    "Bài học chính: Bài 15",
    "Ngôn ngữ: HTML, CSS, JavaScript",
    "Hàm số: function",
    "Thẻ chứa script",
    "CSS: Box Model nâng cao"
  ],
  "steps_title": "Các bước thực hiện chi tiết",
  "steps": [
    {
      "title": "Bước 1: Khởi tạo thư mục dự án",
      "body": "- Trên ổ đĩa Z, tạo thư mục dự án của em: hocsinh01/{tên của em}/bai15-5.\n- Tạo file: index.html, style.css, và tạo một thư mục con tên là assets để chứa các tệp tài nguyên hình ảnh, âm thanh."
    },
    {
      "title": "Bước 2: Xây dựng khung HTML chính",
      "body": "- Trong thẻ <head>, khai báo thẻ đường dẫn cơ sở: <base href=\"./assets/\"> và kết nối file CSS ngoài bằng đường dẫn tương đối lùi cấp: <link rel=\"stylesheet\" href=\"../style.css\">.\n- Tạo một thẻ div lớp 'container' bao bọc toàn bộ nội dung.\n- Thêm thẻ tiêu đề chính <h1> với nội dung 'RẠP XIẾC PHÉP THUẬT 🎵'.\n- Tạo nút bấm <button class=\"btn-nhac\"> với nội dung 'Khỉ Đi Xe Đạp 🐒' và sự kiện click chuột onclick gọi tương tác.\n- Tạo nút bấm <button class=\"btn-nhac\"> với nội dung 'Sư Tử Nhảy Vòng Lửa 🦁' và sự kiện click chuột onclick gọi tương tác.\n- Tạo nút bấm <button class=\"btn-nhac\"> với nội dung 'Voi Đá Bóng 🐘' và sự kiện click chuột onclick gọi tương tác."
    },
    {
      "title": "Bước 3: Lập trình tương tác JavaScript",
      "body": "- Tự viết mã JavaScript trong thẻ <script> đặt ở cuối body (học sinh tự xây dựng, không có code mẫu):\n  + Tự định nghĩa các hàm xử lý tương ứng cho từng tiết mục xiếc (ví dụ: hàm cho Khỉ Đi Xe Đạp, Sư Tử Nhảy Vòng Lửa, Voi Đá Bóng).\n  + Bên trong mỗi hàm: Tìm thẻ thông báo bằng document.getElementById('loa-phat') để cập nhật lời dẫn tiết mục xiếc sinh động bằng thuộc tính .innerHTML. Thêm thẻ <div id=\"loa-phat\"> trong HTML để đón lời dẫn.\n  + Đổi màu nền trang web tương ứng theo không khí sân khấu xiếc bằng document.body.style.backgroundColor.\n  + Gắn tên các hàm vừa tạo vào thuộc tính onclick của từng nút bấm trong HTML."
    },
    {
      "title": "Bước 4: Định dạng CSS cho đẹp mắt",
      "body": "- Mở file style.css để thiết lập màu nền cho body là '#1e272e'.\n- Định dạng lớp '.container': chiều rộng tối đa '600px', viền '3px solid #ff5e57' và đổ bóng đẹp mắt.\n- Thiết lập cursor: pointer cho tất cả phần tử tương tác click chuột được."
    },
    {
      "title": "Bước 5: Sáng tạo thêm",
      "body": "- Hãy thêm ít nhất 5 nút bấm nhạc cụ hoặc tiếng kêu con vật khác trong assets và định nghĩa 5 hàm JS tương ứng để phát nhạc/tiếng kêu hoặc thay đổi giao diện.\n- Định dạng màu sắc và hình nền mang đậm phong cách cá nhân độc đáo của riêng em để hoàn thành bài tập."
    }
  ],
  "code_samples_title": "Gợi ý Code mẫu",
  "code_samples_desc": "Đây là bài tập nâng cao thử thách tư duy, học sinh hãy tự suy nghĩ và tự viết toàn bộ code HTML/CSS/JavaScript (không có code mẫu có sẵn).",
  "code_samples": [
    {
      "title": "HTML Gợi ý",
      "type": "html",
      "code": "<!-- Giao diện dự án Rạp Xiếc Phép Thuật -->\n<base href=\"/* base href assets */\">\n<link rel=\"stylesheet\" href=\"/* đường dẫn lùi cấp ra style.css */\">\n<div class=\"container\">\n  <h1>RẠP XIẾC PHÉP THUẬT 🎵</h1>\n  <button class=\"btn-nhac\" onclick=\"/* JS code của em */\">Khỉ Đi Xe Đạp 🐒</button>\n  <button class=\"btn-nhac\" onclick=\"/* JS code của em */\">Sư Tử Nhảy Vòng Lửa 🦁</button>\n</div>"
    },
    {
      "title": "CSS Gợi ý",
      "type": "css",
      "code": "/* CSS Cơ bản cho dự án */\nbody {\n  background-color: /* màu nền: #1e272e */;\n}\n.container {\n  max-width: /* độ rộng container: 600px */;\n  border: /* viền: 3px solid #ff5e57 */;\n  /* bo góc, đổ bóng container */\n}\n.nut-bam, .btn, .btn-nhac, .btn-mo, .btn-dong, .btn-tinh, .btn-them, .btn-play, .btn-pause, .btn-check, .btn-kick, .btn-go {\n  /* màu nền nút bấm */\n  /* con trỏ chuột: bàn tay chỉ */\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Gom nhóm các câu lệnh JS vào hàm (function) giúp code HTML của em gọn gàng hơn vì không cần viết các câu lệnh dài trực tiếp vào thuộc tính onclick nữa."
  }
}