CTATSkillWindow - CMUCTAT/CTAT GitHub Wiki
This is used to display the tutor's current estimates of the student's mastery of the skills relevant in the current problem.
<div id="skills" class="CTATSkillWindow"></div>-
id: Required. The name of the component, must be a valid html id name. -
class: Required. The class list, must includeCTATSkillWindowand 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 | Notes |
|---|---|---|
| SetVisible | Boolean (true or false) | true makes it visible. |
.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;
}