Created by Smart Sparrow

Navigation Button

The Button component provides a way to have multiple custom-labeled buttons to trigger check events on a screen. Buttons are screen-reader accessible and can be customized in multiple ways via CSS. Buttons can also be made transparent and placed over images or parts of images to create the effect of having visual navigation elements.

Unique ways to use this widget

There are multiple ways you can set up and use this widget to create more interactive learning experiences. For example:

  • Allow learners to select the next section of a lesson that they wish to visit in a “Choose Your Own Adventure” style.
  • Trigger an action on the screen, e.g. change something in a simulation or the settings of an existing question. Basically, it allows a trap state to be triggered with the possibility of a particular action resulting from the choice.
  • Create an “invisible” button to have students click on a particular part of an image, e.g. “Click the ISBN on this journal article.”
  • Ask learners to select “which of the following…” is their favorite choice or correct answer.


Setting up the Component

  1. This component can be found in the Author. Insert the widget from the Components tab and resize it to your liking.
  2. With the component selected, Click on Configure and select Options to set it up.
  3. Open the options menu to set key properties of the button
    • Title sets the text displayed on the button itself.
    • Accessibility text sets the text read out by screen reading programs for visually impaired students.
    • Enabled, Visible, and Transparent each toggle their respective properties for the button. For example, you may want to have a button be disabled and/or invisible until a student makes a particular error, or you may want it to be transparent so that it will show any underlying content.
  4. Have a look at the CAPI table desciption at the bottom of the article for more information on what you can do.


Configuring Adaptivity

  • To build a trap state around the button component, use the Button.Selected property. A trap state that would trigger when the button is pressed would have the condition “Button.Selected is true”.
  • When using the Button.Selected condition in an incorrect trap state, make sure to deselect the button in the Action portion of the trap state. You can do this by setting an action to “Button.Selected is false”.

Other Options

  • CSS styling can be added by placing a URL in the CSS Source box


Component Properties

Properties available for creating trap states or configuring your questions.

Property Purpose Type
The title of the button
Accessibility Text
The text of the button to be read out for accessibility purposes
If the button has been selected
CSS Source
Css or the url of the CSS file to style the button
Enables or disables the button
Controls the visibility of the button
Makes the button transparent. The title of the button will remain visible



Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services