ขั้นตอนที่ 1: การรวบรวมความต้องการ (ใช้แบบสอบถาม ไม่ต้องพิมพ์)

ข้อมูลประวัติการเรียนรู้ของผู้ใช้จะถูกรวบรวมผ่านแบบสอบถาม askUserQuestion สองรอบ

### รอบที่ 1 (ข้อมูลหลัก)

ใช้ askUserQuestion เพื่อถามคำถามในสามมิติต่อไปนี้พร้อมกัน:

1. **ประเภทของวัตถุประสงค์การเรียนรู้**

- ส่วนหัว: "เป้าหมาย"

- ตัวเลือก: การเตรียมสอบ / การพัฒนาทักษะ / การเปลี่ยนสายอาชีพ / การสำรวจความสนใจ

2. **ระดับปัจจุบัน**

- ส่วนหัว: "แนวนอน"

- ตัวเลือก: ไม่มีประสบการณ์ / ระดับเริ่มต้น (เข้าใจแนวคิด) / มีประสบการณ์บ้าง (สามารถทำงานง่ายๆ ได้) / ระดับสูง (ต้องสามารถเอาชนะอุปสรรคต่างๆ ได้)

3. **เวลาว่างในแต่ละวัน**

- หัวข้อ: "เวลา"

- ตัวเลือก: น้อยกว่า 30 นาที / 1-2 ชั่วโมง / 2-4 ชั่วโมง / มากกว่า 4 ชั่วโมง

### รอบที่สอง (ข้อมูลเพิ่มเติม)

ใช้ askUserQuestion เพื่อถามคำถามในสามมิติต่อไปนี้พร้อมกัน:

1. **ทิศทางการเรียนรู้ที่เฉพาะเจาะจง** (อนุญาตให้ผู้ใช้ป้อนข้อมูลได้อย่างอิสระ)

- แนะนำผู้ใช้ให้ระบุหัวข้อที่สนใจเฉพาะเจาะจงในคำถาม เช่น การเขียนโปรแกรม Python, IELTS 7, การสอบ CPA, การออกแบบ UI เป็นต้น

- หัวข้อ: "ทิศทาง"

- ตัวเลือก: มีตัวอย่างยอดนิยมให้เลือกหลายแบบ พร้อมทั้งอนุญาตให้ผู้ใช้ป้อนเนื้อหาที่กำหนดเองได้

2. **ระยะเวลาที่คาดว่าจะแล้วเสร็จ**

- ส่วนหัว: "จุด"

- ตัวเลือก: เร่งดำเนินการ 1 เดือน / พัฒนาอย่างต่อเนื่อง 3 เดือน / พัฒนาเชิงลึก 6 เดือน / ระยะยาว 1 ปีขึ้นไป

3. **รูปแบบการเรียนรู้ที่ต้องการ** (สามารถเลือกได้หลายรายการ)

- ส่วนหัว: "การตั้งค่า"

- เลือกหลายรายการ: จริง

- ตัวเลือก: หลักสูตรวิดีโอ / การอ่านหนังสือ / โครงงานภาคปฏิบัติ / การมีส่วนร่วมกับชุมชน

เมื่อการเก็บรวบรวมข้อมูลเสร็จสมบูรณ์ ข้อมูลทั้งหมดจะถูกจัดระเบียบเป็น "โปรไฟล์ผู้เรียน" ที่มีโครงสร้าง เพื่อใช้ในขั้นตอนต่อไป

ขั้นตอนที่ 2: การค้นหาแหล่งทรัพยากรอย่างละเอียดและการวางแผนเส้นทาง

### 2.1 การค้นหาแหล่งข้อมูล

โดยพิจารณาจากทิศทางการเรียนรู้และความชอบของผู้ใช้ ให้ทำการค้นหา 2-3 ครั้งโดยใช้ Google Search:

1. **ค้นหาแผนการเรียนรู้ที่ดีที่สุดในสาขานี้**

- คำค้นหา: "[ทิศทางการเรียนรู้] แผนการเรียนรู้ปี 2024-2025" หรือ "[ทิศทางการเรียนรู้] แผนการเรียนรู้ที่แนะนำ"

- การสกัด: การแบ่งขั้นตอน จุดความรู้หลัก ลำดับการเรียนรู้

2. **ค้นหาแหล่งข้อมูลการเรียนรู้เฉพาะด้าน**

- ค้นหาแหล่งข้อมูลที่เกี่ยวข้องตามความต้องการของผู้ใช้:

- คอร์สเรียนแบบวิดีโอ: ค้นหาคอร์สเรียนยอดนิยมบน Coursera/Udemy/Bilibili

- หนังสือ: ค้นหาหนังสือที่มีคะแนนสูงในรายการแนะนำของ Douban/Amazon

- โครงการฝึกปฏิบัติ: ค้นหาใน GitHub/practical tutorials

- คำค้นหา: "[ทิศทางการเรียนรู้] ดีที่สุด [ประเภทแหล่งข้อมูล] ระดับเริ่มต้น/ระดับกลาง/ระดับสูง"

3. **ค้นหามาตรฐานหลักชัย**

- คำค้นหา: "[แบบตรวจสอบการประเมินทักษะด้านการเรียนรู้]" หรือ "[มาตรฐานการประเมินความสามารถด้านการเรียนรู้]"

- การสกัด: ควรบรรลุระดับใดในแต่ละขั้นตอน?

2.2 การวางแผนเส้นทาง

วางแผนเส้นทางการเรียนรู้โดยอิงจากผลการค้นหาและข้อมูลผู้ใช้:

**หลักการตามเฟส:**

- แบ่งกระบวนการเรียนรู้เป็น 3-5 ขั้นตอน โดยพิจารณาจากระยะเวลาการเรียนรู้ที่ผู้ใช้คาดหวัง

- แต่ละขั้นตอนประกอบด้วย: ชื่อขั้นตอน ระยะเวลาโดยประมาณ วัตถุประสงค์หลัก ทรัพยากรเฉพาะ (3-5 รายการ) และจุดตรวจสอบความคืบหน้า

- แหล่งข้อมูลต้องเป็นแหล่งข้อมูลจริงที่ค้นหาได้จากผลการค้นหา (โดยระบุชื่อ แพลตฟอร์ม และลิงก์)

- หลักชัยต้องเป็นคำอธิบายที่ตรวจสอบได้เกี่ยวกับความสามารถเฉพาะด้าน

**หลักการจัดสรรเวลา:**

- คำนวณจำนวนชั่วโมงเรียนทั้งหมดสำหรับแต่ละขั้นตอนโดยอิงจากเวลาว่างในแต่ละวัน

- เสนอตารางเวลาประจำสัปดาห์ที่แนะนำ (วันธรรมดาและวันหยุดสุดสัปดาห์)

- สำรองเวลาไว้ 10%

**รูปแบบผลลัพธ์ (โครงสร้างข้อมูลภายใน ที่ส่งต่อไปยังขั้นตอนที่ 3):**

```

ข้อมูลผู้เรียน: {เป้าหมาย, ทิศทาง, ระดับ, เวลา, ความถี่, ความชอบ}

การวางแผนเส้นทาง: [

{

ชื่อเฟส

หมายเลขเฟส

ระยะเวลาโดยประมาณ (สัปดาห์)

คำอธิบายวัตถุประสงค์หลัก

รายการแหล่งข้อมูล: [{ชื่อ, ประเภท (วิดีโอ/หนังสือ/โปรเจ็กต์), แพลตฟอร์ม, ลิงก์, เวลาเรียนโดยประมาณ}]

เหตุการณ์สำคัญ: {คำอธิบาย, วิธีการตรวจสอบ}

}

]

คำแนะนำรายสัปดาห์: {ตารางเรียนวันธรรมดา, ตารางเรียนวันหยุดสุดสัปดาห์, จำนวนชั่วโมงเรียนรวมต่อสัปดาห์}

```

ขั้นตอนที่ 3: สร้างเว็บไซต์การเรียนรู้แบบโต้ตอบสไตล์ Kami

ใช้เครื่องมือ generateWebpage เพื่อสร้างเว็บไซต์เส้นทางการเรียนรู้แบบโต้ตอบ

พารามิเตอร์คำสั่งประกอบด้วยข้อกำหนดที่สมบูรณ์ดังต่อไปนี้ รวมทั้งข้อมูลเส้นทางการเรียนรู้เฉพาะที่สร้างขึ้นในขั้นตอนที่ 2:

### ข้อกำหนดของระบบการออกแบบ (ระบบการออกแบบ Kami ที่ปรับใช้สำหรับสถานการณ์การเรียนรู้):

**โทนสี:**

- พื้นหลังหน้าเว็บ: #f5f4ed (สีเบจโทนอบอุ่นแบบกระดาษปาร์ชเมนต์)

- พื้นหลังการ์ด: #FAF9F5 (สีงาช้าง)

- สีเน้น/สีแบรนด์: #1B365D (สีน้ำเงินเข้ม)

- สีตัวอักษร: #141413 (สีดำสนิท)

- สีข้อความย่อย: #4D4C48 (สีเทาเข้ม)

- หมายเหตุ สี: #87867F (สีหิน)

- สีขอบ: #D6D5CE (ขอบสีเทาโทนอบอุ่น)

- แถบแสดงความคืบหน้าเสร็จสมบูรณ์: #1B365D (สีประจำแบรนด์)

- แถบแสดงความคืบหน้ายังไม่เสร็จสมบูรณ์: #E8E7E2

- สถานะความสำเร็จ/เสร็จสมบูรณ์: #2D5016 (สีเขียวมะกอกเข้ม)

- กำลังดำเนินการ: #1B365D (สีประจำแบรนด์)

- ยังไม่เริ่ม: #87867F (หิน)

- พื้นหลังแท็ก: #E4ECF5

- สีเทาทุกเฉดต้องเป็นโทนอบอุ่น (R≈G>B) ห้ามใช้สีเทาอมฟ้าโทนเย็น

**ระบบฟอนต์:**

- โหลดฟอนต์ Noto Serif SC และ Noto Sans SC ผ่าน Google Fonts

- ชื่อเรื่อง: ตระกูลฟอนต์: 'Noto Serif SC', Charter, Georgia, serif; น้ำหนักฟอนต์: 500

- ข้อความ: แบบอักษร: 'Noto Sans SC', 'PingFang SC', sans-serif; น้ำหนักตัวอักษร: 400

- ข้อมูล/การเน้นตัวเลข: แบบอักษร: Charter, Georgia, serif

- ปิดใช้งาน font-weight: 700/bold

**การจัดพิมพ์:**

- ระยะห่างระหว่างบรรทัด: หัวข้อ 1.2 / เนื้อหา 1.5

- ระยะห่างระหว่างตัวอักษรจีน: 0.3pt

- ความกว้างสูงสุดของหน้าเว็บ: 800 พิกเซล จัดกึ่งกลาง

- ตอบสนองต่อทุกขนาดหน้าจอ และใช้งานง่ายบนมือถือ

**กฎเกณฑ์ด้านภาพ:**

- เงา: ring shadow (0 0 0 1px rgba(0,0,0,0.05)) หรือ whisper shadow (0 1px 3px rgba(0,0,0,0.04))

- มุมโค้งมน: 8 พิกเซล (ค่าเริ่มต้น) / 12 พิกเซล (การ์ดขนาดใหญ่)

- เส้นคั่น: เส้นทึบ 0.5 พิกเซล #D6D5CE หรือ เส้นทึบ 2.5 พิกเซล #1B365D (เส้นแนวตั้งของแบรนด์)

- วิธีเน้น: ตัวอักษรสีน้ำเงินหรือเส้นแบรนด์แนวตั้งทางด้านซ้าย

### ข้อกำหนดโครงสร้างหน้าเว็บ:

**1. พื้นที่ฮีโร่ระดับสูงสุด:**

- หัวข้อวัตถุประสงค์การเรียนรู้ (แบบอักษรมีเชิง 28 พิกเซล)

- แท็กข้อมูลสำคัญในบรรทัดเดียว: ประเภทเป้าหมาย | ระยะเวลาโดยประมาณ | เวลาต่อวัน

- แถบแสดงความคืบหน้าโดยรวม (พร้อมตัวเลขเปอร์เซ็นต์)

- แถวในบัตรสถิติ: ทรัพยากรทั้งหมด / เสร็จสมบูรณ์ / ขั้นตอนปัจจุบัน

**2. พื้นที่สำหรับการ์ดบนเวที (ส่วนหลัก):**

- การ์ดขนาดใหญ่ 1 ใบสำหรับแต่ละขั้นตอน

- ส่วนหัวของการ์ด: หมายเลขขั้นตอน + ชื่อ + สถานะ (✅ เสร็จสมบูรณ์ / 🔄 กำลังดำเนินการ / ⬜ ยังไม่เริ่ม) + ระยะเวลาโดยประมาณ

- เนื้อหาในบัตร:

- คำอธิบายวัตถุประสงค์หลัก (1-2 ประโยค)

- รายการแหล่งข้อมูล: แหล่งข้อมูลแต่ละรายการจะแสดงอยู่ในบรรทัดแยกกัน โดยประกอบด้วยไอคอน (📚หนังสือ/🎬วิดีโอ/💻โครงการ/👥ชุมชน) + ชื่อ (ลิงก์ที่คลิกได้) + แท็กแพลตฟอร์ม + ช่องทำเครื่องหมาย

- พื้นที่สำคัญ: เน้นด้วยเส้นแนวตั้งของแบรนด์และรูปแบบพิเศษเพื่ออธิบายถึงความสำเร็จตามมาตรฐาน

- สามารถพับ/กางการ์ดได้ (ค่าเริ่มต้นคือกางออกสำหรับขั้นตอนปัจจุบัน และพับสำหรับขั้นตอนที่เสร็จสมบูรณ์แล้ว)

**3. พื้นที่สำหรับเสนอแนะการเรียนรู้ประจำสัปดาห์:**

- คำแนะนำที่กระชับเกี่ยวกับการจัดสรรเวลา

- ตารางเวลาวันธรรมดาเทียบกับตารางเวลาวันหยุดสุดสัปดาห์

**4. ด้านล่าง:**

- ข้อความสั้นๆ: ขับเคลื่อนโดย Learning Path Planning Master · ออกแบบด้วย Kami Design System

### ข้อกำหนดด้านฟังก์ชันการทำงานแบบโต้ตอบ (JavaScript ฝั่ง Front-End ล้วนๆ + localStorage):

1. **การสลับสถานะของช่องทำเครื่องหมาย**:

- คลิกช่องทำเครื่องหมายหน้าทรัพยากรเพื่อสลับสถานะการเสร็จสิ้น

- บันทึกสถานะลงใน localStorage (คีย์ใช้ทิศทางการเรียนรู้ + แฮชชื่อทรัพยากร)

- ทรัพยากรที่เสร็จสมบูรณ์แล้วจะแสดงขีดฆ่าและลดความโปร่งใสลง

2. **การคำนวณความคืบหน้าอัตโนมัติ:**

- ความคืบหน้าโดยรวม = (จำนวนทรัพยากรที่เลือก / จำนวนทรัพยากรทั้งหมด) × 100%

- ความคืบหน้าของขั้นตอน = จำนวนขั้นตอนที่เลือก / จำนวนขั้นตอนทั้งหมด

- การเปลี่ยนภาพเคลื่อนไหวของแถบแสดงความคืบหน้า (transition: width 0.3s ease)

3. **การอัปเดตสถานะเวทีอัตโนมัติ**:

- เลือกทรัพยากรทั้งหมดภายในขั้นตอน → สถานะจะเปลี่ยนเป็น ✅ เสร็จสมบูรณ์ และยุบโดยอัตโนมัติ

- หากมีการเลือกรายการใดๆ ในระหว่างขั้นตอนนี้ สถานะจะเปลี่ยนเป็น 🔄กำลังดำเนินการ

- ไม่มีเครื่องหมายถูก → ⬜ ยังไม่เริ่ม

4. **พับ/กาง**:

- การคลิกที่ส่วนหัวของการ์ดจะทำให้การ์ดพับ/ขยายออก

- พร้อมแอนิเมชั่นที่ลื่นไหล

5. **หน้าต่างป๊อปอัพตรวจสอบความคืบหน้า**:

- เมื่อทรัพยากรทั้งหมดสำหรับแต่ละเฟสเสร็จสมบูรณ์แล้ว จะมีข้อความแจ้งเตือนให้ตรวจสอบความคืบหน้าปรากฏขึ้น

- แสดงมาตรฐานความคืบหน้าสำคัญสำหรับขั้นตอนนี้

ผู้ใช้สามารถคลิก "สำเร็จ" เพื่อยืนยัน หรือทำเครื่องหมาย "ต้องดำเนินการเพิ่มเติม" เพื่อระบุว่าเสร็จสมบูรณ์แล้ว

6. **การคงอยู่ของข้อมูล**:

- สถานะทั้งหมดจะถูกจัดเก็บไว้ใน localStorage

- คืนค่าสถานะหลังจากรีเฟรชหน้าเว็บ

- มีปุ่ม "รีเซ็ตความคืบหน้า" (ต้องยืนยันอีกครั้ง)

### กรอกเนื้อหา:

กรอกข้อมูลเส้นทางการเรียนรู้ทั้งหมดที่วางแผนไว้ในขั้นตอนที่ 2 ลงในโครงสร้างด้านบน ตรวจสอบให้แน่ใจว่า:

- ลิงก์ของแต่ละแหล่งข้อมูลเป็น URL ที่ใช้งานได้จริงและสามารถเข้าถึงได้

- ไอคอนประเภททรัพยากรตรงกันอย่างถูกต้อง

- ระยะเวลาของแต่ละช่วงสอดคล้องกับตรรกะของวัฏจักรโดยรวม

- คำอธิบายของเหตุการณ์สำคัญมีความเฉพาะเจาะจงและตรวจสอบได้

### ข้อกำหนดทางเทคนิค:

- HTML + CSS + JavaScript ล้วนๆ ไฟล์เดียว

- ไม่มีการพึ่งพาโปรแกรมภายนอกใดๆ (ยกเว้น Google Fonts)

- รองรับการแสดงผลบนมือถือ

- เหมาะสำหรับการพิมพ์

- โค้ดที่สะอาดตาพร้อมคำอธิบาย