{
  "title": "Dự án 8: Máy Tính Điểm Hogwarts",
  "subtitle": "Học và rèn luyện kỹ năng Bài 13 môn Web",
  "description": [
    {
      "text": "Chào mừng các phù thủy nhí đến với học viện pháp thuật!",
      "bold": false
    },
    {
      "text": " Hôm nay, các em sẽ chế tạo 'Máy Tính Điểm' để ghi nhận điểm số cho các nhà bằng thẻ input, kết hợp kiến thức về biến trong JavaScript.",
      "bold": false
    }
  ],
  "knowledge_title": "Kiến thức trọng tâm",
  "knowledge_tags": [
    "Bài học chính: Bài 13",
    "Ngôn ngữ: HTML, CSS, JavaScript",
    "Biến số: let, const",
    "Ô nhập liệu: input text, label",
    "Độ giãn cách: margin, padding"
  ],
  "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": "- Tạo thư mục: hocsinh01/{tên của em}/bai13-8.\n- Tạo 2 file quen thuộc: index.html, style.css và 1 thư mục assets chứa hình ảnh các nhà trong học viện."
    },
    {
      "title": "Bước 2: Xây dựng khung HTML chính",
      "body": "- Khai báo <base href=\"./assets/\"> và <link rel=\"stylesheet\" href=\"../style.css\"> trong thẻ <head>.\n- Mở 1 thẻ div class 'truong-hoc' để nhóm các phần tử.\n- Tạo thẻ h1 ghi dòng chữ 'MÁY CỘNG ĐIỂM HOGWARTS'.\n- Tạo thẻ <label for=\"sodiem\">'Nhập số điểm muốn cộng:'</label>.\n- Thêm 1 thẻ <input type=\"text\" id=\"sodiem\" placeholder=\"Gõ điểm vào đây...\">.\n- Tạo 1 nút bấm <button> 'CỘNG ĐIỂM CHO GRYFFINDOR' kèm sự kiện onclick."
    },
    {
      "title": "Bước 3: Lập trình tương tác JavaScript",
      "body": "- Trong sự kiện onclick của nút bấm, dùng biến let để lấy dữ liệu điểm:\n  + onclick=\"let diem = sodiem.value; alert('Đã cộng thành công ' + diem + ' điểm cho nhà Gryffindor! 🦁');\""
    },
    {
      "title": "Bước 4: Định dạng CSS phép thuật",
      "body": "- Trong file style.css, trang trí màu nền body là màu tím than '#2c3e50'.\n- Khung chữ '.truong-hoc' có chữ màu vàng '#f1c40f', cách lề trong (padding) '25px' và đường viền (border) nét đứt '2px dashed #f39c12'.\n- Chỉnh nút bấm to ra với thuộc tính margin và padding."
    },
    {
      "title": "Bước 5: Sáng tạo thêm",
      "body": "- Ngoài Gryffindor và Slytherin, em hãy thêm đầy đủ 2 nhà phép thuật còn lại (Ravenclaw và Hufflepuff) vào trang web (tổng cộng 4 nhà).\n- Chèn thêm hình ảnh huy hiệu của từng nhà và làm các nút cộng điểm riêng biệt tương ứng cho 4 nhà nhé!"
    }
  ],
  "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": "<!-- Giao diện Máy Tính Điểm -->\n<base href=\"/* thư mục chứa ảnh: ./assets/ */\">\n<link rel=\"stylesheet\" href=\"/* lùi 1 cấp: ../style.css */\">\n<div class=\"truong-hoc\">\n  <h1>MÁY CỘNG ĐIỂM HOGWARTS</h1>\n  <label for=\"sodiem\">/* Nhập số điểm muốn cộng: */</label><br>\n  <input type=\"text\" id=\"sodiem\" placeholder=\"/* Gõ điểm vào đây... */\">\n  <button onclick=\"/* let diem = ...; alert(...) */\">CỘNG ĐIỂM CHO GRYFFINDOR</button>\n</div>"
    },
    {
      "title": "CSS Gợi ý",
      "type": "css",
      "code": "/* CSS cho Học Viện Phép Thuật */\nbody {\n  background-color: /* màu tím than: #2c3e50 */;\n}\n.truong-hoc {\n  color: /* màu chữ vàng: #f1c40f */;\n  padding: /* lề trong: 25px */;\n  border: /* viền đứt màu cam: 2px dashed #f39c12 */;\n}\nbutton {\n  margin: /* cách lề ngoài: 10px */;\n  /* thêm thuộc tính đổi trỏ chuột thành hình bàn tay */\n}"
    }
  ],
  "tip": {
    "title": "💡 Mẹo nhỏ:",
    "desc": "Trong JavaScript, biến được khai báo bằng từ khóa 'let' có thể lấy giá trị là chữ hoặc số. Khi nối chữ với số, JavaScript sẽ tự động gộp chúng lại thành một câu hoàn chỉnh đấy!"
  }
}