Click on the button component and drag and drop it into either the row or column that you want the attachment to show on the screen.

(remember you can only drop when you the row or column turns blue and says drop component here!

Advanced Setting

Advanced setting allows you to make the button a bit more interactive, in this example I will make an image appear once I click the button whilst at the same time the button will disappear from the screen!

Set your screen up with the components you want to see on the screen (I've selected a button and an image)

View: before click - you can change this name if you would like to something relevant to you, as the user will never see it.

component completion status: - you have 3 options in a drop down , I am selecting not started

The rest of the options are styling so you can amend as necessary.

You then need to add an action

edit action - is an generated action number (you can rename to make it easier for you)

when the learner does: here you decide how the button is activated - I am selecting click

this happens: you have a variety of options to decide what happens - I am selecting move to view (so when the learner clicks the view I've set it so the image appears)

to view: again you have a selection of options here - I have picked after click (so that the image will not show until I after the button is clicked)

If you then want to add more actions to the button you just click add action (you can add as many as you like)

You then need to move onto what happens after the button has been clicked.

View after click

view name: again you can name this something easy for you to understand (I'm using after click)

component completion status: you have three options to select from, I am selecting complete.

transition, style you can select how you would like it to look

hyperlink: I will explain in the next section 😊

toggled: you can leave blank

disabled: tick this box, this will disable the button once it's been clicked

You will then need to add some actions for this view.

edit action - is an generated action number (you can rename to make it easier for you)

when the learner does: here you decide how the button is activated - I am selecting click

this happens: you have a variety of options to decide what happens - I am selecting change another component's view (so this is telling the program that once the learner has clicked the button I want something to happen and the learner will see it)

change component: this is where you select what the learner will see once they have clicked the button) I've selected image 1 (as I want an image to appear when they have clicked the button)

to view: this is kept at default

If you then want to add more actions to the button you just click add action (you can add as many as you like)

Again If you then want to add more actions to the button you just click add action (you can add as many as you like)

completion options: select what component you want to be disabled until the button has been clicked.

visibility options: select which component you want hidden until the button is clicked.

I've selected image1 for the example.

*Remember to save your screen as you go!

Watch this short video to see the advanced button working in action 😊

Did this answer your question?