{
  "title": "Dự án 10: Trạm Vũ Trụ Tương Lai",
  "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 10 này, chúng ta sẽ lập trình ứng dụng 'Trạm Vũ Trụ Tương Lai'.",
      "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: Các thẻ định dạng b, i, u, thẻ button, bảng thông số table và CSS border-radius"
  ],
  "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-10.\n- Tạo file: index.html, style.css, và tạo một thư mục con tên là assets để chứa hình ảnh liên quan đến vũ trụ (phi thuyền, khiên năng lượ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 đề chính <h1>: TRẠM VŨ TRỤ ALPHA.\n- Sử dụng các thẻ <b>, <i>, <u> để viết đoạn giới thiệu nhiệm vụ trạm vũ trụ thật sinh động và nổi bật.\n- Thiết kế một bảng <table> hiển thị thông số năng lượng của trạm.\n- Thêm các thẻ <button> đại diện cho bảng điều khiển trạm vũ trụ."
    },
    {
      "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 nút bấm để kích hoạt các hệ thống vũ trụ:\n  + Nút Phóng Phi Thuyền: 'Hệ thống phản lực sẵn sàng! Phi thuyền Ares đã cất cánh bay vào không gian! 🚀'\n  + Nút Kích Hoạt Khiên: 'Bảo vệ 100%! Khiên năng lượng điện từ đã bao phủ toàn bộ trạm vũ trụ! 🛡️'\n  + Nút Quét Sóng Vũ Trụ: 'Ting ting! Phát hiện tín hiệu sóng từ người ngoài hành tinh tại Kepler-452b! 👽'\n- Lưu ý sử dụng đúng cặp dấu nháy đơn lồng bên trong dấu nháy kép của onclick để tránh lỗi cú pháp."
    },
    {
      "title": "Bước 4: Định dạng CSS phong cách Sci-Fi",
      "body": "- Mở file style.css để thiết lập màu nền tối đen của vũ trụ, màu chữ xanh neon nổi bật của tương lai.\n- Định dạng các nút bấm: thiết lập độ rộng, chiều cao, màu nền, viền và bo góc tròn trịa bằng thuộc tính border-radius.\n- Bắt buộc thêm thuộc tính cursor: pointer cho các nút bấm điều khiển để con trỏ chuột biến thành bàn tay chỉ khi rê chuột qua nút bấm."
    },
    {
      "title": "Bước 5: Sáng tạo thêm cho trạm vũ trụ",
      "body": "- Hãy thiết kế thêm ít nhất 5 nút điều khiển hoặc hệ thống vũ trụ khác (như Khởi Động Trọng Lực, Bộ Lọc Oxy, Radar Quét Thiên Thạch, Cổng Dịch Chuyển, Trợ Lý Robot) bằng các thẻ <button>.\n- Định dạng CSS cho 5 nút này đồng bộ với phong cách Sci-Fi của trạm, và lập trình sự kiện click chuột hiển thị thông điệp hoặc cảnh báo tình huống khẩn cấp vũ trụ tương ứng của mỗi hệ thống 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": "<!-- Đoạn văn giới thiệu có định dạng chữ đậm nghiêng -->\n<p>Nhiệm vụ: <b><i>/* Tên nhiệm vụ trạm vũ trụ */</i></b></p>\n\n<!-- Nút bấm điều khiển phóng phi thuyền -->\n<button class=\"nut-dieu-khien\" onclick=\"/* hiển thị alert phi thuyền Ares đã cất cánh */\">\n  /* Chữ trên nút bấm */\n</button>"
    },
    {
      "title": "CSS Gợi ý",
      "type": "css",
      "code": "/* Định dạng nút bấm phong cách Sci-Fi */\n.nut-dieu-khien {\n  /* màu nền: màu xám tối */\n  /* màu chữ: màu xanh neon */\n  /* viền nét liền: 2px màu xanh neon */\n  /* bo góc: 8px */\n  /* con trỏ chuột: hình bàn tay chỉ */\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Em có thể tạo viền phát sáng neon cho các nút điều khiển bằng thuộc tính CSS border: 2px solid #00ff88; kết hợp với box-shadow: 0 0 10px #00ff88; để bảng điều khiển trông đậm chất tương lai nhé!"
  }
}