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
