═══════════════════════════════════════════════════════════
📚 SLS INTERACTIVE PROMPT - FULL DETAILS
═══════════════════════════════════════════════════════════

📋 PROMPT DETAILS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📚 Topic: Chinese Text to Speech with Hanyu Pinyin
🎯 Grade Level: Primary 3-4
📖 Subject Area: Not specified
🎮 Interaction Type: Auto-detect
🔧 Specific Requirements: None specified
📅 Generated: 31/10/2025, 4:18:58 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

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

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

═══════════════════════════════════════════════════════════

USER TASK SPECIFICATION:

Create an interactive HTML5 simulation about Chinese Text to Speech with Hanyu Pinyin.

TARGET AUDIENCE: Primary 3-4

INTERACTIVE REQUIREMENTS:
- Educational content suitable for Primary 3-4 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


LEARNING OUTCOMES:
- Students should be able to explore and understand Chinese Text to Speech with Hanyu Pinyin
- 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




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 Library for Educational Interactive Creation
═══════════════════════════════════════════════════════════