PART 2: Adding Your Actions

1. Making the Text Appear

a) Open the settings for your first image (click on the cog), click on the first view called 'Default', and go to 'actions' then '+ add action'

b) name this action 'show text info',

c) select an input action of 'click'

d) select an output action of 'change another component's view'

e) select the text component which is sitting under this image, (e.g. 'leggings text')

f) and select the view called 'Info'.

Do this for all of your images and the text which goes with it.

2. Making the Image Change

a) Again, open the settings for your first image (click on the cog), click on the first view called 'Default', and go to 'actions' then '+ add action'

b) name this action 'change image'

c) select an input action of 'click'

d) this time, select an output action of 'move to next view'.

Do this for all of your images.

3. Clearing the other text

This is not essential, but if you would like all the other text labels to go back to default (for the text to disappear) when you click a new image, this set of actions will do this for you.

a) Again, open the settings for your first image (click on the cog), click on the first view called 'Default', and go to 'actions' then '+ add action'

b) name this action so you know which text box is being reset/cleared. E.g. in my example I use 'clear socks text'

c) select an input action of 'click'

d) select an output action of 'change another component's view'

e) select the component you are wishing to clear, e.g. 'socks text'

f) select the original view, called 'Blank' for text

Do this for all other text boxes for each component.

4. Making other images go back to default

Now, you have cleared the text on click, you will also need to take the image back to the original state so it can be clicked again to make the image appear.

NB: If you don't do this, it means the image can only be clicked once for the text to appear, then it will not work a second time.

a) Again, open the settings for your first image (click on the cog), click on the first view called 'Default', and go to 'actions' then '+ add action'

b) name this action so you know which image is being reset/cleared. E.g. in my example I use 'deselect socks'

c) select an input action of 'click'

d) select an output action of 'change another component's view'

e) select the component you are wishing to clear, e.g. 'socks image'

f) select the original view, called 'Default' for images.

Set up an action for each of the other images to be cleared, and then do this for all each component.

By now, if you have 4 different images (like the example) you should have 8 different actions each image, under 'view: Default'.

Like this...

5. Clearing the text and image on the second click

Finally, to allow learners to 'turn off' the text for each image, after they have made it appear, you need to add a couple of actions for each 'Selected' state of the images.

For the text:

a) Open the settings for your first image (click on the cog), click on the second view called 'Selected', and go to 'actions' then '+ add action'

b) name this action 'Clear Text'

c) select an input action of 'click'

d) select an output action of 'change another component's view'

e) select the text box belonging to your image e.g. 'leggings info'

f) select the original view, called 'Blank' for text.

For the image:

a) Again, open the settings for your first image (click on the cog), click on the second view called 'Selected', and go to 'actions' then '+ add action'

b) name this action 'Clear Image' (or 'Deselect' if you have used a second image with highlighting)

c) select an input action of 'click'

d) select an output action of 'move to next view'

Well done - you have completed the set up!

Now, make sure you save all your hard work, go to 'learner view' and 'reset screen state' and test your new interactions. If any parts are not working as expected, go back through the instructions above and see what you have missed.

As always, get in touch if you have questions or would like a demonstration from our team.

Did this answer your question?