═══════════════════════════════════════════════════════════
📚 SLS INTERACTIVE PROMPT - FULL DETAILS
═══════════════════════════════════════════════════════════
📋 PROMPT DETAILS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📚 Topic: Plate Tectonics
🎯 Grade Level: Secondary 3-4
📖 Subject Area: Geography
🎮 Interaction Type: Auto-detect
🔧 Specific Requirements: You are an expert educational simulation developer. Create a self-contained HTML5 interactive simulation (single HTML file with embedded CSS and JavaScript) for secondary school Geography students (Singapore O-Level syllabus, Topic: Plate Tectonics).
⚠️ CRITICAL REQUIREMENT:
All explanations shown in tooltips, labels, and pop-ups MUST follow the EXACT syllabus wording provided below. Do NOT paraphrase, simplify, or reword.
 
🔧 CORE INTERFACE FEATURES
1.	GEOLOGICAL TIME CONTROL
•	Horizontal slider labelled “Geological Time”
•	Plates move gradually over time
•	Landforms and processes develop progressively
•	Include play/pause button
 
1.	PLATE CONFIGURATION PANEL (CRITICAL)
Users must select:
•	Boundary Type:
o	Divergent
o	Convergent
o	Transform
•	Crust Type (LEFT and RIGHT plates):
o	Oceanic crust (thin, dense)
o	Continental crust (thick, less dense)
 
🌍 PROCESS EXPLANATIONS (USE EXACT WORDING)
 
DIVERGENT BOUNDARIES
OCEANIC–OCEANIC DIVERGENCE:
Display EXACT wording:
•	“When two oceanic plates move apart,”
•	“the decrease in overlying pressure causes parts of the underlying mantle to melt, forming less dense magma that rises through the crust and fills gaps caused by diverging plates.”
•	“The lava cools and solidifies to form new oceanic crust.”
•	“An extensive underwater mountain chain, known as the mid-oceanic ridge, forms. At the centre of the ridge is a deep rift valley with steep sides.”
•	“The rising magma may erupt on the surface as lava which cools, solidifies and accumulates to form submarine volcanoes.”
•	“After many eruptions, the volcanoes may break the surface of the ocean to form volcanic islands.”
🚨 ADDITIONAL SYSTEM BEHAVIOUR:
•	MUST automatically trigger the Seafloor Spreading & Magnetic Striping Module
•	Must prompt: “Explore how new oceanic crust provides evidence for plate tectonics”
 
CONTINENTAL–CONTINENTAL DIVERGENCE:
Display EXACT wording:
•	“When two continental plates move apart,”
•	“rocks eventually fracture to form parallel faults.”
•	“The rock between these faults collapses to form a deep rift valley.”
•	“As the plates move apart, the decrease in overlying pressure causes parts of the underlying mantle to melt, forming magma.”
•	“The rising magma erupts on the surface as lava which cools, solidifies and accumulates to form volcanoes.”
 
CONVERGENT BOUNDARIES
OCEANIC–OCEANIC CONVERGENCE:
Display EXACT wording:
•	“Two oceanic plates collide.”
•	“The denser plate subducts beneath the other plate, forming a deep depression known as an oceanic trench.”
•	“As the subducting plate sinks into the mantle, the high pressure forces water out of its oceanic crust.”
•	“Water lowers the melting point of the overlying mantle, causing it to melt, forming magma.”
•	“Less dense magma rises through the crust as lava, causing a volcanic eruption.”
•	“The lava cools, solidifies and accumulates over time, forming submarine volcanoes.”
•	“When these rise above the sea level, they become volcanic islands.”
 
CONTINENTAL–CONTINENTAL CONVERGENCE:
Display EXACT wording:
•	“When two low-density continental plates collide, subduction does not take place.”
•	“This is because continental plates are too buoyant to subduct.”
•	“Magma does not rise to the surface, hence no volcanoes are formed.”
•	“Enormous pressure causes the rocks on the plates to be uplifted and buckled to form fold mountains.”
 
OCEANIC–CONTINENTAL CONVERGENCE:
Display EXACT wording:
•	“An oceanic plate collides with a continental plate.”
•	“The denser oceanic plate subducts beneath the continental plate, forming a deep depression known as an oceanic trench.”
•	“As the subducting plate sinks into the mantle, the high pressure forces water out of its oceanic crust.”
•	“Water lowers the melting point of the overlying mantle, causing it to melt, forming magma.”
•	“Less dense magma rises through weak areas in the crust to the Earth’s surface as lava, causing a volcanic eruption.”
•	“The lava cools, solidifies and accumulates over time, forming volcanoes on the continental plate.”
•	“Enormous pressure causes the rocks on the continental plate to be uplifted and buckled, leading to the formation of fold mountains.”
 
TRANSFORM BOUNDARIES
Display EXACT wording:
•	“Two tectonic plates try to slide past each other.”
•	“Friction causes the two plates to get locked up and stress builds up.”
•	“Stress caused by the plate movement produces a fault (a zone of fractures between two blocks of rocks).”
•	“When stress exceeds strength of the fault, rocks suddenly slips past another and cause seismic energy to be released in the form of earthquakes.”
 
🎥 VISUALISATION REQUIREMENTS
Animate clearly:
•	Plate movement directions
•	Subduction
•	Magma rising through surface of the crust
•	Folding (compression of continental crust)
•	Transform sliding
•	Earthquake release (sudden slip) at all boundaries
Landforms must form progressively:
•	Mid-ocean ridge
•	Rift valley
•	Oceanic trench
•	Volcanoes
•	Fold mountains
•	Fault lines
All landforms must be clickable → show syllabus-based explanation
 
🌊 SPECIAL MODULE: SEAFLOOR SPREADING & MAGNETIC STRIPING
(AUTO-TRIGGERED for O–O Divergence)
 
🔁 MODULE STRUCTURE (CRITICAL)
Provide THREE viewing modes:
•	[ Seafloor Spreading ] (Default)
•	[ Magnetic Striping ]
•	[ Show Both ]
 
1.	SEAFLOOR SPREADING VIEW
Show:
•	Magma rising at mid-ocean ridge
•	New oceanic crust forming
•	Crust moving outward symmetrically
 
1.	MAGNETIC STRIPING VIEW
Show:
•	Alternating bands:
o	Normal polarity
o	Reversed polarity
•	Bands must be:
o	Symmetrical
o	Moving outward over time
 
1.	COMBINED VIEW
Overlay:
•	Crust formation
•	Magnetic striping
Explicitly show:
Process → Evidence
 
📊 LEGEND (MANDATORY)
Must include:
•	New oceanic crust
•	Older oceanic crust
•	Normal polarity
•	Reversed polarity
•	Direction of plate movement
Legend must:
•	Be fixed on screen
•	Update dynamically with animation
 
⏱️ TIME LINK
As time progresses:
•	New crust forms at ridge
•	New magnetic stripe appears
•	Older stripes move outward
 
🧠 EXPLANATION (INTERACTIVE)
Include:
•	“Magma rises and forms new oceanic crust at the ridge.”
•	“As lava cools, magnetic minerals align with Earth’s magnetic field.”
•	“Each new layer records the magnetic polarity at that time.”
•	“Symmetrical stripes on both sides show that seafloor spreading has occurred.”
 
⚠️ MISCONCEPTION HANDLING
Display prompts:
•	“Seafloor spreading is the process.”
•	“Magnetic striping is the evidence.”
•	“Do not confuse how crust forms with how scientists prove it.”
 
🔄 COMPARE MODE
Allow side-by-side comparison of two boundary types
Prompts:
•	“What is different about the processes?”
•	“Why do different landforms form?”
 
🎯 EXAM ALIGNMENT
Simulation must support answering:
•	Explain how volcanoes form at plate boundaries
•	Explain why volcanoes do not form at some boundaries
•	Describe processes at different plate boundaries
•	Explain how seafloor spreading and magnetic striping provides evidence for plate tectonics
 
📦 OUTPUT REQUIREMENTS
•	ONE self-contained HTML file
•	No external libraries (SLS compatible)
•	Well-structured and commented code
Sections must include:
•	UI Controls
•	Animation Engine
•	Plate Boundary Logic
•	Tooltip System
 
🎯 FINAL GOAL
Students should be able to:
•	Predict outcomes based on plate type and movement
•	Recall syllabus wording accurately
•	Explain processes clearly in exams
•	Link process → landform → evidence
📅 Generated: 20/03/2026, 12:49:10 am
═══════════════════════════════════════════════════════════
🤖 FULL PROMPT:
═══════════════════════════════════════════════════════════
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 (does not need Internet connection).
•	There are no external libraries or dependencies at all!
•	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
•	Self-contained HTML5 packages should contain the necessary WebGL libraries (if required) in their root folder. Note that if WebGL is used, all .js and shader assets must be bundled locally.
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
•	Tooltips/help panels must include a visible close (X) button and tap-to-close support
•	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
•	Progressive difficulty: start with 1–2 heavily scaffolded questions, gradually remove scaffolds, and reach full-difficulty questions by later items (e.g., Q5+)
REAL-TIME DATA ANALYTICS (Critical for Learning Assessment):
•	Implement a real-time action log showing:
o	Timestamp of each action (using relative time: t=0s, t=3s, etc.)
o	Description of action taken (e.g., "Slider moved to 45°", "Reset button clicked")
o	Current state/values after action
o	Sequential log of all interactions
•	Display action log in a clear, scrollable panel
•	Use Unicode symbols to mark different action types
•	Purpose: Allow teachers to understand student exploration patterns and thinking process
If the interactive includes quiz/assessment mode, ALSO log:
•	Question number and full question text
•	Task/instruction prompt shown to the student
•	Student's selected answer or input
•	Correct answer
•	Result (✅ Correct / ❌ Wrong) with color coding
•	Attempt number (first try, second try, etc.)
•	Show a sequential, scrollable quiz analytics panel to reveal misconception patterns
•	Use Unicode symbols and color coding for visual clarity
•	Purpose: Allow teachers to diagnose misunderstandings and learning gaps
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
═══════════════════════════════════════════════════════════
PEDAGOGICAL APPROACH (RAT Framework):
The pedagogical approach for this interactive is: TRANSFORM
✨ TRANSFORM MODE:
•	Create experiences impossible in traditional classroom settings
•	Focus: Novel, open-ended exploration tools that reveal new perspectives or enable unique learning experiences
•	Design: Open exploration tools, multi-parameter systems, dynamic model visualization, generative tools
•	Pedagogy: Discovery learning through open exploration with strong pedagogical scaffolding
•	Examples: 3D molecular explorer, light-prism explorer (multiple prism shapes/materials), parametric curve explorer, generative art for understanding patterns
•	Implementation: Allow flexible manipulation of multiple parameters, show emergent patterns, enable "play to understand"
•	Learning Outcome: Students discover deep principles through open exploration that traditional classroom cannot afford (cost, time, setup)
END RAT FRAMEWORK
═══════════════════════════════════════════════════════════
USER TASK SPECIFICATION:
Create an interactive HTML5 simulation about Plate Tectonics.
TARGET AUDIENCE: Secondary 3-4 - Geography
INTERACTIVE REQUIREMENTS:
•	Educational content suitable for Secondary 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
SPECIFIC REQUIREMENTS:
You are an expert educational simulation developer. Create a self-contained HTML5 interactive simulation (single HTML file with embedded CSS and JavaScript) for secondary school Geography students (Singapore O-Level syllabus, Topic: Plate Tectonics).
⚠️ CRITICAL REQUIREMENT:
All explanations shown in tooltips, labels, and pop-ups MUST follow the EXACT syllabus wording provided below. Do NOT paraphrase, simplify, or reword.
 
🔧 CORE INTERFACE FEATURES
1.	GEOLOGICAL TIME CONTROL
•	Horizontal slider labelled “Geological Time”
•	Plates move gradually over time
•	Landforms and processes develop progressively
•	Include play/pause button
 
1.	PLATE CONFIGURATION PANEL (CRITICAL)
Users must select:
•	Boundary Type:
o	Divergent
o	Convergent
o	Transform
•	Crust Type (LEFT and RIGHT plates):
o	Oceanic crust (thin, dense)
o	Continental crust (thick, less dense)
 
🌍 PROCESS EXPLANATIONS (USE EXACT WORDING)
 
DIVERGENT BOUNDARIES
OCEANIC–OCEANIC DIVERGENCE:
Display EXACT wording:
•	“When two oceanic plates move apart,”
•	“the decrease in overlying pressure causes parts of the underlying mantle to melt, forming less dense magma that rises through the crust and fills gaps caused by diverging plates.”
•	“The lava cools and solidifies to form new oceanic crust.”
•	“An extensive underwater mountain chain, known as the mid-oceanic ridge, forms. At the centre of the ridge is a deep rift valley with steep sides.”
•	“The rising magma may erupt on the surface as lava which cools, solidifies and accumulates to form submarine volcanoes.”
•	“After many eruptions, the volcanoes may break the surface of the ocean to form volcanic islands.”
🚨 ADDITIONAL SYSTEM BEHAVIOUR:
•	MUST automatically trigger the Seafloor Spreading & Magnetic Striping Module
•	Must prompt: “Explore how new oceanic crust provides evidence for plate tectonics”
 
CONTINENTAL–CONTINENTAL DIVERGENCE:
Display EXACT wording:
•	“When two continental plates move apart,”
•	“rocks eventually fracture to form parallel faults.”
•	“The rock between these faults collapses to form a deep rift valley.”
•	“As the plates move apart, the decrease in overlying pressure causes parts of the underlying mantle to melt, forming magma.”
•	“The rising magma erupts on the surface as lava which cools, solidifies and accumulates to form volcanoes.”
 
CONVERGENT BOUNDARIES
OCEANIC–OCEANIC CONVERGENCE:
Display EXACT wording:
•	“Two oceanic plates collide.”
•	“The denser plate subducts beneath the other plate, forming a deep depression known as an oceanic trench.”
•	“As the subducting plate sinks into the mantle, the high pressure forces water out of its oceanic crust.”
•	“Water lowers the melting point of the overlying mantle, causing it to melt, forming magma.”
•	“Less dense magma rises through the crust as lava, causing a volcanic eruption.”
•	“The lava cools, solidifies and accumulates over time, forming submarine volcanoes.”
•	“When these rise above the sea level, they become volcanic islands.”
 
CONTINENTAL–CONTINENTAL CONVERGENCE:
Display EXACT wording:
•	“When two low-density continental plates collide, subduction does not take place.”
•	“This is because continental plates are too buoyant to subduct.”
•	“Magma does not rise to the surface, hence no volcanoes are formed.”
•	“Enormous pressure causes the rocks on the plates to be uplifted and buckled to form fold mountains.”
 
OCEANIC–CONTINENTAL CONVERGENCE:
Display EXACT wording:
•	“An oceanic plate collides with a continental plate.”
•	“The denser oceanic plate subducts beneath the continental plate, forming a deep depression known as an oceanic trench.”
•	“As the subducting plate sinks into the mantle, the high pressure forces water out of its oceanic crust.”
•	“Water lowers the melting point of the overlying mantle, causing it to melt, forming magma.”
•	“Less dense magma rises through weak areas in the crust to the Earth’s surface as lava, causing a volcanic eruption.”
•	“The lava cools, solidifies and accumulates over time, forming volcanoes on the continental plate.”
•	“Enormous pressure causes the rocks on the continental plate to be uplifted and buckled, leading to the formation of fold mountains.”
 
TRANSFORM BOUNDARIES
Display EXACT wording:
•	“Two tectonic plates try to slide past each other.”
•	“Friction causes the two plates to get locked up and stress builds up.”
•	“Stress caused by the plate movement produces a fault (a zone of fractures between two blocks of rocks).”
•	“When stress exceeds strength of the fault, rocks suddenly slips past another and cause seismic energy to be released in the form of earthquakes.”
 
🎥 VISUALISATION REQUIREMENTS
Animate clearly:
•	Plate movement directions
•	Subduction
•	Magma rising through surface of the crust
•	Folding (compression of continental crust)
•	Transform sliding
•	Earthquake release (sudden slip) at all boundaries
Landforms must form progressively:
•	Mid-ocean ridge
•	Rift valley
•	Oceanic trench
•	Volcanoes
•	Fold mountains
•	Fault lines
All landforms must be clickable → show syllabus-based explanation
 
🌊 SPECIAL MODULE: SEAFLOOR SPREADING & MAGNETIC STRIPING
(AUTO-TRIGGERED for O–O Divergence)
 
🔁 MODULE STRUCTURE (CRITICAL)
Provide THREE viewing modes:
•	[ Seafloor Spreading ] (Default)
•	[ Magnetic Striping ]
•	[ Show Both ]
 
1.	SEAFLOOR SPREADING VIEW
Show:
•	Magma rising at mid-ocean ridge
•	New oceanic crust forming
•	Crust moving outward symmetrically
 
1.	MAGNETIC STRIPING VIEW
Show:
•	Alternating bands:
o	Normal polarity
o	Reversed polarity
•	Bands must be:
o	Symmetrical
o	Moving outward over time
 
1.	COMBINED VIEW
Overlay:
•	Crust formation
•	Magnetic striping
Explicitly show:
Process → Evidence
 
📊 LEGEND (MANDATORY)
Must include:
•	New oceanic crust
•	Older oceanic crust
•	Normal polarity
•	Reversed polarity
•	Direction of plate movement
Legend must:
•	Be fixed on screen
•	Update dynamically with animation
 
⏱️ TIME LINK
As time progresses:
•	New crust forms at ridge
•	New magnetic stripe appears
•	Older stripes move outward
 
🧠 EXPLANATION (INTERACTIVE)
Include:
•	“Magma rises and forms new oceanic crust at the ridge.”
•	“As lava cools, magnetic minerals align with Earth’s magnetic field.”
•	“Each new layer records the magnetic polarity at that time.”
•	“Symmetrical stripes on both sides show that seafloor spreading has occurred.”
 
⚠️ MISCONCEPTION HANDLING
Display prompts:
•	“Seafloor spreading is the process.”
•	“Magnetic striping is the evidence.”
•	“Do not confuse how crust forms with how scientists prove it.”
 
🔄 COMPARE MODE
Allow side-by-side comparison of two boundary types
Prompts:
•	“What is different about the processes?”
•	“Why do different landforms form?”
 
🎯 EXAM ALIGNMENT
Simulation must support answering:
•	Explain how volcanoes form at plate boundaries
•	Explain why volcanoes do not form at some boundaries
•	Describe processes at different plate boundaries
•	Explain how seafloor spreading and magnetic striping provides evidence for plate tectonics
 
📦 OUTPUT REQUIREMENTS
•	ONE self-contained HTML file
•	No external libraries (SLS compatible)
•	Well-structured and commented code
Sections must include:
•	UI Controls
•	Animation Engine
•	Plate Boundary Logic
•	Tooltip System
 
🎯 FINAL GOAL
Students should be able to:
•	Predict outcomes based on plate type and movement
•	Recall syllabus wording accurately
•	Explain processes clearly in exams
•	Link process → landform → evidence
LEARNING OUTCOMES:
•	Students should be able to explore and understand Plate Tectonics
•	Interactive elements should reveal key concepts through manipulation
•	Visual feedback should reinforce learning objectives
•	Design should encourage experimentation and discovery
•	Progressive difficulty: begin with scaffolded questions, then steadily reduce hints until full-difficulty questions are presented
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
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 Student Learning Space or opened directly in a browser.