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.

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

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.

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATHintWindow and no other CTAT<component> classes.
• data-ctat-speak-hints: "true" or "false". If "true", hints and feedback will be spoken aloud (see the "Text-to-Speech" section for more detail). Default is "false".
• data-ctat-show-text: "true" or "false". If data-ctat-speak-hints is "true", this attribute determines whether hint and feedback text will be displayed by the component (if data-ctat-speak-hints is "false", this attribute has no effect). Default is "true".
• data-ctat-lang: If data-ctat-speak-hints is "true", this attribute determines the language used for text-to-speech synthesis. Its value should be the ISO language code for the desired language. For a list of ISO codes for various languages, see http://www.lingoes.net/en/translator/langcode.htm . Default is "en-US".

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

.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;
}

If this component's data-ctat-speak-hints attribute is set to "true", hints and feedback generated by the tutor will be spoken aloud. Additionally, tutor authors can embed special tags in hint/feedback strings in order to trigger changes in the interface that coincide with the timing of the spoken feedback (for example, indicating a certain component that the student should interact with). A "markStart" tag indicates that such a change should begin when that tag is reached, and a "markEnd" indicates that a change should end.

The syntax of these tags is: <%=markStart|markEnd(<name>, <IDs>, [data])%> where:

• <name>: (string) Required. A name for the mark event.
• <IDs>: (array of strings) Required. A list containing the IDs of the components affected by the event.
• [data]: (string) Optional. Any additional data the author wants to include in the event.

When a "markStart" or "markEnd" tag is reached during the speaking of a hint or feedback, two things happen:

• The name of the event is added to or removed from the class list(s) of the component(s) named in the tag (added if it is a "markStart" tag, removed if it is a "markEnd" tag). Authors can add CSS to style these classes as needed.
• An event is dispatched on the components named in the tag. The type of the event is either "markstart" or "markend". The detail property of the event object is an object with the properties name and data. name stores the value of from the tag, and data stores the value of [data], if it was included. Authors can use event listeners to add custom handling of mark tags beyond the addition/removal of CSS classes.

Here's an example hint string containing mark tags:

"The sum of 1<%=markStart('highlightYel', ['ie32'])%> plus 2<%=markStart('highlightYel', ['ie33'])%> is 3<%=markStart('highlightBlue', ['ie22'],3)%><%=markEnd('highlightYel', ['ie32','ie33'])%>. Enter 3 in the blue box.<%=markEnd('highlightBlue', ['ie22'])%>"

Here's what the accompanying CSS might look like:

.highlightYel input {
	border: 5px solid yellow;
}
		
.highlightBlue input {
	border: 5px solid blue;
}

And the JavaScript to handle the "markstart" and "markend" events:

let ies = document.querySelectorAll(".CTATTextInput") //get all Text Input components
for (let i = 0; i < ies.length; i++) { //for each component
  let ie = ies[i];
  ie.addEventListener("markstart", (e)=> { // add markstart listener
    if (e.detail.name == "highlightBlue" && e.detail.data !== null) {
      ie.querySelector('input').value = e.detail.data; //display the hinted step in the input field
    }
  });
  ie.addEventListener("markend", (e)=> { // add markend listener
    if (e.detail.name == "highlightBlue") {
      ie.querySelector('input').value = ''; //clear the input field
    }
  });
}

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.