CTATHintWindow

CTATHintWindow

A special component used to provide text feedback to users from the tutoring service. This is a component that should be included in every tutor.

Code

<div id="hintWindow" class="CTATHintWindow"></div>

Running Example

All of the component examples include a CTATHIntWindow because all CTAT Tutors should have one as this is the main way for the tutor to provide text feedback to a student! 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 CTATHintWindow

Modify the Language Pack to change the labels on the buttons which are labelled "Previous" and "Next" by default.

Action-Input

Action	Input	Notes
SetVisible	Boolean (true or false)	true makes it visible.

Styling

.CTATHintWindow { /* hint window container styling */
	width: 240px; height: 140px; /* default size */
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: #cccccc;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	padding: 5px;
	box-sizing: border-box;
	background-color: #DDDDDD;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.CTATHintWindow--hint-content { /* Hint window content (eg) hints */
	text-align: left;
	padding: 2px;
	overflow: auto;
	background: white;
	border-width: 1px;
	border-style: solid;
	border-color: #cccccc;
	cursor: default;
	margin-bottom: 5px;
	flex: auto;
	pointer-events: none;
}
.CTATHintWindow--hint-button-area { /* area containing the buttons */
	flex: none;
	display: flex;
	justify-content: space-between;
}
.CTATHintWindow--button { /* hint window buttons */
	border-radius: 5px;
	font: 11px Helvetica Neue, Helvetical, Arial, sans-serif;
	stroke-width: 0px;
	width: 82px;
	height: 20px;
	outline: none; /* No focus highlighting */
}
.CTATHintWindow--button-icon { /* the arrows in the buttons */
	margin-left:3px;
	margin-right:3px;
	vertical-align: middle;
	font-weight: bold;
}
.CTATHintWindow--previous {} /* hint window previous button */
.CTATHintWindow--next {} /* hint window next button */

/* Also used on CTATHintButton */
.CTAT-hint-button { /* on the <button> */
	overflow: hidden;
	padding: 0;
	font: inherit;
	border-radius: 5px;
	background-color: gold;
 	border: 1px solid orange;
 	cursor: pointer;
 	width: inherit;
 	height: inherit;
}
.CTAT-hint-button:focus { outline: 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 the buttons in this component, see CTAT Advanced Topics - Internationalization Support. This Component uses the "NEXT" and "PREVIOUS" entries, though "OUTOFORDER", "HIGHLIGHTEDSTEP", and "NOTDONE" will show up in the text area at appropriate times.