{
  "title": "Dự án 5: Kể Chuyện Cổ Tích Đêm Khuya",
  "subtitle": "Học và rèn luyện kỹ năng Bài 20 môn Web",
  "description": [
    {
      "text": "Chào mừng các em học sinh lớp 4! Trong dự án 5 này, chúng ta sẽ lập trình ứng dụng 'Kể Chuyện Cổ Tích Đêm Khuya'.",
      "bold": false
    },
    {
      "text": " Em sẽ thực hành và sử dụng các kiến thức đã học ở Bài 20 kết hợp với các kiến thức từ các bài 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 20",
    "Ngôn ngữ: HTML, CSS, JavaScript",
    "Đa phương tiện: audio, video",
    "Phát dừng nhạc: play(), pause()",
    "CSS: object-fit cover"
  ],
  "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}/bai20-5.\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, âm thanh."
    },
    {
      "title": "Bước 2: Xây dựng khung HTML chính",
      "body": "- Trong thẻ <head>, khai báo thẻ đường dẫn cơ sở: <base href=\"./assets/\"> và kết nối file CSS ngoài bằng đường dẫn tương đối lùi cấp: <link rel=\"stylesheet\" href=\"../style.css\">.\n- Tạo một thẻ div lớp 'container' bao bọc toàn bộ nội dung.\n- Thêm thẻ tiêu đề chính <h1> với nội dung 'KỂ CHUYỆN CỔ TÍCH ĐÊM KHUYA 🎵'.\n- Tạo thẻ ảnh <img id=\"anh-tuong-tac\" src=\"story.png\"> để hiển thị hình ảnh tương tác.\n- Tạo thẻ âm thanh <audio id=\"thiet-bi-media\" src=\"ting.mp3\"> (ẩn thuộc tính controls).\n- Tạo nút bấm <button class=\"btn-play\"> với nội dung 'KỂ CHUYỆN' và sự kiện click chuột onclick gọi tương tác.\n- Tạo nút bấm <button class=\"btn-pause\"> với nội dung 'TẠM DỪNG' và sự kiện click chuột onclick gọi tương tác."
    },
    {
      "title": "Bước 3: Lập trình tương tác JavaScript",
      "body": "- Tự viết mã JavaScript trong thẻ <script> đặt ở cuối body (học sinh tự xây dựng, không có code mẫu):\n  + Tìm đối tượng thẻ âm thanh câu chuyện cổ tích bằng document.getElementById('thiet-bi-media') và lưu vào biến.\n  + Tự khai báo hàm nghe kể chuyện: gọi phương thức .play() của thẻ âm thanh khi bấm nút 'KỂ CHUYỆN'.\n  + Tự khai báo hàm tạm dừng câu chuyện: gọi phương thức .pause() của thẻ âm thanh khi bấm nút 'TẠM DỪNG'.\n  + Kết nối các hàm với sự kiện onclick của từng nút bấm để điều khiển âm thanh hoàn chỉnh."
    },
    {
      "title": "Bước 4: Định dạng CSS cho đẹp mắt",
      "body": "- Mở file style.css để thiết lập màu nền cho body là '#2c3e50'.\n- Định dạng lớp '.container': chiều rộng tối đa '600px', viền '3px solid #f1c40f' và đổ bóng đẹp mắt.\n- Thiết lập 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 nhúng thêm ít nhất 5 tệp âm thanh hoặc video ngắn khác vào rạp chiếu phim, tự thiết kế bảng nút bấm điều khiển phát/dừng riêng cho từng tệp.\n- Định dạng màu sắc và hình nền mang đậm phong cách cá nhân độc đáo của riêng em để hoàn thành bài tập."
    }
  ],
  "code_samples_title": "Gợi ý Code mẫu",
  "code_samples_desc": "Đây là bài tập rèn luyện tư duy độc lập về nhà, học sinh hãy tự suy nghĩ và tự viết toàn bộ code HTML/CSS/JavaScript (không có code mẫu có sẵ