2025-12-22 14:16:35 +07:00
|
|
|
# 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 |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าสำหรับผู้สอนเข้าสู่ระบบด้วยอีเมลและรหัสผ่าน |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- ช่องกรอกอีเมล
|
|
|
|
|
- ช่องกรอกรหัสผ่าน
|
|
|
|
|
- ปุ่ม "เข้าสู่ระบบ"
|
|
|
|
|
- Checkbox "จดจำการเข้าสู่ระบบ"
|
|
|
|
|
- ลิงก์ "ลืมรหัสผ่าน?"
|
|
|
|
|
- ลิงก์ "สมัครสมาชิก"
|
|
|
|
|
|
|
|
|
|
**ฟังก์ชันการทำงาน:**
|
|
|
|
|
- ตรวจสอบข้อมูลอีเมลและรหัสผ่าน
|
|
|
|
|
- แสดงข้อความ error หากข้อมูลไม่ถูกต้อง
|
|
|
|
|
- Redirect ไปยัง Dashboard หลังเข้าสู่ระบบสำเร็จ
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 1.2 หน้าลืมรหัสผ่าน (Forgot Password)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | AUTH-002 |
|
|
|
|
|
| **Screen Name** | Forgot Password |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าสำหรับขอรีเซ็ตรหัสผ่านผ่านอีเมล |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- ช่องกรอกอีเมล
|
|
|
|
|
- ปุ่ม "ส่งลิงก์รีเซ็ตรหัสผ่าน"
|
|
|
|
|
- ลิงก์ "กลับไปหน้าเข้าสู่ระบบ"
|
|
|
|
|
|
|
|
|
|
**ฟังก์ชันการทำงาน:**
|
|
|
|
|
- ส่งอีเมลพร้อมลิงก์สำหรับรีเซ็ตรหัสผ่าน
|
|
|
|
|
- แสดงข้อความยืนยันการส่งอีเมลสำเร็จ
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 1.3 หน้ารีเซ็ตรหัสผ่าน (Reset Password)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | AUTH-003 |
|
|
|
|
|
| **Screen Name** | Reset Password |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าสำหรับตั้งรหัสผ่านใหม่ |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- ช่องกรอกรหัสผ่านใหม่
|
|
|
|
|
- ช่องยืนยันรหัสผ่านใหม่
|
|
|
|
|
- ตัวบอกความแข็งแรงของรหัสผ่าน
|
|
|
|
|
- ปุ่ม "บันทึกรหัสผ่านใหม่"
|
|
|
|
|
|
|
|
|
|
**ฟังก์ชันการทำงาน:**
|
|
|
|
|
- ตรวจสอบความถูกต้องของ Token
|
|
|
|
|
- บันทึกรหัสผ่านใหม่
|
|
|
|
|
- Redirect ไปหน้า Login
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 2. Dashboard ผู้สอน
|
|
|
|
|
|
|
|
|
|
### 2.1 หน้า Dashboard หลัก (Instructor Dashboard)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | DASH-001 |
|
|
|
|
|
| **Screen Name** | Instructor Dashboard |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าแรกหลังเข้าสู่ระบบ แสดงภาพรวมข้อมูลผู้สอน |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- การ์ดสรุปข้อมูล (Summary Cards)
|
|
|
|
|
- จำนวนหลักสูตรทั้งหมด
|
|
|
|
|
- จำนวนผู้เรียนทั้งหมด
|
|
|
|
|
- จำนวนแบบทดสอบ
|
|
|
|
|
- อัตราความสำเร็จของผู้เรียน
|
|
|
|
|
- กราฟแสดงสถิติผู้เรียนในช่วงเวลา
|
|
|
|
|
- รายการหลักสูตรล่าสุด
|
|
|
|
|
- รายการกิจกรรมล่าสุด
|
|
|
|
|
- รายการประกาศล่าสุด
|
|
|
|
|
- เมนูทางลัด (Quick Actions)
|
|
|
|
|
- สร้างหลักสูตรใหม่
|
|
|
|
|
- สร้างแบบทดสอบใหม่
|
|
|
|
|
- ดูรายงาน
|
|
|
|
|
|
|
|
|
|
**ฟังก์ชันการทำงาน:**
|
|
|
|
|
- ดึงข้อมูลสถิติของผู้สอน
|
|
|
|
|
- แสดงกราฟแบบ Real-time
|
|
|
|
|
- คลิกเพื่อเข้าสู่หน้าต่างๆ ได้
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 3. ระบบจัดการโปรไฟล์
|
|
|
|
|
|
|
|
|
|
### 3.1 หน้าดูโปรไฟล์ (View Profile)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | PROF-001 |
|
|
|
|
|
| **Screen Name** | View Profile |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าแสดงข้อมูลโปรไฟล์ผู้สอน |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- รูปโปรไฟล์
|
|
|
|
|
- ชื่อ-นามสกุล
|
|
|
|
|
- อีเมล
|
|
|
|
|
- เบอร์โทรศัพท์
|
|
|
|
|
- ตำแหน่ง/ความเชี่ยวชาญ
|
|
|
|
|
- ประวัติย่อ
|
|
|
|
|
- ปุ่ม "แก้ไขโปรไฟล์"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 3.2 หน้าแก้ไขโปรไฟล์ (Edit Profile)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | PROF-002 |
|
|
|
|
|
| **Screen Name** | Edit Profile |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าสำหรับแก้ไขข้อมูลส่วนตัว |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- อัปโหลดรูปโปรไฟล์
|
|
|
|
|
- ช่องกรอกชื่อ-นามสกุล
|
|
|
|
|
- ช่องกรอกเบอร์โทรศัพท์
|
|
|
|
|
- ช่องกรอกตำแหน่ง/ความเชี่ยวชาญ
|
|
|
|
|
- ช่องกรอกประวัติย่อ (Rich Text Editor)
|
|
|
|
|
- ปุ่ม "บันทึก"
|
|
|
|
|
- ปุ่ม "ยกเลิก"
|
|
|
|
|
|
|
|
|
|
**ฟังก์ชันการทำงาน:**
|
|
|
|
|
- Validate ข้อมูล
|
|
|
|
|
- อัปโหลดรูปภาพ
|
|
|
|
|
- บันทึกข้อมูลโปรไฟล์
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 3.3 หน้าเปลี่ยนรหัสผ่าน (Change Password)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | PROF-003 |
|
|
|
|
|
| **Screen Name** | Change Password |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าสำหรับเปลี่ยนรหัสผ่าน |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- ช่องกรอกรหัสผ่านปัจจุบัน
|
|
|
|
|
- ช่องกรอกรหัสผ่านใหม่
|
|
|
|
|
- ช่องยืนยันรหัสผ่านใหม่
|
|
|
|
|
- ตัวบอกความแข็งแรงของรหัสผ่าน
|
|
|
|
|
- ปุ่ม "เปลี่ยนรหัสผ่าน"
|
|
|
|
|
|
|
|
|
|
**ฟังก์ชันการทำงาน:**
|
|
|
|
|
- ตรวจสอบรหัสผ่านปัจจุบัน
|
|
|
|
|
- Validate รหัสผ่านใหม่
|
|
|
|
|
- บันทึกรหัสผ่านใหม่
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 4. ระบบจัดการหลักสูตร
|
|
|
|
|
|
|
|
|
|
### 4.1 หน้ารายการหลักสูตร (Course List)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | CRS-001 |
|
|
|
|
|
| **Screen Name** | Course List |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าแสดงรายการหลักสูตรทั้งหมดของผู้สอน |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- ช่องค้นหาหลักสูตร
|
|
|
|
|
- ตัวกรอง (Filter)
|
|
|
|
|
- สถานะหลักสูตร (เผยแพร่/ซ่อน/ฉบับร่าง)
|
|
|
|
|
- หมวดหมู่
|
|
|
|
|
- ปุ่ม "สร้างหลักสูตรใหม่"
|
|
|
|
|
- ตารางรายการหลักสูตร
|
|
|
|
|
- รูปปก
|
|
|
|
|
- ชื่อหลักสูตร
|
|
|
|
|
- หมวดหมู่
|
|
|
|
|
- จำนวนผู้เรียน
|
|
|
|
|
- สถานะ
|
|
|
|
|
- วันที่สร้าง
|
|
|
|
|
- Actions (ดู, แก้ไข, ลบ)
|
|
|
|
|
- Pagination
|
|
|
|
|
|
|
|
|
|
**ฟังก์ชันการทำงาน:**
|
|
|
|
|
- ค้นหาหลักสูตร
|
|
|
|
|
- กรองตามเงื่อนไข
|
|
|
|
|
- เรียงลำดับ
|
|
|
|
|
- ลบหลักสูตร (พร้อม Confirmation Dialog)
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 4.2 หน้าสร้างหลักสูตร (Create Course)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | CRS-002 |
|
|
|
|
|
| **Screen Name** | Create Course |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าสำหรับสร้างหลักสูตรใหม่ |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- Stepper/Tabs แสดงขั้นตอน
|
|
|
|
|
- **ขั้นตอนที่ 1: ข้อมูลพื้นฐาน**
|
|
|
|
|
- ช่องกรอกชื่อหลักสูตร
|
|
|
|
|
- ช่องกรอกคำอธิบายสั้น
|
|
|
|
|
- Rich Text Editor สำหรับคำอธิบายเต็ม
|
|
|
|
|
- อัปโหลดรูปปกหลักสูตร
|
|
|
|
|
- Dropdown เลือกหมวดหมู่
|
|
|
|
|
- ช่องกรอก Tags
|
|
|
|
|
- **ขั้นตอนที่ 2: การตั้งค่า**
|
|
|
|
|
- วันที่เริ่มต้น-สิ้นสุด
|
|
|
|
|
- สถานะหลักสูตร (ฉบับร่าง/เผยแพร่)
|
|
|
|
|
- การตั้งค่าการเข้าถึง (สาธารณะ/จำกัด)
|
|
|
|
|
- ปุ่ม "บันทึกเป็นฉบับร่าง"
|
|
|
|
|
- ปุ่ม "เผยแพร่"
|
|
|
|
|
- ปุ่ม "ยกเลิก"
|
|
|
|
|
|
|
|
|
|
**ฟังก์ชันการทำงาน:**
|
|
|
|
|
- Validate ข้อมูล
|
|
|
|
|
- อัปโหลดรูปปก
|
|
|
|
|
- บันทึกหลักสูตร
|
|
|
|
|
- Auto-save ฉบับร่าง
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 4.3 หน้าแก้ไขหลักสูตร (Edit Course)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | CRS-003 |
|
|
|
|
|
| **Screen Name** | Edit Course |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าสำหรับแก้ไขข้อมูลหลักสูตร |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- (เหมือนหน้าสร้างหลักสูตร แต่แสดงข้อมูลเดิม)
|
|
|
|
|
- ปุ่ม "บันทึก"
|
|
|
|
|
- ปุ่ม "ยกเลิก"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 4.4 หน้าดูรายละเอียดหลักสูตร (Course Detail)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | CRS-004 |
|
|
|
|
|
| **Screen Name** | Course Detail |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าแสดงรายละเอียดหลักสูตรและโครงสร้างบทเรียน |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- Header ข้อมูลหลักสูตร
|
|
|
|
|
- รูปปก
|
|
|
|
|
- ชื่อหลักสูตร
|
|
|
|
|
- หมวดหมู่
|
|
|
|
|
- สถานะ
|
|
|
|
|
- จำนวนผู้เรียน
|
|
|
|
|
- ปุ่ม "แก้ไข"
|
|
|
|
|
- Tabs
|
|
|
|
|
- **Tab โครงสร้างบทเรียน** - แสดง Chapters และ Lessons
|
|
|
|
|
- **Tab ผู้เรียน** - รายการผู้เรียนในหลักสูตร
|
|
|
|
|
- **Tab สถิติ** - กราฟและข้อมูลสถิติ
|
|
|
|
|
- **Tab ประกาศ** - รายการประกาศในหลักสูตร
|
|
|
|
|
- ปุ่ม "เพิ่ม Chapter"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 5. ระบบจัดการบทเรียน
|
|
|
|
|
|
|
|
|
|
### 5.1 หน้าจัดการโครงสร้างบทเรียน (Manage Course Structure)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | LES-001 |
|
|
|
|
|
| **Screen Name** | Manage Course 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 |
|
|
|
|
|
| **วัตถุประสงค์** | Modal สำหรับเพิ่มหรือแก้ไข Chapter |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- ช่องกรอกชื่อ Chapter
|
|
|
|
|
- ช่องกรอกคำอธิบาย
|
|
|
|
|
- ปุ่ม "บันทึก"
|
|
|
|
|
- ปุ่ม "ยกเลิก"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 5.3 หน้าสร้าง/แก้ไข Lesson (Lesson Editor)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | LES-003 |
|
|
|
|
|
| **Screen Name** | Lesson Editor |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าสำหรับสร้างหรือแก้ไข Lesson |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- ช่องกรอกชื่อ Lesson
|
|
|
|
|
- ช่องกรอกคำอธิบาย
|
|
|
|
|
- Dropdown เลือกประเภทเนื้อหา
|
|
|
|
|
- ส่วนเพิ่มเนื้อหา (ตามประเภท)
|
|
|
|
|
- การตั้งค่า Lesson
|
|
|
|
|
- ระยะเวลาโดยประมาณ
|
|
|
|
|
- เงื่อนไขการเข้าถึง (ต้องเรียน Lesson ก่อนหน้า)
|
|
|
|
|
- เป็น Preview ได้หรือไม่
|
|
|
|
|
- ปุ่ม "บันทึก"
|
|
|
|
|
- ปุ่ม "ยกเลิก"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 6. ระบบจัดการเนื้อหา
|
|
|
|
|
|
|
|
|
|
### 6.1 หน้าอัปโหลดวิดีโอ (Video Upload)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | CNT-001 |
|
|
|
|
|
| **Screen Name** | Video Upload |
|
|
|
|
|
| **วัตถุประสงค์** | ส่วนสำหรับอัปโหลดและจัดการวิดีโอ |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- พื้นที่ Drag & Drop อัปโหลดไฟล์
|
|
|
|
|
- แถบแสดงความคืบหน้าการอัปโหลด
|
|
|
|
|
- Preview วิดีโอ
|
|
|
|
|
- ข้อมูลวิดีโอ (ขนาดไฟล์, ระยะเวลา)
|
|
|
|
|
- ปุ่ม "เปลี่ยนวิดีโอ"
|
|
|
|
|
- ปุ่ม "ลบวิดีโอ"
|
|
|
|
|
|
|
|
|
|
**ฟังก์ชันการทำงาน:**
|
|
|
|
|
- รองรับไฟล์ MP4
|
|
|
|
|
- แสดง Progress Upload
|
|
|
|
|
- Validate ขนาดไฟล์
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 6.2 หน้าอัปโหลดเอกสาร PDF (PDF Upload)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | CNT-002 |
|
|
|
|
|
| **Screen Name** | PDF Upload |
|
|
|
|
|
| **วัตถุประสงค์** | ส่วนสำหรับอัปโหลดเอกสาร PDF |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- พื้นที่ Drag & Drop อัปโหลดไฟล์
|
|
|
|
|
- แถบแสดงความคืบหน้าการอัปโหลด
|
|
|
|
|
- Preview PDF (embedded viewer)
|
|
|
|
|
- ข้อมูลไฟล์ (ขนาดไฟล์, จำนวนหน้า)
|
|
|
|
|
- ปุ่ม "เปลี่ยนไฟล์"
|
|
|
|
|
- ปุ่ม "ลบไฟล์"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 6.3 หน้าแก้ไขเนื้อหาข้อความ (Rich Text Editor)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | CNT-003 |
|
|
|
|
|
| **Screen Name** | Rich Text Content |
|
|
|
|
|
| **วัตถุประสงค์** | ส่วนสำหรับเพิ่มเนื้อหาข้อความ |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- Rich Text Editor พร้อมเครื่องมือ
|
|
|
|
|
- จัดรูปแบบตัวอักษร (Bold, Italic, Underline)
|
|
|
|
|
- หัวข้อ (Heading)
|
|
|
|
|
- รายการ (Bullet, Numbered)
|
|
|
|
|
- แทรกรูปภาพ
|
|
|
|
|
- แทรกลิงก์
|
|
|
|
|
- แทรกตาราง
|
|
|
|
|
- แทรกโค้ด
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 6.4 หน้าจัดการไฟล์ประกอบ (Attachments)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | CNT-004 |
|
|
|
|
|
| **Screen Name** | Attachments Manager |
|
|
|
|
|
| **วัตถุประสงค์** | ส่วนสำหรับแนบไฟล์ประกอบการเรียน |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- รายการไฟล์ที่แนบ
|
|
|
|
|
- ชื่อไฟล์
|
|
|
|
|
- ขนาดไฟล์
|
|
|
|
|
- ประเภทไฟล์
|
|
|
|
|
- ปุ่มลบ
|
|
|
|
|
- พื้นที่ Drag & Drop อัปโหลดไฟล์ใหม่
|
|
|
|
|
- ปุ่ม "เพิ่มไฟล์"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 7. ระบบจัดการแบบทดสอบ
|
|
|
|
|
|
2025-12-24 17:56:06 +07:00
|
|
|
### 7.1 หน้าสร้างแบบทดสอบ (Create Quiz)
|
2025-12-22 14:16:35 +07:00
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | QZ-001 |
|
|
|
|
|
| **Screen Name** | Create Quiz |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าสำหรับสร้างแบบทดสอบใหม่ |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- **ส่วนข้อมูลพื้นฐาน**
|
|
|
|
|
- ช่องกรอกชื่อแบบทดสอบ
|
|
|
|
|
- ช่องกรอกคำอธิบาย
|
|
|
|
|
- เลือก Lesson ที่จะแนบ
|
|
|
|
|
- **ส่วนการตั้งค่า**
|
|
|
|
|
- เวลาในการทำ (นาที)
|
|
|
|
|
- จำนวนครั้งที่ทำได้
|
|
|
|
|
- คะแนนเต็ม
|
|
|
|
|
- เกณฑ์ผ่าน (%)
|
|
|
|
|
- แสดงคำตอบหลังทำเสร็จ
|
|
|
|
|
- สลับลำดับคำถาม
|
|
|
|
|
- **ส่วนคำถาม**
|
|
|
|
|
- รายการคำถาม (Drag & Drop)
|
|
|
|
|
- ปุ่ม "เพิ่มคำถาม"
|
|
|
|
|
- ปุ่ม "บันทึก"
|
|
|
|
|
- ปุ่ม "ยกเลิก"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2025-12-24 17:56:06 +07:00
|
|
|
### 7.2 Modal เพิ่ม/แก้ไขคำถาม (Question Modal)
|
2025-12-22 14:16:35 +07:00
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
2025-12-24 17:56:06 +07:00
|
|
|
| **Screen ID** | QZ-002 |
|
2025-12-22 14:16:35 +07:00
|
|
|
| **Screen Name** | Question Modal |
|
|
|
|
|
| **วัตถุประสงค์** | Modal สำหรับเพิ่มหรือแก้ไขคำถาม |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- Dropdown เลือกประเภทคำถาม (ปรนัย/ถูก-ผิด)
|
|
|
|
|
- ช่องกรอกคำถาม (รองรับ Rich Text)
|
|
|
|
|
- อัปโหลดรูปภาพประกอบ (ถ้ามี)
|
|
|
|
|
- **สำหรับคำถามปรนัย:**
|
|
|
|
|
- รายการตัวเลือก
|
|
|
|
|
- Radio เลือกคำตอบที่ถูกต้อง
|
|
|
|
|
- ปุ่มเพิ่ม/ลบตัวเลือก
|
|
|
|
|
- **สำหรับคำถามถูก-ผิด:**
|
|
|
|
|
- Radio เลือก ถูก/ผิด
|
|
|
|
|
- ช่องกรอกคะแนน
|
|
|
|
|
- ช่องกรอกคำอธิบายเฉลย
|
|
|
|
|
- ปุ่ม "บันทึก"
|
|
|
|
|
- ปุ่ม "ยกเลิก"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2025-12-24 17:56:06 +07:00
|
|
|
### 7.3 หน้าแก้ไขแบบทดสอบ (Edit Quiz)
|
2025-12-22 14:16:35 +07:00
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
2025-12-24 17:56:06 +07:00
|
|
|
| **Screen ID** | QZ-003 |
|
2025-12-22 14:16:35 +07:00
|
|
|
| **Screen Name** | Edit Quiz |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าสำหรับแก้ไขแบบทดสอบ |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- (เหมือนหน้าสร้างแบบทดสอบ แต่แสดงข้อมูลเดิม)
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2025-12-24 17:56:06 +07:00
|
|
|
### 7.4 หน้าดูผลการทดสอบ (Quiz Results)
|
2025-12-22 14:16:35 +07:00
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
2025-12-24 17:56:06 +07:00
|
|
|
| **Screen ID** | QZ-004 |
|
2025-12-22 14:16:35 +07:00
|
|
|
| **Screen Name** | Quiz Results |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าแสดงผลการทดสอบของผู้เรียนทั้งหมด |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- สถิติภาพรวม
|
|
|
|
|
- จำนวนผู้ทำทั้งหมด
|
|
|
|
|
- คะแนนเฉลี่ย
|
|
|
|
|
- อัตราผ่าน
|
|
|
|
|
- คะแนนสูงสุด/ต่ำสุด
|
|
|
|
|
- กราฟกระจายคะแนน
|
|
|
|
|
- ตารางผลการทดสอบรายบุคคล
|
|
|
|
|
- ชื่อผู้เรียน
|
|
|
|
|
- คะแนน
|
|
|
|
|
- สถานะ (ผ่าน/ไม่ผ่าน)
|
|
|
|
|
- เวลาที่ใช้
|
|
|
|
|
- จำนวนครั้งที่ทำ
|
|
|
|
|
- วันที่ทำ
|
|
|
|
|
- ปุ่ม "ดูรายละเอียด"
|
|
|
|
|
- ปุ่ม "ส่งออก Excel"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2025-12-24 17:56:06 +07:00
|
|
|
### 7.5 หน้าดูคำตอบรายบุคคล (Individual Result)
|
2025-12-22 14:16:35 +07:00
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
2025-12-24 17:56:06 +07:00
|
|
|
| **Screen ID** | QZ-005 |
|
2025-12-22 14:16:35 +07:00
|
|
|
| **Screen Name** | Individual Quiz Result |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าแสดงคำตอบของผู้เรียนแต่ละคน |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- ข้อมูลผู้เรียน
|
|
|
|
|
- สรุปผลการทดสอบ
|
|
|
|
|
- รายการคำถามพร้อมคำตอบ
|
|
|
|
|
- คำถาม
|
|
|
|
|
- คำตอบที่เลือก
|
|
|
|
|
- คำตอบที่ถูกต้อง
|
|
|
|
|
- คะแนนที่ได้
|
|
|
|
|
- สถานะ (ถูก/ผิด)
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 8. ระบบรายงานและสถิติ
|
|
|
|
|
|
|
|
|
|
### 8.1 หน้ารายงานผู้เรียนในหลักสูตร (Course Learner Report)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | RPT-001 |
|
|
|
|
|
| **Screen Name** | Course Learner Report |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าแสดงรายงานผู้เรียนในหลักสูตร |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- สรุปภาพรวม
|
|
|
|
|
- จำนวนผู้เรียนทั้งหมด
|
|
|
|
|
- จำนวนผู้จบหลักสูตร
|
|
|
|
|
- อัตราความสำเร็จ
|
|
|
|
|
- เวลาเรียนเฉลี่ย
|
|
|
|
|
- กราฟความคืบหน้า
|
|
|
|
|
- ตารางผู้เรียน
|
|
|
|
|
- ชื่อผู้เรียน
|
|
|
|
|
- อีเมล
|
|
|
|
|
- วันที่ลงทะเบียน
|
|
|
|
|
- ความคืบหน้า (%)
|
|
|
|
|
- Lesson ปัจจุบัน
|
|
|
|
|
- คะแนนแบบทดสอบรวม
|
|
|
|
|
- สถานะ (กำลังเรียน/จบแล้ว)
|
|
|
|
|
- ปุ่ม "ดูรายละเอียด"
|
|
|
|
|
- ตัวกรอง
|
|
|
|
|
- สถานะ
|
|
|
|
|
- ช่วงวันที่ลงทะเบียน
|
|
|
|
|
- ปุ่ม "ส่งออก Excel"
|
|
|
|
|
- ปุ่ม "ส่งออก PDF"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 8.2 หน้ารายงานความคืบหน้ารายบุคคล (Individual Progress Report)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | RPT-002 |
|
|
|
|
|
| **Screen Name** | Individual Progress Report |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าแสดงความคืบหน้าการเรียนของผู้เรียนแต่ละคน |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- ข้อมูลผู้เรียน
|
|
|
|
|
- รูปโปรไฟล์
|
|
|
|
|
- ชื่อ-นามสกุล
|
|
|
|
|
- อีเมล
|
|
|
|
|
- วันที่ลงทะเบียน
|
|
|
|
|
- สรุปความคืบหน้า
|
|
|
|
|
- เปอร์เซ็นต์ความสำเร็จ
|
|
|
|
|
- เวลาเรียนรวม
|
|
|
|
|
- คะแนนรวม
|
|
|
|
|
- รายละเอียดการเรียนตาม Chapter/Lesson
|
|
|
|
|
- สถานะแต่ละ Lesson (ยังไม่เริ่ม/กำลังเรียน/เสร็จสิ้น)
|
|
|
|
|
- คะแนนแบบทดสอบ
|
|
|
|
|
- เวลาที่ใช้
|
|
|
|
|
- ปุ่ม "ดาวน์โหลดรายงาน"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 8.3 หน้ารายงานคะแนนแบบทดสอบ (Quiz Score Report)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | RPT-003 |
|
|
|
|
|
| **Screen Name** | Quiz Score Report |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าแสดงรายงานคะแนนแบบทดสอบ |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- Dropdown เลือกแบบทดสอบ
|
|
|
|
|
- สถิติภาพรวม
|
|
|
|
|
- กราฟเปรียบเทียบ
|
|
|
|
|
- ตารางคะแนน
|
|
|
|
|
- ปุ่ม "ส่งออก"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 9. ระบบประกาศ
|
|
|
|
|
|
|
|
|
|
### 9.1 หน้ารายการประกาศ (Announcement List)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | ANN-001 |
|
|
|
|
|
| **Screen Name** | Announcement List |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าแสดงรายการประกาศในหลักสูตร |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- ปุ่ม "สร้างประกาศใหม่"
|
|
|
|
|
- รายการประกาศ
|
|
|
|
|
- หัวข้อ
|
|
|
|
|
- เนื้อหาย่อ
|
|
|
|
|
- วันที่โพสต์
|
|
|
|
|
- สถานะ (เผยแพร่/ซ่อน)
|
|
|
|
|
- ปุ่ม แก้ไข/ลบ
|
|
|
|
|
- Pagination
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 9.2 หน้าสร้างประกาศ (Create Announcement)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | ANN-002 |
|
|
|
|
|
| **Screen Name** | Create Announcement |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าสำหรับสร้างประกาศใหม่ |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- ช่องกรอกหัวข้อ
|
|
|
|
|
- Rich Text Editor สำหรับเนื้อหา
|
|
|
|
|
- อัปโหลดไฟล์แนบ
|
|
|
|
|
- สถานะ (เผยแพร่ทันที/ตั้งเวลา/ซ่อน)
|
|
|
|
|
- ตั้งเวลาเผยแพร่ (ถ้าเลือกตั้งเวลา)
|
|
|
|
|
- ปุ่ม "โพสต์"
|
|
|
|
|
- ปุ่ม "บันทึกเป็นฉบับร่าง"
|
|
|
|
|
- ปุ่ม "ยกเลิก"
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
### 9.3 หน้าแก้ไขประกาศ (Edit Announcement)
|
|
|
|
|
| รายละเอียด | คำอธิบาย |
|
|
|
|
|
|------------|----------|
|
|
|
|
|
| **Screen ID** | ANN-003 |
|
|
|
|
|
| **Screen Name** | Edit Announcement |
|
|
|
|
|
| **วัตถุประสงค์** | หน้าสำหรับแก้ไขประกาศ |
|
|
|
|
|
|
|
|
|
|
**องค์ประกอบหน้าจอ:**
|
|
|
|
|
- (เหมือนหน้าสร้างประกาศ แต่แสดงข้อมูลเดิม)
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 📊 สรุปจำนวนหน้าจอ
|
|
|
|
|
|
|
|
|
|
| หมวดหมู่ | จำนวนหน้าจอ |
|
|
|
|
|
|----------|-------------|
|
|
|
|
|
| ระบบยืนยันตัวตน | 3 |
|
|
|
|
|
| Dashboard | 1 |
|
|
|
|
|
| ระบบจัดการโปรไฟล์ | 3 |
|
|
|
|
|
| ระบบจัดการหลักสูตร | 4 |
|
|
|
|
|
| ระบบจัดการบทเรียน | 3 |
|
|
|
|
|
| ระบบจัดการเนื้อหา | 4 |
|
|
|
|
|
| ระบบจัดการแบบทดสอบ | 6 |
|
|
|
|
|
| ระบบรายงานและสถิติ | 3 |
|
|
|
|
|
| ระบบประกาศ | 3 |
|
|
|
|
|
| **รวมทั้งหมด** | **30** |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 📝 หมายเหตุ
|
|
|
|
|
|
|
|
|
|
1. **Screen ID** ใช้รูปแบบ `[หมวด]-[ลำดับ]` เพื่อง่ายต่อการอ้างอิง
|
|
|
|
|
2. หน้าจอบางส่วนเป็น Modal หรือ Component ย่อยที่ไม่มี URL แยกต่างหาก
|
|
|
|
|
3. URL ที่ระบุเป็นตัวอย่างโครงสร้าง สามารถปรับเปลี่ยนได้ตามความเหมาะสม
|
|
|
|
|
4. เอกสารนี้ครอบคลุมหน้าจอหลักสำหรับผู้สอน ไม่รวมหน้าจอของ Admin และ Student
|