In this article we will show you how to set up images with text underneath which appears when the learner clicks the image. On this page is an example of what we will be building: https://buildempire.github.io/thirst.io/courses/getting-into-running/20200616-155827/#/display/92

If you already know a bit about using advanced components, this video is a short demo of how to set this interaction up:

If you would like a step by step guide, then read through the instructions below...

PART 1: Adding the Content

Step 1 - Add Your Components

First of all, drag and drop your image and text components onto the page. Don't forget to add the relevant columns and rows to get your layout right. In my example, I have added one row, and with that I have added 4 columns. In each column I have added an image and a text box underneath that image.

Step 2 - Add Your Views

You will need to make sure your components are all set to 'advanced' so we can add multiple views and actions to these views.

Remember to name your views and components so that when you are adding actions, you can clearly see what you are adding.

  • For each image component, add 2x views - name them 'Default' and 'Selected'
  • For each text component, add 2x views - name them 'Blank' and 'Info'.

Step 3 - Add Your Images and Text

Images:

For both image views, add your image. Click the folder icon to go to your resource manager.

Optional - You can add a second image with highlighting if you wish, as I have done in the example. This is just an additional extra, I added the blue border in photoshop.

Text:

Your first text view called 'blank' will have no text in it. In the settings panel, click on the second view called 'Info' then write your text straight into the text box. To check you have written your info in the right state, you can switch between the two views in the settings menu, just by highlighting each one.

Did this answer your question?