-
Notifications
You must be signed in to change notification settings - Fork 23
The CTAT Component hierarchy and SAIs
The JavaScript code for the CTAT components described at HTML Component Overview is maintained in a prototype inheritance hierarchy. In the code in HTML5/src/
, the base classes for the individual components are in CTATComponents/
while the superclasses are in CTATComponentHierarchy/
. You follow the chain of inheritance through these calls at the bottom of each class's code:
thisClass.prototype = Object.create(parentClass.prototype);
Hence, for CTATTextInput,
- CTATTextInput.prototype = Object.create(CTATTextBasedComponent.prototype); in CTATComponents/CTATTextInput.js
- CTATTextBasedComponent.prototype = Object.create(CTAT.Component.Base.Tutorable.prototype); in CTATComponentHierarchy/CTATTextBasedComponent.js
- CTAT.Component.Base.Tutorable.prototype = Object.create(CTAT.Component.Base.SAIHandler.prototype); in CTATTutorableComponent.js
- CTAT.Component.Base.SAIHandler.prototype = Object.create(CTAT.Component.Base.Graphical.prototype); in CTATComponentHierarchy/CTATSAIHandler.js
- CTAT.Component.Base.Graphical.prototype = Object.create(CTAT.Component.Base.Style.prototype); in CTATComponentHierarchy/Graphical.js
- CTATCompBase.prototype = Object.create(CTATBase.prototype); in CTATComponentHierarchy/CTATCompBase.js
An SAI is, at bottom, a generalized means to describe a user action on a GUI encoded as a 3-element tuple (selection, action, input)
. Its elements:
- S = selection = a unique identifier for the interactive component, from the id attribute of the HTML element;
- A = action = a verb describing the action taken, often corresponding to a method name on the component instance; e.g. UpdateTextField for a text component;
- I = input = the object of the action; for a text field, what you typed; for a radio button group, the individual button clicked; etc.
Each student action in a tutor is encoded into an SAI by the component and passed to the tracer for grading. An example-tracing tutor's tracer searches the behavior graph for links whose SAIs match the student's SAI, in order to determine whether the student's step is on a path to a solution.
Getting Started
Using CTAT
HTML Components
- HTML Examples
- CTATAudioButton
- CTATButton
- CTATChatPanel
- CTATCheckBox
- CTATComboBox
- CTATDoneButton
- CTATDragNDrop
- CTATFractionBar
- CTATGroupingComponent
- CTATHintButton
- CTATHintWindow
- CTATImageButton
- CTATJumble
- CTATNumberLine
- CTATNumericStepper
- CTATPieChart
- CTATRadioButton
- CTATSkillWindow
- CTATSubmitButton
- CTATTable
- CTATTextArea
- CTATTextField
- CTATTextInput
- CTATVideo