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

ออกแบบสื่อการสอนในรูปแบบเกมจับคู่ (Matching Game) เรื่อง “พระราชบัญญัติว่าด้วยการกระทำความผิดเกี่ยวกับคอมพิวเตอร์” สำหรับนักเรียนชั้นมัธยมศึกษาปีที่ 6
• เนื้อหาเป็นการจับคู่ “ข้อกฎหมาย” กับ “ความหมาย / ตัวอย่างการกระทำ”
• จำนวน 12 คู่คำ (เช่น “มาตรา 14(1)” → “นำเข้าสู่ระบบคอมพิวเตอร์ซึ่งข้อมูลอันเป็นเท็จ” , “มาตรา 16” → “การตัดต่อภาพผู้อื่นจนเสียหาย”)
• อินเตอร์เฟซเข้าใจง่าย เหมาะกับนักเรียนมัธยม
• ใช้โทนสีฟ้า-ขาว ให้ความรู้สึกทางวิชาการและน่าอ่าน
• เมื่อจับคู่ถูกต้อง ให้มีเสียง “ติ๊ง!” และเพิ่มคะแนน +10
• เมื่อจับคู่ผิด ให้มีเสียงแจ้งเตือนเบาๆ และไม่เพิ่มคะแนน
• แสดงคะแนนสะสมด้านบนตลอดเวลา
• เมื่อเล่นจบ แสดงคะแนนรวม พร้อมข้อความสรุปผล เช่น “ยอดเยี่ยม! คุณได้ xx คะแนน”
• ออกแบบให้ใช้งานได้ทั้งคอมพิวเตอร์และมือถือ
• จัดวางให้ปุ่มและข้อความชัดเจน เหมาะสำหรับการเรียนออนไลน์และในห้องเรียน

ฉันต้องการสร้างเกมตอบคำถามสำหรับนักเรียนชั้น ม.6 เรื่อง "ความฉลาดทางดิจิทัล (DQ Game)" โดยมีรายละเอียดดังนี้

1. หน้าแรกของเกม:
- โลโก้ : https://imprnoom.com/images/logonoom1.png
- ชื่อเกม: "DQ Challenge Game ม.6"
- มีช่องกรอกข้อมูลชื่อทีม และสมาชิกในกลุ่มไม่เกิน 4 คน
- ข้อมูลสมาชิกประกอบด้วย: คำนำหน้า, ชื่อ, นามสกุล, เลขที่, ชั้น ม.6/1 ถึง ม.6/11

2. เนื้อหาเกม:
- เป็นเกมตอบคำถามสถานการณ์ จำนวน 10 ข้อ
- แต่ละสถานการณ์เป็นภาพหรือข้อความให้ผู้เล่นอ่าน
- ตัวเลือกคำตอบคือ ความฉลาดทางดิจิทัล (DQ) จำนวน 8 ข้อ ได้แก่
1. อัตลักษณ์ทางดิจิทัล (Digital Identity)
2. การใช้งานเทคโนโลยีดิจิทัล (Digital Use)
3. ความปลอดภัยในโลกดิจิทัล (Digital Safety)
4. การป้องกันภัยในโลกดิจิทัล (Digital Security)
5. ความฉลาดทางอารมณ์ในโลกดิจิทัล (Digital Emotional Intelligence)
6. การสื่อสารในโลกดิจิทัล (Digital Communication)
7. การรู้ดิจิทัล (Digital Literacy)
8. การรู้สิทธิในโลกดิจิทัล (Digital Rights)

3. กลไกการเล่น:
- ผู้เล่นเลือกคำตอบที่ถูกต้องจาก 8 DQ
- ตอบถูกได้ 1 คะแนน
- รวมคะแนนทั้งหมด 10 คะแนน
- เมื่อเล่นครบทุกสถานการณ์ ให้แสดงคะแนนรวม และประกาศว่า "ทีมใดได้คะแนนมากที่สุดคือผู้ชนะ!"

4. ดีไซน์:
- ใช้โทนสีสดใส ดึงดูดวัยรุ่น
- มีไอคอนสื่อสารดิจิทัล เช่น ไอคอนมือถือ, แชท, โซเชียลมีเดีย
- รองรับการเล่นเป็นกลุ่มในห้องเรียน

5. ตัวอย่างสถานการณ์:
- สถานการณ์ 1: มีคนทักแชทมาหลอกให้โอนเงินเพราะบอกว่าถูกรางวัล iPhone
- สถานการณ์ 2: มีคนโพสต์เฟซบุ๊กใส่ร้ายเพื่อนในห้องเรียน
- (เพิ่มอีก 8 สถานการณ์ในรูปแบบเดียวกัน)

กรุณาสร้างเกมนี้ในรูปแบบ Interactive Quiz บน Canva AI
รองรับ Reponstive

สร้าง 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
✅ รองรับทั้งคอมพิวเตอร์และมือถือ