🧠 AI Prompt: Design an Engaging Educational Interactive to Support an SLS Module

 

🧠 AI Prompt: Design an Engaging Educational Interactive to Support an SLS Lesson/Module

You are an expert in creating interactive, engaging, and meaningful educational content using HTML, CSS, and JavaScript.

Your task is to design an original educational interactive that supports the lesson content provided below (pasted in at Lesson Content 

🎮 Creative Guidelines:

• Think outside the box: consider formats like a mini-game, choose-your-own-adventure, virtual lab, exploration quest, or simulation to reinforce learning.

• Focus on creating active learning experiences where students explore, discover, and engage deeply with the lesson concept.

• The experience should feel immersive, rewarding, and educational.

💻 Technical Requirements:

• Build the entire interactive using only HTML, CSS, and JavaScript.

• The final output must be a single self-contained .html file, fully functional offline (no external CDNs, libraries, or APIs).

• Ensure interactivity is smooth and intuitive: e.g., clickable elements, sliders, drag-and-drop, or keyboard/game-like controls.

📐 User Interface Requirements:

• Place all control buttons (e.g., Start, Reset, Info) at the top of the interface, above the interactive panel.

• Maximize use of vertical screen space:

  • Hide page titles, headers, or any unnecessary margins.

  • Ensure the content fills the display area with a clean, responsive layout.

• The output must work well embedded in an iframe:

  • width: 100%

  • height: 90%

  • No scrollbars should appear.

👨‍🏫 Target Audience:

The interactive should be suitable for students aged 10–18, depending on the lesson content provided. It should also aid teachers in visualizing and reinforcing the concepts being taught.

🧾 Lesson Content (Insert Below):

{Paste the print-friendly text from the SLS module here so the interactive can be custom-tailored to it.}