# data[].attributes.headline
เป้าหมายของการอบรม

# data[].attributes.subject
เป้าหมายของการอบรม

# data[].attributes.body
เมื่อจบการอบรม ผู้เข้าร่วมจะสามารถ:
1. รู้จักเครื่องมือที่ใช้ในการสอนด้วย Generative AI
2. สามารถออกแบบและผลิตสื่อการสอนที่น่าสนใจด้วย Canva
3. สามารถบูรณาการการใช้ Canva และ Generative AI ในการสร้างสื่อการสอนออนไลน์

# data[].attributes.headline
เครื่องมือ Ai

# data[].attributes.subject
เครื่องมือ Ai

# data[].attributes.body
ขอให้ผู้เข้ารับการอบรมเตรียมเครื่องมือ AI โดยสมัครใช้งาน เพื่อให้สามารถทําตามกิจกรรมได้

1. สร้างเนื้อเรื่อง : Chat GPT

https://chatgpt.com/

2. สร้างภาพฉากนิทาน : Microsoft Designer

https://designer.microsoft.com/

3. สร้างวิดีโอจากภาพ : Hailuo AI

https://hailuoai.video/

4. สร้างเสียงบรรยาย : Botnoi Voice

https://voice.botnoi.ai/

5. ตัดต่อวิดีโอ : Canva

https://www.canva.com/

6.ฝากไฟล์รูปภาพ

https://pic.in.th/

7.สร้างสไลด์ด้วย Ai

https://gamma.app/

# data[].attributes.attachment_link.title
ฝากรูปฟรี อัพโหลดรูป ไม่มีลบ ฝากรูปไม่จำกัด บริการฝากรูป

# data[].attributes.attachment_link.description
ฝากรูป บริการฝากรูปออนไลน์ ฝากรูปฟรีไม่มีวันหมดอายุ ฝากรูปทั้งอัลบั้ม ฝากภาพ รองรับไฟล์รูปภาพทุกประเภท .jpg .png .gif .webp .bmp อัพโหลดรูป ได้สูงสุดถึง 10 MB

# data[].attributes.attachment_link.title
Workshop_ระบบส่งงาน

# data[].attributes.headline
ตัวอย่าง Prompt

# data[].attributes.subject
ตัวอย่าง Prompt

# data[].attributes.body
AI Note-Taking – ช่วยสรุปเนื้อหาให้เข้าใจง่าย

"ช่วยสรุปเนื้อหาให้หน่อย ขอ 5 ข้อ"จากไฟล์นี้

AI Study Buddy – ให้ AI เป็นติวเตอร์ส่วนตัว

"ช่วยอธิบาย บัตรเดบิต กับ บัตรเครดิต พร้อมยกตัวอย่าง" และแหล่งอ้างอิงข้อมูลให้ด้วย

# data[].attributes.body
สร้างใบงาน วิชา คณิตศาสตร์ ระดับชั้นประถมปีที่ 6 รูปแบบเติมคำตอบในช่องว่าง มีองค์ประกอบที่สำคัญ ดังนี้ 1.หน้ามีขนาด A4 มีเส้นกรอบรอบกระดาษ 2.หัวกระดาษ มีชื่อเรื่อง ,วิชา,ชั้น,ตัวขี้วัด,คำชี้แจง 3.ส่วนเนื้อหาแบบทดสอบ 4.มีช่องให้เขียน ชื่อ-สกุล.........................ชั้น.......เลขที่....... 5.ตกแต่งให้สวยงามเหมาะสมกับเด็กใส่ภาพ หรือไอคอนในสวยงาม มีเส้นกรอบกล่องข้อความเข้ม

# data[].attributes.attachment_link.title
การสร้างสื่อเพื่อการเรียนรู้ด้วย AI สำหรับครูยุคดิจิทัล

# data[].attributes.headline
สรุปงานจาก Chat gpt

# data[].attributes.subject
สรุปงานจาก Chat gpt

# data[].attributes.attachment_link.title
โปรแกรมคำนวณรหัสสีตัวต้านทานไฟฟ้า

# data[].attributes.headline
ระบบส่งงานตรวจงานให้คะแนน

# data[].attributes.subject
ระบบส่งงานตรวจงานให้คะแนน

# data[].attributes.attachment_link.title
ระบบตรวจงานออนไลน์สำหรับชั้นประถมศึกษาปีที่ 6

# data[].attributes.body
สร้างบทเรียนออนไลน์แบบเว็บไซต์หน้าเดียว (HTML + CSS + JavaScript) “{{ระดับชั้น}}” = ชั้นประถมศึกษาปีที่ 6 “{{ชื่อวิชา}}” = วิชาภาษาต่างประเทศ “{{หัวข้อบทเรียน}}”= การสื่อสารระหว่างบุคคล “{{เนื่อหาแท็ป1}}” = คำศัพท์ในการสื่อสาร “{{เนื่อหาแท็ป2}}” = ตัวอย่างประโยคสื่อสาร คุณสมบัติที่ต้องมี 1. หน้าเข้าสู่ระบบ: - แสดง “บทเรียนออนไลน์”,{{หัวข้อบทเรียน}},{{ระดับชั้น}} ,{{ชื่อวิชา}} ไว้ด้านบนสุด - ให้ผู้เรียนกรอกชื่อ–นามสกุล (เก็บข้อมูลไว้ใน localStorage) 2. เมนูนำทางไปแต่ละส่วนของบทเรียน: - แสดง{{หัวข้อบทเรียน}},{{ระดับชั้น}} ,{{ชื่อวิชา}} ไว้ด้านบนสุด - ส่วนแบบทดสอบก่อนเรียน: มี 10 ข้อ แบบตัวเลือกเดียว เกี่ยวกับ {{หัวข้อบทเรียน}} ,มีตัวจับเวลา ข้อ ละ 20 วินาที ,ทำทีละข้อ, ต้องทำแบบทดสอบก่อนเรียนเสร็จก่อนจึงจะทำส่วนอื่นได้ - ส่วนเนื้อหาความรู้: มีเนื้อหาหลายแท็ป ประกอบด้วย แท็ปที่1 อธิบายเรื่อง {{เนื่อหาแท็ป1}} พร้อมภาพไอคอนประกอบสวยงาม ตรงตามเนื้อหา แท็ปที่2 อธิบายเรื่อง {{เนื่อหาแท็ป2}} พร้อมภาพไอคอนประกอบสวยงาม ตรงตามเนื้อหา - ส่วนแบบทดสอบหลังเรียน: มี 10 ข้อ แบบเดียวกับก่อนเรียน แต่สลับลำดับตัวเลือก - ส่วนเกมโต้ตอบ: มีเกมจับคู่, ลาก–วาง หรือเกมง่าย ๆ ที่เกี่ยวกับ {{หัวข้อบทเรียน}} - ส่วนตรวจสอบคะแนนและการพัฒนา: แสดงผลคะแนนแบบทดสอบก่อนเรียน และผลคะแนนแบบทดสอบหลังเรียน และนำมาเปรียบเทียบกัน พร้อมบอกระดับคุณภาพที่ได้ เพื่อทราบพัฒนาการของผู้เรียน 3. ปุ่ม "ออกจากระบบ" สำหรับล้างข้อมูลคะแนนทั้งหมด และกลับมาหน้าเข้าสู่ระบบ 4. การออกแบบดีไซน์: - ใช้สีโทน เช่นสีพื้นหลังข้อความเหมือนกระจกเบลอ แต่ละหัวข้อพื้นหลังมีสีสันสดใส และสีต่างกัน พื้นหลังของเว็บเป็นสีเหลืองอ่อน และมีก้อนเมฆ - ใช้ภาพไอคอน/อิโมจิ ประกอบ (เช่นตัวละครน่ารัก สิ่งของหรือสัตว์ที่เกี่ยวข้อง กับ {{หัวข้อบทเรียน}}) - ปุ่มมีมุมโค้งมน (border-radius มากกว่า 12px) และมีเงาแบบนุ่ม (soft shadow) - ใช้ฟอนต์อ่านง่าย เช่น Noto Sans Thai หรือฟอนต์แนวการ์ตูน -เพิ่มเอฟเฟกต์แสงพาดผ่านกล่องข้อความ (Text Card) สำคัญ แบบกระจกเงา:ใช้ CSS animation และ gradient หรือ pseudo-element (::before) เพื่อสร้างแถบแสงสีเทาโปร่งใส แถบแสงต้องเคลื่อนไปจากซ้ายไปขวาอย่างนุ่มนวล (ทุก 10 วินาที) ไม่ทับปุ่มกด 5. จัดเก็บคะแนนและการพัฒนาใน localStorage โดยไม่ต้องใช้เซิร์ฟเวอร์ 6. ใช้โค้ด HTML, CSS, และ JavaScript อยู่ในไฟล์เดียว (ไม่เชื่อมโยงไฟล์ภายนอก) 7. จัดเลย์เอาต์ให้โปร่งโล่ง มี padding และ margin เหมาะสม 8. เพิ่มเอฟเฟกต์ hover ให้ปุ่มและการ์ดดูมีชีวิต เมื่อเมาส์ไปชี้แล้วจะนูนขึ้น

# data[].attributes.headline
สร้างสติกเกอร์

# data[].attributes.subject
สร้างสติกเกอร์

# data[].attributes.body
ครูสอนเคมี สไตล์น่ารัก สีสดใส เงาง่าย ๆ แสดงอารมณ์ชัดเจน ใช้ใบหน้าจากภาพแนบ แต่ละช่องแสดงกิจกรรมเกี่ยวข้องกับการสอนเคมี ไม่มีข้อความ: 1️⃣ อธิบายบทเรียน – ครูถือโมเลกุลจำลอง พร้อมอธิบายนักเรียน 2️⃣ ทดลองเคมี – ครูถือหลอดทดลอง มีฟองฟู่และควันเบา ๆ 3️⃣ เขียนสมการ – ครูเขียนสูตรเคมีลงกระดาน ด้วยท่าทางตั้งใจ 4️⃣ ตรวจสอบงาน – ครูก้มดูสมุดของนักเรียน ยิ้มและให้คำแนะนำ 5️⃣ ใช้ไมโครสโคป – ครูกำลังมองตัวอย่างทดลองผ่านกล้องจุลทรรศน์ 6️⃣ ตอบคำถาม – ครูชูนิ้วขึ้น อธิบายคำตอบให้นักเรียน 7️⃣ ทดลองไฟฟ้า – ครูถืออุปกรณ์สร้างปฏิกิริยาไฟฟ้า ตื่นเต้นกับผลลัพธ์ 8️⃣ ค้นคว้าเพิ่มเติม – ครูอ่านหนังสือหรือค้นหาข้อมูลในแล็ปท็อป 9️⃣ ผ่อนคลาย – ครูนั่งจิบกาแฟ ยิ้มหลังจากสอนทั้งวัน พื้นหลังโปร่งใส