74 lines
2.7 KiB
Markdown
74 lines
2.7 KiB
Markdown
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!
|