Creators can use the Interact element to transform paragraphs of text into different interactive layouts.

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.

Examples:

Let's take a look at some examples of the interact element in action!

  1. Emoticons. You can use emoticons to make your interaction engaging. In this example, we use emoticons as titles with the button layout:

  2. Scenarios. The buttons layout can also be used to display scenarios:

  3. FAQs. The accordion layout is a great way to display frequently asked questions:

  4. Acronym.

  5. Flipcard images. You can use images to make flipcards visually interesting! We recommend using the image editor to crop your images to portrait:

Did this answer your question?