Prompt Library ครูนุ่มเดฟเทค

สร้าง Classroom Battle Quiz ออนไลน์ด้วย HTML + JavaScript
- ให้แสดงผลคะแนนแบบเรียลไทม์ โดยเครื่องคอมหลักคือครู และนักเรียนเล่นโดยเลือกทีมเองจากในมือถือ
- รองรับ 2 ทีม (Team A และ Team B)
- มีข้อสอบปรนัย 10 ข้อ เกี่ยวกับพรบ.คอมพิวเตอร์ 2560
- เมื่อเลือกคำตอบ → ตรวจทันที ถูก = +1 คะแนนทีม
- แสดง Leaderboard แบบ Real-time (คะแนนรวมแต่ละทีม)
- เมื่อทำครบทุกข้อ → ประกาศผู้ชนะ (ทีมไหนคะแนนสูงกว่า)
- อินเทอร์เฟซเป็นกล่องสีแดง vs น้ำเงิน สวยเหมือนเกมแข่งขัน
- ใช้งานได้ทั้งบนมือถือและคอมพิวเตอร์

สร้างตัวอย่างแบบทดสอบทางการศึกษา โดยใช้รูปแบบดังนี้

✅ แบบทดสอบปรนัย (Multiple Choice) – ตัวอย่าง 3 ข้อ พร้อมเฉลย
✅ แบบทดสอบอัตนัย (Short Answer) – ตัวอย่าง 2 ข้อ
✅ แบบทดสอบจับคู่ (Matching Quiz) – ตัวอย่างคำศัพท์กับความหมาย 1 ชุด
✅ แบบทดสอบถูก–ผิด (True/False) – ตัวอย่าง 3 ข้อ พร้อมเฉลย
✅ แบบทดสอบแบบเติมคำ (Fill in the Blank) – ตัวอย่าง 3 ข้อ
✅ แบบทดสอบพร้อมจับเวลา ⏱ – ให้มีคำสั่งกำหนดเวลาทำข้อสอบ 5 นาที
✅ แบบทดสอบพร้อมสรุปคะแนนอัตโนมัติ – ให้ระบบตรวจคำตอบและแสดงคะแนนรวมเมื่อทำเสร็จ

รูปแบบทั้งหมดให้ออกมาเป็น โค้ดที่ใช้งานได้จริงใน Canva Code รองรับการทำแบบทดสอบออนไลน์ และสามารถใช้ได้ทั้งบนคอมพิวเตอร์และมือถือ

สร้างแบบประเมินความพึงพอใจต่อการใช้งานเว็บไซต์
- ใช้ฟ้อนต์ "Sarabun" ทั้งหมด
- โทนสีฟ้า-ขาว เรียบง่าย สบายตา
- รองรับ Responsive (ใช้งานได้ทั้งมือถือและคอมพิวเตอร์)
- มีหัวข้อ "แบบประเมินความพึงพอใจต่อการใช้งานเว็บไซต์"
- คำถามอย่างน้อย 5 ข้อ เช่น
1. ความสะดวกในการใช้งานเว็บไซต์
2. ความรวดเร็วในการโหลดหน้าเว็บ
3. ความเหมาะสมของการจัดวางข้อมูล
4. ความสวยงามและความน่าสนใจของเว็บไซต์
5. ความพึงพอใจโดยรวม
- ตัวเลือกคำตอบเป็น Radio Button 1-5 (1 = น้อยที่สุด, 5 = มากที่สุด)
- มีปุ่ม "ส่งแบบประเมิน" (Submit) ด้านล่าง
- ออกแบบให้อ่านง่าย มีการจัด spacing ที่เหมาะสม

ออกแบบระบบ คลังบทเรียนวิทยาศาสตร์พลังสิบ โรงเรียนแม่จันวิทยาคม
📌 โทนสีหลัก: เหลือง – ขาว
📌 ฟ้อนต์: Prompt
📌 รองรับ Responsive ทั้งมือถือ แท็บเล็ต และคอมพิวเตอร์

🖥 ส่วนหน้าเว็บไซต์ (Frontend)
1. โครงสร้างหลัก
• แถบเมนูด้านบน (Navbar) → หน้าแรก, คลังบทเรียน, สมัครสมาชิก, เข้าสู่ระบบ
• หน้าหลัก → แสดงโลโก้โรงเรียน, ชื่อระบบ “คลังบทเรียนวิทยาศาสตร์พลังสิบ โรงเรียนแม่จันวิทยาคม” และปุ่ม เข้าสู่ระบบ / สมัครสมาชิก
• หน้าคลังบทเรียน → แยกหมวดหมู่ตาม ระดับชั้น ม.1 - ม.6
• ภายในแต่ละระดับชั้น → มีรายวิชา
• วิทยาศาสตร์พลังสิบ
• คณิตศาสตร์
• ฟิสิกส์
• เคมี
• ชีววิทยา
• เทคโนโลยี
2. รายละเอียดรายวิชา
• แสดง ตัวอย่างภาพ Thumbnail ของสื่อการเรียนรู้
• เมื่อกด → เข้าหน้ารายละเอียด
• แสดง:
• 📄 เอกสารประกอบ (ลิงก์ PDF)
• 🎞 คลิปวิดีโอ (ลิงก์ YouTube/Google Drive)
• 🖼 ภาพตัวอย่างสื่อ
• สมาชิกสามารถ เข้าดูสื่อ และ ทำแบบประเมิน ได้
3. ฟีเจอร์เพิ่มเติม
• ระบบสมัครสมาชิก + เข้าสู่ระบบ (Register / Login)
• หน้าทำแบบประเมิน (Quiz / แบบสอบถามความพึงพอใจ)
• Responsive Design สวยงาม เหมาะกับทุกอุปกรณ์

⸻

🔧 ส่วนหลังบ้าน (Backend สำหรับ Admin)
1. ระบบเข้าสู่ระบบ Admin
• Username / Password
• Security Basic
2. เมนูจัดการข้อมูล
• จัดการ ระดับชั้น (เพิ่ม / แก้ไข / ลบ)
• จัดการ รายวิชา (เพิ่ม / แก้ไข / ลบ)
• จัดการ เอกสาร PDF (อัปโหลด / แก้ไข / ลบ)
• จัดการ สื่อการเรียนรู้ (ใส่ชื่อเรื่อง + ลิงก์ + ภาพตัวอย่าง)
• จัดการ คลิปวิดีโอ (เพิ่ม URL / ฝังลิงก์)
3. ระบบสมาชิก
• จัดการรายชื่อผู้สมัครสมาชิก
• ตรวจสอบผลการทำแบบประเมิน

⸻

✅ คุณสมบัติพิเศษ
• ดีไซน์ทันสมัย สะอาดตา ใช้ สีเหลือง – ขาว
• ใช้ ฟ้อนต์ Prompt (ภาษาไทย)
• แต่ละบทเรียนมี Preview Image + รายละเอียดสื่อ
• ระบบถูกออกแบบให้รองรับการใช้งานจริงในโรงเรียน

สร้างเว็บไซต์ระบบสุ่มรายชื่อนักเรียน
- โทนสีฟ้า-ขาว เรียบง่าย ทันสมัย รองรับ Responsive
- ส่วนหัวแสดงชื่อ "ระบบสุ่มรายชื่อนักเรียน"
- มีกล่องให้ครูกรอกรายชื่อนักเรียน (กรอกทีละชื่อ หรือคัดลอกวางเป็นบรรทัด)
- มีปุ่ม "เพิ่มรายชื่อ" และแสดงรายชื่อนักเรียนที่เพิ่มเข้ามาในกล่องด้านล่าง
- มีปุ่ม "สุ่มรายชื่อ" เมื่อกดแล้ว จะแสดงผลลัพธ์นักเรียนที่ถูกสุ่มในกล่องตรงกลาง พร้อมแอนิเมชันเล็กน้อย
- มีปุ่ม "ล้างรายชื่อ" เพื่อเริ่มใหม่
- ใช้ฟอนต์ TH Sarabun New หรือฟอนต์อ่านง่ายสำหรับภาษาไทย
- ดีไซน์ให้น่าใช้ เหมาะกับครูใช้ในห้องเรียนจริง

สร้าง Exam Countdown ระยะเวลา <30 นาที> ไม่มีปุ่มหยุดชั่วคราว มีเตือนล่วงหน้าเมื่อเหลือ <5 นาที> (ไอคอนเตือน + ข้อความ) และเมื่อหมดเวลาให้เรียกฟังก์ชัน onTimeUp() เพื่อส่งคำตอบอัตโนมัติ โค้ด JS แยกเป็นฟังก์ชันชัดเจน

สร้างตัวอย่าง Chatbot ตอบคำถามพื้นฐาน ด้วย Canva Code โดยใช้ HTML + JavaScript

✅ ผู้ใช้พิมพ์ข้อความลงในช่องแชท
✅ Bot ตอบกลับอัตโนมัติตามเงื่อนไขที่ตั้งไว้ เช่น

ทักทาย ("สวัสดี", "Hello") → Bot ตอบว่า "สวัสดีค่ะ ยินดีให้บริการ"

ถามเวลา ("กี่โมง", "time") → Bot ตอบเวลาปัจจุบัน

ถามเกี่ยวกับโรงเรียน ("โรงเรียน", "school") → Bot ตอบว่า "นี่คือแชทบอทสำหรับข้อมูลโรงเรียน"
✅ ถ้าไม่เข้าใจ → Bot ตอบว่า "ขอโทษค่ะ ฉันยังไม่เข้าใจคำถามนี้"
✅ อินเทอร์เฟซสวยงาม ใช้กล่องแชทเลียนแบบ Messenger
✅ รองรับทั้งคอมพิวเตอร์และมือถือ

ออกแบบระบบออกใบเสร็จออนไลน์ โดยมีคุณสมบัติดังนี้

1. ระบบ Login
- ผู้ดูแลระบบต้องใส่ Username/Password เพื่อเข้าสู่ระบบ
- เมื่อเข้าสู่ระบบแล้วจะสามารถจัดการข้อมูลลูกค้าและสร้างใบเสร็จได้

2. จัดการข้อมูลลูกค้า
- เพิ่ม / แก้ไข / ลบ ข้อมูลลูกค้าได้
- ฟอร์มบันทึกข้อมูลลูกค้า: ชื่อ-นามสกุล, หน่วยงาน, ที่อยู่, เบอร์โทร, อีเมล
- แสดงรายชื่อลูกค้าในรูปแบบตาราง ค้นหา/กรองได้
- เวลาสร้างใบเสร็จสามารถเลือกชื่อจากฐานข้อมูลลูกค้าได้ทันที (Auto Fill ข้อมูลที่อยู่)

3. หน้าสร้างใบเสร็จ
- กรอกข้อมูลผู้ชำระเงิน (เลือกจากลูกค้าเดิม หรือเพิ่มใหม่)
- ระบบรันเลขที่ใบเสร็จอัตโนมัติ (เช่น 0001, 0002…)
- เลือกวันที่ออกใบเสร็จได้จากปฏิทิน

4. ตารางรายการสินค้า/บริการ
- แสดงคอลัมน์: ลำดับ | รายการ | จำนวน | ราคาต่อหน่วย | จำนวนเงิน
- กดปุ่มเพิ่ม/ลบแถวรายการได้
- คำนวณราคารวมอัตโนมัติ

5. การคำนวณ
- แสดง "ราคารวม" เป็นตัวเลข
- แปลง "ราคารวม" เป็นข้อความ (เช่น 1500 → หนึ่งพันห้าร้อยบาทถ้วน)

6. ส่วนท้ายใบเสร็จ
- ช่องเซ็นชื่อผู้รับเงิน พร้อมชื่อในวงเล็บ
- ปุ่มพิมพ์ใบเสร็จเป็น PDF

7. การออกแบบ
- ใช้ฟ้อนต์ **Sarabun** ทั้งระบบ
- โทนสี **ม่วง-ขาว**
- Heading ใช้สีม่วงเข้ม
- พื้นหลังใบเสร็จสีขาว เส้นตารางสีม่วงอ่อน
- ปุ่มต่าง ๆ ใช้สีม่วง (อ่อน-เข้ม) กับตัวอักษรสีขาว
- Responsive ใช้งานได้ทั้งมือถือและคอมพิวเตอร์

สร้างเว็บไซต์ตัวอย่างแนวทันสมัย โทนสีสดใส
แสดง "ผลงานนักเรียน" หลายชิ้นในรูปแบบการ์ด แต่ละการ์ดมี:
- รูปภาพจำลองผลงานนักเรียน (Placeholder Image)
- ชื่อผลงาน
- ปุ่มกดไลค์พร้อมตัวเลขนับจำนวน
- ปุ่มกดแชร์ (ลิงก์จำลองไป Facebook, LINE, Twitter)
- ส่วนแสดงความคิดเห็นสำหรับผลงานนั้นโดยเฉพาะ (ฟอร์มกรอกชื่อ + ข้อความ)
- แสดงคอมเมนต์ที่เพิ่มเข้ามาใต้การ์ดของผลงานนั้นทันที

จัดหน้าเว็บให้อ่านง่าย สวยงาม และรองรับมือถือ (Responsive)
ใช้ JavaScript เบาๆ เพื่อจำลองการทำงาน เช่น:
- กดไลค์แล้วตัวเลขเพิ่มขึ้น
- เพิ่มคอมเมนต์ใหม่เข้าไปในรายการคอมเมนต์ของผลงานที่เลือกโดยไม่ต้องรีเฟรชหน้า
- ปุ่มแชร์แสดงเป็นลิงก์สมมติ (ไม่ต้องเชื่อมต่อจริง)