Tiểu luận báo cáo môn học lập trình hướng đối tượng

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC KINH TẾ - KỸ THUẬT BÌNH DƯƠNG KHOA KỸ THUẬT - CÔNG NGHỆ  TIỂU LUẬN BÁO CÁO MÔN HỌC LẬP TRÌNH HƯỚNG ĐỐI TƯỢNG NHĨM SINH VIÊN THỰC HIỆN: NGUYỄN MẬU TÂM ĐINH NGỌC TÀI HỒ THỊ NHÃ VY NGUYỄN LÊ THANH HIỀN TRẦN ĐỒNG NGHIỆP GIẢNG VIÊN HƯỚNG DẪN THS TRƯƠNG NGUYỄN TRÙNG DƯƠNG Bình Dương, ngày 06 tháng 06 năm 2023 DANH SÁCH THÀNH VIÊN NHÓM MỨC ĐỘ HOÀN THÀNH HỌ TÊN MSSV NỘI DUNG THỰC HIỆN Nguyễn Lê Thanh Hiền D20C01A 1338 Lên ý tưởng nhân vật, bối cảnh 80% Trần Đồng Nghiệp D20C01A 1326 Lên ý tưởng nhân vật, bối cảnh 80% Đinh Ngọc Tài D20C01A 7369 Lập trình 100% Nguyễn Mậu Tâm D20C01A 1303 Lập trình, Báo cáo 100% Hồ Thị Nhã Vy D20C01A 1460 Lên ý tưởng nhân vật, bối cảnh 80% S TT GH I CHÚ Nh óm trưởng Lập trình hướng đối tượng Nhóm LỜI NĨI ĐẦU Trên giới Việt Nam, công nghệ thông tin trở thành công nghệ mũi nhọn, ngành cơng nghiệp kỹ thuật khơng thể thiết việc áp dụng vào hoạt động xã hội như: hoạt động quản lý hệ thống, kinh doanh, hoạt động nghiên cứu,… đặc biệt lĩnh vực game – lĩnh vực phát triển mạnh Ở nước ta nay, việc xây dựng ứng dụng game khơng cịn xa lạ, để tạo game hay chất lượng vấn đề không dễ Đây vấn đề nan giải, để xây dựng game đạt chất lượng ngồi việc người lập trình, cần phải hiểu, hoạch định phân tích tối ưu vai trị chức hệ thống thơng tin Game có tên Flexbox Owlet, hai tựa game tạo nên từ sáng tạo, kết hợp việc học giải trí đơn giản tạo nên game đặc biệt Ý tưởng trị chơi sử dụng phương pháp trò chơi để thúc đẩy tương tác, tham gia việc áp dụng kiến thức trình học tập Game mang phong cách độc lạ với kiểu chơi 2d Với mục tiêu giúp bạn trẻ muốn tìm hiểu Flexbox Mặc dù cố gắng để hồn thành cơng việc, thời gian có hạn thiết kinh nghiệm kỹ cịn nhiều thiếu sót nên việc phân tích thiết kế cịn nhiều thiếu sót, kính mong q thầy cơ, bổ sung để nhóm hồn thiện cho đồ án tốt Lập trình hướng đối tượng Nhóm MỤC LỤC MỞ ĐẦU CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Mô tả game 1.2 Yêu cầu sản phẩm CHƯƠNG II: CƠ SỞ LÝ THUYẾT 2.1 Nền tảng Công nghệ 2.2 Mơ hình thiết kế CHƯƠNG III: PHÂN TÍCH .8 3.1 Gameplay 3.2 Source code .11  Index.html 11  Style.css .17  Docs.js 41  Game.js 43  Levels.js .64  Messages.js 79 CHƯƠNG IV: KẾT LUẬN .82 TÀI LIỆU THAM KHẢO Lập trình hướng đối tượng Nhóm DANH MỤC HÌNH ẢN Hình 1: Flexbox Owlet Hình 2: Hoàn thành cấp độ Hình 3: Ngơn ngữ lập trình Hình 4: Giao diện Hình 5: Kiểm tra Hình 6: Vượt thử thách Hình 7: Các cấp độ 10 Hình 8: Folder file .11 Lập trình hướng đối tượng Nhóm NHẬN XÉT CỦA GIÁO VIÊN Bình Dương, ngày….tháng….năm 20… Giảng viên ThS.Trng Nguyn Trựng Dng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hng i tng Mở đầu MỞ ĐẦU I Lý chọn đề tài Trong giới phát triển web đại, CSS Flexbox trở thành phương pháp mạnh mẽ để tạo giao diện linh hoạt đáp ứng Flexbox giúp kiểm soát hiển thị xếp phần tử trang web cách dễ dàng hiệu Tuy nhiên, việc hiểu làm quen với thuộc tính khả Flexbox gặp khó khăn người học CSS chí người có kinh nghiệm Trong báo cáo này, giới thiệu Flexbox Game - cơng cụ hữu ích thú vị để tìm hiểu CSS Flexbox Flexbox Game cung cấp mơi trường tương tác trị chơi giúp người dùng rèn luyện nắm vững kiến thức Flexbox thông qua việc thực hành giải tập II Mục tiêu nghiên cứu  Giới thiệu CSS Flexbox: Chúng ta tổng quan khái niệm lợi ích CSS Flexbox, đồng thời đưa số ví dụ cách Flexbox áp dụng để tạo giao diện đáp ứng  Giới thiệu Flexbox Game: Chúng ta khám phá Flexbox Game tính bật Sự tương tác cách thức hoạt động trò chơi trình bày chi tiết  Trải nghiệm học tập thơng qua Flexbox Game: Chúng ta tìm hiểu cấp độ tập Flexbox Game, với cách thức giúp người dùng nắm vững rèn luyện kỹ sử dụng Flexbox  Lợi ích ứng dụng Flexbox Game: Chúng ta xem xét lợi ích mà Flexbox Game mang lại việc học Flexbox, khả ứng dụng kiến thức học dự án phát trin thc t Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hướng đối tượng Chương I: Tổng quan đề tài CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Mô tả game Flexbox Owlet trò chơi trực tuyến tạo để giúp người học hiểu nắm vững cách sử dụng Flexbox CSS Flexbox mơ hình kiểu bố trí CSS cho phép linh hoạt dễ dàng xếp phần tử khung (container) điều chỉnh chúng theo quy tắc xếp chồng chỉnh Hình 1: Flexbox Owlet Trong Flexbox Owlet, người chơi đưa vào giao diện trực quan với thử thách tập liên quan đến sử dụng Flexbox Mục tiêu người chơi sử dụng thuộc tính giá trị Flexbox cách để xếp chồng chỉnh phần tử theo yêu cầu tập Trò chơi cung cấp hướng dẫn gợi ý để giúp người chơi tiếp cận hiểu cách hoạt động Flexbox Người chơi thử nghiệm thay đổi giá trị thuộc tính Flexbox “display”, “flex-direction”, “justify-content”, “align-items”, “flex-wrap” để xem thay đổi bố cục vị trí phần tử Qua việc hoàn thành cấp độ thử thách trị chơi, người chơi nắm vững kiến thức Flexbox có khả áp dụng vào dự án thực tế Flexbox Owlet khơng giúp người học rèn kỹ sử dụng Flexbox mà cịn mang tính giải trí thú vị tương tác với thử thách tập Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hng i tng Chng I: Tổng quan đề tài Hình 2: Hồn thành cấp độ 1.2 Yêu cầu sản phẩm  Giao diện trực quan: Trị chơi nên có giao diện thân thiện hấp dẫn với phần tử trực quan hình ảnh, biểu đồ, biểu đồ gantt để thể bố cục vị trí phần tử  Thử thách tập: Trò chơi nên cung cấp loạt thử thách tập, từ dễ đến khó, để người chơi thực hành sử dụng Flexbox Các thử thách yêu cầu người chơi xếp chồng chỉnh phần tử theo yêu cầu cụ thể  Hướng dẫn gợi ý: Trò chơi nên cung cấp hướng dẫn chi tiết gợi ý để giúp người chơi tiếp cận hiểu cách sử dụng thuộc tính giá trị Flexbox Hướng dẫn nên giải thích khái niệm cung cấp ví dụ minh họa  Phản hồi điểm số: Trò chơi nên cung cấp phản hồi tức hiệu suất độ xác người chơi Người chơi nên nhận điểm số đánh giá dựa hiệu suất họ việc hoàn thách tập  Đa cấp độ: Trị chơi nên có nhiều cấp độ khác để người chơi tiến từ đến nâng cao Các cấp độ nên có độ khó tăng dần yêu cầu người chơi áp dụng khái niệm Flexbox phức tạp  Lưu trữ tiến trình: Trị chơi nên cung cấp khả lưu trữ tải lại tiến trình người chơi Điều cho phép người chơi tiếp tục từ nơi họ dừng lại giúp theo dõi tiến họ q trình học Nhóm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hng i tng Chng I: Tng quan đề tài  Thơng tin bổ sung: Trị chơi bổ sung thơng tin hữu ích tài liệu tham khảo, ví dụ mã nguồn liên kết đến tài liệu học tập bổ sung để người chơi nghiên cứu thêm sau hồn thnh trũ chi Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hướng đối tượng Chương III: Phân tích trên.", }, board: "gyr", style: { "昀氀ex-direction": "column" }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "昀氀ex-direction 3", instructions: { en: "

Help the owls get to their own trees Although they seem close, it will take both 昀氀ex-direction and justify-content to get them there.

Notice that when you set the direction to a reversed row or column, start and end are also reversed.

", vi: "

Giúp đỡ cú tìm thấy chúng Mặc dù gần nhau, cần hai thuộc tính 昀氀ex-direction justifycontent để đưa chúng đến nơi.

Chú ý bạn thiết lập chiều hướng hàng cột đảo ngược, điểm bắt đầu kết thúc đảo ngược.

", }, board: "gyr", style: { "昀氀ex-direction": "row-reverse", "justify-content": "昀氀ex-end" }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "昀氀ex-direction 4", instructions: { en: "

Help the owls 昀椀nd their trees using 昀氀ex-direction and justify-content.

Notice that when the 昀氀ex direction is a column, justify-content changes to the vertical and align-items to the horizontal.

", vi: "

Giúp đỡ cú tìm thấy chúng bng cỏch s 70 Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hướng đối tượng Chương III: Phân tích dụng 昀氀ex-direction justify-content.

Chú ý hướng 昀氀ex hàng dọc, justify-content thay đổi thành chiều dọc align-items to chiều ngang.

", }, board: "gyr", style: { "昀氀ex-direction": "column", "justify-content": "昀氀ex-end" }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "昀氀ex-direction 5", instructions: { en: "

Help the owls 昀椀nd their trees using 昀氀ex-direction and justify-content.

", vi: "

Giúp đỡ cú tìm họ cách sử dụng 昀氀ex-direction justify-content.

", }, board: "gyr", style: { "昀氀ex-direction": "column-reverse", "justify-content": "space-between", }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "昀氀ex-direction 6", instructions: { en: "

Help the owls 昀椀nd their trees using 昀氀ex-direction, 71 Nhóm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hng i tng Chng III: Phân tích justify-content, and align-items.

", vi: "

Giúp đỡ cú tìm họ cách sử dụng 昀氀ex-direction, justify-content, alignitems.

", }, board: "gyr", style: { "昀氀ex-direction": "row-reverse", "justify-content": "center", "align-items": "昀氀ex-end", }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "order 1", instructions: { en: "

Sometimes reversing the row or column order of a container is not enough In these cases, we can apply the order property to individual items By default, items have a value of 0, but we can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).

Use the order property to reorder the owls according to their trees.

", vi: "

Đôi đảo chiều hộp chứa theo hàng ngang hay hàng dọc không đủ Trong trường hợp này, áp dụng thuộc tính order cho hạng mục riêng lẻ Theo mặc định, hạng mục có giá trị 0, thay đổi thuộc tính với giá trị số nguyên dương âm khác.

Sử dụng thuộc tính order để xếp lại cú theo chúng.

", }, board: "gyr", selector: "> :nth-child(2)", classes: { "#container, #background": "wrap" }, 72 Nhóm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hng i tng Chng III: Phõn tích style: { order: "2" }, before: "#container {\n display: 昀氀ex;\n}\n\n.yellow {\n", after: "}", }, { name: "order 2", instructions: { en: "

Use the order property to send the red owl to his tree.

", vi: "

Sử dụng thuộc tính order để đưa cú màu đỏ đến với mình.

", }, board: "gggrg", selector: "> :nth-child(4)", classes: { "#container, #background": "wrap" }, style: { order: "-1" }, before: "#container {\n display: 昀氀ex;\n}\n\n.red {\n", after: "}", }, { name: "align-self 1", instructions: { en: "

Another property you can apply to individual items is alignself This property accepts the same values as align-items and its value for the speci昀椀c item.

", vi: "

Một thuộc tính CSS khác mà bạn áp dụng cho hạng mục riêng biệt align-self Thuộc tính CSS chấp nhận giá trị tương tự align-items giá trị hạng mục riêng biệt.

", }, board: "ggygg", 73 Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hng i tng Chng III: Phân tích selector: "> :nth-child(3)", style: { "align-self": "昀氀ex-end" }, before: "#container {\n display: 昀氀ex;\n align-items: 昀氀ex-start;\n}\n\n.yellow {\n", after: "}", }, { name: "align-self 2", instructions: { en: "

Combine order with align-self to help the owls to their destinations.

", vi: "

Kết hợp order với align-self giúp cú đến địa điểm chúng.

", }, board: "ygygg", selector: "> yellow", style: { "align-self": "昀氀ex-end", order: "2" }, before: "#container {\n display: 昀氀ex;\n align-items: 昀氀ex-start;\n}\n\n.yellow {\n", after: "}", }, { name: "昀氀ex-wrap 1", instructions: { en: "

Oh no! The owls are all squeezed onto a single row of trees Spread them out using the 昀氀ex-wrap property, which accepts the following values:

• nowrap: Every item is 昀椀t to a single line.
• wrap: Items wrap around to additional lines.
• wrap-reverse: Items wrap around to additional lines in reverse.

", 74 Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trình hướng đối tượng Chương III: Phân tích vi: "

Ồ không! Những cú dồn vào hàng theo Tách rời chúng cách sử dụng thuộc tính 昀氀ex-wrap, thuộc tính chấp nhận giá trị sau:

• nowrap: Mỗi hạng mục dồn vào hàng nhất.
• wrap: Các hạng mục quấn xung quanh để tạo thêm dòng.
• wrap-reverse: Các hạng mục quấn xung quanh để tạo thêm dòng ngược lại.

", }, board: "ygggggr", style: { "昀氀ex-wrap": "wrap" }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "昀氀ex-wrap 2", instructions: { en: "

Help this army of owls form three orderly columns using a combination of 昀氀ex-direction and 昀氀ex-wrap.

", vi: "

Giúp đội quân ếch xếp thành ba hàng trật tự cách kết hợp 昀氀exdirection 昀氀ex-wrap.

", }, board: "gggggrrrrryyyyy", style: { "昀氀ex-direction": "column", "昀氀ex-wrap": "wrap" }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "昀氀ex-昀氀ow 1", instructions: { en: "

The two properties 昀氀ex-direction and 昀氀exwrap are used so often together that the shorthand property 昀氀ex-昀氀ow was created to combine them This shorthand property accepts the value of the two properties separated by a space.

For example, you can use 昀氀ex-昀氀ow: row wrap to set rows and wrap them.

Try using ex-ow to repeat the previous 75 Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lập trình hướng đối tượng Chương III: Phân tích level.

", vi: "

Cả hai thuộc tính 昀氀ex-direction 昀氀ex-wrap thường sử dụng với từ viết tắt 昀氀ex-昀氀ow tạo để kết hợp chúng Từ viết tắt chấp nhận giá trị hai thuộc tính ngăn cách khoảng trắng.

Ví dụ, bạn sử dụng 昀氀ex-昀氀ow: row wrap để thiết lập hàng ngang quấn xung quanh chúng.

Thử sử dụng 昀氀ex-昀氀ow để lặp lại cấp độ trước đó.

", }, board: "gggggrrrrryyyyy", style: { "昀氀ex-昀氀ow": "column wrap" }, before: "#container {\n display: 昀氀ex;\n", after: "}", }, { name: "align-content 1", instructions: { en: "

The owls are spread all over the container, but the trees are bunched at the top You can use align-content to set how multiple lines are spaced apart from each other This property takes the following values:

• 昀氀ex-start: Lines are packed at the top of the container.
• 昀氀ex-end: Lines are packed at the bottom of the container.
• center: Lines are packed at the vertical center of the container.
• space-between: Lines display with equal spacing between them.
• space-around: Lines display with equal spacing around them.
• stretch: Lines are stretched to 昀椀t the container.

This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container When there is only one line, aligncontent has no e昀昀ect.

", vi: "

Những cú lan rộng ao, chụm lại phía Bạn dùng align-content để thiết lập cách dịng có khoảng cách xa Những thuộc tính có giá trị sau:

• 昀氀ex-start: Các dịng dồn phía hộp chứa.
• 昀氀ex-end: Các dịng dồn phía hộp chứa.
• center: Các dòng dồn trung tâm hộp chứa.
• space-between: Các dịng trình bày với khoảng cách chúng.
• space-around: Các dịng trình bày với khoảng cách xung quanh chúng.
• stretch: Các dòng kéo dài để phù hợp với hộp chứa.

Điều gây nhầm lẫn, align-content xác định khoảng cách dòng, alignitems xác định cách hạng mục toàn thể xếp hộp chứa Khi có dịng, align-content khơng có hiu lc.

", }, 76 Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hướng đối tượng Chương III: Phân tích board: "ggggggggggggggg", classes: { "#container, #background": "wrap" }, style: { "align-content": "昀氀ex-start" }, before: "#container {\n display: 昀氀ex;\n 昀氀ex-wrap: wrap;\n", after: "}", }, { name: "align-content 2", instructions: { en: "

Now the current has bunched the trees at the bottom Use aligncontent to guide the owls there.

", vi: "

Hiện phía Sử dụng align-content để hướng dẫn cú đến chỗ đó.

", }, board: "ggggggggggggggg", classes: { "#container, #background": "wrap" }, style: { "align-content": "昀氀ex-end" }, before: "#container {\n display: 昀氀ex;\n 昀氀ex-wrap: wrap;\n", after: "}", }, { name: "align-content 3", instructions: { en: "

The owls have had a party, but it is time to go home Use a combination of 昀氀ex-direction and align-content to get them to their trees.

", vi: "

Những cú có bữa tiệc, đến lúc để nhà Kết hợp thuộc tính 昀氀ex-direction align-content để đưa chúng với nhng cỏi cõy.

", 77 Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hướng đối tượng Chương III: Phân tích }, board: "rgggyrgggyrgggy", classes: { "#container, #background": "wrap" }, style: { "昀氀ex-direction": "column-reverse", "align-content": "center" }, before: "#container {\n display: 昀氀ex;\n 昀氀ex-wrap: wrap;\n", after: "}", }, { name: "align-content 4", instructions: { en: '

Bring the owls home one last time by using the CSS properties you\'ve learned:

• justify-content
• alignitems
• 昀氀exdirection
• order
• alignself
• 昀氀ex-wrap
• 昀氀ex昀氀ow
• align-content

', vi: "

Đưa cú nhà lần cuối cách sử dụng thuộc tính CSS mà bạn học:

• justify-content
• alignitems
• 昀氀exdirection
• order
• alignself
• 昀氀ex-wrap
• 昀氀ex昀氀ow
• align-content

", }, board: "rggggyy", style: { "昀氀ex-direction": "column-reverse", "昀氀ex-wrap": "wrap-reverse", "align-content": "space-between", "justify-content": "center", }, before: "#container {\n display: 昀氀ex;\n", 78 Nhóm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hng i tng Chng III: Phõn tích after: "}", }, ]; var levelWin = { name: "win", instructions: { en: '

You win! Thanks to your mastery of 昀氀exbox, you were able to help all of the owls to their trees Just look how hoppy they are!

If you found this ribbeting, be sure to visit Grid Garden to learn about another powerful new feature of CSS layout And be sure to share Flexbox Owlet with your friends!

', vi: '

Chiến thắng! Nhờ thành thạo Flexbox bạn, bạn giúp tất cú trở với chúng Nhìn xem chúng hạnh phúc nhiêu!

Nếu bạn thấy dự án lôi cuốn, chia sẻ Flexbox Owlet với bạn bè!

', }, board: "gyrgyrgyrgyrgyrgyrgyrgyrg", classes: { "#container, #background": "wrap" }, style: {}, before: "#container {\n display: 昀氀ex;\n", after: "}", };  Messages.js var messages = { languageActive: { en: "English", vi: "Ting Vit", }, next: { 79 Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lập trình hướng đối tượng Chương III: Phân tích en: "Check Answer", vi: "Kiểm tra", }, labelFooter: { en: "Flexbox Owlet is created by", vi: "Flexbox Owlet tạo bởi", }, labelLevel: { en: "Level", vi: "Cấp", }, labelOf: { en: "of", vi: "của", }, title: { en: "Flexbox Owlet - A game for learning CSS 昀氀exbox", vi: "Flexbox Owlet - Một trò chơi để học CSS 昀氀exbox", }, labelReset: { en: "Reset", vi: "Thiết lập lại", }, warningReset: { en: "Are you sure you want to reset the game?\n\nYour saved progress will be lost and you'll be sent to the start of the game.", vi: "Bạn có chắn bạn muốn thiết lập lại trị chơi khơng? Ton b tin trỡnh ca 80 Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lập trình hướng đối tượng Chương III: Phân tích bạn bị bạn chuyển đến đầu trò chơi.", }, gridGarden: { en: "Want to learn CSS grid? Play", vi: "Bạn muốn học CSS grid? Chơi ngay", }, labelLanguage: { en: "Language", vi: "Ngôn ngữ", }, labelSettings: { en: "Settings", vi: "Thiết lập", }, labelDi昀케culty: { en: "Di昀케culty", vi: "Độ khó", }, labelColorblind: { en: "Colorblind Mode", vi: "Chế độ mù màu", }, labelColorblindO昀昀: { en: "O", vi: "Tt", }, 81 Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trình hướng đối tượng Chương III: Phân tích labelColorblindOn: { en: "On", vi: "Bật", }, labelDi昀케cultyEasy: { en: "Beginner", vi: "Người bắt đầu", }, labelDi昀케cultyMedium: { en: "Intermediate - No Directions", vi: "Trung cấp - Khơng có hướng dẫn", }, labelDi昀케cultyHard: { en: "Expert - No Directions & Random Levels", vi: "Chun gia - Khơng có hướng dẫn Cp ngu nhiờn", }, }; 82 Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Lp trỡnh hng i tng Chng IV:Kt lun CHNG IV: KẾT LUẬN Trong báo cáo này, tìm hiểu game Flexbox Owlet - cơng cụ hữu ích để học cách sử dụng Flexbox phát triển giao diện web Game mang lại nhiều lợi ích trải nghiệm thú vị cho người dùng Trước tiên, việc học Flexbox thơng qua trị chơi phương pháp học tương tác thú vị Game cung cấp môi trường học tập không gian, cho phép người dùng tương tác trực tiếp với khái niệm thuộc tính Flexbox Nhờ đó, người chơi có hội áp dụng kiến thức môi trường thực tế nhận phản hồi xác họ Thứ hai, Flexbox Owlet cung cấp quy trình học tập có cấu trúc tăng dần độ khó Người chơi tập tiến tới thử thách phức tạp Điều giúp người dùng xây dựng tự tin tiếp cận Flexbox cách có hệ thống Ngồi ra, game cung cấp giải thích rõ ràng khái niệm thuộc tính Flexbox, giúp người chơi hiểu rõ áp dụng thành thạo trình phát triển giao diện web thực tế Cuối cùng, Flexbox Owlet tạo hứng thú khám phá Thông qua việc thực nhiệm vụ đạt điểm số cao, người dùng cảm thấy động viên thách thức Game cung cấp chế độ chơi không giới hạn, cho phép người chơi luyện tập thử nghiệm phương pháp Flexbox khác mà không gặp giới hạn thời gian hay điểm số Điều khuyến khích người dùng tiếp tục khám phá nâng cao kỹ việc sử dụng Flexbox Tóm lại, Flexbox Owlet cơng cụ hữu ích thú vị để học Flexbox phát triển giao diện web Bằng cách kết hợp tương tác, cấu trúc học tập yếu tố giải trí, game giúp người dùng tiếp tục nắm vững áp dụng linh hoạt khái niệm thuộc tính Flexbox Game cung cấp mơi trường an tồn để người dùng thực hành thử nghiệm mà không gặp phải hậu tiêu cực trình phát triển thực tế Tuy nhiên, cần nhớ Flexbox Owlet công cụ hỗ trợ học tập thay việc hiểu áp dụng nguyên tắc thiết kế linh hoạt thực tế Sau hoàn thành game, người dùng nên tiếp tục khám phá áp dụng Flexbox dự án thực tế, kết hợp với kiến thức kỹ phát triển giao diện web khác để tạo trang web tt hn 82 Nhúm Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng Tiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊngTiỏằu.luỏưn.bĂo.cĂo.mn.hỏằãc.lỏưp.trơnh.hặỏằng.ỏằi.tặỏằÊng