Flow Chart Component

This component is suitable for use when creating accessible courses.

The Flow Chart component lets the learner interact to get more information about the topic, step by step, vertically down the page.

This article provides an overview of the Flow Chart component, component setup and behavior, and examples of Flow Chart component configurations.

Component overview

The Flow Chart component is an interactive component that is ideal for describing processes, workflows, or timelines. The Flow Chart component can be configured to have animations run on the next item and it is possible to display images next to the text in the Flow Chart component items.

The Flow Chart component is fully responsive.

Component set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Scroll down the page to add your Body, as needed. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.
3. Enter Next Button Aria Label, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Flow Chart component. This widget can display an icon and label prior to the Flow Chart component completion, which changes to a different icon and label once the Flow Chart component is completed.

Behavior section

1. In the Behavior section, toggle Disable Flowchart Scroll to enable this setting. Enabling Disable Flowchart Scroll will make it so the browser does not scroll to flowchart items when opened.
2. Toggle Allow Flowchart Item Focus to enable and allow focusing flowchart items.

Animations section

In the Animations section, toggle to enable what animations are run when the next Flow Chart item is displayed.

By default, Flowchart Button Animation is enabled. Enabling Flowchart Button Animation will display a pulse animation on the flowchart button until it is clicked.

Add Flow Chart Items

In the Items section, you add Flowchart Items to your Flow Chart component.

For each Flow Chart Item:

1. Add the Item Title for the Flow Chart Item.
2. Edit Item Title Settings, as needed.
3. Add your Item Body. Use the text editor to style and format your text, as needed.

1. Select an Item Image to display.
2. Set Image Per Device Size, as needed.
3. Enter Alt Text for accessibility, as needed.
4. Enable the learner to View Image in Lightbox.
5. Enable Magnifier to display when learner hovers over an image.
6. Set Item Graphic Layout. Select the position of the image relative to the text. By default, this is set to Bottom. The layout options are: Right, Left, Top, and Bottom.
7. Set Item Graphic Width. By default, this is set to 50%. The Item Graphic Width can be set to 30%, 50% or 70%.

Note: The Item Graphic Width only applies if Item Graphic Layout is set to Left or Right layout.

Component Examples

The Flow Chart component gives you a lot of flexibility as to the layout settings. Below are examples that illustrate some Flow Chart component setups:

Example 1 - Item 1 illustrates the Graphic Layout set to the left and text content to the right. The Item Graphic Width is set to 50%.

Example 2 – Item 2 illustrates the Graphic Layout set to the right and text content to the left. The Item Graphic Width is set to 30%.

Example 3 – Item 3 illustrates a Flow Chart Item configured with the default Graphic Layout, i.e. set to Bottom and the text content displayed on top.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.