การอบรม

😀ยินดีต้อนรับผู้เข้าร่วมอบรมทุกท่านครับ😀

prompt

promptที่ 1

สร้างบทเรียนออนไลน์แบบเว็บไซต์หน้าเดียว (HTML + CSS + JavaScript)  

“{{ระดับชั้น}}” = ระดับชั้น 

“{{ชื่อวิชา}}” = ชื่อวิชา

“{{หัวข้อบทเรียน}}”= หัวข้อบทเรียน

“{{เนื่อหาแท็ป1}}” = เนื่อหาแท็ป1

“{{เนื่อหาแท็ป2}}” = เนื่อหาแท็ป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 ให้ปุ่มและการ์ดดูมีชีวิต เมื่อเมาส์ไปชี้แล้วจะนูนขึ้น

prompt ที่ 2

สร้างแบบทดสอบวิชา หน้าที่พลเมืองดี ระดับชั้นมัธยมศึกษาปีที่ 5 แบบ 4 ตัวเลือก จำนวน 5 ข้อเป็นข้อสอบภาษาไทย 

- มีการสรุปผลเป็นระดับคุณภาพ "ผ่าน,ไม่ผ่าน" (หากตอบถูกตั้งแต่ 3 ข้อขึ้นไป = "ผ่าน" นอกจากนั้น = "ไม่ผ่าน") 

- ก่อนสอบ ผู้ทดสอบ กรอก ชื่อ-สกุล ,ตำแหน่ง ,โรงเรียน 

- เมื่อทำการสอบเสร็จแล้ว เก็บคะแนนของผู้สอบใน Canva Sheet

- แสดงข้อมูลผู้ที่ได้คะแนนสูงสุด10อันดับแรกแบบleaderstats ที่หน้าแรก โดยดึงข้อมูลจากCanva Sheet ที่บันทึกไว้

prompt ที่ 3

1.ช่วยสร้างเว็บแอพบทเรียนออนไลน์เรื่องการอาบน้ำละหมาด มีองค์ประกอบดังนี้  

   ส่วน Header:

        ใส่โลโก้ https://i.postimg.cc/FRNmbCFq/81816.png

       ขนาดกว้าง 100px ที่บนสุดของหน้า

       ใต้โลโก้แสดงชื่อระบบ : 

       "บทเรียนออนไลน์เรื่องการอาบน้ำละหมาด  "

       โรงเรียนมุสลิมพัฒนศาสตร์ สำนักงานการศึกษาเอกชนจังหวัดปัตตานี

       ออกแบบให้มีความทันสมัย น่าสนใจ พื้นหลังโทนสีเขียวอ่อน ขาว สวยงาม

   ส่วนกลาง

       แบบทดสอบก่อนเรียนปรนัย 5 ข้อ 

       เนื้อหา 

       เกมส์จับคู่

       แบบทดสอบหลังเรียนปรนัย 5 ข้อ    

  ส่วนท้าย

       ใส่ชื่อผู้จัดทำระบบด้านล่างของเว็บ ชื่อว่าผู้พัฒนาระบบ นายนูรุดดีน มะเซ็ง เบอร์โทร 0896556101

2.ใช้วิธีการจัดการการอัปโหลดไฟล์โดยแปลงไฟล์เป็น base64 ในเบราว์เซอร์

3.การส่งข้อมูลไฟล์เป็นสตริง base64 พร้อมกับชื่อไฟล์และประเภท MIME

4.ใน Apps Script ให้ถอดรหัสข้อมูล base64 และสร้างไฟล์จากข้อมูลนั้น

5.ใช้ URLSearchParams แทน FormData เพื่อให้เข้ากันได้กับ Apps Script มากขึ้น

6.เชื่อม App Script ที่ URL: xxx

7.บันทึกข้อมูลลงในชีตที่ SHEET_ID: xxx

8.ระบบอัปโหลดภาพโปรไฟล์ ให้บันทึกไฟล์ลงใน 

  FOLDER_ID: xxx

9.ให้นำ url ของไฟล์บันทึกลงในชีต 

10.แสดงสถานะขณะรอการบันทึกและบันทึกสำเร็จ

11.เมื่อสร้างระบบเสร็จแล้วให้แสดงโค้ด GS ในหน้าแชตนี้ด้วย