{
  "title": "Dự án 4: Tiệm Bánh Ngọt Kỳ Diệu",
  "subtitle": "Học và rèn luyện kỹ năng Bài 24 môn Web",
  "description": [
    {
      "text": "Chào mừng các em học sinh lớp 4! Trong dự án 4 này, chúng ta sẽ lập trình ứng dụng 'Tiệm Bánh Ngọt Kỳ Diệu'.",
      "bold": false
    },
    {
      "text": " Em sẽ thực hành và sử dụng các kiến thức đã học ở Bài 24 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 24",
    "Ngôn ngữ: HTML, CSS, JavaScript",
    "Dự án tổng hợp cuối khóa",
    "Tích hợp đa tính năng",
    "Bố cục Flexbox hoàn chỉnh"
  ],
  "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}/bai24-4.\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 'TIỆM BÁNH NGỌT KỲ DIỆU'.\n- Tạo thẻ âm thanh <audio id=\"nhac-nen\" src=\"bgmusic.mp3\"> (ẩn thuộc tính controls).\n- Tạo nút bấm <button class=\"btn-nhac\"> với nội dung '🎵 BẬT NHẠC' 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 '🔇 TẮT NHẠC' và sự kiện click chuột onclick gọi tương tác.\n- Tạo nút bấm <button class=\"nut-bam\"> với nội dung 'BẤM ĐỂ TĂNG ĐIỂM 🧁' 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ự khai báo biến lưu điểm số (score = 0) và lấy đối tượng thẻ âm thanh <audio id=\"nhac-nen\"> cùng nút bấm tăng điểm trong trò chơi.\n  + Tự xây dựng hàm bật nhạc (.play()) và tắt nhạc (.pause()) gắn vào 2 nút '🎵 BẬT NHẠC' và '🔇 TẮT NHẠC'.\n  + Sử dụng phương thức .addEventListener('click', ...) cho nút tăng điểm bánh ngọt: mỗi lần click tăng điểm số và cập nhật ra bảng điểm.\n  + Kết hợp linh hoạt các kỹ năng đã học (thay đổi CSS, đổi hình ảnh món bánh khi đạt mốc điểm cao) để trò chơi thêm cuốn hút."
    },
    {
      "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à '#ff9ff3'.\n- Định dạng lớp '.container': chiều rộng tối đa '600px', viền '3px solid #f368e0' 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 thiết kế và tích hợp thêm ít nhất 5 tính năng độc đáo mới (ví dụ: bảng xếp hạng điểm cao, lưu tên người chơi vào mảng, hoặc các hiệu ứng chuyển động CSS) để hoàn thiện trang web câu lạc bộ.\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 rèn luyện tư duy độc lập về nhà, 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 Tiệm Bánh Ngọt Kỳ Diệu -->\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>TIỆM BÁNH NGỌT KỲ DIỆU</h1>\n  <button class=\"btn-nhac\" onclick=\"/* JS code của em */\">🎵 BẬT NHẠC</button>\n  <button class=\"btn-nhac\" onclick=\"/* JS code của em */\">🔇 TẮT NHẠC</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: #ff9ff3 */;\n}\n.container {\n  max-width: /* độ rộng container: 600px */;\n  border: /* viền: 3px solid #f368e0 */;\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": "Dự án tổng hợp cuối khóa là cơ hội tuyệt vời để em kết hợp Flexbox dàn trang, JS rẽ nhánh, bộ đếm thời gian và âm thanh đa phương tiện thành một trang web hoàn chỉnh!"
  }
}