CTATSkillWindow

CTATSkillWindow

This is used to display the tutor's current estimates of the student's mastery of the skills relevant in the current problem.

Code

<div id="skills" class="CTATSkillWindow"></div>

Running Example

Fraction Addition

Attributes and Settings

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATSkillWindow and no other CTAT<component> classes.
• data-ctat-threshold: a number between 0 and 1. Default is 0.95. This value determines when the bar shifts to the mastered color and becomes completely filled.

Action-Input

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

Styling

.CTATSkillWindow { /* skill window container */
	width: 240px; height: 140px; /* default size */
	font-size: 12px;
	padding: 5px;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	box-sizing: border-box;
	background-color: #FAFAFA;
	overflow-x: hidden;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.CTATSkillWindow--skill { /* container for meter + label */
	display: flex;
	justify-content: flex-start;
}
.CTATSkillWindow--bar { /* skill meter bar */
	border: 1px solid #CCCCCC;
	border-radius: 0.5em;
	height: 1em;
	width: 50%;
	overflow: hidden;
	flex: none;
	background-color: white;
}
.CTATSkillWindow--bar--nonmastered { /* skill meter bar non-mastery fill */
	background: linear-gradient(to bottom, #A69030 0%, #FCDE54 50%, #A69030 100%);
	height: 100%;
}
.CTATSkillWindow--bar--mastery { /* skill meter bar mastery fill */
	background: linear-gradient(to bottom, #35B30F 0%, lime 50%, #35B30F 100%);
	height: 100%;
}
.CTATSkillWindow--label { /* skill meter label */
	margin-left: 5px;
	overflow: hidden;
	height: 1.5em;
	text-align: left;
	white-space: nowrap;
}