Components | Before/after

"Before / After" is a component that includes two images. Students can move a central bar to show one image or the other. This action allows showing an image in a certain way, showing it differently when moving the bar.
You will find this component in the group of "Image" components.

This component is added within the screens by default (See here), but it can also be added inside other components (for example, a Highlight, an Accordion, a Row, etc.)

It is a complex component that contains two images. "Before / After" component and its images have specific properties. In order to configure it correctly, we should select each element individually. We can select elements from the breadcrumb trail and from the "Structure" tab.

Breadcrumb trail

"Structure" tab

Setup process

1. Configure general "Properties" of this component (See the table at the bottom of this page).

2. Configure the content of "Instruction" component that is added by default at the bottom. If you wish, you can delete it.

3. Select the image on the left. Access its properties, go to "Resource" and click on "Examine" to browse and select an image from the unit Resources folder (see Section 4.10. in the Author's Guide to learn how to manage the Resources folder). Optionally, we can configure two additional properties in this image:

"Alternative text": a text that is shown when placing the cursor over the image or when the image cannot be loaded.
"Credits": if we click on the left-upper area over the image, we can add a text that shows authorship credits. This property allows adjusting text contrast depending on the background, so you can put a black text ("Positive" option) or a white text ("Negative" option).

4. Select the image on the right and repeat actions of step 3.

5. Optionally, you can select "Before /After" component and access the "Add" tab. You will be able to add a "Caption" or an "Instruction" (if the instruction was deleted before).

Properties

PROPERTY

DESCRIPTION

Width

This property allows changing the space occupied by a component inside a central column of contents. This property occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in "full-size". For some quote styles, "Full" width makes quotes lay over the central column.

Align

This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.

Float

It allows inserting a component and "wrap" it with a text.

First, we should select a size percentage under 100% in "Width" property (25%, for instance).
"Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text).
We use arrows to move the component and put it on the text.

Overcome goal

It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between:

Inherited: this option aply the default value defined in the Completion Objectives Area (See here).
Non objetive: this audio will not an objetive to complete the unit.
Interact: It is necessary interact with the component to reach the objective.