Advanced: This gives you the ability to change between two images (so one image shows and then you are able to click and it will change the image!)

To do this we need to follow the following steps:

Drag and drop your image component onto the screen in the place you want it to appear, and select your image from your resource manager.

Change your component setting to advanced from the drop down

View default

view name: you can rename this as only you will see this, I have named it Image 1

(so I know this is the first image I want to see)

component completion status: I have set this to complete for my example

transition: select from the drop down how you want the image to change it's view, I'm selecting fade

You will then need to give it an action (I have added a button to my screen - the action I want to happen is: once I click on the button I want image 1 to change to another image)

when the learner does: I am selecting click

this happens: as I want the image to change I am selecting change another components view

change component: I am selecting Button 1 (because this is what I want the action on)

to view: after click (so this is telling the page that when the learner clicks the button the image will change after they have clicked)

Now you need to add the second view/image.

Select add new view this will then bring up the new view to complete.

view name: again you can rename this, I have changed it to image 2

component completion status: I have selected complete

transition: I have selected fade.

select image: select the image you want to show, click on the folder and your resource manager will appear.

Next you will need to add actions to this image.

when the learner does: click (there are more options in the drop down)

this happens: change another components view, (but you have other options available in the drop down)

change component: I am selecting button 1

to view: after click

So this has now been set, so that when I click on the button then after i have clicked image 2 will appear!

Remember to SAVE your screen!

I now need to add a button to make it all happen!

To do this I drag and drop the button component onto the screen

In the component settings change the setting to advanced

view name: before click

component completion status: I am selecting complete

transition and style: you can select from the drop downs for your preference (these are for aesthetics)

You then need to give the component some actions

when the learner does: click

this happens: change another components view

change component: image 1

to view: image 2

In this action you are setting it so that when the learner click on the button you would like image 1 to change to image 2

If you then want the button to do something else then you will need to click on

view: after click (for this example I don't want it to do anything else)

For this example the last thing you need to complete is the completion options and I have selected image 1

Remember to SAVE your screen! you can now view it in the learner view to make sure you are happy with how it works 😊

See the short video to see it working

Did this answer your question?