Available in CTATv4.5 and later This component enables users of collaborative tutors to communicate via typed chat messages. Unlike most CTAT components, entries are ungraded by default. To use the Chat Panel effectively, Chat Panel must be connected to Tutorshop with a Web Socket connection to multiple members of the collaborating team.

<div id="chat_panel" class="CTATChatPanel"></div>

(live example will be up soon)

CTATTextInput Example

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATChatPanel and no other CTAT<component> classes.
• data-ctat-enabled: true or false. Default is true. Controls whether the component will accept student interaction.
• data-ctat-tutor: true or false. Default is false. Controls whether chat entries are graded.
• data-ctat-highlight: Optional. true or false. Default is true. Put false if you do not want the chat text to be highlighted (limegreen on correct, red on incorrect and yellow on hint). Controls if the chat text will be colored on feedback when data-ctat-tutor is true.
• 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.
• data-ctat-submit-on-blur: true or false. Default is true. If false the component will not submit the content for grading when the cursor focus exits.
• data-ctat-submit-on-enter: true or false. Default is true. If false the component will not submit the content for grading when the user presses the Enter key.
• data-ctat-warning-text: "string". Default is "". If set, displays string in a fixed panel as a notice to the user. This feature can be used to give instructions or warn the user that, e.g., chat texts should not be abusive.
• data-ctat-warning-img: "URL". Default is "", i.e., no image. If set, should be the relative or absolute URL of an image to be displayed beside the data-ctat-warning-text, above.

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

.CTATChatPanel { 
    width: 300px; 
    height: 50px;
    margin: 10px;
    display: flex;
    background-color: white; 
    position: relative;
    flex-direction: column; 
}
.CTATChatPanel--chat-area{
	height: 70%; 
	width: 100%; 
	border: 2px solid rgb(211, 211, 211); 
	overflow-y: auto; 
	padding: 7px; 
	background-color: white;
}

.CTATChatPanel--input-div{
	flex-direction: row; 
	height: 18%; 
	width: 72%; 
	border-left: 2px solid rgb(211, 211, 211); 
	border-right: 2px solid rgb(211, 211, 211);  
	background-color: white;
}