Button text

The text of the button.

Aria-label

Insert a concise but descriptive button label here for screen readers when the button has only an image and no button text.

Aria-role

If you are using the "Link" or "Document" feature, please enter a "link" role here for the screen readers. By default, the button role is 'button'.

Width

The width of the button. When empty, the width adjusts to the button text and/or image.

Link

Insert a link the button should open. Depending on the user's browser settings, the link will open in a new tab or window.

Document (select from linked resources)

Select a document from linked resources that the button will open. Depending on the user's browser settings, the link will open in a new tab or window.

You can read more about the Linked resources screen in the article titled E-learning linked resources.

Class name

The default class custombtn is used for styling the button. Please leave it as it is.

Class name clicked

An assigned class here styles the button after it is selected. By default, the button style remains the same, so there is no class here.

Text align

Align the button text to the left, centre or right.

Button shadow

You can choose to add shadows to the buttons. Leave it empty for no shadow.

Text size (px)

The size of the button text.

Text color

The colour of the button text.

Text background color

The button text background colour. Use this setting when you have a button image.

Text background opacity

The opacity of the button text background colour. Use this setting when you have a button image and "Text background color".

IMG upload

Select and upload a button image.

IMG SRC

When you upload an image, its location code is generated here. You can copy and paste this code into other elements to re-use the image.

IMG class name

The default class responsive is used for styling the button image. Please leave it as it is.

Text position

Choose where the button text will appear in relation to the button image - above, below or on top of the image.

Padding-top (px)

The setting determines the size of the gap between the button text and the button image. When the "Text position" is set to below the image, the gap is above the text.

Padding-bottom (px)

The setting determines the size of the gap between the button text and the button image. When the "Text position" is set to above the image, the gap is below the text.

Preserve state

When set to yes, the button action is saved.

For example, if you use "Disable after click" or "Add/Remove element" features and preserve the state, users returning to the page with this button, will have the button disabled or the element will stay added or removed.

Disable after click

When set to yes, the button can be selected only once.

Set the "Preserve state" setting to yes when using this setting.

Mark module as completed

Set it to yes when the selected button should mark the module status as complete in the LMS.

Set the "Preserve state" setting to yes when using this setting.

Close module

If set to yes, the module will close when the button is selected.

Next button action

Show or hide the next/continue button. If the next/continue button should take the user to a certain page or section, select its identifier here.

NOTE: You must first assign an identifier to a page or a scrolling section.

Show next delay

Set a delay for when the next/continue button should appear. To delay it for one second, enter 1000 here.

Go to page

If the button should take the user to the next, or a certain page or section, select its identifier here.

NOTE: You must first assign an identifier to a page or a scrolling section.

Add element

To add content to the page or section after selecting the button, select the required elements' identifiers here.

NOTE: You must first assign identifiers to elements.

If you want the added element to remain on the screen when users revisit the page, you can set the "Preserve state" setting to yes.

Remove element

To remove content from the page or section after selecting the button, select the required elements' identifiers here.

NOTE: You must first assign identifiers to elements.

If you want the removed element to remain removed when users revisit the page, you can set the "Preserve state" setting to yes.

Entry

Entry animation for the added elements. Enter a value from 0 to 6:

0 - no animation

1 - fade

2 - slow fade

3 - slide from left

4 - slide from right

5 - reveal from top

6 - expand

Delay

Entry animation delay for the added elements. To delay it for one second, enter 1000 here.

Add objective

Used for intelligent learning. Please leave it as it is.

Set the "Preserve state" setting to yes when using this setting.

Remove objective

Used for intelligent learning. Please leave it as it is.

Set the "Preserve state" setting to yes when using this setting.

Set data variable

If a text value is put here, it will be written to the learner's session data when they complete the assessment.

It must be used in conjunction with the "Set data value" field.

Set data value

In conjunction with the "Set data variable" field, any value entered here (text or numerical) will be written to the learner's session data alongside the data variable.

Download PDF

Select an identifier of an element text you would like to download as PDF.

NOTE: You must first assign the identifier to the element.

Focus on

Select an identifier of an element you would like to direct focus onto when user selects the button.

NOTE: You must first assign the identifier to the element.

Scroll to next section (scrolling skin)

When set to yes, the button will take the user to the next scrolling section.

NOTE: Use for scrolling skin modules only.

Print certificate

Opens a certificate for printing. You can select a general completion certificate or a certificate with the assessment score. A button with this feature should be added to the end of the module.

Confirmation pop-up

When set to yes, the button opens a popup.

Pop-up title

The title of the popup.

Pop-up body

The body text of the popup.

Pop-up option1

The confirmation popup option. Once selected, it closes the popup and triggers the other set button actions.

NOTE: If you choose to have only one popup option, use the option 1.

Pop-up option2

The cancel popup option. Once selected, it closes the popup.

NOTE: If you choose to have only one popup option, use the option 1.

Width

The width of the popup.

Controls position

The position of the Pop-up options 1 and 2.