Kruphon-education - PROMT ai 2025

KRUPHON WEBSITE EDUCATION

Kruphon-education

🚀 Prompt สำหรับสร้าง "ระบบขออนุญาตไปราชการ"

เป้าหมาย: ฉันต้องการสร้าง "ระบบขออนุญาตไปราชการ" แบบครบวงจรโดยใช้ Google Apps Script โดยมี 3 องค์ประกอบหลัก:

Index.html: หน้าฟอร์มสำหรับกรอกข้อมูล (ใช้ Tailwind CSS)
Code.gs: สคริปต์หลังบ้านสำหรับจัดการข้อมูล, สร้าง PDF, และส่งการแจ้งเตือน
Dashboard.html: หน้าแดชบอร์ดสำหรับผู้ดูแล (ใช้ Tailwind CSS + Dark Mode)

1. ส่วนของหน้าฟอร์ม (Index.html)

เทคโนโลยี: ใช้ HTML, Tailwind CSS, และ JavaScript
Layout:
- ออกแบบฟอร์มให้สะอาดตา และรองรับมือถือ
- เพิ่มโลโก้ของโรงเรียนด้านบน
- ต้องมีปุ่มสำหรับลิงก์ไปหน้า ?page=dashboard
Fieldsets: แบ่งส่วนการกรอกข้อมูลดังนี้:
- ข้อมูลทั่วไป: วันที่ขอ, ชื่อ-นามสกุล (Dropdown), ตำแหน่ง (Readonly)
- รายละเอียดการไปราชการ: เรื่อง, หนังสืออ้างอิง, วันที่, สถานที่
- ข้อมูลการเดินทางและค่าใช้จ่าย:
  - วันที่เดินทาง, พาหนะ
  - (สำคัญ) ส่วนคำนวณค่าใช้จ่าย (เบี้ยเลี้ยง, ที่พัก, พาหนะ, อื่นๆ) ต้องคำนวณ "รวมเงินทั้งสิ้น" อัตโนมัติทันทีที่กรอก
  - (สำคัญ) ต้องมีฟังก์ชัน JavaScript ThaiBahtConverter เพื่อแปลง "รวมเงินทั้งสิ้น" เป็น "จำนวนเงิน (ตัวอักษร)" แบบเรียลไทม์ และต้องแสดงค่า "0.00" และ "ศูนย์บาทถ้วน" ตั้งแต่เริ่มโหลด
- ผู้ร่วมไปราชการ: ช่องสำหรับกรอกชื่อ 10 คน และช่องอัปโหลดไฟล์ (กรณีเกิน 10 คน)
- ไฟล์หนังสือราชการ: ช่องอัปโหลดไฟล์ officialDocumentFile (ต้อง required)
- ลงนาม:
  - ต้องมีช่อง <canvas> สำหรับ "ลายเซ็นอิเล็กทรอนิกส์" (E-Signature)
  - ต้องมีปุ่ม "ล้างลายเซ็น"
ฟังก์ชัน JavaScript (Client-side):
- DOMContentLoaded: ให้ดึงข้อมูลจาก getEmployeeData() มาใส่ใน Dropdown ชื่อ และตั้งค่าวันที่ปัจจุบัน
- เมื่อเลือก "ชื่อ", "ตำแหน่ง" ต้องอัปเดตอัตโนมัติ
- handleFormSubmit(form):
  - ป้องกันการ submit ปกติ
  - แสดง Loader "กำลังบันทึกข้อมูล..."
  - แปลงลายเซ็นจาก <canvas> เป็น Base64
  - อ่านไฟล์อัปโหลดทั้งหมด (หนังสือราชการ, ไฟล์แนบ) เป็น Base64
  - รวบรวมข้อมูลทั้งหมด (รวมไฟล์ Base64) ลงใน dataObject
- (สำคัญ) Logic การแจ้งเตือน:
  - ให้เรียก google.script.run.saveRequest(dataObject) (แบบ "Fire-and-Forget" ไม่ต้องมี withSuccessHandler)
  - หลังจากเรียก saveRequest ให้เริ่มจับเวลา 10 วินาที
  - เมื่อครบ 10 วินาที ให้แสดง SweetAlert2 (icon: 'success') แจ้งว่า "บันทึกข้อมูลเรียบร้อย..."
  - เมื่อผู้ใช้กด "ตกลง" บน SweetAlert2 ให้ทำการ form.reset() และ clearSignature()

2. ส่วนของระบบหลังบ้าน (Code.gs)

doGet(e):
- ต้องตรวจสอบ e.parameter.page
- ถ้า page === 'dashboard' ให้แสดง Dashboard.html
- นอกนั้น ให้แสดง Index.html
getEmployeeData():
- ให้อ่านข้อมูลจากชีตชื่อ 'ตั้งค่าข้อมูล' (คอลัมน์ A: ชื่อ, B: ตำแหน่ง) และส่งกลับไปเป็น Array of Objects
saveRequest(dataObject):
- (สำคัญ) ลำดับการทำงาน:
- รับ dataObject จาก JavaScript
- อัปโหลดไฟล์ Base64 ทั้งหมด (ลายเซ็น, หนังสือราชการ, ไฟล์แนบ) ไปยัง Google Drive ในโฟลเดอร์ที่ถูกต้อง (เช่น 'ลายเซ็น', 'ไฟล์หนังสือราชการ') และเก็บ URL ไว้
- เตรียม newRow เพื่อบันทึกลงชีต (ต้องตรงกับ setupSheet)
- บันทึกแถวใหม่ (appendRow) ลงในชีตชื่อ 'Requests'
- (สำคัญมาก) เรียกใช้ SpreadsheetApp.flush() ทันที เพื่อบังคับให้ข้อมูลถูกบันทึกก่อน
- เรียกใช้ฟังก์ชัน runPDF() (เพื่อสร้าง PDF จากแถวสุดท้ายที่เพิ่งบันทึก)
- อัปเดต "ลิงก์ PDF" กลับเข้าไปในแถวสุดท้าย
- เรียก sendTelegramNotification() โดยส่งข้อมูลและลิงก์ PDF ไปด้วย
runPDF():
- ห้ามใช้ dataObject
- ให้เปิดชีต 'Requests' และ getLastRow() เพื่ออ่านข้อมูลที่เพิ่งบันทึก (ที่ผ่านการ flush แล้ว)
- ใช้ PdfService (หรือวิธีอื่น) เพื่อสร้าง PDF จาก Google Slide Template โดยนำข้อมูลแถวสุดท้ายไปเติม
- บันทึก PDF ลงโฟลเดอร์ 'ไฟล์PDF' และคืนค่า pdfUrl
sendTelegramNotification():
- รับข้อมูลและ pdfUrl
- สร้างข้อความสรุป (ผู้ขอ, เรื่อง, วันที่, ลิงก์ PDF, ลิงก์หนังสือราชการ)
- ส่งข้อความไปยัง Telegram Chat ID ที่กำหนด
setupSheet(): (สำหรับเมนู Admin)
- สร้างชีต 'Requests' พร้อมหัวตารางทั้งหมด (รวม 'ค่าเบี้ยเลี้ยง (บาท)', 'ค่าที่พัก (บาท)' ฯลฯ และ 'ลิงก์ PDF')

3. ส่วนของแดชบอร์ด (Dashboard.html)

เทคโนโลยี: HTML, Tailwind CSS (ใช้ Dark Mode ธีมสี bg-slate-900), JavaScript, และ Lucide Icons
Layout:
- แสดงหัวข้อ "แดชบอร์ดสรุปข้อมูล"
- แสดงการ์ดสรุปสถิติ (Stats Cards) 2 แถว:
- แถวที่ 1 (4 การ์ด): คำขอทั้งหมด, รอดำเนินการ, กำลังดำเนินการ, ดำเนินการเรียบร้อย
- แถวที่ 2 (5 การ์ด): (ใช้ lg:grid-cols-3) รวมเงินทั้งหมด, รวมค่าเบี้ยเลี้ยง (บาท), รวมค่าที่พัก (บาท), รวมค่าพาหนะ (บาท), รวมค่าใช้จ่ายอื่น ๆ (บาท)
- แสดงกราฟแท่ง (Chart.js) สรุปคำขอรายเดือน
- แสดงตารางรายการคำขอทั้งหมด
ฟังก์ชัน JavaScript (Client-side):
- DOMContentLoaded: เรียก google.script.run.getDashboardData()
- onDataLoaded(data):
  - อัปเดตตัวเลขในการ์ดสรุปสถิติทั้งหมด (รวมถึงการ์ดค่าใช้จ่าย 5 ใบ)
  - สร้างกราฟ Chart.js
  - สร้างตาราง (Table)
- ตาราง:
  - ต้องมีระบบ ค้นหา (Search) และ แบ่งหน้า (Pagination)
  - ต้องมีปุ่ม "ดูรายละเอียด" (แสดง Modal)
  - ต้องมีปุ่ม "จัดการ" (ซ่อนไว้)
- Admin Login:
  - มีปุ่ม "Admin Login"
  - เมื่อกด ให้แสดง Modal ถามรหัสผ่าน (ใช้รหัสผ่านง่ายๆ เช่น '1234' ใน JavaScript)
  - ถ้า login ถูกต้อง (isAdminLoggedIn = true) ให้แสดงคอลัมน์ "จัดการ" ในตาราง
- updateRequestStatus(rowDataJson, newStatus):
  - เมื่อ Admin กดปุ่ม "จัดการ" ให้เรียก google.script.run.updateRequestStatus()
ฟังก์ชัน Backend (ใน Code.gs):
- getDashboardData():
  - อ่านข้อมูล ทั้งหมด จากชีต 'Requests'
  - คำนวณค่าสถิติทั้งหมด (รวมถึง allowanceTotal ที่เพิ่มใหม่)
  - ส่งข้อมูลกลับไปเป็น { stats: {...}, requests: [...] }
- updateRequestStatus(rowDataJson, newStatus):
  - รับข้อมูลแถวและสถานะใหม่
  - ค้นหาแถวในชีต (โดยใช้ Timestamp และ ชื่อผู้ขอ)
  - อัปเดตคอลัมน์ "สถานะ"

หัวข้อ: สร้างเว็บแอปพลิเคชัน "RPG24-KlangPhon" ด้วย Google Apps Script

บทบาท: คุณคือผู้เชี่ยวชาญด้านการพัฒนา Google Apps Script และการออกแบบ Full-stack Web Application

เป้าหมาย: สร้างเว็บแอปพลิเคชันที่สมบูรณ์แบบชื่อ "RPG24-KlangPhon" ซึ่งเป็นระบบคลังข้อมูลการวัดและประเมินผลนักเรียน โดยใช้ Google Apps Script เป็น Backend และ HTML/CSS/JavaScript เป็น Frontend ระบบต้องมีความปลอดภัย, ใช้งานง่าย, และแสดงผลได้ดีบนทุกอุปกรณ์

1. ข้อกำหนดด้านโครงสร้างและข้อมูล (Backend)

Google Sheets เป็นฐานข้อมูล: (เช่น ID: ปปปปปปปปปปปปปปปปปปปปปปปป)
- สร้างชีตชื่อ รวม สำหรับเก็บข้อมูลนักเรียนทั้งหมด โดยมีคอลัมน์: รหัสนักเรียน, ชื่อ - สกุล, ชั้น, กลุ่ม, ลิงค์ดาวน์โหลดไฟล์, ปีการศึกษา
- สร้างชีตชื่อ ตั้งค่า สำหรับจัดการผู้ใช้งาน โดยมีคอลัมน์: ชื่อผู้ใช้งาน, รหัสผ่าน, ชื่อ, สถานะ (ค่าที่เป็นไปได้คือ 'admin' หรือ 'user')
- สร้างชีตชื่อ Log สำหรับบันทึกประวัติการเข้าใช้งาน โดยมีคอลัมน์: Timestamp, Username, Name
Google Drive เป็นที่เก็บไฟล์:
- ใช้ Google Drive Folder ที่กำหนด (เช่น ID: ปปปปปปปปปปปปปปปปปปปปปปปป) เป็นที่จัดเก็บไฟล์เอกสาร PDF ที่อัปโหลดผ่านระบบ
โครงสร้างไฟล์ Apps Script:
- Code.gs: ไฟล์หลักสำหรับจัดการข้อมูลนักเรียน, การแสดงผลหน้าเว็บ, และการตั้งค่าส่วนกลาง
- ล็อคอิน.gs: ไฟล์แยกสำหรับจัดการฟังก์ชันการตรวจสอบสิทธิ์และบันทึก Log การเข้าใช้งานโดยเฉพาะ
- index.html: ไฟล์สำหรับส่วนติดต่อผู้ใช้ (UI) ทั้งหมด
- appsscript.json: กำหนดค่า oauthScopes ที่จำเป็น ได้แก่ spreadsheets และ drive

2. ข้อกำหนดด้านฟังก์ชันการทำงาน (Functionality)

ระบบล็อกอินและความปลอดภัย:
- เมื่อเปิดเว็บครั้งแรก ต้องแสดงหน้าล็อกอินเสมอ
- ฟังก์ชัน checkLogin จะตรวจสอบ ชื่อผู้ใช้งาน และ รหัสผ่าน กับข้อมูลในชีต ตั้งค่า
- หากล็อกอินสำเร็จ ให้บันทึกข้อมูล Timestamp, Username, Name ลงในชีต Log
- ใช้ sessionStorage ในฝั่ง Frontend เพื่อรักษาสถานะการล็อกอิน
- มีปุ่ม "ออกจากระบบ" ที่ล้างข้อมูล Session และกลับไปยังหน้าล็อกอิน
การจัดการข้อมูล:
- ผู้ใช้ที่มีสถานะเป็น 'admin' เท่านั้นจึงจะเห็นปุ่ม "เพิ่มข้อมูล"
- เมื่อกด "เพิ่มข้อมูล" ให้แสดง Modal สำหรับกรอกข้อมูลนักเรียนใหม่
- ฟอร์มต้องมีช่องสำหรับอัปโหลดไฟล์ PDF โดยตรง
- ฟังก์ชัน addStudent ต้องสามารถรับข้อมูลจากฟอร์ม, อัปโหลดไฟล์ไปยัง Google Drive, รับ URL ของไฟล์กลับมา, และบันทึกข้อมูลทั้งหมดลงในชีต รวม
การแสดงผลข้อมูล:
- แดชบอร์ด: แสดงการ์ดสรุป "จำนวนเอกสารทั้งหมด", กราฟแท่งแสดง "จำนวนเอกสารตามปีการศึกษา", และกราฟวงกลมแสดง "สัดส่วนเอกสารตามกลุ่ม" (ใช้ Chart.js)
- ตารางข้อมูล:
  - ค่าเริ่มต้นต้องแสดงข้อมูลนักเรียน ทั้งหมดทุกปีการศึกษา
  - มีเมนู Dropdown สำหรับกรองข้อมูลตาม ปีการศึกษา โดยต้องมีตัวเลือก "ทุกปีการศึกษา" เป็นค่าเริ่มต้น
  - มีปุ่มสำหรับกรองข้อมูลตาม กลุ่ม (ป.6, ม.3, ม.6, ลาออกกลางคัน)
  - มีช่องค้นหาสำหรับกรองข้อมูลตาม ชื่อ-สกุล แบบ Real-time

3. ข้อกำหนดด้านการออกแบบ (UX/UI)

ชื่อและธีม:
- ใช้ชื่อระบบว่า "RPG24-KlangPhon" และมีคำอธิบายว่า "ระบบคลังข้อมูลการวัดและประเมินผลนักเรียน"
- ออกแบบในธีม "ราชการ/องค์กร" ที่ดูทันสมัย, สะอาดตา, และน่าเชื่อถือ โดยใช้โทนสีหลักเป็น สีน้ำเงิน-เทา
- สร้างโลโก้ที่เรียบง่ายแต่สื่อถึงความเป็นระบบเอกสารหรือการศึกษา
การใช้งานและส่วนประกอบ:
- ใช้ไอคอน (SVG หรือ Font-based) ประกอบในส่วนต่างๆ เช่น ปุ่ม, หัวข้อแดชบอร์ด, และช่องค้นหา เพื่อให้เข้าใจง่าย
- จัดวาง Layout ให้เป็นระเบียบและใช้งานง่ายในทุกส่วน
- หน้าตาของฟอร์ม, ปุ่ม, และตารางต้องมีความสอดคล้องกัน
การรองรับทุกอุปกรณ์ (Responsive Design):
- ระบบต้องแสดงผลได้อย่างสมบูรณ์และสวยงามทั้งบน คอมพิวเตอร์, แท็บเล็ต, และโทรศัพท์มือถือ โดยไม่มีส่วนใดส่วนหนึ่งของหน้าจอถูกตัดหรือใช้งานไม่ได้

Prompt สำหรับ AI: สร้างระบบส่งงานนักเรียนด้วย Google Apps Script (เวอร์ชันปรับปรุง)

คำสั่ง: โปรดสร้าง Google Apps Script สำหรับ "ระบบส่งงานนักเรียน" โดยใช้ Google Sheets เป็นฐานข้อมูล ระบบจะต้องประกอบด้วย 3 ไฟล์หลัก: Code.gs, Index.html, และ Style.html ตามรายละเอียดที่ปรับปรุงใหม่ดังต่อไปนี้

1. ภาพรวมและข้อกำหนดของระบบ

เป้าหมาย: สร้าง Web App ให้นักเรียนสามารถส่งงานได้ โดยข้อมูลการส่งและไฟล์งานจะถูกจัดเก็บอย่างเป็นระบบตามข้อกำหนด

ฐานข้อมูล (Google Sheets):

ใช้ Spreadsheet ที่มี ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

ชีตที่ 1 (ข้อมูลนำเข้า):

ชื่อชีต: รายชื่อนักเรียน

คอลัมน์ที่ต้องมี: รหัสนักเรียน, ชื่อ-สกุล, รายวิชา, และ ชั้น

ชีตที่ 2 (ข้อมูลผลลัพธ์):

ชื่อชีต: บันทึกการส่งงาน (ให้สร้างขึ้นอัตโนมัติหากยังไม่มี)

หัวข้อคอลัมน์: Timestamp, รหัสนักเรียน, ชื่อ-สกุล, รายวิชา, ชั้น, ประเภทงาน, งานชิ้นที่, ชื่องาน/หัวข้องาน, และ ลิงก์ไฟล์งาน

ที่เก็บไฟล์ (Google Drive):

ใช้โฟลเดอร์หลักชื่อ ไฟล์ระบบส่งงานนักเรียน2025 ซึ่งมี ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

ภายในโฟลเดอร์หลัก ให้สร้างโฟลเดอร์ย่อยสำหรับแต่ละ รายวิชา โดยอัตโนมัติ (เช่น พื้นฐานการพัฒนาโปรแกรม) เพื่อเก็บไฟล์งานของวิชานั้นๆ

2. รายละเอียดของแต่ละไฟล์

ไฟล์ที่ 1: Code.gs (Server-Side Logic)

doGet(e):

ฟังก์ชันหลักสำหรับแสดงผล Web App

ต้องคืนค่าเป็น HtmlTemplate จากไฟล์ Index.html

getClasses():

อ่านข้อมูลจากชีต รายชื่อนักเรียน ใน Spreadsheet ที่ระบุ ID ไว้

ดึงข้อมูลเฉพาะคอลัมน์ ชั้น และคืนค่าเป็น Array ของชื่อชั้นที่ไม่ซ้ำกัน

getSubjectsByClass(selectedClass):

รับพารามิเตอร์ selectedClass

กรองข้อมูลจากชีต รายชื่อนักเรียน เพื่อค้นหารายวิชาทั้งหมดที่มีในชั้นเรียนนั้น

คืนค่าเป็น Array ของชื่อวิชาที่ไม่ซ้ำกันสำหรับชั้นเรียนนั้น

getStudents(selectedClass, selectedSubject):

รับพารามิเตอร์ selectedClass และ selectedSubject

กรองข้อมูลเฉพาะนักเรียนที่อยู่ในชั้นและวิชาที่ระบุ

คืนค่าเป็น Array ของ Object ซึ่งแต่ละ Object ประกอบด้วย { id: 'รหัสนักเรียน', name: 'ชื่อ-สกุล' }

processForm(formObject, fileData):

ฟังก์ชันหลักในการประมวลผลการส่งงาน

ขั้นตอนการทำงาน:

รับข้อมูลฟอร์ม (formObject) และข้อมูลไฟล์ (fileData ที่แปลงเป็น base64)

ถอดรหัส fileData กลับเป็น Blob

ใช้ ID โฟลเดอร์ xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx เพื่อเข้าถึงโฟลเดอร์หลัก

ค้นหาหรือสร้างโฟลเดอร์ย่อยสำหรับ รายวิชา ที่ส่งมา ภายในโฟลเดอร์หลัก

สร้างไฟล์ในโฟลเดอร์ย่อยนั้น โดยตั้งชื่อไฟล์ตามรูปแบบ: [รหัสนักเรียน]_[ชื่อ-สกุล]_[ชื่องาน].

ดึง URL ของไฟล์ที่สร้างขึ้นใหม่

เปิดชีต บันทึกการส่งงาน และเพิ่มแถวใหม่พร้อมข้อมูลตามลำดับ: Timestamp (เวลาปัจจุบัน), รหัสนักเรียน, ชื่อ-สกุล, รายวิชา, ชั้น, ประเภทงาน, งานชิ้นที่, ชื่องาน/หัวข้องาน, และ ลิงก์ไฟล์งาน

คืนค่าเป็น Object เพื่อบอกสถานะ เช่น { status: 'success', message: 'ส่งงานเรียบร้อยแล้ว' }

ไฟล์ที่ 2: Index.html (User Interface)

โครงสร้าง: ใช้ HTML5 และต้องมีการเรียกใช้ไฟล์ Style.html

องค์ประกอบในฟอร์ม:

<h2> สำหรับหัวข้อ "ระบบส่งงานนักเรียน"

Dropdown สำหรับ "ชั้น": id classSelect

Dropdown สำหรับ "รายวิชา": id subjectSelect (ถูกปิดใช้งานในตอนแรก)

Dropdown สำหรับ "ชื่อ-สกุล": id studentSelect (ถูกปิดใช้งานในตอนแรก)

Dropdown สำหรับ "ประเภทงาน": id assignmentType (เช่น ตัวเลือก: งานเดี่ยว, งานกลุ่ม, สอบแก้ตัว)

Text/Number input สำหรับ "งานชิ้นที่": id assignmentNumber, เป็น required

Text input สำหรับ "ชื่องาน/หัวข้องาน": id assignmentTitle, เป็น required

File input: id fileInput, เป็น required

Submit button: ข้อความ "ส่งงาน"

Div สำหรับแสดงสถานะ: id status

ส่วนของ Script (ภายในแท็ก <script>):

เมื่อหน้าเว็บโหลดเสร็จ: เรียก getClasses มาใส่ใน Dropdown classSelect

เมื่อมีการเลือกชั้น: เรียก getSubjectsByClass เพื่อนำข้อมูลมาใส่ใน Dropdown subjectSelect และเปิดให้ใช้งาน

เมื่อมีการเลือกวิชา: เรียก getStudents เพื่อนำข้อมูลมาใส่ใน Dropdown studentSelect และเปิดให้ใช้งาน

เมื่อกดปุ่มส่งงาน:

ป้องกันการรีเฟรชหน้า (event.preventDefault())

แสดงสถานะ "กำลังอัปโหลดไฟล์..."

ใช้ FileReader เพื่ออ่านข้อมูลไฟล์เป็น base64

สร้าง formObject จากข้อมูลในฟอร์มทั้งหมด

เรียกใช้ google.script.run.processForm(formObject, fileData)

มี withSuccessHandler เพื่อแสดงข้อความสำเร็จและรีเซ็ตฟอร์ม

มี withFailureHandler เพื่อแสดงข้อความผิดพลาด

ไฟล์ที่ 3: Style.html (CSS Styling)

ใช้ CSS เพื่อตกแต่งหน้าเว็บให้สวยงาม ทันสมัย และใช้งานง่าย

ข้อกำหนด:

จัดวางฟอร์มให้อยู่กึ่งกลางหน้าจอ

ใช้ฟอนต์ที่อ่านง่าย (เช่น 'Sarabun' หรือ 'Kanit' จาก Google Fonts)

ออกแบบให้รองรับการแสดงผลบนมือถือ (Responsive Design)

ปุ่มและช่องกรอกข้อมูลต้องมีสไตล์ที่ชัดเจนและน่าใช้งาน

มีสไตล์สำหรับข้อความสถานะ (เช่น สีเขียวสำหรับสำเร็จ, สีแดงสำหรับผิดพลาด)

อัปเดตไฟล์ CSS ใน Canvas ของคุณให้มีไอคอนสไตล์เกมสงครามตามที่คุณต้องการครับโฉมหน้าเว็บแอปของคุณให้เป็นสไตล์ "เกมสงคราม" สุดเท่ โดยใช้รูปภาพที่คุณให้มาเป็นพื้นหลัง พร้อมปรับดีไซน์องค์ประกอบต่างๆ ให้เข้ากับธีม

การแจ้งเตือน telegram เมื่อมีการส่ง ฟอร์ม

ต่อไป เมื่อส่งฟอร์มแล้วให้ แจ้งเตือน telegram เมื่อมีการส่ง ฟอร์ม ข้อมูลทุกอย่าง+ไอคอน

telegramToken = xxxxxxxxxxxxxxxxxxx'

chatId = #-xxxxxxxxxxxxxxxx

เมื่อมีการส่งงานเฉพาะลิงก์ (ไม่มีไฟล์แนบ) ระบบจะจัดรูปแบบข้อความใหม่โดยนำลิงก์ไปวางไว้ท้ายสุดของข้อความ ซึ่งเป็นวิธีที่โปรแกรม Telegram บนทุกแพลตฟอร์ม (รวมถึงคอมพิวเตอร์) จะสามารถตรวจจับและสร้างตัวอย่างลิงก์ให้แสดงผลได้

หากมีการส่งงานที่มีทั้งไฟล์และลิงก์พร้อมกัน: ระบบจะส่งการแจ้งเตือน 2 ข้อความ คือ ข้อความแรกจะเป็นไฟล์พร้อมรายละเอียด และข้อความที่สองจะเป็นลิงก์พร้อมตัวอย่างเว็บ (Link Preview) เพื่อให้แน่ใจว่าคุณจะไม่พลาดการแสดงตัวอย่างของลิงก์

หากส่งลิงก์อย่างเดียว: ระบบจะยังคงส่งข้อความเดียวพร้อมตัวอย่างลิงก์เหมือนเดิม

ตัวอย่างลิงก์ (Link Preview) แสดงผลบนมือถือแสดงบนคอมพิวเตอร์

Prompt สร้างเกมการศึกษา

Prompt 1 : คุณคือผู้เชี่ยวชาญในการพัฒนาเกม ช่วยสร้างเกมตอบคำถาม (Quiz Game) เรื่อง ชนิดของคำ วิชาภาษาไทย สำหรับนักเรียนชั้น ม.1 จำนวน 10 ข้อ ให้มีระบบคะแนน มีคำอธิบายวิธีเล่นก่อนเริ่มเกมและมีการสรุปข้อมูลเมื่อจบเกม จับเวลาข้อละ 1 นาที หมดเวลาให้จบเกม ตอบถูก +1 คะแนนตอบผิด -1 คะแนน ตกแต่งให้สวยงาม มีอีโมติคอน พื้นหลังแบบไล่โทนสีชมพูฟ้าและสร้างเป็นภาษา HTML

Prompt 2 : คุณคือผู้เชี่ยวชาญในการพัฒนาเกม ช่วยสร้างเกมจับคู่ (Matching Game) เรื่อง คำศัพท์ภาษาอังกฤษกับคำแปลไทย สำหรับนักเรียนชั้น ม.2 จำนวน 10 คำศัพท์ ให้มีระบบคะแนน มีการจับเวลา 10 นาที มีคำอธิบายวิธีเล่นก่อนเริ่มเกมและมีการสรุปข้อมูลเมื่อจบเกม ตกแต่งให้สวยงาม มีอีโมติคอน พื้นหลังแบบไล่โทนสีเหลืองฟ้าและสร้างเป็นภาษา HTML

Prompt 3 : คุณคือผู้เชี่ยวชาญในการพัฒนาเกม ช่วยสร้างเกมถูกผิด (TrueFalse Game) เรื่อง ระบบสุริยะจักรวาล สำหรับนักเรียนชั้น ม.1 จำนวน 10 ข้อ ให้มีระบบคะแนน มีการจับเวลา 10 นาที มีคำอธิบายวิธีเล่นก่อนเริ่มเกมและมีการสรุปข้อมูลเมื่อจบเกม ตอบถูก +1 คะแนน ตอบผิด -1 คะแนน หมดเวลาคือจบเกม ตกแต่งให้สวยงาม มีอีโมติคอน พื้นหลังแบบไล่โทนสีน้ำตาลอ่อนเหลืองอ่อนและสร้างเป็นภาษา HTML

Prompt 4 : คุณคือผู้เชี่ยวชาญในการพัฒนาเกม ช่วยสร้างเกมเติมคำ

(Fill in the blanks) เรื่อง ประโยคภาษาอังกฤษในชีวิตประจำวัน โดยพิมพ์คำตอบลงในช่องว่าง จำนวน 10 ประโยค มี 10 คำตอบ ให้มีระบบคะแนน มีการจับเวลา 10 นาที มีคำอธิบายวิธีเล่นก่อนเริ่มเกมและมีการสรุปข้อมูลเมื่อจบเกม ตอบถูก +1 คะแนน ตอบผิด -1 คะแนนตกแต่งให้สวยงาม มีอีโมติคอน พื้นหลังแบบไล่โทนสีเขียวเหลืองและสร้างเป็นภาษา HTML

ระบบสุริยะ",

78 "ดาวพุธ",

79 "ดาวพฤหัสบดี",

80 "365.26",

81 "ดาวโลก",

82 "ใหญ่ที่สุด",

83 "ดาวศุกร์",

84 "ดาวศุกร์",

85 "ดาวพฤหัสบดี",

86 "ดาวเนปจูน"

Prompt 5 : คุณคือผู้เชี่ยวชาญในการพัฒนาเกม ช่วยสร้างเกมปริศนา (Puzzle Game) เรื่อง ระบบจำนวน สำหรับนักเรียนชั้น ม.1 คำถามปรนัย 4 ตัวเลือก 5 ข้อ คำถามแบบเติมคำ 2 ข้อ คำถามถูกผิด 3 ข้อ ให้มีระบบคะแนน มีการจับเวลา 10 นาที มีคำอธิบายวิธีเล่นก่อนเริ่มเกมและมีการสรุปข้อมูลเมื่อจบเกม ตอบถูก +1 คะแนน ตอบผิด -1 คะแนน หมดเวลาคือจบเกม ตกแต่งให้สวยงามทันสมัย มีอีโมติคอน พื้นหลังแบบไล่โทนสีฟ้าอ่อนสีชมพูอ่อนและสร้างเป็นภาษา HTML

Prompt 6 : คุณคือผู้เชี่ยวชาญในการพัฒนาเกม ช่วยสร้างเกมตอบคำถามที่มีเป้าหมายเพื่อพัฒนาความฉลาดรู้ด้านการอ่าน PISA สำหรับนักเรียน ป.3 เพื่อประเมินการรู้ตำแหน่งข้อสนเทศในบทอ่าน การมีความเข้าใจในบทอ่าน และ การสะท้อนความคิดเห็นต่อบทอ่าน ให้เกมมี 4 ด่าน โดยสร้างบทอ่านด่านละ 3 บรรทัด แต่ละด่านมีคำถามเกี่ยวกับ 1.การรู้ตำแหน่งข้อสนเทศในบทอ่าน 2.การมีความเข้าใจในบทอ่าน และ 3.การประเมินและสะท้อนความคิดเห็นต่อบทอ่าน ด่านที่ 1 เรื่อง สถานการณ์ส่วนบุคคล (Personal) ด่านที่ 2 เรื่อง สถานการณ์สาธารณะ (Public) ด่านที่ 3 เรื่อง สถานการณ์ทางการศึกษา (Educational) ด่านที่ 4 เรื่อง สถานการณ์ทางการงานอาชีพ (Occupational) พร้อมสร้างคำถามที่เกี่ยวข้อง มีหน้าสรุปเกม มีการจับเวลาอย่างเหมาะสม มีการสะสมคะแนน ตอบถูก +1 คะแนน ตอบผิด -1 คะแนน สร้างเกมให้ใช้งานง่ายดึงดูดผู้เล่นทุกช่วงวัย ใส่อีโมติคอน ตกแต่งให้สวยงามทันสมัย สร้างเกมเป็นภาษา HTML

Prompt 7 : คุณคือผู้เชี่ยวชาญในการพัฒนาเกม ช่วยสร้างเกมบิงโก เรื่อง ตารางธาตุ ขนาด 5x5 มีคำอธิบายวิธีเล่นก่อนเริ่มเกมและมีการสรุปข้อมูลเมื่อจบเกม ตกแต่งให้สวยงาม มีอีโมติคอน พื้นหลังแบบไล่โทนสีฟ้าเขียวและสร้างเป็นภาษา HTML

Prompt 8 : คุณคือผู้เชี่ยวชาญในการพัฒนาเกม ช่วยสร้างเกมปริศนาอักษรไขว้(Crossword puzzle game) เรื่อง ชนิดกีฬาภาษาอังกฤษ จำนวน 5 ชนิดกีฬา มีคำอธิบายวิธีเล่นก่อนเริ่มเกมและมีการสรุปข้อมูลเมื่อจบเกม ตกแต่งให้สวยงาม มีอีโมติคอน พื้นหลังแบบไล่โทนสีฟ้าเขียวและสร้างเป็นภาษา HTML

Prompt 6 : คุณคือผู้เชี่ยวชาญในการพัฒนาเกม ช่วยสร้างเกมซูดูกุ(sudoku game) 3 ระดับ ง่าย ปานกลาง ยาก มีคำอธิบายวิธีเล่นก่อนเริ่มเกมและมีการสรุปข้อมูลเมื่อจบเกม ตกแต่งให้สวยงาม มีอีโมติคอน พื้นหลังแบบไล่โทนสีฟ้าม่วงและสร้างเป็นภาษา HTML

Prompt 6 : คุณคือผู้เชี่ยวชาญในการพัฒนาเกม ช่วยสร้างเกมตอบคำถามแบบปรนัย เรื่อง สำนวนไทย วิชาภาษาไทย สำหรับนักเรียน ม.1 จำนวน 10 ข้อ กำหนดให้คำถามอยู่ฝั่งซ้าย ตารางจำนวนเงินรางวัลอยู่ฝั่งขวา ถ้าตอบถูกข้อที่ 1 จะได้รับเงิน 2,000 บาท ตอบถูกข้อที่ 2 จะได้รับเงิน 4,000 บาท ตอบถูกข้อที่ 3 จะได้รับเงิน 8,000 บาท ตอบถูกข้อที่ 4 จะได้รับเงิน 16,000 บาท ตอบถูกข้อที่ 5 จะได้รับเงิน 32,000 บาท ตอบถูกข้อที่ 6 จะได้รับเงิน 64,000 บาท ตอบถูกข้อที่ 7 จะได้รับเงิน 125,000 บาท ตอบถูกข้อที่ 8 จะได้รับเงิน 250,000 บาท ตอบถูกข้อที่ 9 จะได้รับเงิน 500,000 บาท ตอบถูกข้อที่ 10 จะได้รับเงิน 1,000,000 บาท มีการจับเวลาข้อละ 30 วินาที โดยให้มีความยากขึ้นเรื่อยๆ มีคำอธิบายวิธีเล่นก่อนเริ่มเกมและมีการสรุปข้อมูลเมื่อจบเกม ตกแต่งให้สวยงาม มีอีโมจิ พื้นหลังแบบไล่โทนสีน้ำเงินฟ้า สร้างเป็นภาษา HTMLและมีระบบเก็บสถิตินักเรียนที่เข้ามาเล่นด้วย

นำข้อความนี้ไปสร้างเป็นคำถามให้ครบ 10 คำถาม :

1.กระต่ายตื่นตูม หมายถึง ใช้เปรียบเทียบคนที่แสดงอาการตื่นตกใจง่ายโดยไม่ทันสำรวจให้ถ่องแท้ก่อน

2. ไก่ได้พลอย หมายถึง ได้สิ่งที่มีค่าแต่ไม่รู้คุณค่า จึงไม่เกิดประโยชน์

3. เขียนเสือให้วัวกลัว หมายถึง กระทำการเพื่อให้อีกฝ่ายหนึ่งเสียขวัญหรือเกรงขาม

4. ควันหลง หมายถึง เรื่องราวหรือเหตุการณ์ที่เคยเกิดขึ้นและผ่านไปแล้ว แต่ยังมีผลที่เกี่ยวเนื่องกับสิ่งนั้นหลงเหลืออยู่

5. ฆ่าช้างเอางา หมายถึง ทำลายสิ่งที่มีค่าสูงเพียงต้องการผลประโยชน์เล็กน้อย ซึ่งไม่คุ้มกัน

6. งมเข็มในมหาสมุทร หมายถึง ค้นหาสิ่งที่ยากจะค้นหาได้ สิ่งที่ทำสำเร็จได้ยาก

7. จับเสือมือเปล่า หมายถึง แสวงหาประโยชน์โดยตัวเองไม่ต้องลงทุน

8. ชักหน้าไม่ถึงหลัง หมายถึง มีรายได้ไม่พอกับรายจ่าย

9. เด็กเมื่อวานซืน หมายถึง คำกล่าวเชิงดูหมิ่นหรือเชิงสั่งสอนว่ามีความรู้หรือมีประสบการณ์น้อย

10. ตามีตามา หมายถึง ชาวบ้านทั่ว ๆ ไป

Page updated

Google Sites

Report abuse