คลังโค้ดครู DevTech

เก็บคะแนนแบบทดสอบ

ระบบนี้สร้างจาก Canva AI ในการอบรม "สร้างสื่อการสอนอัจฉริยะด้วย Canva แบบไม่ต้องเขียนโค้ด" สามารถนำไปปรับใช้กับการทำแบบทดสอบออนไลน์ของครูได้เลย ใช้งานง่าย เก็บคะแนนอัตโนมัติ เหมาะกับการทำข้อสอบ/กิจกรรมออนไลน์| เงื่อนไขการใช้งาน แจกเพื่อการเรียนการสอนเท่านั้น ❌ ห้ามนำไปทำขายหรือใช้ในเชิงพาณิชย์เด็ดขาด จะทำวิดีโอสอนการทำไปใช้งานให้ภายหลัง วิธีการทำสำเนาและนำไปใช้งาน 1. แก้ไขไฟล์ index.html บรรทัดที่ 440 2. แก้ไขแบบทดสอบ

DQ Challenge Game ม.6 (Interactive Quiz)

DQ Challenge Game ม.6 (Interactive Quiz) 🎉 ปีการศึกษานี้ถ้าจะทำเกมตอบคำถามแบบเล่นเป็นทีมในห้องเรียน — ครูนุ่มมี App Script ให้ใช้ฟรี ทุกคนสามารถดาวน์โหลดไปแก้ไขต่อได้เลย 💡 ฟีเจอร์สำคัญ เก็บข้อมูลผู้เล่น: คำนำหน้า / ชื่อ / นามสกุล / เลขที่ / ชั้น (ม.6/1–ม.6/11) — ใส่ได้ทีมละไม่เกิน 4 คน จับเวลา/โหมดเล่นเป็นทีม (10 ข้อ สถานการณ์ DQ) คำตอบเป็น 8 หมวด DQ: Digital Identity, Digital Use, Digital Safety, Digital Security, Digital Emotional Intelligence, Digital Communication, Digital Literacy, Digital Rights ให้คะแนนอัตโนมัติ (ถูกคำตอบ = 1 คะแนน) รวมสูงสุด 10 คะแนน และสรุปผลคะแนนทีมท้ายเกม ส่งออกผลลัพธ์เป็น Google Sheet เพื่อจัดเกรด/สถิติได้ทันที ไฟล์สคริปต์สามารถแก้ไขโค้ด เพิ่มคำถาม หรือเปลี่ยนเวลาได้เต็มที่ — ใช้งานต่อได้ทั้งในห้องเรียนและกิจกรรมแข่งขัน 🎨 เหมาะสำหรับ คุณครูผู้สอน ม.6 ต้องการทำกิจกรรมในคาบเรียน อาจารย์แนะแนว หรือ ทีมกิจกรรมโรงเรียน ใครอยากทดลองออกแบบเกม DQ แบบกลุ่ม 🔓 สิทธิการใช้งาน แจกฟรี ใช้เพื่อการศึกษา ไม่อนุญาตให้ทำขายทุกกรณี ปรับแต่ง-แจกต่อได้ตามสะดวก (กรุณาให้เครดิตเล็กๆ ถ้านำไปแชร์ต่อจะดีมากค่า)

กระดานข้อความสด (Live Sticky Notes Board)

“Live Sticky Notes Board” 💬 กระดานข้อความสดแบบ Real-time ที่สร้างด้วย Canva AI + Google Sheet + Apps Script 📌 ระบบนี้ใช้ได้ทั้งในคอม มือถือ และแท็บเล็ต เมื่อใครพิมพ์ข้อความ ข้อความจะปรากฏบนกระดานสดทันที พร้อมเก็บข้อมูลไว้ใน Google Sheet อัตโนมัติ ✅ ⸻ 🔧 วิธีการทำสำเนา “Live Sticky Notes Board” 1️⃣ แก้ไข Sheet_ID • เปิดไฟล์ รหัส .gs → แก้ไขค่า SheetId บรรทัดที่ 459 • เปิดไฟล์ index.html → แก้ไขค่า SHEET_ID บรรทัดที่ 172 2️⃣ แก้ไข SCRIPT_URL • ในไฟล์ index.html แก้ URL ของสคริปต์ให้ตรงกับโปรเจกต์ของคุณเอง 💾 เมื่อแก้ไขครบแล้ว กด Deploy → Web App แล้วแชร์ลิงก์ให้ทุกคนเข้ามาพิมพ์ข้อความบนบอร์ดได้เลย 🎨✨

ระบบ Dashboard ด้วย Chart.js

เปลี่ยนข้อมูลแห้ง ๆ ให้ “สวย” และ “ขยับได้”! สร้าง Dashboard ด้วย Chart.js + ดึงข้อมูลจาก Google Sheet แบบ Real-time ใครยังเอาข้อมูลดิบ ๆ ใส่ Excel แล้วจบ… บอกเลยว่าคุณกำลังพลาดโอกาสโชว์งานแบบมืออาชีพมาก ๆ 😍 ตอนนี้เราสามารถสร้าง Dashboard สวย ๆ ที่อัปเดตเองอัตโนมัติ เพียงใช้ Chart.js ผสมกับ Google Sheet ก็ได้กราฟลื่น ๆ แบบ Real-time ไม่ต้องเปิดโปรแกรมหนัก ๆ อีกต่อไป! ✨ ความปังของวิธีนี้ • ✔️ ดึงข้อมูลจาก Google Sheet ได้ทันที ไม่ต้องทำ API ซับซ้อน • ✔️ อัปเดตข้อมูลปุ๊บ กราฟเปลี่ยนปั๊บ! • ✔️ ใช้ Chart.js สร้างกราฟสวย ๆ ได้หลายแบบ • ✔️ ดูข้อมูลบนมือถือ/คอมได้หมด • ✔️ เอาไปฝังบนเว็บไซต์หรือระบบงานโรงเรียนก็ได้ 📌 เหมาะกับ • ครูที่ต้องสรุปข้อมูลนักเรียน • ผู้ดูแลระบบที่ต้องรายงานผลแบบอัปเดตสด • นักเรียนที่อยากทำโครงงานให้ดู “โปร” • คนทำงานที่อยากทำ Dashboard แบบง่ายแต่ดูดีมาก ยุคนี้ข้อมูลไม่ควรหยุดนิ่ง! ถึงเวลาแปลงข้อมูลธรรมดาให้ “เล่าเรื่องได้” และ “ดูแพงขึ้นทันที” ด้วย Dashboard ของคุณเอง 🚀

ระบบรายงานพยาบาลตรวจการ

#ระบบบันทึกและสรุปข้อมูลพยาบาลตรวจการ (Nursing Supervisor Report System) จากปัญหางานกระดาษกองโต รายงานล่าช้า และการสรุปข้อมูลที่ต้องนั่งรวมตัวเลขเองทุกวัน… ครูนุ่มเลยจัดให้ 💙 ระบบ Web Application ขนาดเล็ก แต่พลังใหญ่! ระบบนี้พัฒนาด้วย 👉 Google Apps Script 👉 ใช้ Google Sheets เป็นฐานข้อมูล ฟรี 100% ไม่ต้องเช่าโฮสติ้ง ไม่ต้องติดตั้งเซิร์ฟเวอร์ ✨ ──────────────────── 🔹 ระบบนี้ทำอะไรได้บ้าง? ✅ 1. หน้าบันทึกข้อมูล (Responsive ใช้ในมือถือได้สบาย) พยาบาลตรวจการกรอกข้อมูลได้ทันที เช่น • วันที่ / เวร • ชื่อพยาบาล • หอผู้ป่วย • สถานะอัตรากำลัง • ยอดผู้ป่วยรวม / ผู้ป่วยหนัก • ปัญหา / ข้อเสนอแนะ พร้อมระบบป้องกันกดซ้ำ + แจ้งเตือนเมื่อบันทึกสำเร็จ ──────────────────── ✅ 2. หน้าสรุปเวรประจำวัน (Dashboard) ผู้บริหารเลือก “วันที่” แล้วดูภาพรวมได้ทันที มีการ์ดสรุป 4 ค่าอัตโนมัติ 📌 จำนวนแผนกที่ตรวจ 📌 ยอดผู้ป่วยรวม 📌 ผู้ป่วยหนัก 📌 แผนกที่ขาดแคลนอัตรากำลัง พร้อมรายละเอียดรายแผนกแบบแยกกล่อง อ่านง่าย เห็นปัญหาชัด ──────────────────── ✅ 3. ระบบหลังบ้าน (API อัจฉริยะ) • Routing เปิดหน้าอัตโนมัติตาม URL • บันทึกข้อมูลลงชีตแบบ Append พร้อม Timestamp • ดึงข้อมูลเฉพาะวันมาแสดงผลทันที ──────────────────── ✅ 4. ฐานข้อมูลพร้อมต่อยอด ข้อมูลทั้งหมดเก็บใน Google Sheets สามารถนำไปทำรายงานภาพรวมรายเดือน/รายปีต่อใน Looker Studio ได้ทันที ──────────────────── 💙 จุดเด่นของระบบนี้ ✔ ฟรี 100% บน Server ของ Google ✔ ลดกระดาษ ลดงานซ้ำซ้อน ✔ ดีไซน์ทันสมัย โทนฟ้าการแพทย์ (Tailwind CSS) ✔ โหลดเร็ว ปลอดภัย ใช้งานง่าย ใครอยู่สายสาธารณสุข โรงพยาบาล คลินิก หรือหน่วยงานรัฐ เอาไปใช้ต่อยอดได้เลยค่ะ 🙌

ระบบขออนุมัติงบประมาณออนไลน์

“ระบบขออนุมัติงบประมาณ” ❌ ไม่อนุญาตให้นำไปจำหน่ายทุกกรณี ใครกำลังมองหาระบบขออนุมัติงบแบบใช้งานง่าย ไม่ต้องมีเซิร์ฟเวอร์ ต้องลองตัวนี้เลย 💡 🔎 ภาพรวมการทำงานของระบบ 💻 1. ส่วนหน้าบ้าน (Frontend) • เป็นเว็บฟอร์ม รองรับทั้งมือถือและคอม (Responsive) • ดีไซน์ด้วย Tailwind CSS เรียบ สะอาด ใช้งานง่าย • กรอกข้อมูลสำคัญครบ: ▪️ ชื่อ-นามสกุล ▪️ แผนก/ฝ่าย ▪️ รายการที่ขอ ▪️ จำนวนเงิน ▪️ เหตุผลความจำเป็น • มี Loading + Pop-up แจ้งเตือนสวยๆ ด้วย SweetAlert2 • ป้องกันการกดส่งซ้ำ UX ดีมาก 👍 🔗 2. การเชื่อมต่อ (Bridge) • ใช้ google.script.run เชื่อมตรงเข้า Google Apps Script • ไม่ต้องเปิด API URL ให้เสี่ยง • ปลอดภัยกว่า และทำงานได้ลื่นไหล ⚙️ 3. ส่วนหลังบ้าน (Backend + Database) • ใช้ Google Apps Script (Code.gs) ประมวลผล • บันทึกข้อมูลลง Google Sheet อัตโนมัติ • มี Timestamp + ตั้งสถานะเริ่มต้น “รออนุมัติ” • ส่งผลกลับหน้าเว็บแบบ Real-time พร้อมแจ้ง “สำเร็จ!” ✅ ✨ สรุป นี่คือระบบ Serverless เต็มรูปแบบ ไม่ต้องเช่า Hosting ไม่ต้องดูแลเซิร์ฟเวอร์ ใช้แค่ Google ก็จบ ครบ จบในตัวเดียว! 🎯 เหมาะกับ: • โรงเรียน • หน่วยงานราชการ • องค์กรที่ต้องการระบบอนุมัติงบง่ายๆ • คนที่อยากเริ่มใช้ Web App แบบไม่ยุ่งยาก 📌 โหลดไปใช้ ปรับต่อได้เต็มที่ แต่ “ห้ามนำไปขาย” นะคะ ❤️