CTAT: Cognitive Tutor Authoring Tools

CTATProtractor Example

Some CTATProtractor examples that show some of its basic functionality.


CTATProtractor with default settings:
<div id="protractorDefault" 
    class="CTATProtractor">
</div>
	

Setting different tickmark/snap intervals:
<div div id="intervalProtractor" 
    class="CTATProtractor" 
    data-ctat-interval="20">
</div>
	

This setting will adjust the tickmark intervals in degrees. The value must evenly divide 180, or it defaults to 15.


Snapping and drag-on-arc turned off:
<id=dragSnapOffProtractor 
    class="CTATProtractor" 
    data-ctat-drag-on-arc="false" 
    data-ctat-snap="false">
</div>
	

Setting different labels:
<div id="radianlabelsProtractor" 
    class="CTATProtractor" 
    data-ctat-inner-labels="clockwise degrees" 
    data-ctat-outer-labels="clockwise radians">
</div>
	

Please note that CTATProtractor always reports angles as counterclockwise, even when the labels are set to clockwise.

To compensate, you can subtract from 180 in your .brd files.


Adding additional interactive points and base points:
<div id="morePointsProtractor" 
    class="CTATProtractor"
    data-ctat-interactive-points="LMN" 
    data-ctat-base-points="QED">
</div>
  

Notice that the protractor now reports ALL possible angles from the point move. To work with only a single angle, use the "chooseAngle" TPA in the .brd to select only a single angle.


Changing Unit of Measure (radian decimal):
<div id="decimalRadianProtractor" 
    class="CTATProtractor" 
    data-ctat-unit-of-measure="radians"
    data-ctat-precision="3"
    data-ctat-outer-labels=
      "counterclockwise radian">
</div>
	

Move point A to see its output in the hint window. It will report in decimal radian measure, to three decimal places (set by data-ctat-precision).


Changing Unit of Measure (radian fraction):
<div id="decimalRadianProtractor" 
    class="CTATProtractor" 
    data-ctat-unit-of-measure="fraction"
    data-ctat-precision="24"
    data-ctat-outer-labels=
      "counterclockwise radian">
</div>
	

Move point A to see its output in the hint window. It will report in fractional radian measure, with a denominator of 24 (set by data-ctat-precision).