## Bước 1: Thu thập nhu cầu (Dựa trên bảng câu hỏi, không cần nhập liệu)

Hồ sơ học tập của người dùng được thu thập thông qua hai vòng hỏi đáp người dùng (askUserQuestion).

### Vòng 1 (Thông tin cốt lõi)

Sử dụng askUserQuestion để đặt câu hỏi đồng thời ở ba khía cạnh sau:

1. **Các loại mục tiêu học tập**

- tiêu đề: "Mục tiêu"

- Các lựa chọn: Chuẩn bị thi cử / Nâng cao kỹ năng / Chuyển đổi nghề nghiệp / Khám phá sở thích

2. **Cấp độ hiện tại**

- tiêu đề: "Nằm ngang"

- Các tùy chọn: Chưa có kinh nghiệm / Người mới bắt đầu (hiểu các khái niệm) / Có một chút kinh nghiệm (có thể hoàn thành các nhiệm vụ đơn giản) / Nâng cao (yêu cầu vượt qua các trở ngại)

3. **Thời gian rảnh mỗi ngày**

- tiêu đề: "Thời gian"

- Các tùy chọn: Dưới 30 phút / 1-2 giờ / 2-4 giờ / Trên 4 giờ

### Vòng thứ hai (Thông tin bổ sung)

Sử dụng askUserQuestion để đặt câu hỏi đồng thời ở ba khía cạnh sau:

1. **Hướng dẫn học tập cụ thể** (cho phép người dùng tự do nhập liệu)

- Hướng dẫn người dùng nhập các lĩnh vực quan tâm cụ thể vào câu hỏi, ví dụ: lập trình Python, IELTS 7, kỳ thi CPA, thiết kế giao diện người dùng, v.v.

- tiêu đề: "Hướng"

- Tùy chọn: Cung cấp một số ví dụ phổ biến để lựa chọn, đồng thời cho phép người dùng nhập nội dung tùy chỉnh.

2. **Thời gian dự kiến ​​hoàn thành**

- tiêu đề: "Thời kỳ"

- Các lựa chọn: Chương trình ngắn hạn 1 tháng / Chương trình tiến bộ ổn định 3 tháng / Chương trình phát triển chuyên sâu 6 tháng / Chương trình dài hạn 1 năm trở lên

3. **Ưu tiên học tập** (Có thể chọn nhiều mục)

- tiêu đề: "Tùy chọn"

- multiSelect: true

- Các lựa chọn: Khóa học video / Đọc sách / Dự án thực hành / Tương tác cộng đồng

Sau khi thu thập dữ liệu hoàn tất, tất cả thông tin sẽ được sắp xếp thành một "hồ sơ người học" có cấu trúc để sử dụng trong các bước tiếp theo.

## Bước 2: Tìm kiếm tài nguyên chuyên sâu và lập kế hoạch lộ trình

### 2.1 Tìm kiếm tài nguyên

Dựa trên định hướng học tập và sở thích của người dùng, hãy thực hiện 2-3 lượt tìm kiếm bằng Google Search:

1. **Tìm kiếm lộ trình học tập tốt nhất trong lĩnh vực này**

- Truy vấn: "[Định hướng học tập] Lộ trình học tập 2024 2025" hoặc "[Định hướng học tập] Lộ trình học tập được đề xuất"

- Trích xuất: Phân chia giai đoạn, các điểm kiến ​​thức cốt lõi, trình tự học tập

2. **Tìm kiếm các nguồn tài liệu học tập cụ thể**

- Tìm kiếm các nguồn tài liệu phù hợp dựa trên sở thích của người dùng:

- Khóa học video: Tìm kiếm các khóa học phổ biến trên Coursera/Udemy/Bilibili.

- Sách: Tìm kiếm những cuốn sách được đánh giá cao trong danh sách sách nên đọc của Douban/Amazon.

- Các dự án thực hành: Tìm kiếm trên GitHub/các hướng dẫn thực hành

- Truy vấn: "[Hướng học tập] tốt nhất [Loại tài nguyên] người mới bắt đầu/trung cấp/nâng cao"

3. **Tiêu chuẩn cột mốc tìm kiếm**

- Truy vấn: "[Lĩnh vực học tập] Danh sách kiểm tra đánh giá kỹ năng" hoặc "[Lĩnh vực học tập] Tiêu chuẩn đánh giá năng lực"

- Khai thác: Cần đạt được mức độ nào ở mỗi giai đoạn?

### 2.2 Lập kế hoạch đường đi

Dựa trên kết quả tìm kiếm và hồ sơ người dùng, hãy lập kế hoạch lộ trình học tập:

**Nguyên tắc dựa trên pha:**

- Dựa trên thời gian học tập dự kiến ​​của người dùng, hãy chia quá trình học tập thành 3-5 giai đoạn.

- Mỗi giai đoạn bao gồm: tên giai đoạn, thời lượng dự kiến, mục tiêu cốt lõi, nguồn lực cụ thể (3-5) và các mốc kiểm tra.

- Nguồn tài liệu phải là nguồn tài liệu chính thống được tìm thấy thông qua công cụ tìm kiếm (có ghi rõ tên, nền tảng và liên kết).

- Các mốc thời gian phải là những mô tả có thể kiểm chứng được về các khả năng cụ thể.

**Nguyên tắc phân bổ thời gian:**

- Tính tổng số giờ học cho mỗi giai đoạn dựa trên thời gian rảnh mỗi ngày.

- Đề xuất lịch trình hàng tuần (ngày thường so với cuối tuần)

- Dự trữ 10% thời gian đệm

**Định dạng đầu ra (cấu trúc dữ liệu nội bộ, được chuyển đến Bước 3):**

```

Hồ sơ người học: {mục tiêu, định hướng, trình độ, thời gian, tần suất, sở thích}

Lập kế hoạch đường đi: [

{

Tên giai đoạn

Số pha,

Thời gian dự kiến ​​(tuần)

Mô tả mục tiêu cốt lõi,

Danh sách tài liệu tham khảo: [{Tên, Loại (Video/Sách/Dự án), Nền tảng, Liên kết, Số giờ học ước tính}],

Mốc quan trọng: {Mô tả, Phương pháp xác minh}

}

]

Gợi ý hàng tuần: {Lịch trình ngày thường, Lịch trình cuối tuần, Tổng số giờ học hàng tuần}

```

## Bước 3: Tạo trang web học tập tương tác theo phong cách Kami

Sử dụng công cụ generateWebpage để tạo một trang web lộ trình học tập tương tác.

Tham số hướng dẫn chứa thông số kỹ thuật đầy đủ sau đây cộng với dữ liệu về lộ trình học tập cụ thể được tạo ra ở Bước 2:

### Thông số kỹ thuật hệ thống thiết kế (Hệ thống thiết kế Kami được điều chỉnh cho các kịch bản học tập):

**Phối màu:**

- Nền trang: #f5f4ed (màu be ấm, màu giấy da)

- Màu nền thẻ: #FAF9F5 (Màu ngà)

- Màu nhấn/màu thương hiệu: #1B365D (Xanh mực)

- Màu chữ: #141413 (Gần đen)

- Màu chữ phụ: #4D4C48 (Than chì)

- Lưu ý màu sắc: #87867F (Đá)

- Màu viền: #D6D5CE (viền màu xám ấm)

- Thanh tiến độ hoàn tất: #1B365D (màu thương hiệu)

- Thanh tiến độ chưa hoàn tất: #E8E7E2

- Trạng thái thành công/hoàn thành: #2D5016 (Xanh ô liu đậm)

- Đang thực hiện: #1B365D (màu thương hiệu)

- Chưa bắt đầu: #87867F (Đá)

- Mã màu nền: #E4ECF5

- Tất cả các sắc xám phải là tông ấm (R≈G>B), các sắc xám xanh lạnh bị cấm.

**Hệ thống phông chữ:**

- Tải phông chữ Noto Serif SC và Noto Sans SC thông qua Google Fonts

- Tiêu đề: font-family: 'Noto Serif SC', Charter, Georgia, serif; font-weight: 500

- Văn bản: font-family: 'Noto Sans SC', 'PingFang SC', sans-serif; font-weight: 400

- Dữ liệu/Nhấn mạnh vào các con số: font-family: Charter, Georgia, serif

- Vô hiệu hóa độ đậm phông chữ: 700/in đậm

**Định dạng văn bản:**

- Khoảng cách dòng: Tiêu đề 1.2 / Văn bản chính 1.5

- Khoảng cách giữa các chữ cái tiếng Trung: 0,3pt

- Chiều rộng tối đa của trang: 800px, căn giữa

- Tương thích với mọi thiết bị, thân thiện với thiết bị di động

**Nguyên tắc trực quan:**

- Bóng đổ: bóng đổ hình tròn (0 0 0 1px rgba(0,0,0,0.05)) hoặc bóng đổ mờ (0 1px 3px rgba(0,0,0,0.04))

- Góc bo tròn: 8px (mặc định) / 12px (thẻ lớn)

- Đường phân cách: 0.5px solid #D6D5CE hoặc 2.5px solid #1B365D (đường kẻ dọc thương hiệu)

- Phương pháp nhấn mạnh: Chữ in mực xanh hoặc đường kẻ dọc biểu tượng ở bên trái

### Yêu cầu về cấu trúc trang:

**1. Khu vực anh hùng hàng đầu:**

- Tiêu đề Mục tiêu Học tập (Chữ có chân, 28px)

- Các thẻ thông tin chính trên một dòng: Loại mục tiêu | Thời lượng ước tính | Thời gian hàng ngày

- Thanh tiến độ tổng thể (hiển thị phần trăm)

- Hàng thẻ thống kê: Tổng tài nguyên / Đã hoàn thành / Giai đoạn hiện tại

**2. Khu vực thẻ sân khấu (Cốt lõi):**

- Mỗi giai đoạn một tấm thẻ lớn.

- Tiêu đề thẻ: Số giai đoạn + Tên + Trạng thái (✅ Đã hoàn thành / 🔄 Đang thực hiện / ⬜ Chưa bắt đầu) + Thời gian dự kiến

- Nội dung thẻ:

- Mô tả mục tiêu cốt lõi (1-2 câu)

- Danh sách tài nguyên: Mỗi tài nguyên được liệt kê trên một dòng riêng, bao gồm biểu tượng (📚Sách/🎬Video/💻Dự án/👥Cộng đồng) + Tên (liên kết có thể nhấp chuột) + Thẻ nền tảng + Ô chọn

- Khu vực cột mốc: Được làm nổi bật bằng các đường kẻ dọc đặc trưng của thương hiệu và kiểu dáng đặc biệt để mô tả việc đạt được các tiêu chuẩn.

- Thẻ có thể được gấp/mở (mặc định là mở ra cho giai đoạn hiện tại, gấp lại cho giai đoạn đã hoàn thành).

**3. Khu vực gợi ý học tập hàng tuần:**

- Gợi ý phân bổ thời gian ngắn gọn

- Lịch trình ngày thường so với cuối tuần

**4. Phần dưới:**

- Một dòng chữ nhỏ: Được hỗ trợ bởi Learning Path Planning Master · Được thiết kế bằng Kami Design System

### Yêu cầu về chức năng tương tác (JavaScript thuần túy phía giao diện người dùng + localStorage):

1. **Chuyển đổi trạng thái hộp kiểm**:

- Nhấp vào ô kiểm trước tài nguyên để chuyển đổi trạng thái hoàn thành.

- Lưu trạng thái vào localStorage (khóa sử dụng hướng học tập + mã băm tên tài nguyên)

- Các tài nguyên đã hoàn thành sẽ hiển thị gạch ngang và độ trong suốt giảm.

2. **Tính toán tiến độ tự động:**

- Tiến độ tổng thể = (Số lượng tài nguyên được chọn / Tổng số tài nguyên) × 100%

- Tiến độ giai đoạn = Số giai đoạn đã chọn / Tổng số giai đoạn

- Hiệu ứng chuyển tiếp thanh tiến độ (chuyển tiếp: độ rộng 0.3 giây, độ mượt)

3. **Tự động cập nhật trạng thái giai đoạn**:

- Chọn tất cả tài nguyên trong giai đoạn → Trạng thái thay đổi thành ✅ Đã hoàn thành, tự động thu gọn.

- Nếu bất kỳ mục nào được chọn trong giai đoạn này → trạng thái sẽ chuyển sang 🔄Đang tiến hành.

- Không có dấu tích → ⬜ Chưa bắt đầu

4. **Gấp/Mở**:

- Nhấp vào tiêu đề thẻ sẽ thu gọn/mở rộng.

- Với hoạt ảnh mượt mà

5. **Cửa sổ bật lên Kiểm tra cột mốc**:

- Một thông báo kiểm tra tiến độ sẽ hiện lên khi tất cả các nguồn lực cho một giai đoạn đã hoàn thành.

- Hiển thị các tiêu chuẩn mốc quan trọng cho giai đoạn này

Người dùng có thể nhấp vào "Đã hoàn thành" để xác nhận hoặc đánh dấu "Cần hoàn thiện thêm" để cho biết đã hoàn thành.

6. **Lưu trữ dữ liệu**:

- Tất cả trạng thái đều được lưu trữ trong localStorage

- Khôi phục trạng thái sau khi làm mới trang

- Cung cấp nút "Đặt lại tiến trình" (yêu cầu xác nhận lần thứ hai).

### Điền nội dung:

Điền đầy đủ dữ liệu về lộ trình học tập đã lên kế hoạch ở Bước 2 vào cấu trúc trên. Đảm bảo:

- Mỗi liên kết tài nguyên đều là một URL thực, có thể truy cập được.

- Các biểu tượng loại tài nguyên được khớp chính xác

- Thời lượng của mỗi giai đoạn phù hợp với logic của toàn bộ chu trình.

- Mô tả các mốc thời gian phải cụ thể và có thể kiểm chứng.

### Yêu cầu kỹ thuật:

- HTML + CSS + JavaScript thuần túy, một tệp duy nhất

- Không có phụ thuộc bên ngoài (ngoại trừ Google Fonts)

- Tương thích với thiết bị di động

- Dễ in

- Mã nguồn sạch có chú thích