src/lib/prompts/templates/game-content/user.md

Create an educational GAME widget for: {{title}}

Game Type

{{gameType}}

Description

{{description}}

Key Points

{{keyPoints}}

Scoring Configuration

{{scoring}}

Language

{{languageDirective}}

---

Generate a FUN, INTERACTIVE HTML game with these MANDATORY features:

Game Design (CRITICAL - NOT A QUIZ!)

1. Interactive gameplay: Player MUST control something meaningful (NOT just click answers)
2. Real game mechanics: Timing, aiming, dragging, balancing, catching, or building
3. Skill-based success: Outcome depends on player action, not just correct answer
4. Engaging feedback: Animations, sounds, visual effects for actions

Preferred Game Types (in order of preference)

1. Physics/Action: Control parameters to achieve a goal (land safely, hit target, balance)
2. Timing/Aim: Click at right moment or adjust aim to succeed
3. Drag-and-drop: Sort, arrange, or build by dragging elements
4. Simulation game: Let player experiment with variables to find solution
5. Card/Match: Memory or matching games
6. Quiz: ONLY as last resort - make it visually interesting

Simulation Integration (if game has visual simulation)

• Simulation MUST be interactive (player controls something)
• Simulation physics MUST match what player is learning
• Visual feedback MUST show player's progress toward goal
• Example: Don't ask "What thrust?" → LET PLAYER ADJUST thrust and see result!

Game Elements

1. Clear objective: "Land safely", "Hit the target", "Sort correctly"
2. Player controls: Sliders, buttons, drag areas, or click targets
3. Real-time feedback: Score, progress bar, visual indicators
4. Levels or challenges: Progressive difficulty
5. Achievement system: Unlockable badges for accomplishments
6. Replay value: Random elements or multiple solutions

Visual Design

1. Attractive theme matching the subject
2. Clear UI for controls and feedback
3. Animations for success/failure
4. Responsive layout (mobile + desktop)

Technical (MANDATORY)

1. Inline onclick for start button: <button onclick="startGame()">开始</button> - NOT addEventListener
2. Custom CSS preferred: Avoid Tailwind @layer utilities blocks; use plain CSS
3. DOMContentLoaded wrapper: Wrap game code in document.addEventListener('DOMContentLoaded', ...)
4. Global start function: function startGame() must be callable from onclick
5. Embedded <script type="application/json" id="widget-config">
6. requestAnimationFrame for smooth animations
7. Touch-friendly controls (min 44px touch targets)
8. localStorage for progress/high scores
9. Pause functionality

Output

Return ONLY the HTML document. Make the game FUN enough that students want to play again!