CTATHintButton

CTATHintButton

This is a special component and should always be included in a CTAT tutor. A user clicks on it to request a hint. It works in conjunction with a CTATHintWindow to provide text feedback in addition to hint highlighting.

Code

<div id="hint" class="CTATHintButton"></div>

Running Example

All of the component examples include a CTATHintButton because all CTAT Tutors should have one! See CTATRadioButton 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 CTATHintButton and no other CTAT<component> classes.
• data-ctat-enabled: true or false. Default is true. Controls if the component will accept student interaction.

The label text can be modified by changing the text in the Language Pack. Do not add anything to the content of the CTATHintButton <div> entity.

Action-Input

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

Action	Input	Notes
ButtonPressed	"hint request"	Selection is always "hint"

Hint requests are special actions and the are treated differenly from other component actions, for example they will not explicitly show up in behavior graphs but will trigger any hints associated with the current node.

Styling

.CTATHintButton  {
	font: 15px Helvetica Neue, Helvetica, Arial, sans-serif;
	width: 66px; height: 66px; /* default size */
}
.CTAT-hint-button:focus { outline: none; }
.CTAT-hint-button--icon { /* on the ? */
	font-size: 44px;
	pointer-events: none;
	position: relative;
	top: -10px;
	height: 60%;
	font-weight: bold;
}
.CTAT-hint-button--text { /* on the text (eg) "Hint" */
	pointer-events: none;
}
.CTAT-hint-button--hover { /* added when moused over */
	background-color: #E6C200;
}
.CTAT-hint-button--clicked { /* added when it is clicked */
	background-color: #FFDB19;
}

To change the text used with this button, see CTAT Advanced Topics - Internationalization Support. This Component uses the "HINT" entry.