# Screen List สำหรับผู้สอน (Instructor)

เอกสารนี้รวบรวมรายการหน้าจอทั้งหมดสำหรับผู้สอน (Instructor) ในระบบ E-Learning

---

## 📋 สารบัญ

1. [ระบบยืนยันตัวตน (Authentication)](#1-ระบบยืนยันตัวตน-authentication)
2. [Dashboard ผู้สอน](#2-dashboard-ผู้สอน)
3. [ระบบจัดการโปรไฟล์](#3-ระบบจัดการโปรไฟล์)
4. [ระบบจัดการหลักสูตร](#4-ระบบจัดการหลักสูตร)
5. [ระบบจัดการบทเรียน](#5-ระบบจัดการบทเรียน)
6. [ระบบจัดการเนื้อหา](#6-ระบบจัดการเนื้อหา)
7. [ระบบจัดการแบบทดสอบ](#7-ระบบจัดการแบบทดสอบ)
8. [ระบบรายงานและสถิติ](#8-ระบบรายงานและสถิติ)
9. [ระบบประกาศ](#9-ระบบประกาศ)

---

## 1. ระบบยืนยันตัวตน (Authentication)

### 1.1 หน้าเข้าสู่ระบบ (Login Page)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | AUTH-001 |
| **Screen Name** | Login |
| **URL** | `/login` |
| **วัตถุประสงค์** | หน้าสำหรับผู้สอนเข้าสู่ระบบด้วยอีเมลและรหัสผ่าน |

**องค์ประกอบหน้าจอ:**
- ช่องกรอกอีเมล
- ช่องกรอกรหัสผ่าน
- ปุ่ม "เข้าสู่ระบบ"
- Checkbox "จดจำการเข้าสู่ระบบ"
- ลิงก์ "ลืมรหัสผ่าน?"
- ลิงก์ "สมัครสมาชิก"

**ฟังก์ชันการทำงาน:**
- ตรวจสอบข้อมูลอีเมลและรหัสผ่าน
- แสดงข้อความ error หากข้อมูลไม่ถูกต้อง
- Redirect ไปยัง Dashboard หลังเข้าสู่ระบบสำเร็จ

---

### 1.2 หน้าลืมรหัสผ่าน (Forgot Password)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | AUTH-002 |
| **Screen Name** | Forgot Password |
| **URL** | `/forgot-password` |
| **วัตถุประสงค์** | หน้าสำหรับขอรีเซ็ตรหัสผ่านผ่านอีเมล |

**องค์ประกอบหน้าจอ:**
- ช่องกรอกอีเมล
- ปุ่ม "ส่งลิงก์รีเซ็ตรหัสผ่าน"
- ลิงก์ "กลับไปหน้าเข้าสู่ระบบ"

**ฟังก์ชันการทำงาน:**
- ส่งอีเมลพร้อมลิงก์สำหรับรีเซ็ตรหัสผ่าน
- แสดงข้อความยืนยันการส่งอีเมลสำเร็จ

---

### 1.3 หน้ารีเซ็ตรหัสผ่าน (Reset Password)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | AUTH-003 |
| **Screen Name** | Reset Password |
| **URL** | `/reset-password/:token` |
| **วัตถุประสงค์** | หน้าสำหรับตั้งรหัสผ่านใหม่ |

**องค์ประกอบหน้าจอ:**
- ช่องกรอกรหัสผ่านใหม่
- ช่องยืนยันรหัสผ่านใหม่
- ตัวบอกความแข็งแรงของรหัสผ่าน
- ปุ่ม "บันทึกรหัสผ่านใหม่"

**ฟังก์ชันการทำงาน:**
- ตรวจสอบความถูกต้องของ Token
- บันทึกรหัสผ่านใหม่
- Redirect ไปหน้า Login

---

## 2. Dashboard ผู้สอน

### 2.1 หน้า Dashboard หลัก (Instructor Dashboard)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | DASH-001 |
| **Screen Name** | Instructor Dashboard |
| **URL** | `/instructor/dashboard` |
| **วัตถุประสงค์** | หน้าแรกหลังเข้าสู่ระบบ แสดงภาพรวมข้อมูลผู้สอน |

**องค์ประกอบหน้าจอ:**
- การ์ดสรุปข้อมูล (Summary Cards)
  - จำนวนหลักสูตรทั้งหมด
  - จำนวนผู้เรียนทั้งหมด
  - จำนวนแบบทดสอบ
  - อัตราความสำเร็จของผู้เรียน
- กราฟแสดงสถิติผู้เรียนในช่วงเวลา
- รายการหลักสูตรล่าสุด
- รายการกิจกรรมล่าสุด
- รายการประกาศล่าสุด
- เมนูทางลัด (Quick Actions)
  - สร้างหลักสูตรใหม่
  - สร้างแบบทดสอบใหม่
  - ดูรายงาน

**ฟังก์ชันการทำงาน:**
- ดึงข้อมูลสถิติของผู้สอน
- แสดงกราฟแบบ Real-time
- คลิกเพื่อเข้าสู่หน้าต่างๆ ได้

---

## 3. ระบบจัดการโปรไฟล์

### 3.1 หน้าดูโปรไฟล์ (View Profile)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | PROF-001 |
| **Screen Name** | View Profile |
| **URL** | `/instructor/profile` |
| **วัตถุประสงค์** | หน้าแสดงข้อมูลโปรไฟล์ผู้สอน |

**องค์ประกอบหน้าจอ:**
- รูปโปรไฟล์
- ชื่อ-นามสกุล
- อีเมล
- เบอร์โทรศัพท์
- ตำแหน่ง/ความเชี่ยวชาญ
- ประวัติย่อ
- ปุ่ม "แก้ไขโปรไฟล์"

---

### 3.2 หน้าแก้ไขโปรไฟล์ (Edit Profile)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | PROF-002 |
| **Screen Name** | Edit Profile |
| **URL** | `/instructor/profile/edit` |
| **วัตถุประสงค์** | หน้าสำหรับแก้ไขข้อมูลส่วนตัว |

**องค์ประกอบหน้าจอ:**
- อัปโหลดรูปโปรไฟล์
- ช่องกรอกชื่อ-นามสกุล
- ช่องกรอกเบอร์โทรศัพท์
- ช่องกรอกตำแหน่ง/ความเชี่ยวชาญ
- ช่องกรอกประวัติย่อ (Rich Text Editor)
- ปุ่ม "บันทึก"
- ปุ่ม "ยกเลิก"

**ฟังก์ชันการทำงาน:**
- Validate ข้อมูล
- อัปโหลดรูปภาพ
- บันทึกข้อมูลโปรไฟล์

---

### 3.3 หน้าเปลี่ยนรหัสผ่าน (Change Password)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | PROF-003 |
| **Screen Name** | Change Password |
| **URL** | `/instructor/profile/change-password` |
| **วัตถุประสงค์** | หน้าสำหรับเปลี่ยนรหัสผ่าน |

**องค์ประกอบหน้าจอ:**
- ช่องกรอกรหัสผ่านปัจจุบัน
- ช่องกรอกรหัสผ่านใหม่
- ช่องยืนยันรหัสผ่านใหม่
- ตัวบอกความแข็งแรงของรหัสผ่าน
- ปุ่ม "เปลี่ยนรหัสผ่าน"

**ฟังก์ชันการทำงาน:**
- ตรวจสอบรหัสผ่านปัจจุบัน
- Validate รหัสผ่านใหม่
- บันทึกรหัสผ่านใหม่

---

## 4. ระบบจัดการหลักสูตร

### 4.1 หน้ารายการหลักสูตร (Course List)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | CRS-001 |
| **Screen Name** | Course List |
| **URL** | `/instructor/courses` |
| **วัตถุประสงค์** | หน้าแสดงรายการหลักสูตรทั้งหมดของผู้สอน |

**องค์ประกอบหน้าจอ:**
- ช่องค้นหาหลักสูตร
- ตัวกรอง (Filter)
  - สถานะหลักสูตร (เผยแพร่/ซ่อน/ฉบับร่าง)
  - หมวดหมู่
- ปุ่ม "สร้างหลักสูตรใหม่"
- ตารางรายการหลักสูตร
  - รูปปก
  - ชื่อหลักสูตร
  - หมวดหมู่
  - จำนวนผู้เรียน
  - สถานะ
  - วันที่สร้าง
  - Actions (ดู, แก้ไข, ลบ)
- Pagination

**ฟังก์ชันการทำงาน:**
- ค้นหาหลักสูตร
- กรองตามเงื่อนไข
- เรียงลำดับ
- ลบหลักสูตร (พร้อม Confirmation Dialog)

---

### 4.2 หน้าสร้างหลักสูตร (Create Course)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | CRS-002 |
| **Screen Name** | Create Course |
| **URL** | `/instructor/courses/create` |
| **วัตถุประสงค์** | หน้าสำหรับสร้างหลักสูตรใหม่ |

**องค์ประกอบหน้าจอ:**
- Stepper/Tabs แสดงขั้นตอน
- **ขั้นตอนที่ 1: ข้อมูลพื้นฐาน**
  - ช่องกรอกชื่อหลักสูตร
  - ช่องกรอกคำอธิบายสั้น
  - Rich Text Editor สำหรับคำอธิบายเต็ม
  - อัปโหลดรูปปกหลักสูตร
  - Dropdown เลือกหมวดหมู่
  - ช่องกรอก Tags
- **ขั้นตอนที่ 2: การตั้งค่า**
  - วันที่เริ่มต้น-สิ้นสุด
  - สถานะหลักสูตร (ฉบับร่าง/เผยแพร่)
  - การตั้งค่าการเข้าถึง (สาธารณะ/จำกัด)
- ปุ่ม "บันทึกเป็นฉบับร่าง"
- ปุ่ม "เผยแพร่"
- ปุ่ม "ยกเลิก"

**ฟังก์ชันการทำงาน:**
- Validate ข้อมูล
- อัปโหลดรูปปก
- บันทึกหลักสูตร
- Auto-save ฉบับร่าง

---

### 4.3 หน้าแก้ไขหลักสูตร (Edit Course)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | CRS-003 |
| **Screen Name** | Edit Course |
| **URL** | `/instructor/courses/:id/edit` |
| **วัตถุประสงค์** | หน้าสำหรับแก้ไขข้อมูลหลักสูตร |

**องค์ประกอบหน้าจอ:**
- (เหมือนหน้าสร้างหลักสูตร แต่แสดงข้อมูลเดิม)
- ปุ่ม "บันทึก"
- ปุ่ม "ยกเลิก"

---

### 4.4 หน้าดูรายละเอียดหลักสูตร (Course Detail)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | CRS-004 |
| **Screen Name** | Course Detail |
| **URL** | `/instructor/courses/:id` |
| **วัตถุประสงค์** | หน้าแสดงรายละเอียดหลักสูตรและโครงสร้างบทเรียน |

**องค์ประกอบหน้าจอ:**
- Header ข้อมูลหลักสูตร
  - รูปปก
  - ชื่อหลักสูตร
  - หมวดหมู่
  - สถานะ
  - จำนวนผู้เรียน
  - ปุ่ม "แก้ไข"
- Tabs
  - **Tab โครงสร้างบทเรียน** - แสดง Chapters และ Lessons
  - **Tab ผู้เรียน** - รายการผู้เรียนในหลักสูตร
  - **Tab สถิติ** - กราฟและข้อมูลสถิติ
  - **Tab ประกาศ** - รายการประกาศในหลักสูตร
- ปุ่ม "เพิ่ม Chapter"

---

## 5. ระบบจัดการบทเรียน

### 5.1 หน้าจัดการโครงสร้างบทเรียน (Manage Course Structure)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | LES-001 |
| **Screen Name** | Manage Course Structure |
| **URL** | `/instructor/courses/:id/structure` |
| **วัตถุประสงค์** | หน้าสำหรับจัดโครงสร้าง Chapters และ Lessons |

**องค์ประกอบหน้าจอ:**
- รายการ Chapter (Drag & Drop เพื่อจัดเรียง)
  - ชื่อ Chapter
  - จำนวน Lessons
  - ปุ่ม เพิ่ม/แก้ไข/ลบ
- รายการ Lesson ในแต่ละ Chapter (Drag & Drop)
  - ชื่อ Lesson
  - ประเภทเนื้อหา (วิดีโอ/PDF/ข้อความ/แบบทดสอบ)
  - สถานะ
  - ระยะเวลา
  - ปุ่ม เพิ่ม/แก้ไข/ลบ
- ปุ่ม "เพิ่ม Chapter"
- ปุ่ม "บันทึกลำดับ"

**ฟังก์ชันการทำงาน:**
- Drag & Drop เพื่อจัดเรียงลำดับ
- CRUD Chapter/Lesson
- กำหนดเงื่อนไขการเข้าถึง

---

### 5.2 Modal เพิ่ม/แก้ไข Chapter
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | LES-002 |
| **Screen Name** | Chapter Modal |
| **URL** | Modal (ไม่มี URL) |
| **วัตถุประสงค์** | Modal สำหรับเพิ่มหรือแก้ไข Chapter |

**องค์ประกอบหน้าจอ:**
- ช่องกรอกชื่อ Chapter
- ช่องกรอกคำอธิบาย
- ปุ่ม "บันทึก"
- ปุ่ม "ยกเลิก"

---

### 5.3 หน้าสร้าง/แก้ไข Lesson (Lesson Editor)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | LES-003 |
| **Screen Name** | Lesson Editor |
| **URL** | `/instructor/courses/:courseId/lessons/:lessonId/edit` |
| **วัตถุประสงค์** | หน้าสำหรับสร้างหรือแก้ไข Lesson |

**องค์ประกอบหน้าจอ:**
- ช่องกรอกชื่อ Lesson
- ช่องกรอกคำอธิบาย
- Dropdown เลือกประเภทเนื้อหา
- ส่วนเพิ่มเนื้อหา (ตามประเภท)
- การตั้งค่า Lesson
  - ระยะเวลาโดยประมาณ
  - เงื่อนไขการเข้าถึง (ต้องเรียน Lesson ก่อนหน้า)
  - เป็น Preview ได้หรือไม่
- ปุ่ม "บันทึก"
- ปุ่ม "ยกเลิก"

---

## 6. ระบบจัดการเนื้อหา

### 6.1 หน้าอัปโหลดวิดีโอ (Video Upload)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | CNT-001 |
| **Screen Name** | Video Upload |
| **URL** | ส่วนหนึ่งของ Lesson Editor |
| **วัตถุประสงค์** | ส่วนสำหรับอัปโหลดและจัดการวิดีโอ |

**องค์ประกอบหน้าจอ:**
- พื้นที่ Drag & Drop อัปโหลดไฟล์
- แถบแสดงความคืบหน้าการอัปโหลด
- Preview วิดีโอ
- ข้อมูลวิดีโอ (ขนาดไฟล์, ระยะเวลา)
- ปุ่ม "เปลี่ยนวิดีโอ"
- ปุ่ม "ลบวิดีโอ"

**ฟังก์ชันการทำงาน:**
- รองรับไฟล์ MP4
- แสดง Progress Upload
- Validate ขนาดไฟล์

---

### 6.2 หน้าอัปโหลดเอกสาร PDF (PDF Upload)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | CNT-002 |
| **Screen Name** | PDF Upload |
| **URL** | ส่วนหนึ่งของ Lesson Editor |
| **วัตถุประสงค์** | ส่วนสำหรับอัปโหลดเอกสาร PDF |

**องค์ประกอบหน้าจอ:**
- พื้นที่ Drag & Drop อัปโหลดไฟล์
- แถบแสดงความคืบหน้าการอัปโหลด
- Preview PDF (embedded viewer)
- ข้อมูลไฟล์ (ขนาดไฟล์, จำนวนหน้า)
- ปุ่ม "เปลี่ยนไฟล์"
- ปุ่ม "ลบไฟล์"

---

### 6.3 หน้าแก้ไขเนื้อหาข้อความ (Rich Text Editor)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | CNT-003 |
| **Screen Name** | Rich Text Content |
| **URL** | ส่วนหนึ่งของ Lesson Editor |
| **วัตถุประสงค์** | ส่วนสำหรับเพิ่มเนื้อหาข้อความ |

**องค์ประกอบหน้าจอ:**
- Rich Text Editor พร้อมเครื่องมือ
  - จัดรูปแบบตัวอักษร (Bold, Italic, Underline)
  - หัวข้อ (Heading)
  - รายการ (Bullet, Numbered)
  - แทรกรูปภาพ
  - แทรกลิงก์
  - แทรกตาราง
  - แทรกโค้ด

---

### 6.4 หน้าจัดการไฟล์ประกอบ (Attachments)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | CNT-004 |
| **Screen Name** | Attachments Manager |
| **URL** | ส่วนหนึ่งของ Lesson Editor |
| **วัตถุประสงค์** | ส่วนสำหรับแนบไฟล์ประกอบการเรียน |

**องค์ประกอบหน้าจอ:**
- รายการไฟล์ที่แนบ
  - ชื่อไฟล์
  - ขนาดไฟล์
  - ประเภทไฟล์
  - ปุ่มลบ
- พื้นที่ Drag & Drop อัปโหลดไฟล์ใหม่
- ปุ่ม "เพิ่มไฟล์"

---

## 7. ระบบจัดการแบบทดสอบ

### 7.1 หน้ารายการแบบทดสอบ (Quiz List)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | QZ-001 |
| **Screen Name** | Quiz List |
| **URL** | `/instructor/courses/:id/quizzes` |
| **วัตถุประสงค์** | หน้าแสดงรายการแบบทดสอบทั้งหมดในหลักสูตร |

**องค์ประกอบหน้าจอ:**
- ช่องค้นหา
- ตารางรายการแบบทดสอบ
  - ชื่อแบบทดสอบ
  - จำนวนคำถาม
  - เวลาในการทำ
  - คะแนนเต็ม
  - เกณฑ์ผ่าน
  - สถานะ
  - Actions (ดู, แก้ไข, ลบ, ดูผลสอบ)
- ปุ่ม "สร้างแบบทดสอบใหม่"

---

### 7.2 หน้าสร้างแบบทดสอบ (Create Quiz)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | QZ-002 |
| **Screen Name** | Create Quiz |
| **URL** | `/instructor/courses/:id/quizzes/create` |
| **วัตถุประสงค์** | หน้าสำหรับสร้างแบบทดสอบใหม่ |

**องค์ประกอบหน้าจอ:**
- **ส่วนข้อมูลพื้นฐาน**
  - ช่องกรอกชื่อแบบทดสอบ
  - ช่องกรอกคำอธิบาย
  - เลือก Lesson ที่จะแนบ
- **ส่วนการตั้งค่า**
  - เวลาในการทำ (นาที)
  - จำนวนครั้งที่ทำได้
  - คะแนนเต็ม
  - เกณฑ์ผ่าน (%)
  - แสดงคำตอบหลังทำเสร็จ
  - สลับลำดับคำถาม
- **ส่วนคำถาม**
  - รายการคำถาม (Drag & Drop)
  - ปุ่ม "เพิ่มคำถาม"
- ปุ่ม "บันทึก"
- ปุ่ม "ยกเลิก"

---

### 7.3 Modal เพิ่ม/แก้ไขคำถาม (Question Modal)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | QZ-003 |
| **Screen Name** | Question Modal |
| **URL** | Modal (ไม่มี URL) |
| **วัตถุประสงค์** | Modal สำหรับเพิ่มหรือแก้ไขคำถาม |

**องค์ประกอบหน้าจอ:**
- Dropdown เลือกประเภทคำถาม (ปรนัย/ถูก-ผิด)
- ช่องกรอกคำถาม (รองรับ Rich Text)
- อัปโหลดรูปภาพประกอบ (ถ้ามี)
- **สำหรับคำถามปรนัย:**
  - รายการตัวเลือก
  - Radio เลือกคำตอบที่ถูกต้อง
  - ปุ่มเพิ่ม/ลบตัวเลือก
- **สำหรับคำถามถูก-ผิด:**
  - Radio เลือก ถูก/ผิด
- ช่องกรอกคะแนน
- ช่องกรอกคำอธิบายเฉลย
- ปุ่ม "บันทึก"
- ปุ่ม "ยกเลิก"

---

### 7.4 หน้าแก้ไขแบบทดสอบ (Edit Quiz)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | QZ-004 |
| **Screen Name** | Edit Quiz |
| **URL** | `/instructor/courses/:courseId/quizzes/:quizId/edit` |
| **วัตถุประสงค์** | หน้าสำหรับแก้ไขแบบทดสอบ |

**องค์ประกอบหน้าจอ:**
- (เหมือนหน้าสร้างแบบทดสอบ แต่แสดงข้อมูลเดิม)

---

### 7.5 หน้าดูผลการทดสอบ (Quiz Results)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | QZ-005 |
| **Screen Name** | Quiz Results |
| **URL** | `/instructor/courses/:courseId/quizzes/:quizId/results` |
| **วัตถุประสงค์** | หน้าแสดงผลการทดสอบของผู้เรียนทั้งหมด |

**องค์ประกอบหน้าจอ:**
- สถิติภาพรวม
  - จำนวนผู้ทำทั้งหมด
  - คะแนนเฉลี่ย
  - อัตราผ่าน
  - คะแนนสูงสุด/ต่ำสุด
- กราฟกระจายคะแนน
- ตารางผลการทดสอบรายบุคคล
  - ชื่อผู้เรียน
  - คะแนน
  - สถานะ (ผ่าน/ไม่ผ่าน)
  - เวลาที่ใช้
  - จำนวนครั้งที่ทำ
  - วันที่ทำ
  - ปุ่ม "ดูรายละเอียด"
- ปุ่ม "ส่งออก Excel"

---

### 7.6 หน้าดูคำตอบรายบุคคล (Individual Result)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | QZ-006 |
| **Screen Name** | Individual Quiz Result |
| **URL** | `/instructor/quizzes/:quizId/results/:userId` |
| **วัตถุประสงค์** | หน้าแสดงคำตอบของผู้เรียนแต่ละคน |

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

---

## 8. ระบบรายงานและสถิติ

### 8.1 หน้ารายงานผู้เรียนในหลักสูตร (Course Learner Report)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | RPT-001 |
| **Screen Name** | Course Learner Report |
| **URL** | `/instructor/courses/:id/reports/learners` |
| **วัตถุประสงค์** | หน้าแสดงรายงานผู้เรียนในหลักสูตร |

**องค์ประกอบหน้าจอ:**
- สรุปภาพรวม
  - จำนวนผู้เรียนทั้งหมด
  - จำนวนผู้จบหลักสูตร
  - อัตราความสำเร็จ
  - เวลาเรียนเฉลี่ย
- กราฟความคืบหน้า
- ตารางผู้เรียน
  - ชื่อผู้เรียน
  - อีเมล
  - วันที่ลงทะเบียน
  - ความคืบหน้า (%)
  - Lesson ปัจจุบัน
  - คะแนนแบบทดสอบรวม
  - สถานะ (กำลังเรียน/จบแล้ว)
  - ปุ่ม "ดูรายละเอียด"
- ตัวกรอง
  - สถานะ
  - ช่วงวันที่ลงทะเบียน
- ปุ่ม "ส่งออก Excel"
- ปุ่ม "ส่งออก PDF"

---

### 8.2 หน้ารายงานความคืบหน้ารายบุคคล (Individual Progress Report)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | RPT-002 |
| **Screen Name** | Individual Progress Report |
| **URL** | `/instructor/courses/:courseId/reports/learners/:userId` |
| **วัตถุประสงค์** | หน้าแสดงความคืบหน้าการเรียนของผู้เรียนแต่ละคน |

**องค์ประกอบหน้าจอ:**
- ข้อมูลผู้เรียน
  - รูปโปรไฟล์
  - ชื่อ-นามสกุล
  - อีเมล
  - วันที่ลงทะเบียน
- สรุปความคืบหน้า
  - เปอร์เซ็นต์ความสำเร็จ
  - เวลาเรียนรวม
  - คะแนนรวม
- รายละเอียดการเรียนตาม Chapter/Lesson
  - สถานะแต่ละ Lesson (ยังไม่เริ่ม/กำลังเรียน/เสร็จสิ้น)
  - คะแนนแบบทดสอบ
  - เวลาที่ใช้
- ปุ่ม "ดาวน์โหลดรายงาน"

---

### 8.3 หน้ารายงานคะแนนแบบทดสอบ (Quiz Score Report)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | RPT-003 |
| **Screen Name** | Quiz Score Report |
| **URL** | `/instructor/courses/:id/reports/quiz-scores` |
| **วัตถุประสงค์** | หน้าแสดงรายงานคะแนนแบบทดสอบ |

**องค์ประกอบหน้าจอ:**
- Dropdown เลือกแบบทดสอบ
- สถิติภาพรวม
- กราฟเปรียบเทียบ
- ตารางคะแนน
- ปุ่ม "ส่งออก"

---

## 9. ระบบประกาศ

### 9.1 หน้ารายการประกาศ (Announcement List)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | ANN-001 |
| **Screen Name** | Announcement List |
| **URL** | `/instructor/courses/:id/announcements` |
| **วัตถุประสงค์** | หน้าแสดงรายการประกาศในหลักสูตร |

**องค์ประกอบหน้าจอ:**
- ปุ่ม "สร้างประกาศใหม่"
- รายการประกาศ
  - หัวข้อ
  - เนื้อหาย่อ
  - วันที่โพสต์
  - สถานะ (เผยแพร่/ซ่อน)
  - ปุ่ม แก้ไข/ลบ
- Pagination

---

### 9.2 หน้าสร้างประกาศ (Create Announcement)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | ANN-002 |
| **Screen Name** | Create Announcement |
| **URL** | `/instructor/courses/:id/announcements/create` |
| **วัตถุประสงค์** | หน้าสำหรับสร้างประกาศใหม่ |

**องค์ประกอบหน้าจอ:**
- ช่องกรอกหัวข้อ
- Rich Text Editor สำหรับเนื้อหา
- อัปโหลดไฟล์แนบ
- สถานะ (เผยแพร่ทันที/ตั้งเวลา/ซ่อน)
- ตั้งเวลาเผยแพร่ (ถ้าเลือกตั้งเวลา)
- ปุ่ม "โพสต์"
- ปุ่ม "บันทึกเป็นฉบับร่าง"
- ปุ่ม "ยกเลิก"

---

### 9.3 หน้าแก้ไขประกาศ (Edit Announcement)
| รายละเอียด | คำอธิบาย |
|------------|----------|
| **Screen ID** | ANN-003 |
| **Screen Name** | Edit Announcement |
| **URL** | `/instructor/courses/:id/announcements/:announcementId/edit` |
| **วัตถุประสงค์** | หน้าสำหรับแก้ไขประกาศ |

**องค์ประกอบหน้าจอ:**
- (เหมือนหน้าสร้างประกาศ แต่แสดงข้อมูลเดิม)

---

## 📊 สรุปจำนวนหน้าจอ

| หมวดหมู่ | จำนวนหน้าจอ |
|----------|-------------|
| ระบบยืนยันตัวตน | 3 |
| Dashboard | 1 |
| ระบบจัดการโปรไฟล์ | 3 |
| ระบบจัดการหลักสูตร | 4 |
| ระบบจัดการบทเรียน | 3 |
| ระบบจัดการเนื้อหา | 4 |
| ระบบจัดการแบบทดสอบ | 6 |
| ระบบรายงานและสถิติ | 3 |
| ระบบประกาศ | 3 |
| **รวมทั้งหมด** | **30** |

---

## 📝 หมายเหตุ

1. **Screen ID** ใช้รูปแบบ `[หมวด]-[ลำดับ]` เพื่อง่ายต่อการอ้างอิง
2. หน้าจอบางส่วนเป็น Modal หรือ Component ย่อยที่ไม่มี URL แยกต่างหาก
3. URL ที่ระบุเป็นตัวอย่างโครงสร้าง สามารถปรับเปลี่ยนได้ตามความเหมาะสม
4. เอกสารนี้ครอบคลุมหน้าจอหลักสำหรับผู้สอน ไม่รวมหน้าจอของ Admin และ Student
