1. Set up your page and add your content components

a) First of all, you will need to add your rows and columns to prepare your page for the flip card layout. In my example, I have added 2 rows, each with 3 columns in them.

b) Then, drag and drop your 'Group' component into the first space.

c) Drag and drop an image component into the Group component.

d) Add your image by clicking and selecting an image from your resource manager.

2. Add a second 'view' to the Group for the text

a) Go to the settings for the 'Group' component (click on the cog) and change it from a 'Simple' to 'Advanced' component in the drop-down.

Now your Group is advanced, you can add different views and actions. We only need 2 views, one for the image, and one for the text.

b) Name the first view 'image'

c) Click '+ add new view' and name this one 'text'

d) Select your transition for both views, for my example I am going to use 'slide down' for the image and 'slide up' for the text.

e) Click on 'view: text' and then drag and drop a text component into the (now empty) group, like you dropped in the image component before.

f) Type your text!

3. Add the click change image to text

Now we have our content, we just need to make it flip/slide between the two when a learner clicks.

a) Name the Group component something sensible which you will recognise from a list, like 'Flip Card 1'.

b) Open the image component settings, by clicking directly on the image (if the settings panel is already open) or clicking on the cog on the image (if settings panel is closed).

c) Change the image component from 'simple' to 'advanced' so we can add several actions.

d) Open up 'actions' and click on the edit pencil to open the one action there which will be marked as 'incomplete'.

e) Name the action 'flip to text', select 'Flip Card 1' under change component, then chose the 'text' view. And click done.

4. Add the click change text back to image

b) Open the text component settings

c) Change the text component from 'simple' to 'advanced' so we can add actions.

d) Open up 'actions' and click '+ add action'

e) Name the action 'reset to image' or similar and add the following settings...

Now, test it in learner view. Remember to save and also reset the screen. You should be able to click on the image and it slides to the text, then click on the text and it slides back to the image. If anything looks wrong at this stage, go back and check your action settings.

Did this answer your question?