Creators can use the Interact element to transform paragraphs of text into different interactive layouts.
Interact Update: 28 February 2023
We have just completed a small update to the Interact element, which increases flexibility with this element and introduces some new options, including:
Instructional text is now optional. This allows you to perhaps put instructional text in a Text element before the Interact element, which gives you more options for layout and scope of instructions.
Item titles are not optional. This can improve options for some layouts. Flipcards, for example, may now just have an image on the front. List layouts can now just show the item text (aligned with list bullets).
Accordion does not option item 1 by default. This small change means you could use a single item accordion layout to create a 'Read more' interaction. Insert an Interact element, select Accordion layout and just one item. Leave the interact instructions blank and title the item 'Read more'. Then add the additional content into item one. This allows you to hide additional content in this single accordion to be revealed by the learner as needed.
Items can now accept up to 3,000 characters per item (up from 2,000 characters).
Process and Acronym layouts no longer scale up small images to fit the element width (allowing smaller images to be shown at their correct size).
The video below provides a brief overview of how you can use the Interact element:
How do creators add content to the Interact element?
Creators can start by adding the Interact element into any point in their topic or article, just like any other element. Each Interact element consists of...
An overall title for the element. This might be a simple title or some instructions about the element itself.
Up to 10 items of content. Each item needs a title and text content (with full text formatting available). Each item can also have an optional image, including access to the image library, image editor and descriptive text for screen readers.
Items can be inserted next to the current item, or moved to change the order of each item.Finally, the creator can select a checkbox to force explorers to review all items before they can progress to the next section in that point.
What are the different layouts?
A final choice in the Interact element is the layout. There is a dropdown menu at the top of the element for Creators to select the layout for their items.
Note that each layout suits different types of content and Creators may want to test a few different layouts to find the most suitable one. The choices, and tips for their best use with different content, are as follows.
Accordion
The Accordion layout provides a vertical row of wide buttons to display your items one-by-one. Accordion is a good choice when you have lots of items to display or want to promote the feeling of 'moving' through content. However, as opening and closing items in an Accordion triggers an animation, Accordions work best with smaller amounts of similarly sized content.
Buttons
The Button layout provides a vertical row of buttons to display your items. Buttons can easily display up to 10 items, but each item needs a short title. Buttons also work best with smaller amounts of content with no, or small, images, such as definitions, FAQs, scenarios. This helps all the buttons stay on the screen at once. The vertical order of buttons can be used for simple step-by-step processes too.
Flipcards
The Flipcard layout provides a grid of 'cards'. Each card has the item title and image on the front, and the item content on the back of the card. The cards can be flipped (click, touch or press enter) to move between the title and the content. Flipcards are very interactive and great for presenting 'matching' items like definitions or scenarios. Content is limited to the size of a card, however, so you need to keep your content to less than 300 characters.
List - Numbered, Alpha and Bullet
The List layout provides an animated, graphical layout of items, including an optional image for each item. Lists have the most flexibility with item content and can handle large variations in length between each item. There are three different list layouts.
Numbered. These lists are automatically numbered, so can be used for step-by-step instructions, ranked content ('Top 5 ideas') or ranked options ('Best to least suitable').
Alpha. These lists are automatically labelled A-J. They are also useful for step-by-step processes, as well as presenting alternative options or different scenarios.
Bullet. These lists are not labelled - they just have the bullet. They are useful for lists where the order is not important (or you want to avoid suggesting a rank or order).
Tabs
The Tab layout provides a horizontal menu of tabs to display your items. Tabs work best with short (single word) titles and up to 4-6 tabs in total. Tabs also display best when each item has a similar length of content. Since tabs only show one item at a time, they are useful for making complex content easier to review. Tabs are also great when each item has a lot of content.
Acronym
The acronym layout allows you to create an acronym, with the title of each item being a letter in your acronym and your content being an explanation of that letter. Each letter within your acronym will be divided by a "What's next?" button, allowing explorers to click through each letter one by one.
Process
The process layout allows you to display a step by step process in an interactive format. Your explorers will be prompted to click on each item to reveal each step in the process.
Timeline
The timeline layout allows you to display a timeline in an interactive format. Your explorers will be prompted to click on an arrow button to reveal each item within the timeline.
Examples:
Let's take a look at some examples of the interact element in action!
Emoticons. You can use emoticons to make your interaction engaging. In this example, we use emoticons as titles with the button layout:
Scenarios. The buttons layout can also be used to display scenarios:
FAQs. The accordion layout is a great way to display frequently asked questions:
Acronym.
Timeline.
Process.
Flipcard images. You can use images to make flipcards visually interesting! We recommend using the image editor to crop your images to portrait:
You can also add images to the back of your flipcards by adding it into your content section. To do this, click on 'insert image' from the text options in the content section.