Skip to content
Adapt User's Guide version 4.5

Demo

The demo component is a carousel-like slideshow for displaying large images and brief text descriptions. The component was created to handle walking a user through a series of screens with brief information panels that you position above the image.

Demo Settings

The Demo inherits all the settings common to the Presentation Components.

Views

This is a list of the screens in the demo. When you click the Add button, a dialog will slide out from the right side of the screen allowing you to populate the demo screen. The fields in this dialog are:

The alternative text for this image.

Note: The alternative text in the demo component is extremely vital to the accessibility of the component. This value must completely describe the image, any highlights and all relevant content on the screen.

The image for this screen.

An optional title for this screen.

The instructional text for this screen.

Allows you to position the information panel relative to one of the four corners of the image. This will also mean that the dialog will “grow” outward from this corner.

Left or Right position of information panel depending on what value you chose for “Position Relative to”. Values are in percent.

Top or Bottom position of information panel depending on what value you chose for “Position Relative to”. Values are in percent.

The width of the panel, in percent.

The text that appears on the button that moves the user to the next slide (or the first slide).

Adds a back button to the information panel, that allows the user to move backward in the sequence.

Note: Do not enable a Back button on the first screen (It won’t do anything).

The label for the back button on this screen.

Demo Graphics

The image for the Demo component is width-constrained — the images can be of any height but must be 982px wide.

While the images can each be a different height, images that vary greatly in height may cause the screen to jump as the learner moves between screens.

The component does not have built-in highlights — You will need to any areas you’re highlighting to the user directly in the image.