CTATButton

CTATButton

A simple button component. This is the preferred button component and should be used in most cases as its underlying entity is a button which interacts better with assistive technology. If you require a more general clickable item, you can use CTATImageButton.

Code

<div id="button" class="CTATButton">Click Me</div>

Running Example

CTATButton 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 CTATButton 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.

To add a label, insert text inside the <div>. In the example above, the label would be "Click Me". To make an image button, simply insert an <img> tag in the <div>, for example:

<div id="img_button" class="CTATButton"><img src="CTAT-icon.svg"/></div>

Action-Input

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

Action	Input	Notes
ButtonPressed	value (String)	The input value is "-1" unless the value attribute is set.
setText	value (String)	Sets the button label to the given value.

Style

.CTATButton { display: inline-block; } /* size based on the button's content */

With no extra styling, this will use the <button> tag to generate a button. It will have the following classes added to it so you can override these classes to modify the look of the buttons. See the linked example for a demonstration.

.CTAT-button { /* For the generated <button> */
	font:inherit;
	width:inherit;
	height:inherit;
}
.CTAT-button:hover {} /* when the mouse is hovering over the <button> */
.CTAT-button--clicked {} /* when the <button> is being clicked */
.CTAT-button:disabled {} /* when the <button> is disabled */

Mass Production

Example for mass producing the button's label text:

<div id="button1" class="CTATButton">%(button1-text)%</div>

Example for mass producing the button's image:

<div id="img_button" class="CTATButton"><img src="%(img_button-src)%"/></div>