{
  "title": "Dự án 4: Siêu Xe Candy",
  "subtitle": "Học và rèn luyện kỹ năng Bài 12 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 'Siêu Xe Candy'.",
      "bold": false
    },
    {
      "text": " Em sẽ thực hành và sử dụng các kiến thức đã học ở Bài 12 để 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 12",
    "Ngôn ngữ: HTML, CSS, JavaScript",
    "Ánh xạ Scratch trực quan cho học sinh"
  ],
  "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}/bai12-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."
    },
    {
      "title": "Bước 2: Xây dựng khung HTML chính",
      "body": "- Thiết lập tiêu đề <h1>: SIÊU XE CANDY.\n- Thêm các thẻ div, nút bấm hoặc ảnh cần thiết để tạo giao diện hiển thị cho dự án."
    },
    {
      "title": "Bước 3: Lập trình tương tác JavaScript",
      "body": "- Kết nối các sự kiện click chuột hoặc nhập liệu để thay đổi giao diện theo yêu cầu đề bài.\n- Luôn kiểm tra các cặp dấu ngoặc đơn và dấu nháy đơn cho chính xác."
    },
    {
      "title": "Bước 4: Định dạng CSS cho đẹp mắt",
      "body": "- Thêm màu sắc hài hòa, căn giữa giao diện.\n- Đảm bảo thêm thuộc tính 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 viết thêm một nút bấm phụ hoặc tạo thông điệp chúc mừng độc đáo của riêng em để hoàn thiện bài học."
    }
  ],
  "code_samples_title": "Gợi ý Code mẫu",
  "code_samples_desc": "Học sinh hãy tự hoàn thiện code dựa trên các gợi ý dưới đây (không copy paste):",
  "code_samples": [
    {
      "title": "HTML Gợi ý",
      "type": "html",
      "code": "<!-- Tạo khung chứa dự án Siêu Xe Candy -->\n<div class=\"khung-du-an\">\n  <!-- Viết mã HTML của em ở đây -->\n</div>"
    },
    {
      "title": "CSS Gợi ý",
      "type": "css",
      "code": "/* CSS cơ bản */\n.khung-du-an {\n  text-align: center;\n  margin: 20px;\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Luôn kiểm tra kỹ tên ID của các thẻ trong file HTML xem đã trùng với tên ID viết trong JavaScript chưa nhé!"
  }
}