{
  "title": "Dự án 8: Bản Đồ Kho Báu Đại Dương",
  "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 8 này, chúng ta sẽ lập trình ứng dụng 'Bản Đồ Kho Báu Đại Dương'.",
      "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: Liên kết neo nội bộ id, base href, ảnh nền background-image và trạng thái hover"
  ],
  "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-8.\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 liên quan đến bản đồ và cướp biển."
    },
    {
      "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/\"> để làm đường dẫn cơ sở.\n- Kết nối file style.css bằng đường dẫn tương đối lùi cấp: <link rel=\"stylesheet\" href=\"../style.css\">\n- Trong thẻ <body>, tạo tiêu đề <h1>: BẢN ĐỒ KHO BÁU JACK SPARROW.\n- Tạo thanh điều hướng <nav> chứa liên kết neo đi ra ngoài thư mục gốc và trỏ đến ID hướng dẫn: <a href=\"../index.html#huong-dan\">Hướng dẫn</a>\n- Tạo một vùng chứa chính đại diện cho bản đồ đại dương, bên trong chứa các thẻ <div> đại diện cho các địa điểm bí ẩn (như Hang Đá Quỷ, Đảo Đầu Lâu, Rương Kho Báu)."
    },
    {
      "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 địa danh để hiển thị lời thoại của thuyền trưởng Jack qua hộp thoại alert:\n  + Hang Đá Quỷ: 'Cảnh báo! Nơi đây có Bạch Tuộc Khổng Lồ bảo vệ! 🐙'\n  + Hòn Đảo Đầu Lâu: 'Nguy hiểm! Tránh xa bẫy gai chết người! 💀'\n  + Rương Kho Báu: 'Tuyệt vời! Bạn đã tìm thấy 1000 đồng vàng lấp lánh! 🪙'\n- Chú ý viết đúng cấu trúc cú pháp hàm alert() sử dụng dấu nháy đơn lồng trong dấu nháy kép của thuộc tính onclick."
    },
    {
      "title": "Bước 4: Định dạng CSS đại dương và bản đồ",
      "body": "- Mở file style.css để thiết lập ảnh nền đại dương cho body bằng thuộc tính background-image.\n- Định dạng cho các địa danh trên bản đồ: sử dụng thuộc tính border và border-radius để tạo các điểm đánh dấu hình tròn đẹp mắt.\n- Thiết lập hiệu ứng đổi màu khi rê chuột qua các địa danh bằng CSS hover và bắt buộc thêm thuộc tính cursor: pointer cho chúng."
    },
    {
      "title": "Bước 5: Sáng tạo thêm cho bản đồ",
      "body": "- Hãy thêm ít nhất 5 địa điểm bí ẩn mới trên bản đồ đại dương (như Vực Thẳm Hải Quái, Rạn San Hô Mỹ Nhân Ngư, Mộ Tàu Đắm, Đảo Núi Lửa, Ngọn Hải Đăng Cổ) kèm hình ảnh minh họa từ assets.\n- Định vị chúng tại các vị trí khác nhau trên trang web, định dạng CSS đổi màu nổi bật khi di chuột qua, và thiết lập sự kiện click chuột cảnh báo các mối hiểm nguy hoặc phần thưởng thú vị 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": "<!-- Liên kết neo nội bộ thoát khỏi thư mục assets -->\n<nav>\n  <a href=\"/* đường dẫn thoát assets trỏ tới id huong-dan */\">/* Chữ hiển thị */</a>\n</nav>\n\n<!-- Tạo địa danh Hang Đá Quỷ trên bản đồ -->\n<div class=\"dia-danh\" onclick=\"/* hiển thị hộp thoại alert cảnh báo bạch tuộc */\">\n  <!-- Tên hoặc ảnh địa danh -->\n</div>"
    },
    {
      "title": "CSS Gợi ý",
      "type": "css",
      "code": "/* Định dạng địa danh trên bản đồ */\n.dia-danh {\n  /* màu nền: màu vàng nhạt */\n  /* viền nét liền: 2px màu nâu */\n  /* bo góc tròn: 50% */\n  /* con trỏ chuột: hình bàn tay chỉ */\n}\n\n.dia-danh:hover {\n  /* màu nền khi rê chuột: màu vàng hoàng kim */\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Để ảnh nền hiển thị vừa vặn không bị lặp lại, em hãy sử dụng các thuộc tính CSS như background-size: cover; và background-repeat: no-repeat; trong selector body nhé!"
  }
}