Created by Smart Sparrow

Image Reveal

The Image Reveal component allows a learner to swipe between two different images using a handle. By using two interrelated images this widget provides the ability to ’reveal’ different features or illustrate different aspects of something. As a designer you can define the images that will appear along with the image descriptions and the colour of the slider handle.


Unique ways to use this widget

This component can be used to provide an interaction where labels or other diagrammatic elements can be hidden or revealed. It can also be utilised to simultaneously show two different states of something, allowing students to have an interaction where they compare and contrast these states.


Have a play


Basic setup instructions

  1. Copy the simulation link by clicking on the Get Component button at the top of this page.
  2. In the Author Tool, add a Blank component from the Components tab and resize it to your liking.
  3. Paste the url that you’ve just copied into the Component’s source.
  4. With the component selected, Click on Configure and select Options to set it up.
  5. You can enter in the URLs for the images that will appear along with their alt text descriptions. You can also indicate the desired handle colour.


Other options

If you wish the handle to appear in a set location (rather than in the center as default) it is possible to indicate the position in the initial state for the screen using the property “Current Position”. A value of 0 positions the handle at the far left of the frame and 100 positions it at the far right.


Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services