"Quiz Battle" กระบวนการทางวิทยาศาสตร์

สร้างเกมการศึกษา "Quiz Battle" ในรูปแบบ Single File (HTML, CSS, JavaScript รวมกัน) โดยมีรายละเอียดดังนี้:1. ข้อมูลพื้นฐานและเนื้อหาชื่อเรื่อง: กระบวนการทางวิทยาศาสตร์กลุ่มเป้าหมาย: นักศึกษา ปวช.1จำนวนข้อ: 10 ข้อ (อ้างอิงเนื้อหาจากไฟล์ PDF เรื่องโครงสร้างและพลวัตของกระบวนการทางวิทยาศาสตร์)ประเด็นคำถาม: ครอบคลุมลำดับขั้นความรู้ (Fact ถึง Theory), ทักษะกระบวนการ 14 ประการ, วงจร 5E และจิตวิทยาศาสตร์2. ฟีเจอร์หลัก (Mechanics)ระบบลงทะเบียน: หน้าแรกต้องมีช่องกรอก ชื่อ-นามสกุล, รหัสนักศึกษา และแผนกวิชาระบบเกม: แสดงคำถามทีละข้อ ตัวเลือก 4 ข้อ (ก, ข, ค, ง)ตัวจับเวลา: 15 วินาทีต่อข้อ หากหมดเวลาให้ปรับเป็นตอบผิดทันทีFeedback: เมื่อเลือกคำตอบ ให้แสดงถูก/ผิดทันทีพร้อมสีที่ชัดเจน และมี "คำอธิบายเฉลย (Rationale)" ที่สรุปเนื้อหาให้เข้าใจง่ายProgress: มีแถบ Progress Bar ด้านบนแสดงความก้าวหน้าสรุปผล: แสดงคะแนนรวม, เกรด (A-F), ข้อมูลผู้เล่น และปุ่มเล่นใหม่3. การออกแบบและมาสคอต (Design & Mascot)ธีม: Modern Arcade Game สีสันสดใส (เช่น ม่วง, น้ำเงิน, ชมพู Neon)มาสคอต: มีตัวละครมาสคอตชื่อ "สปาร์คกี้ (Sparky)" เป็นหุ่นยนต์ที่มีแอนิเมชัน Bounce (ลอยดุ๊กดิ๊ก) และมีกล่องคำพูด (Speech Bubble) โต้ตอบกับผู้เล่นการตอบสนอง: มาสคอตต้องเปลี่ยนอารมณ์หรือสีหน้าตามผลคะแนนในตอนจบฟอนต์: ใช้ Google Fonts "Kanit" สำหรับเนื้อหาทั่วไป และ "Itim" สำหรับส่วนที่ต้องการความสนุกสนานResponsive: ต้องรองรับการแสดงผลสมบูรณ์ทั้งบนมือถือและคอมพิวเตอร์4. ระบบความปลอดภัย (Anti-Cheat)Window Blur Detection: ใส่ Logic ตรวจสอบว่าหากผู้เล่นสลับหน้าต่าง (Switch Tab) หรือออกจากหน้าเบราว์เซอร์ ให้แสดง Overlay แจ้งเตือนและยุติการทำข้อสอบทันที (Mission Failed)5. เทคนิคอล (Technical)เขียนโค้ดทั้งหมดให้อยู่ในไฟล์เดียว (Inline CSS & JS)ใช้ SVG สำหรับสร้างมาสคอตและไอคอน (ห้ามใช้ไฟล์ภาพภายนอกเพื่อให้ไฟล์ทำงานได้อิสระ)ใส่เอฟเฟกต์ Confetti เมื่อผู้เล่นได้คะแนนสูง (70% ขึ้นไป)