1. CTAT HTML Components
2. Parameters of all tutorable components

This page provides a quick introduction to the HTML components provided by CTAT and the parameters common to those components that provide tutoring. Several templates for HTML interfaces are available in the Templates/mathtutor_templates folder in the code section of this repository.

CTAT provides a set of CTAT-enabled HTML components for use in tutors. Components that are tutorable allow you to model actions a student must do to complete a problem, while those that are not tutorable provide support for tutorable actions. For detailed usage information on these components, click on the component name.

Note

Tutorable components can have tutoring disabled if desired. For example, the CTATVideo component is often used untutored (that is, student interactions with the component are not evaluated for correctness), but interactions are still logged.

All of the CTAT components are available in the CTAT HTML Editor. In the descriptions below, each shows a small snippet of HTML code to give you an idea of how the component is defined in an .html file.

A button that plays an audio clip when clicked. The CTATVideo component can also play audio clips. Tutorable

Quick Example:

<div id="audiobutton" class="CTATAudioButton" 
     data-ctat-src="Assets/bonjour.mp3">Listen</div>

A clickable button. Tutorable

Quick Example:

<div id="button" class="CTATButton">Click Me</div>

A box with a label; the box can be checked or unchecked. Tutorable

Quick Example:

<div>CheckBoxes:
  <div id="op1" class="CTATCheckBox" name="cbGroup" style="margin:5px; display: inline-block;">Option 1</div>
  <div id="op2" class="CTATCheckBox" name="cbGroup" style="margin:5px; display: inline-block;">Option 2</div>
</div>

A drop-down list of items, one of which can be selected. Tutorable

Use the data-ctat-labels attribute to list options.

Quick Example:

<div id="comboA" class="CTATComboBox"
     data-ctat-labels="----,yes,no,maybe">
</div>

A button used by the student to signal that they have completed a problem. Tutorable

Quick Example:

<div id="done" class="CTATDoneButton"></div>

A component designed to support the sorting of items from one bucket into other buckets. Tutorable

Quick Example

<div id="source" name="dndtest" class="CTATDragNDrop">
   <div id="dndtext1">Drag Me</div>
   <div id="dndtext2">Drag Me Too</div>
</div>

A component for visualizing and manipulating fractions. Tutorable

Quick Example:

<div id="fb" class="CTATFractionBar" data-ctat-value="1/3+1/3+(0*1/3)" 
     style="margin:5px; display: inline-block;">
</div>

A component for defining a group of CTAT components that can be controlled dynamically. Tutorable

Quick Example:

<div>
  <div id="input1" class="CTATTextInput"></div>
  <div id="input2" class="CTATTextInput"></div>
  <div id="groupA" class="CTATGroupingComponent" 
     data-ctat-componentlist="input1,input2">
  </div>
</div>

A button the student uses to request a hint on a given step in a problem. Not tutorable

Quick Example:

<div id="hint" class="CTATHintButton"></div>

A text area where hints and error messages are displayed to the student. Not tutorable

Quick Example:

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

A button that displays images based on the state of the button: a default image, a hover image, a click image, and a disabled image. Tutorable

Quick Example:

<div id="instructions" class="CTATImageButton" 
     data-ctat-image-default="Assets/Instructions-Default.png" 
     data-ctat-image-clicked="Assets/Instructions-Click.png" 
     data-ctat-image-hover="Assets/Instructions-Hover.png" 
     data-ctat-image-disabled="Assets/Instructions-Disabled.png" >
</div>

A component for re-ordering the items it contains. Tutorable

Note

This component is still in development as the interaction in HTML is a bit different than in Flash.

Quick Example:

<div id="jumble" class="CTATJumble" style="margin:5px; display: inline-block;">
  <div id="item1">a</div>
  <div id="item2">brown</div>
  <div id="item3">quick</div>
  <div id="item4">fox</div>
</div>

A component for visualizing and manipulating a number line. Tutorable

Quick Example:

<div id="numberline" class="CTATNumberLine" data-ctat-minimum="-2" data-ctat-maximum="2">
</div>

A number only text input. Tutorable

Quick Example:

<div id="minStepper" class="CTATNumericStepper" value="0" min="0" max="10" step="0.5">
</div>

A component for visualizing and manipulating a pie chart. Tutorable

Quick Example:

<div id="pc" class="CTATPieChart" data-ctat-value="1/3+1/3+(0*1/3)" 
     style="margin:5px; display: inline-block;">
</div>

A circular button with a label; the button can be selected or unselected. When used in a group, only one button in the group can be selected. Tutorable

Quick Example:

<div>RadioButtons:
  <div id="rb1" class="CTATRadioButton" name="rbGroup" style="margin:5px; display: inline-block;">Option 1</div>
  <div id="rb2" class="CTATRadioButton" name="rbGroup" style="margin:5px; display: inline-block;">Option 2</div>
  <div id="rb3" class="CTATRadioButton" name="rbGroup" style="margin:5px; display: inline-block;">Option 3</div>
</div>

A component for displaying skills to students. Not tutorable

Quick Example:

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

A button used in conjunction with other components for submitting input in those components. Tutorable

Quick Example:

<div id="fb_submit" class="CTATSubmitButton" data-ctat-target="fb" 
     style="display:inline-block;">Submit Fraction Bar</div>

A table (with optional header row) made up of CTATTextArea components. Tutorable

Quick Example:

<div id="table" class="CTATTable" data-num-rows="3" data-num-cols="2" 
     data-ctat-has-header="true">
</div>

A multi-line text input. Tutorable

Quick Example:

<div id="textarea" class="CTATTextArea">
</div>

A single-line text input. Tutorable

Quick Example:

<div id="textinput" class="CTATTextInput">
</div>

A component for displaying static text in an HTML student interface. The text can include HTML markup. Not tutorable

Note

By design, the text is not modifiable by students (not tutorable), but it can be controlled (set or modified) by the tutor.

Quick Example

<div id="textfield" class="CTATTextField">
 Add the fractions <b>1/3</b> and <b>2/5</b>. Be sure to <i>simplify</i> the answer.
</div>

A component that plays a video or audio clip. Tutorable

Quick Example:

<div id="videoplayer" class="CTATVideo" 
     src="Assets/lcpid.mp4">
</div>

Any CTAT component that can be tutored supports a common set of parameters. You can set these in the Properties panel of the CTAT HTML Editor for any tutorable component. If you are not using the editor, you can set the corresponding attributes in HTML.

• ID: (Required) The name of the component; must be a valid HTML id name. The HTML editor generates a unique default value, but you should change this to something meaningful for your tutor ("problemStatement", "givenAddend1", etc.).
  • HTML attribute: id.
• Enabled: Controls if the component will accept student interaction, such as clicking or typing input.
  • HTML attribute: data-ctat-enabled. Value can be true or false; default is true.
• Tutored: Controls if direct actions on the component trigger evaluation. If enabled, example-tracing occurs within CTAT after the student interacts with it. If disabled, the component acts as if it were a standard HTML component: interacting with the component does not trigger tracing.
  • HTML attribute: data-ctat-tutor. Value can be true or false; default is true.
• Show Feedback: Controls if correct/incorrect feedback is shown on the component. If enabled, the component or its text turns red or green after the student interacts with it. If disabled, the component does not show visual feedback.
  • HTML attribute: data-ctat-show-feedback. Value can true or false; default is true unless data-ctat-tutor="false".
• Show Highlight: Controls if hint highlighting is shown on the component. If enabled, the component becomes highlighted in yellow when a hint corresponding to the component is displayed.
  • HTML attribute: data-ctat-show-hint-highlight. Value can be true or false, default is true.
• Disable on Correct: Controls whether or not the component will lock after a correct attempt. Note that this parameter will override the Lock Widgets on Correct Action setting in the behavior graph. Both default to true. If a behavior graph is set to hide feedback, the component will never lock regardless of this parameter's setting.
  • HTML attribute: data-ctat-disable-on-correct. Value can be true or false; default is true.