นิตยสาร สสวท. ฉบับที่ 256

ปีที่ 53 ฉบับที่ 256 กันยายน - ตุลาคม 2568 | 17 3. ตัวอย่างเกมดุลสมการเคมี https://bit.ly/Deawbalance (เว็บไซต์) https://bit.ly/ChemBalancePP (งานนำ �เสนอ) เกมดุลสมการเป็นเกมที่ให้ผู้เล่นสามารถเปลี่ยนเล่นสัมประสิทธิ์หน้าสารเคมีในสมการเคมีและให้ผู้เล่นเห็นภาพจำ �นวนอะตอม แต่ละชนิดที่เปลี่ยนไปในสมการเคมี ซึ่งช่วยในการดุลสมการเคมี โดยในเกมนี้ได้เลือกสมการเคมีจำ �นวน 10 สมการ จากทั้งหมด 30 สมการ มาตั้งเป็นโจทย์คำ �ถาม เกมดุลสมการสามารถใช้ prompt ในการสร้างดังนี้ สร้างเกมเว็บแอปพลิเคชันสำ �หรับฝึกดุลสมการเคมี โดยมีคุณสมบัติดังนี้ ฟีเจอร์หลัก: เกมแบบ 10 ข้อ สุ่มจากธนาคารสมการเคมี 30 สมการ ระบบแสดงอะตอมเป็นรูปทรงสีสันสวยงาม แต่ละธาตุมีสีเฉพาะ การนับอะตอมที่แม่นยำ � รองรับสูตรซับซ้อน เช่น Ca(OH) 2 Cu(NO3) 2 ระบบตรวจสอบการดุลแบบเรียลไทม์ (สีเขียว=ดุล สีแดง=ไม่ดุล) คะแนนและระบบติดตามความคืบหน้า ระบบการแสดงผล: แสดงสมการเคมีพร้อมช่องใส่ตัวเลขสัมประสิทธิ์ แสดงจำ �นวนอะตอมแต่ละชนิดเป็นวงกลมสีต่างๆ (H=แดง O=เขียวอ่อน C=ดำ � N=ฟ้า ฯลฯ) แบ่งแสดงสารตั้งต้น (Reactants) และผลิตภัณฑ์ (Products) แยกคอลัมน์ พื้นหลังเปลี่ยนสีตามสถานะการดุล ตัวอย่างสมการที่ต้องรองรับ: H 2 + O 2 → H 2 O Ca + H 2 O → Ca(OH) 2 + H 2 Cu + AgNO 3 → Cu(NO 3 ) 2 + Ag C 6 H 12 O 6 + O 2 → CO 2 + H 2 O Al 2 O 3 + HCl → AlCl 3 + H 2 O ข้อกำ �หนดเทคนิค: ใช้ HTML CSS (Tailwind) JavaScript แบบ Self-contained ระบบแปลงตัวเลขห้อย (2, 3, 4...) ให้ถูกต้อง จัดการวงเล็บและตัวเลขห้อยหลังวงเล็บ เช่น (OH) 2 ออกแบบ Responsive ใช้งานได้ทุกอุปกรณ์ ฟอนต์ภาษาไทย Sarabun จาก Google Fonts การออกแบบ: สีหลัก: ม่วง-น้ำ �เงิน Gradient การ์ดสีขาวมีเงา ปุ่มสีสันสวยงามพร้อม Hover Effects แอนิเมชันเมื่อตอบถูก Modal แสดงผลสรุปเมื่อจบเกม UI/UX: หัวข้อและคำ �อธิบายเป็นภาษาไทย