add screen_list

docs/screen_list/screen_list_Instructor.md

@@ -0,0 +1,734 @@
+# 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