CTATImageButton

CTATImageButton

A button-like component. It is up to you to provide much of the styling and content for this component. It is essentially a very generic clickable CTAT component. It is recommended that CTATButton is used in most situations as it can be styled to show images or other non-text content and it interacts better with assistive technology.

Code

<div id="button" class="CTATImageButton"><img src="skindata/CTAT-icon.svg"></div>

Running Example

CTATImageButton Example

Attributes and Settings

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATImageButton and no other CTAT<component> classes.
• data-ctat-enabled: true or false. Default is true. Controls if the component will accept student interaction.
• data-ctat-tutor: true or false. Default is true. Controls if direct actions on the component trigger grading.
• data-ctat-show-feedback: true or false. Default is true unless data-ctat-tutor="false". Determines if grading feedback is shown on the component.
• data-ctat-show-hint-highlight: true or false. Default is true. Determines if hint highlighting is shown on the component.
• data-ctat-disable-on-correct: true or false. Default is true. Determines if the component becomes locked when it is graded as correct.
• value: A value to be used as the input of the SAI the button produces when it is clicked. Default is "-1". In most cases, you will not need to change this. It becomes useful when using the button in conjunction with a component that has data-ctat-ctrl-* attributes.
• data-ctat-image-default: Sets the default background image. Default is "".
• data-ctat-image-clicked: Sets the background image for when the button is clicked. Default is "".
• data-ctat-image-hover: Sets the background image for when a user mouses over the component. Default is "".
• data-ctat-image-disabled: Sets the background image for when the component is disabled. Default is "".

The preferred method of setting the background images for CTATImageButtons is to use the css style classes: #button_id (for default), #button_id.CTAT-button--hover, #button_id.CTAT-button--clicked, and #button_id:disabled as these will produce smoother interaction. The data-ctat-image-* attributes should only be used if you need to change the images from the BRD.

It is important to note that if you use data-ctat-image-* attributes, it is important to explicitly set the dimensions of the component as background images do not report dimensions.

Additionally, be aware that the data-ctat-image-* attributes will take precedence over all other background image styling.

Action-Input

In addition to the common Actions listed in Often Used TPAs this component supports the following action:

Action	Input	Notes
ButtonPressed	value (String)	The input value is "-1" unless the value attribute is set.
assignImage	URL	Sets the image for the button. All four images (default, clicked, hover, and disabled) are set to the same url.

Styling

.CTATImageButton {}
.CTAT-button {
	font:inherit;
	width:inherit;
	height:inherit;
}
.CTAT-button--hover {} /* added when mouseover */
.CTAT-button--clicked {} /* added when clicked */
.CTAT-button:disabled {} /* when disabled */

Mass Production

Example for mass producing the images displayed for a CTATImageButton:

<div id="imageButton" class="CTATImageButton" tabindex="2" style="width:60px; height:60px;"
  data-ctat-image-default="%(image-default)%" 
  data-ctat-image-clicked="%(image-clicked)%" 
  data-ctat-image-hover="%(image-hover)%" 
  data-ctat-image-disabled="%(image-disabled)%" >
</div>