Prompt: วิดีโอประกอบ Lego อาคารเรียน
แค่นำ Prompt นี้ ไปใช้กับ Google Flow และเนียบรูปตึกเข้าไปก็จะได้วิดีโอแล้ว
---------------------------------------------------------------
Create a 10-second cinematic stop-motion video showing a miniature architectural scale model of a 4-story Thai school building being assembled piece by piece on a wooden table inside a cozy classroom background.
Scene 1 — 0:00–0:01: Top-down view of all miniature modular architectural pieces (beige walls, maroon pillars, sunshade louvers, windows, and miniature trees) neatly organized on a warm wooden desk. The parts slightly shift and organize with a satisfying stop-motion effect. Add a quick energetic "whoosh" sound.
Scene 2 — 0:01–0:02: Macro close-up of the foundation/baseboard on the wooden table. The ground floor structure, miniature pillars, and entrance frames snap together smoothly layer by layer. Add realistic "click-clack" snap sounds.
Scene 3 — 0:02–0:04: Stop-motion assembly of the 2nd, 3rd, and 4th floors. Floor slabs, outer corridors, balconies, vertical wooden-slat louvers, and pinkish-beige wall panels slide into place with precise mechanical alignment.
Scene 4 — 0:04–0:05: The maroon gabled roof and top structural cap snap perfectly onto the top floor, locking the building architecture into its final complete form.
Scene 5 — 0:05–0:06: Macro close-up of the blank flat side wall. A golden Thai Buddhist Dharma Wheel emblem (Sema Dharmachakra logo as shown in reference) floats in and magnetically presses into the center of the outer wall, locking firmly in place.
Scene 6 — 0:06–0:08: Dramatic hero shot. The camera slowly pans around the completed miniature school building model resting on the wooden table. Soft natural light streams in through the classroom windows in the blurred background (chalkboard, desks slightly visible).
Scene 7 — 0:08–0:10: Slow pull-back revealing the full school model with tiny landscaped trees and miniature cars on the wooden tabletop, ending in a crisp cinematic hero frame.
Visual Style: Highly detailed miniature architectural model stop-motion, realistic matte textures, smooth frame-by-frame movement, soft warm classroom ambient lighting, shallow depth of field (bokeh background showing classroom interior), sharp architectural details, satisfying assembly snaps, 4K resolution, realistic miniature shadows.
Camera: Top-down overview, macro close-up snaps, dynamic orbiting hero pan, smooth slow zoom-out.
Audio: Crisp plastic/wood snap sounds, light tactile clicks, subtle ambient classroom hum, uplifting inspiring acoustic background music.
Important: Keep the building design, 4-story proportions, maroon and beige color palette, vertical facade louvers, and the golden Dharma Wheel emblem consistent with the provided reference images throughout the entire video.
ครูคอปเตอร์
แชร์
เพจสำหรับการแบ่งปันเทคนิคการใช้ AI เพื่อครูยุคใหม่ ให้การสอนง่ายขึ้น สนุกขึ้น
ติดต่อ 061-4285982
จำลองโครงสร้าง DNA ด้วย Gemini แต่ใช้ Prompt ว่า "show me DNA 3D,” to get your interactive visualization."
#ครูคอปเตอร์
27/08/2026
รวม AI สร้างวิดีโอระดับท็อปปี 2026 ที่สายคอนเทนต์ต้องมีติดตัว
1️⃣Wan (Wan2.1 / Alibaba): AI โมเดลโอเพนซอร์สสุดโหดจาก Alibaba โดดเด่นเรื่องการเรนเดอร์ภาพคมชัดสูง และเข้าใจโครงสร้างภาษาที่ซับซ้อนได้อย่างแม่นยำ
2️⃣KLING AI: ตัวท็อปเรื่องความสมจริง การเคลื่อนไหวของมนุษย์มีความเป็นธรรมชาติสูง ฟิสิกส์เนียนตา และเจนคลิปยาวได้ต่อเนื่อง
3️⃣Flow (Google Flow / Web-flow tools): เครื่องมือผสานงานภาพและแอนิเมชัน ช่วยควบคุมทิศทางการเคลื่อนไหวของภาพให้ลื่นไหล
4️⃣ElevenLabs: นัมเบอร์วันเรื่องงานเสียง! แปลงข้อความเป็นเสียงพากย์ AI สุดเป็นธรรมชาติ (Voice Cloning) พร้อมสร้าง Sound Effects ประกอบคลิปได้สมจริง ตอนนี้สร้างวิดีโอได้แล้ว
5️⃣Hailuo AI (MiniMax): โดดเด่นด้านการขยับท่าทาง สีหน้า อารมณ์ของตัวละครอย่างสมจริง และสร้างมุมกล้องแนว Cinematic ที่ทรงพลัง
6️⃣MiniMax Design: แพลตฟอร์มผู้พัฒนาโมเดล AI ชั้นนำ ออกแบบมาเพื่องานสร้างสรรค์ทั้งวิดีโอ ภาพ และเสียงแบบครบวงจร
7️⃣CapCut: สุดยอดแอปตัดต่อขวัญใจครีเอเตอร์ มาพร้อมฟีเจอร์ AI Generator ในตัว เจนคลิป ซับไตเติลอัตโนมัติ และตัดต่อจบได้ในแอปเดียว
8️⃣ByteDance: บริษัทแม่ผู้พัฒนาเทคโนโลยี AI และอัลกอริทึมวิดีโอระดับโลก ที่ขับเคลื่อนแพลตฟอร์มคอนเทนต์ยุคใหม่
9️⃣Dreamina AI: AI เจนภาพและวิดีโอจากเครือ ByteDance/CapCut เปลี่ยนรูปนิ่งเป็นวิดีโอระดับพรีเมียมได้อย่างง่ายดาย
🔟LUMA AI (Dream Machine): ราชาแห่งงาน 3D และกล้อง Cinematic ขยับมุมกล้องได้อิสระ แสงเงาและฟิสิกส์ถูกต้องเหมือนถ่ายด้วยกล้องจริง
ใครเคยลองใช้ตัวไหนสร้างงานแล้วชอบที่สุด คอมเมนต์มาแชร์เทคนิคกันหน่อยครับ! 👇
#ครูคอปเตอร์ #วิดีโอเอไอ
..ยังคงทำงานวนไป..
26/08/2026
👉Elevenlabs เป็นแพลตฟอร์ม AI ที่โดดเด่นมากในเรื่องของการจัดการ "เสียง" (Audio AI) และในปัจจุบันได้ขยายขีดความสามารถมาครอบคลุมงานฝั่ง "วิดีโอ" (Video AI) ด้วยครับ เพื่อให้สายคอนเทนต์ทำงานได้ง่ายขึ้น
นี่คือความสามารถหลักๆ ของ Elevenlabs ครับ
Text-to-Speech (สร้างเสียงพากย์) พิมพ์ข้อความลงไป แล้วให้ AI อ่านออกเสียงได้แบบเป็นธรรมชาติมากๆ เหมือนคนพูดจริงๆ มีอารมณ์และจังหวะการหายใจ
Voice Cloning (โคลนเสียง) อัปโหลดไฟล์เสียงของเราเข้าไปให้ AI เรียนรู้ จากนั้นเราสามารถพิมพ์ข้อความให้ AI พูดด้วย "เสียงของเราเอง" ได้เลย
AI Video Dubbing (พากย์/แปลวิดีโออัตโนมัติ) อัปโหลดคลิปวิดีโอเข้าไป AI จะแปลภาษาและพากย์ทับเป็นภาษาอื่นให้ โดยพยายามรักษาโทนเสียงเดิม และปรับรูปปากให้ตรงกับภาษาใหม่
AI Sound Effects: สร้างเสียงเอฟเฟกต์ประกอบวิดีโอ (เช่น เสียงฝีเท้า, เสียงระเบิด, เสียงลม) จากการพิมพ์คำสั่ง (Prompt)
AI Video Generation ปัจจุบัน Elevenlabs มีการพัฒนาระบบนิเวศสำหรับวิดีโอ ไม่ว่าจะเป็นการสร้างภาพ/วิดีโอประกอบเสียง หรือร่วมมือกับเครื่องมือสร้างวิดีโอ AI อื่นๆ เพื่อให้จบงานคลิปได้ในที่เดียว
#ครูคอปเตอร์
วิดีโอที่สร้างจาก Minimax Design
#ครูคอปเตอร์
24/08/2026
คุณสมบัติเด่นของ MiniMax Design Agent-Driven Workflow: ทำงานร่วมกันในลักษณะ "ทีม AI" โดยผู้ใช้ใส่เพียงเป้าหมายหลัก จากนั้นระบบ AI Agents จะช่วยวางแผนและผลิตงานตั้งแต่ต้นจนจบโดยอัตโนมัติ
Commercial Creation: ออกแบบมาสำหรับการผลิตวิดีโอโฆษณา, คอนเทนต์ E-commerce, วิดีโอสั้น, และงาน Motion Graphics
บเคลื่อนด้วยโมเดลทรงพลัง: ใช้ขุมพลังหลักจากโมเดลวิดีโอ Multimodal เจนเนอเรชันใหม่อย่าง Hailuo H3 ในการสร้างและตัดต่อวิดีโอความละเอียดสูง รวมถึงทำงานร่วมกับโมเดลสายเอเจนต์และโค้ดดิ้งอย่าง MiniMax M3
ดาวน์โหลดและติดตั้งที่เครื่อง รับฟรี 3000 เครดิต
#ครูคอปเตอร์
24/08/2026
วิธีใช้งานง่ายๆ
1. เข้าไปที่ DeepSeek (deepseek.com)
2. แนบไฟล์ Excel ที่ต้องการนำไปสร้าง Dashboard
3. พิมพ์Prompt บอกสิ่งที่ต้องการ เช่น:
"สร้างแดชบอร์ดการศึกษาด้วย HTML+Chart.js มี KPI, กราฟแนวโน้ม, กราฟเปรียบเทียบวิชา และตารางแจ้งเตือน"
4. กดปุ่ม Run เพื่อดูตัวอย่าง
5. Copy โค้ด ที่ DeepSeek ให้ หรือ
6. Save เป็นไฟล์ .html เปิดด้วย Chrome
#ครูคอปเตอร์
24/08/2026
Prompt Game Hand Tracking gกม SORT GAME: “นักสืบหลักฐานทางประวัติศาสตร์
----------------------------------------------------
วิธีการสร้างเกม
1.เข้าไปที่ Gemini
2. เลือก Tool ให้เป็น Canvas
3. เปลี่ยน Model ให้เห็น Pro หรือ Flash
4. คัดลอก Prompt ด่านล่าง สามารถเปลี่ยนคำนามได้
5. กด Generate (ลูกศรสีฟ้า) แล้วรอให้ Gemini สร้างเกมให้เลย
6. กด Share เพื่อเผยแพร่ให้นักเรียนเข้าเล่นได้เลย
#ครูคอปเตอร์ #เกมการเรียนรู้
Prompt
คุณคือ Senior Web Game Developer, Game Designer และผู้เชี่ยวชาญ EdTech
ภารกิจ:
สร้างเกมสื่อการสอน AR Hand Tracking แบบ Single HTML File ที่พร้อมใช้งานทันทีในเว็บเบราว์เซอร์ โดยเขียน HTML, CSS และ JavaScript ครบในไฟล์เดียว ไม่ต้องพึ่ง build tool
จงเขียนโค้ดเกมสื่อการสอน AR Web Application แบบไฟล์ HTML เดียวจบ สำหรับผู้เรียนระดับ ป.4
กลุ่มสาระ: สังคมศึกษา
เรื่อง: เกม SORT GAME: “นักสืบหลักฐานทางประวัติศาสตร์
ข้อมูลตั้งต้นของเกม:
```json
{
"grade": "ป.4",
"subject": "สังคมศึกษา",
"topic": "เกม SORT GAME: “นักสืบหลักฐานทางประวัติศาสตร์",
"gameType": "Sorting Game",
"gesture": "จีบค้างแล้วลาก – Pinch & Drag",
"theme": "Jungle Quest",
"backgroundMode": "ใช้กล้องเป็นพื้นหลัง",
"backgroundImage": {
"id": "bright-classroom",
"title": "ห้องเรียนสดใส",
"category": "ห้องเรียน",
"url": "https://prompt-library-for-teacher.vercel.app/pic/backgrounds/ar-bg-01-bright-classroom.svg",
"instruction": "ใช้เป็นฉากห้องเรียนสดใส โดยให้พื้นที่กลางสีขาวเป็นพื้นที่หลักของคำถามและคำตอบ"
},
"audioStyle": "Pop Arcade",
"items": [
{
"categories": [
{
"id": 1,
"name": "หลักฐานทางประวัติศาสตร์ \"หลักฐานชั้นต้น\"",
"terms": "ศิลาจารึกที่สร้างขึ้นในสมัยที่เกิดเหตุการณ์,จดหมายที่บุคคลเขียนขึ้นในช่วงเวลาที่เกิดเหตุการณ์,ภาพถ่ายที่ถ่ายไว้ในขณะที่เกิดเหตุการณ์,บันทึกประจำวันที่เขียนโดยผู้ที่อยู่ในเหตุการณ์,เครื่องมือเครื่องใช้โบราณที่มนุษย์ในอดีตสร้างและใช้จริง"
},
{
"id": 2,
"name": "หลักฐานทางประวัติศาสตร์ \"หลักฐานชั้นรอง\"",
"terms": "หนังสือเรียนที่เขียนอธิบายเรื่องราวทางประวัติศาสตร์,บทความของนักประวัติศาสตร์ที่วิเคราะห์เหตุการณ์ในอดีต,หนังสือที่ผู้เขียนนำข้อมูลจากหลักฐานหลายชนิดมาเรียบเรียง,สารคดีที่นำข้อมูลทางประวัติศาสตร์มาเรียบเรียงและอธิบาย,รายงานที่นักวิชาการเขียนขึ้นจากการศึกษาหลักฐานทางประวัติศาสตร์"
}
],
"decoys": "คุณคิดให้ 5 ข้อ "
}
]
}
```
เป้าหมายหลัก:
- สร้างเกม AR Hand Tracking ที่เปิดในเว็บเบราว์เซอร์ได้ทันทีและเล่นจบได้จริง
- ใช้ MediaPipe Hands ผ่าน CDN สำหรับตรวจจับมือ พร้อม fallback เมื่อไม่พบกล้องหรือผู้ใช้ไม่อนุญาตกล้อง
- เหมาะกับห้องเรียนไทย ใช้ภาษาไทยทั้งหมด อ่านง่าย มีปุ่มใหญ่ สีสดใส และรองรับคอมพิวเตอร์/แท็บเล็ต
- ต้องมีระบบลงชื่อเข้าใช้ผู้เรียนก่อนเริ่มเกม เพื่อเก็บชื่อ ห้อง/เลขที่ และใช้แสดงในผลคะแนน
- ถ้าเป็นไฟล์ HTML เดียวและไม่มี backend ให้บันทึกผู้เล่น คะแนน และประวัติรอบล่าสุดด้วย localStorage อย่างเป็นระบบ
ประเภทเกม:
- 🗂️ Sorting Game
- วิธีเล่นหลัก: แยกสิ่งของออกเป็นกลุ่ม
- เหมาะสำหรับ: ฝึกวิเคราะห์และเปรียบเทียบ
- Sorting Game แต่ละข้อเป็นหนึ่งชุดกิจกรรมที่มีหลายหมวดหมู่ ผู้เรียนต้องลากคำศัพท์เข้าหมวดที่ถูกต้อง และต้องมีคำหลอกปะปนเพื่อเพิ่มการคิดวิเคราะห์
เนื้อหา / ชุดข้อมูลสำหรับเกม:
1. Sorting Set
หมวดหมู่ 1: หลักฐานทางประวัติศาสตร์ "หลักฐานชั้นต้น"
คำศัพท์ที่ถูกต้อง: ศิลาจารึกที่สร้างขึ้นในสมัยที่เกิดเหตุการณ์,จดหมายที่บุคคลเขียนขึ้นในช่วงเวลาที่เกิดเหตุการณ์,ภาพถ่ายที่ถ่ายไว้ในขณะที่เกิดเหตุการณ์,บันทึกประจำวันที่เขียนโดยผู้ที่อยู่ในเหตุการณ์,เครื่องมือเครื่องใช้โบราณที่มนุษย์ในอดีตสร้างและใช้จริง
หมวดหมู่ 2: หลักฐานทางประวัติศาสตร์ "หลักฐานชั้นรอง"
คำศัพท์ที่ถูกต้อง: หนังสือเรียนที่เขียนอธิบายเรื่องราวทางประวัติศาสตร์,บทความของนักประวัติศาสตร์ที่วิเคราะห์เหตุการณ์ในอดีต,หนังสือที่ผู้เขียนนำข้อมูลจากหลักฐานหลายชนิดมาเรียบเรียง,สารคดีที่นำข้อมูลทางประวัติศาสตร์มาเรียบเรียงและอธิบาย,รายงานที่นักวิชาการเขียนขึ้นจากการศึกษาหลักฐานทางประวัติศาสตร์
คำหลอก: คุณคิดให้ 5 ข้อ
การควบคุมด้วยมือและการแสดงผลมือ/จุด Point (Hand Tracking & Top-most Pointer):
- 🤏➡️ จีบค้างแล้วลาก – Pinch & Drag
- จีบวัตถุแล้วเคลื่อนมือเพื่อลากไปยังตำแหน่งเป้าหมาย
- เหมาะกับ: เติมคำในช่องว่าง, Matching, Sorting, Sequence
- ใช้ landmark ของ MediaPipe Hands ตรวจจับ gesture ที่เลือกให้แม่นยำ
- **กฎเหล็กเรื่องเลเยอร์มือและจุด Point (Top-most Front Layer):** มือ, จุด Point ปลายนิ้ว (Finger Tip Pointer), เคอร์เซอร์ (Cursor/Reticle), จุดเชื่อมต่อ (Joints) และ Hand Skeleton **จะต้องอยู่ "หน้าสุดของวัตถุทั้งหมดเสมอ" (Always on Top-most Front Layer)**
- ห้ามให้การ์ดคำตอบ, วัตถุในเกม, กล่องคำถาม หรือองค์ประกอบ UI ใด ๆ มาบังหรือทับมือ/จุด Point เด็ดขาด ผู้เล่นต้องมองเห็นตำแหน่งของมือและเคอร์เซอร์นำทางได้อย่างชัดเจน 100% ตลอดเวลา
- แสดง Hand Skeleton และจุด Pointer ด้วยแสงนีออนเรืองแสง (Glowing Neon Overlay) ชัดเจน เพื่อให้รู้ตำแหน่งที่กำลังเล็ง/หยิบจับทันที
- ต้องมีระบบปรับความไวของ gesture และ cooldown ป้องกันการกดย้ำซ้ำซ้อน
ข้อกำหนด UI และภาพ:
- ธีมภาพ: Jungle Quest
- คำอธิบายธีม: ผจญภัยในป่า เหมาะกับวิทยาศาสตร์และการสำรวจ
- ใช้สีสดใสเหมาะกับเด็ก โดยใช้ชุดสีหลัก: , ,
- หลีกเลี่ยงหน้าจอมืดหรือบรรยากาศเคร่งเครียด ให้ UI อ่านง่าย สนุก และเป็นมิตรกับเด็ก
- โหมดพื้นหลัง: ใช้กล้องเป็นพื้นหลัง
- ใช้ we**am feed เต็มฉากหรือเป็นฉากหลัก แล้ววางวัตถุ AR และ UI ทับอย่างอ่านง่าย
- รูปภาพพื้นหลังเกม AR ที่เลือก: ห้องเรียนสดใส
- หมวดภาพพื้นหลัง: ห้องเรียน
- ลิงก์รูปภาพพื้นหลังสำหรับนำไปใช้ในเกม: https://prompt-library-for-teacher.vercel.app/pic/backgrounds/ar-bg-01-bright-classroom.svg
- คำสั่งใช้ภาพพื้นหลัง: ใช้เป็นฉากห้องเรียนสดใส โดยให้พื้นที่กลางสีขาวเป็นพื้นที่หลักของคำถามและคำตอบ
- ต้องตั้งภาพพื้นหลังนี้เป็นฉากเต็มพื้นที่เล่นด้วย background-size: cover หรือใช้ / ชั้น background และห้ามให้ภาพบัง questionPanel, answerArea, คะแนน หรือปุ่มควบคุม
- มีหน้าจอลงชื่อเข้าใช้, หน้าจอเริ่มเกม, หน้าจอเล่นเกม, หน้าจอหยุดพัก, หน้าสรุปคะแนน และหน้าประวัติคะแนนล่าสุด
- มีปุ่มเปิด/ปิดกล้อง, ปุ่มเริ่มใหม่, ปุ่มดูวิธีเล่น, ปุ่มเปิด/ปิดเสียง และปุ่มกลับหน้าเมนู
- มี Score, Combo, Streak, จำนวนชีวิต, เวลา, Progress, ระดับดาว และสถานะพบมือ
- กล้องเว็บแคมเป็น Picture-in-Picture มุมล่างขวา
- ห้ามใช้ alert() ให้ใช้ modal หรือ toast ที่ออกแบบสวยงาม
ข้อกำหนดการออกแบบคำตอบสไตล์เกม (Game-Centric Centered Answers & Interactive Visuals):
- คำตอบต้องอยู่ตรงกลางหน้าจอในลักษณะของ "สนามประลองเกม AR" (Game Arena / Interactive Stage) ไม่ใช่หน้าตาแบบฟอร์มเอกสารหรือข้อสอบธรรมดา เพื่อสร้างความสนุกสนานและตื่นเต้น
- การ์ดตัวเลือกคำตอบ / ชิ้นส่วนคำตอบ ต้องมี "ขนาดใหญ่พิเศษ" (Large Target Size, min-height 75px - 100px, font-size 20px - 28px) มองเห็นเด่นชัด สีสันสดใส มีกรอบนูน 3D เงาสวยงาม และหยิบจับ/เล็งเป้าด้วย Hand Tracking ได้ง่าย ไม่หลุดเป้า
- ต้องมี "ไอคอนหรือภาพประกอบกราฟิก/อีโมจิสวย ๆ" กำกับอยู่ในแต่ละตัวเลือกคำตอบ โดยต้องเลือกไอคอนที่สอดคล้องกับความหมายหรือบริบทของคำตอบนั้น ๆ เพื่อช่วยการสื่อสารและดึงดูดสายตาเด็ก
- เพิ่มระบบแอนิเมชันของเกม (Game Animations & Micro-interactions):
- Idle Floating/Pulsing Effect: ชิ้นส่วนคำตอบลอยขึ้นลงเบา ๆ นุ่มนวล ดูมีชีวิตชีวา
- Hand Hover / Target Lock Effect: เมื่อมือหรือนิ้วเล็งไปที่คำตอบ ให้มีการ์ดขยายใหญ่ขึ้น (Scale-up 1.08x), ขอบเปล่งแสงนีออน (Glow Effect) และมีเคอร์เซอร์แม่เหล็กดูดเข้าหา
- Grab / Pinching Effect: เมื่อหนีบหรือหยิบ ชิ้นส่วนจะหดตัวเล็กน้อยและเคลื่อนที่ตามตำแหน่งมือแบบ Smooth Spring Physics
- Correct Answer Celebration: เมื่อตอบถูก ให้การ์ดคำตอบระเบิดเป็นประกายดาว/พลุสีรุ้ง (Canvas Confetti / Star Particles Explosion) พร้อมเอฟเฟกต์เด้งฉลองและเสียงดนตรีชัยชนะ
- Wrong Answer Feedback: เมื่อตอบผิด ให้การ์ดสั่นเตือนเบา ๆ (Wobble/Shake Effect) สีเปลี่ยนเป็นสีแดงนวล และดีดกลับตำแหน่งเดิมอย่างนุ่มนวล
กฎสำคัญสำหรับ Layout คำถาม คำตอบ และลำดับชั้นการแสดงผล (Game Arena & Z-Index Layering):
- ห้ามให้ข้อความคำถาม คำตอบ ตัวเลือก วัตถุเกม ปุ่ม หรือแผงคะแนนซ้อนทับกันเด็ดขาด
- วางผังหน้าจอแบบ Game Stage:
- ด้านบน: แผงโจทย์คำถาม (Question Banner) สไตล์ป้ายภารกิจเกม เด่นชัด อ่านง่าย
- ตรงกลางหน้าจอ: โซนคำตอบและเป้าหมายการเล่น (Central Answer Arena) จัดวางการ์ดคำตอบขนาดใหญ่แบบ Grid/Flex กลางจออย่างสมมาตร พร้อมระยะห่าง (gap 16px - 24px) เหมาะแก่การใช้มือหยิบจับ
- ด้านข้าง/ขอบจอ: แผงคะแนน, Combo, เวลา และหลอดพลังชีวิต ที่ไม่รบกวนพื้นที่เล็งเป้าตรงกลาง
- แยกพื้นที่คำถามกับพื้นที่คำตอบเป็นคนละ container ชัดเจน เช่น questionPanel และ answerArea
- ห้ามใช้ position:absolute หรือ transform เพื่อวางข้อความคำถาม/คำตอบหลัก ยกเว้น canvas, hand cursor, particle effect หรือ we**am overlay
- **การจัดลำดับชั้น Z-Index (มือต้องอยู่หน้าสุดของทุกวัตถุเสมอ):**
`Background (z: 0) < Game Arena & Question Panel (z: 10) < Answer Cards & UI (z: 20) < Particles & Confetti (z: 30) < Hand Skeleton / Point / Cursor / Pointer (z: 900 - 1000 อยู่หน้าสุดเสมอ) < Modal Dialogs (z: 2000)`
- ถ้าใช้ Canvas ในการ Render Hand Tracking ให้วาง Hand Canvas อยู่เลเยอร์บนสุดเหนือ HTML Elements หรือวาด Hand/Pointer เป็นขั้นตอนสุดท้ายใน render loop เสมอ
- ข้อความยาวต้อง wrap ได้เองด้วย overflow-wrap:anywhere, word-break:break-word และห้ามตัดจนอ่านไม่ครบ
- เพิ่มฟังก์ชัน validateLayout() หรือคอมเมนต์ตรวจสอบท้ายโค้ด เพื่ออธิบายว่าพื้นที่ questionPanel, answerArea และ Hand Pointer Layer แยกกันอย่างไร
ระบบคะแนนและเกมมิฟิเคชัน:
- ให้คะแนนเมื่อทำถูก โดยคำนวณจากความถูกต้อง ความเร็ว และ combo
- หักชีวิตหรือหักคะแนนเมื่อผิด พร้อม feedback เชิงบวกที่ไม่ทำให้เด็กรู้สึกแย่
- มีเหรียญตราอย่างน้อย 5 แบบ เช่น First Try, Speed Star, Combo Master, Perfect Round, Explorer
- มีระบบดาว 1-3 ดาวตามคะแนนรวม
- มีระดับผู้เล่นหรือ XP หลังจบรอบ
- มีหน้าสรุปผลแสดงชื่อผู้เรียน ห้อง/เลขที่ คะแนนรวม จำนวนถูก/ผิด เวลาเฉลี่ย badge ที่ได้รับ และคำแนะนำเพิ่มเติม
- มี leaderboard แบบ localStorage สำหรับเครื่องนั้น แยกตามชื่อเรื่องและระดับชั้น
- ครูสามารถกดรีเซ็ตคะแนนใน localStorage ได้จากปุ่มในหน้าสรุปหรือเมนูครู
ระบบลงชื่อเข้าใช้ผู้เรียน:
- ก่อนเริ่มเกมให้ผู้เรียนกรอก ชื่อ-สกุล, ชั้น/ห้อง, เลขที่ หรือรหัสนักเรียน
- ตรวจสอบว่ากรอกชื่อและชั้น/ห้องก่อนเริ่มเกม
- เก็บ profile ผู้เรียนใน localStorage และเรียกกลับมาใช้ได้ในครั้งถัดไป
- มีปุ่มเปลี่ยนผู้เรียน
ข้อกำหนดเสียง:
- รูปแบบเสียง: Pop Arcade
- เสียงป๊อปสดใส เหมาะกับเกมตอบคำถามและสะสมคะแนน
- ใช้ Web Audio API สร้างเสียง Click, Correct, Wrong, Hint, Win และ Lose โดยไม่ต้องใช้ไฟล์เสียงภายนอก
- เสียงต้องสั้น นุ่ม ไม่ดังรบกวน และมีตัวแปร masterVolume
ข้อกำหนดโค้ด:
- ส่งออกเป็นไฟล์ HTML เดียวที่รวม HTML, CSS และ JavaScript ครบ
- ถ้าใช้ Tailwind ให้ใช้ผ่าน CDN
- โค้ดต้องแบ่งส่วนชัดเจน: data, auth/profile, game state, rendering, hand tracking, gesture detection, scoring, gamification, storage, audio
- โค้ดต้องมีคอมเมนต์เฉพาะส่วน hand tracking, gesture detection, collision detection, scoring และ game state
- รองรับ responsive layout และมี fallback message เมื่อผู้ใช้ไม่อนุญาตกล้อง
- ต้องป้องกัน error จาก MediaPipe โหลดไม่สำเร็จ และแสดงคำแนะนำให้ผู้ใช้ refresh/ตรวจสิทธิ์กล้อง
- ห้ามใช้ library หนักเกินจำเป็น ยกเว้น MediaPipe และ Tailwind CDN
- ให้ใช้ requestAnimationFrame สำหรับ game loop และแยก update/render ออกจากกัน
ข้อกำหนดการเข้าถึงและห้องเรียน:
- ปุ่มต้องมี aria-label ที่เหมาะสม
- ตัวอักษรใหญ่พอสำหรับเด็กอ่าน
- มีคำอธิบายวิธีเล่นสั้น ๆ แบบเข้าใจง่าย
- มีโหมดเล่นด้วยเมาส์/ทัชเป็น fallback เมื่อไม่มีกล้อง
ส่งมอบ:
1. โค้ด HTML ฉบับสมบูรณ์
2. คำอธิบายสั้น ๆ วิธีปรับข้อมูลคำถาม/คำตอบ
3. เช็กลิสต์ทดสอบกล้อง ท่ามือ คะแนน login และหน้าสรุปผล
4. คำแนะนำสำหรับครูในการนำไปใช้ในห้องเรียน
คลิกที่นี่เพื่อเป็นสมาชิก?