top of page

Beneath the Surface

Peel back layers of an image to reveal what sits underneath.

Best for: anatomy, systems, root cause analysis.

Build Layered Image Reveals Without Writing Code

Complex systems get taught as a stack of separate diagrams. The learner sees the surface on one slide and the wiring three slides later, and never connects the two.

Beneath the Surface stacks those views into one image learners peel back layer by layer. You load each level, write what it explains, and export a single HTML file you embed in Articulate Rise, Storyline, Captivate, Canvas, Moodle, or any LMS that accepts HTML.

Use it for anatomy, building systems, network architecture, and root cause work, where understanding depends on seeing how the layers sit on top of each other.

WHY IT WORKS

Beneath the Surface peels back layers of an image to show what sits underneath.

Signals that show how text and pictures connect improved comprehension, most of all for learners new to the topic. Richter, Scheiter and Eitel (2016).

Build Layered Image Reveals Without Writing Code

How To Use the Generators


Each tool in the eLearningDesign.org ecosystem follows a streamlined, three-step workflow designed to keep you focused on instructional strategy while we handle the technical execution.

  1. Input Your Content: Open the Content tab to add your specific learning prompts, interactive options, and coaching feedback. This is where you build the logic and instructional heart of your activity.

  2. Customize Your Design: Switch to the Design tab to align the tool with your course aesthetic. You can manually adjust colors, typography, and layout structures to ensure a seamless visual fit.

  3. Generate and Embed: Go to the Generate tab to finalize your tool. Click "Copy Embed Code" for your authoring tool's HTML block, or "Download as HTML" for local hosting and offline use.

Common Use Cases


  • Anatomy and Healthcare: Move from skin to muscle to bone in one image instead of three disconnected slides.

  • Building and Facility Systems: Show what runs behind a wall or under a floor without a site visit.

  • Root Cause Analysis: Let learners dig past the visible symptom to the failure underneath it.

Technical Specifications


  • Visual Interface for Code: Stack your image layers in order while the generator handles the reveal sequence and transitions.

  • Fixed-Frame Optimization: Built to hold its layout inside iframes and web objects in Rise 360 and Storyline.

  • WCAG Friendly: Includes keyboard navigation support so the activity stays accessible.

  • Brand-Consistent Palette: Fully customizable colors and fonts so the tool matches any corporate, educational, or organizational identity.

bottom of page