{
  "title": "Dự án 9: Khu Vườn Đom Đóm Kỳ Diệu",
  "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 9 này, chúng ta sẽ lập trình ứng dụng 'Khu Vườn Đom Đóm Kỳ Diệu'.",
      "bold": false
    },
    {
      "text": " Em sẽ thực hành sử dụng các kiến thức đã học ở Bài 12 kết hợp với các thẻ HTML, CSS 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 12",
    "Ngôn ngữ: HTML, CSS, JavaScript",
    "Tích hợp: Danh sách ul li, base href, CSS Links màu sắc trạng thái và con trỏ chuột pointer"
  ],
  "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-9.\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 hình ảnh đom đóm, hoa hướng dương, cây nấm phát sáng."
    },
    {
      "title": "Bước 2: Xây dựng khung HTML chính",
      "body": "- Thiết lập thẻ <head> chứa thẻ <base href=\"./assets/\">.\n- Nối file style.css bên ngoài: <link rel=\"stylesheet\" href=\"../style.css\">\n- Trong thẻ <body>, tạo tiêu đề <h1>: KHU VƯỜN ĐOM ĐÓM PHÉP THUẬT.\n- Tạo một danh sách không thứ tự bằng thẻ <ul> chứa các thẻ <li> giới thiệu các loài sinh vật kỳ bí trong vườn.\n- Thêm các thẻ <img> hiển thị các loài hoa và chú đom đóm dễ thương."
    },
    {
      "title": "Bước 3: Lập trình tương tác JavaScript (onclick và alert)",
      "body": "- Thêm sự kiện onclick cho từng sinh vật/bông hoa để chúng phát ra thông điệp khi nhấp chuột:\n  + Hoa Hướng Dương: 'Hoa Hướng Dương đang hấp thụ ánh trăng để tỏa sáng lấp lánh! 🌻'\n  + Chú Đom Đóm: 'Đom Đóm nhỏ chào bé! Tớ sẽ bay dẫn đường cho bé nhé! 🪰'\n  + Cây Nấm Phép: 'Oa! Cây nấm phát ra một lớp bụi phấn phép thuật kỳ ảo! 🍄'\n- Cần viết câu lệnh alert() cẩn thận, tránh nhầm lẫn các dấu nháy đơn và nháy kép."
    },
    {
      "title": "Bước 4: Định dạng CSS đêm khu vườn kỳ diệu",
      "body": "- Mở file style.css thiết lập màu nền tối (ví dụ: màu đen hoặc xanh tím than) và màu chữ sáng (ví dụ: màu vàng nhạt hoặc trắng).\n- Định dạng kích thước cho ảnh đom đóm và các bông hoa.\n- Thêm thuộc tính cursor: pointer cho tất cả sinh vật tương tác để báo hiệu có thể click được.\n- Định dạng màu sắc của các liên kết <a> ở trạng thái a:link, a:visited, a:hover, a:active để hòa hợp với tông màu khu vườn."
    },
    {
      "title": "Bước 5: Sáng tạo thêm cho khu vườn",
      "body": "- Hãy thêm ít nhất 5 sinh vật hoặc loài hoa kỳ lạ khác (như Hoa Hồng Xanh, Cây Liễu Rủ Phát Sáng, Chú Bướm Đêm, Hồ Nước Phép Thuật, Chú Sóc Nhỏ) bằng các tệp ảnh tương ứng trong assets.\n- Trình bày chúng trên giao diện, định dạng CSS bo góc và đổ bóng nhẹ, đồng thời lập trình sự kiện click chuột hiển thị thông điệp huyền bí đầy bất ngờ riêng cho mỗi sinh vật qua alert."
    }
  ],
  "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 danh sách các sinh vật trong vườn -->\n<ul>\n  <li>/* Tên sinh vật 1 */</li>\n  <li>/* Tên sinh vật 2 */</li>\n</ul>\n\n<!-- Ảnh bông hoa phép thuật có sự kiện click chuột -->\n<img src=\"/* tên tệp ảnh hoa hướng dương trong assets */\" class=\"sinh-vat-sang\" onclick=\"/* hiển thị alert hoa hướng dương tỏa sáng */\">"
    },
    {
      "title": "CSS Gợi ý",
      "type": "css",
      "code": "/* CSS định dạng sinh vật phát sáng */\n.sinh-vat-sang {\n  /* chiều rộng: 120px */\n  /* con trỏ chuột: hình bàn tay chỉ */\n  /* hiệu ứng đổ bóng: 0 0 15px màu xanh neon phát sáng */\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Em có thể tạo hiệu ứng phát sáng huyền ảo cho các sinh vật bằng thuộc tính CSS box-shadow: 0 0 15px #e1b12c; khi rê chuột qua chúng đấy nhé!"
  }
}