{
"title": "Dự án 1: Đập Chuột Chũi Candy",
"subtitle": "Học và rèn luyện kỹ năng Bài 23 môn Web",
"description": [
{
"text": "Chào mừng các em học sinh lớp 4! Trong dự án 1 này, chúng ta sẽ lập trình ứng dụng 'Đập Chuột Chũi Candy'.",
"bold": false
},
{
"text": " Em sẽ thực hành và sử dụng các kiến thức đã học ở Bài 23 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 23",
"Ngôn ngữ: HTML, CSS, JavaScript",
"Điểm số: score++",
"Bắt sự kiện click: addEventListener('click')"
],
"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}/bai23-1.\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ẻ , khai báo thẻ đường dẫn cơ sở: và kết nối file CSS ngoài bằng đường dẫn tương đối lùi cấp: .\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
với nội dung 'ĐẬP CHUỘT CHŨI CANDY'.\n- Tạo thẻ ảnh để hiển thị hình ảnh tương tác."
},
{
"title": "Bước 3: Lập trình tương tác JavaScript",
"body": "- Viết mã JavaScript trong thẻ "
},
{
"title": "CSS Gợi ý",
"type": "css",
"code": "/* CSS Cơ bản cho dự án */\nbody {\n background-color: /* màu nền: #fab1a0 */;\n}\n.container {\n max-width: /* độ rộng container: 600px */;\n border: /* viền: 3px solid #e17055 */;\n /* bo góc, đổ bóng container */\n}\n.nut-bam, .btn, .btn-nhac, .btn-mo, .btn-dong, .btn-tinh, .btn-them, .btn-play, .btn-pause, .btn-check, .btn-kick, .btn-go {\n /* màu nền nút bấm */\n /* con trỏ chuột: bàn tay chỉ */\n}"
}
],
"tip": {
"title": "💡 Mẹo nhỏ:",
"desc": "Phương thức .addEventListener('click', tên_hàm) giúp em liên kết sự kiện click chuột hoàn toàn trong file JS mà không làm bẩn file HTML."
}
}
![](\"mole.png\")
để hiển thị hình ảnh tương tác."
},
{
"title": "Bước 3: Lập trình tương tác JavaScript",
"body": "- Viết mã JavaScript trong thẻ "
},
{
"title": "CSS Gợi ý",
"type": "css",
"code": "/* CSS Cơ bản cho dự án */\nbody {\n background-color: /* màu nền: #fab1a0 */;\n}\n.container {\n max-width: /* độ rộng container: 600px */;\n border: /* viền: 3px solid #e17055 */;\n /* bo góc, đổ bóng container */\n}\n.nut-bam, .btn, .btn-nhac, .btn-mo, .btn-dong, .btn-tinh, .btn-them, .btn-play, .btn-pause, .btn-check, .btn-kick, .btn-go {\n /* màu nền nút bấm */\n /* con trỏ chuột: bàn tay chỉ */\n}"
}
],
"tip": {
"title": "💡 Mẹo nhỏ:",
"desc": "Phương thức .addEventListener('click', tên_hàm) giúp em liên kết sự kiện click chuột hoàn toàn trong file JS mà không làm bẩn file HTML."
}
}