เกมส์ตอบคำถามการตรวจซ่อมหุ่นยนต์ 10

เขียนโค้ดเกมแบบ AR (Augmented Reality) เขียนด้วย HTML, Tailwind CSS, และ JavaScript รวมอยู่ในไฟล์เดียว (.html) โดยใช้กล้องเว็บแคมและไลบรารี MediaPipe Hands สำหรับการตรวจจับมือ เพื่อใช้เป็นสื่อการสอนแบบ Active Learning ชื่อวิชา:หุ่นยนต์ ระดับชั้นที่สอน:ปวช.1 ธีมการออกแบบ: หุ่นยนต์ไฮเทค ล้ำยุค รายละเอียดของเกม: นักเรียนรับบทเป็น "วิศวกรหุ่นยนต์แห่งอนาคต" หุ่นยนต์กำลังเสีย ระบบควบคุมต้องการให้นักเรียนเลือกอุปกรณ์อิเล็กทรอนิกส์ที่ถูกต้องเพื่อซ่อมวงจร ผู้เล่นใช้ "นิ้วชี้" (MediaPipe Hands) แทนเมาส์ หยิบอุปกรณ์ที่ถูกต้องไปวางบนตำแหน่งของวงจร - ก่อนเริ่มเกม ให้พิมพ์ชื่อผู้เล่น - สุ่มลำดับคำถามทุกครั้งที่เริ่มเกม 6. ระบบการเฉลย: - เมื่อตอบคำถาม ให้หน้าจอแสดงว่า "ถูก" หรือ "ผิด" - หยุดเวลา 5 วินาที พร้อมแสดงคำอธิบายสั้นๆ เข้าใจง่าย เพื่อให้เด็กได้เรียนรู้ - เปลี่ยนไปข้อถัดไปโดยอัตโนมัติ 7. สรุปผล: มีหน้าสรุปคะแนนหลังเล่นจบ พร้อมข้อความให้กำลังใจ 8. กราฟิกและเสียง: - ธีมสี: ยุคไฮเทค ศิวิไล - หน้าจอต้องรองรับทั้งแนวตั้งและแนวนอน (Responsive) - มีเสียง Effect ขณะเล่น (เช่น เสียงปุ่ม, เสียงตอบถูก, เสียงตอบผิด) โดยใช้ Web Audio API สังเคราะห์เสียง ไม่ใช้ไฟล์เสียงจากภายนอก ช่วยปรับแก้ให้คำถามกับคำตอบที่เลือกให้อยู่ในหน้าจอเดียวกันเพื่อให้สะดวกในการอ่านคำถามและเลือกคำตอบ ช่วยปรับแก้ดังต่อไปนี้ 1.ช่องวางคำตอบให้เป็นรูปหุ่นยนต์ 2.ช่องคำถามให้เป็นหุ่นยนต์ 3.มีตัวเลือก 4 ตัวเลือก 4.นำคำถามขึ้นไปไว้ด้านบนของคำตอบ