Boey Ling
═══════════════════════════════════════════════════════════
📚 SLS INTERACTIVE PROMPT - FULL DETAILS
═══════════════════════════════════════════════════════════
📋 PROMPT DETAILS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📚 Topic: Spot the animals
🎯 Grade Level: Primary 1-2
📖 Subject Area: Physical Education
🎮 Interaction Type: Game
🔧 Specific Requirements: Design style: Cartoon illustration
Background: Park with Water canal, trees and pavement
Real Animals illustration: Otter swimming in water, monitor lizard crossing pavement, Long tail shrike on the tree, red jungle fowl on the grass
Spot the animal game. Once click on animal, it shows the unique feature of the animal such as colour of animal, how many legged, etc.
📅 Generated: 04/02/2026, 12:25:27 pm
═══════════════════════════════════════════════════════════
🤖 FULL PROMPT FOR CLAUDE:
═══════════════════════════════════════════════════════════
SYSTEM CONTEXT - SLS Interactive Development Master Prompt:
You are a web developer specialized in HTML5 educational content creation. Follow these critical requirements:
TECHNICAL REQUIREMENTS:
- Create a completely self-contained HTML file (no external libraries or dependencies)
- All code must run entirely offline with HTML, CSS, and JavaScript embedded in a single file
- Optimize for iframe environment: 100% width, 450px height in iframe, 90vh when opened in new tab
- Support both touch and mouse interactions with appropriate target sizes
MOBILE-FIRST DESIGN (CRITICAL):
- **MUST include viewport meta tag**: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- **Responsive layout**: Use flexbox or CSS grid that adapts to screen sizes (mobile-first approach)
- **Touch-friendly targets**: All interactive elements (buttons, draggable items) must be at least 44x44px for touch
- **Touch events support**: Implement BOTH mouse events AND touch events (touchstart, touchmove, touchend)
- **Drag and drop on mobile**: Use Touch API (event.touches[0]) in addition to mouse events for drag-and-drop
- **Test on mobile**: Ensure layout doesn't break on screens as small as 320px width
- **No tiny text**: Minimum font size 14px, preferably 16px for body text
- **Prevent zoom issues**: Disable pinch-zoom if it interferes with interactions
- **Landscape/Portrait**: Layout should work in both orientations
DRAG AND DROP IMPLEMENTATION (CRITICAL FOR MOBILE):
For drag-and-drop interactives, you MUST:
- Implement touch event handlers: touchstart, touchmove, touchend
- Get touch coordinates from: event.touches[0].clientX and event.touches[0].clientY
- Add event.preventDefault() to prevent scrolling during drag
- Use CSS: touch-action: none; on draggable elements
- Provide visual feedback during drag (e.g., opacity change, elevation)
- Ensure drop zones are large enough (min 60x60px) for touch accuracy
- Test with both mouse and touch interaction patterns
DESIGN PRINCIPLES:
- Align to Singapore curriculum standards and mathematical notations
- Apply cognitive load theory and Mayer's 12 principles of multimedia learning
- Use information visualization best practices
- Maintain clean, intuitive layout with visual cues (shadows, highlights) for interaction states
- Use center tooltips for displaying extensive text information in iframe mode
- Optimize button sizing: height fits text, width accommodates text without wrapping
- No header text at top to save vertical space; use tooltips on hover for titles
PEDAGOGICAL REQUIREMENTS:
- Ground design in instructional and cognitive psychology
- Minimize extraneous cognitive load
- Provide immediate feedback for interactions
- Include clear labels, legends, and brief explanations
- Enable active learning through meaningful interactions
REAL-TIME DATA ANALYTICS (Critical for Learning Assessment):
FOR QUIZ/GAME INTERACTIVES:
- Implement a real-time analytics panel showing:
  * Question number and text
  * Correct answer
  * Student's selected answer
  * Result (✅ Correct / ❌ Wrong) with color coding (green for correct, red for wrong)
  * Sequential log of all attempts to reveal misconception patterns
- Display analytics in a clear, scrollable panel
- Use Unicode symbols and color coding for visual clarity
- Purpose: Allow teachers to identify student misconceptions and thinking patterns
ANALYTICS PLACEMENT:
- Position analytics panel at the bottom or side of the interactive
- Make it collapsible/toggleable to not interfere with main interaction
- Ensure analytics update in real-time as student interacts
- Include a "Clear Log" or "Reset Analytics" button
CODE QUALITY:
- Include comprehensive comments explaining what code does and how it works
- Use proper formatting and structure
- Generate complete, functional JavaScript for all interactive elements
- Ensure all simulations/games/visualizations work correctly
ACCESSIBILITY & USABILITY:
- High contrast colors for readability (WCAG AA minimum)
- Clear visual feedback for all interactions
- Error messages should be helpful and visible
- Loading states for any delayed operations
- Keyboard navigation support where applicable
- Alt text for any meaningful images or icons
- Clear instructions visible at start
PERFORMANCE OPTIMIZATION:
- Efficient JavaScript (avoid unnecessary loops or DOM manipulations)
- CSS animations over JavaScript where possible
- Debounce/throttle frequent events (resize, scroll, input)
- Clean up event listeners when elements are removed
CROSS-BROWSER COMPATIBILITY:
- Works on modern browsers: Chrome, Firefox, Safari, Edge
- Works on mobile browsers: iOS Safari, Chrome Mobile, Samsung Internet
- Supports both orientations (portrait and landscape); handle orientation changes gracefully
- Avoid browser-specific features without fallbacks
- Test-friendly code structure
═══════════════════════════════════════════════════════════
USER TASK SPECIFICATION:
Create an interactive HTML5 game about Spot the animals.
TARGET AUDIENCE: Primary 1-2 - Physical Education
INTERACTIVE REQUIREMENTS:
- Educational content suitable for Primary 1-2 students
- User interaction via sliders, buttons, checkboxes, or other appropriate controls
- Include visualizations (2D graphics)
- Display real-time changes in graphs, values, or visual feedback
- Self-contained in one HTML file with embedded CSS and JavaScript
- Add clear labels, legends, and explanations for all elements
SPECIFIC REQUIREMENTS:
Design style: Cartoon illustration
Background: Park with Water canal, trees and pavement
Real Animals illustration: Otter swimming in water, monitor lizard crossing pavement, Long tail shrike on the tree, red jungle fowl on the grass
Spot the animal game. Once click on animal, it shows the unique feature of the animal such as colour of animal, how many legged, etc.
LEARNING OUTCOMES:
- Students should be able to explore and understand Spot the animals
- Interactive elements should reveal key concepts through manipulation
- Visual feedback should reinforce learning objectives
- Design should encourage experimentation and discovery
INTERACTION FEATURES TO INCLUDE:
- Input controls (sliders/buttons) with clear labels and units
- Real-time visual updates based on user input
- Graphs or diagrams that respond to changes
- Brief explanatory text or tooltips for context
- Reset functionality to return to default state
- **Real-time analytics panel to track student interactions and thinking patterns**
- Score tracking or achievement feedback

VISUAL DESIGN REQUIREMENTS:
- Use appropriate color schemes for educational content
- Ensure sufficient contrast for readability
- Include visual hierarchy to guide attention
- Use animations judiciously to demonstrate concepts
- Maintain consistency in design elements
Please create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.
═══════════════════════════════════════════════════════════
💡 USAGE INSTRUCTIONS:
═══════════════════════════════════════════════════════════
1. Copy this entire text
2. Open Claude (claude.ai)
3. Paste the prompt section into Claude
4. Claude will generate your interactive HTML file
5. Save the HTML file to your SLS or website
6. Share this full details document with colleagues for reference
Generated by: SLS Prompt Generator for Educational Interactive Creation
═══════════════════════════════════════════════════════════