CTATFractionBar

CTATFractionBar

A component for visualizing and manipulating fractions. This component displays a rectangular area that can be subdivided into fractional parts of the whole area. For a circular display, see CTATPieChart.

Code

<div id="fraction_bar" class="CTATFractionBar"
     data-ctat-value="1/2+1/4+(0*1/8)"></div>

Running Example

CTATFractionBar Example

Attributes and Settings

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATFractionBar and no other CTAT<component> classes.
• data-ctat-enabled: true or false. Default is true. Controls if the component will accept student interaction.
• data-ctat-tutor: true or false. Default is true. Controls if direct actions on the component trigger grading.
• data-ctat-show-feedback: true or false. Default is true unless data-ctat-tutor="false". Determines if grading feedback is shown on the component.
• data-ctat-show-hint-highlight: true or false. Default is true. Determines if hint highlighting is shown on the component.
• data-ctat-disable-on-correct: true or false. Default is true. Determines if the component becomes locked when it is graded as correct.
• data-ctat-value: A string representation of fractions. Default is "1/2+1/4+(0*1/8)".
• data-ctat-ctrl-denominator: a ; separated list of CTAT controller components which control the number of pieces without changing the value represented.
• data-ctat-ctrl-numerator: a ; separated list of CTAT controller components which control the number of selected pieces.
• data-ctat-ctrl-partition: a ; separated list of CTAT controller components which control the number of pieces without changing the number of selected pieces.

The format of the value attribute and the Input of SetPieces uses an algebraic style notation were fractions are represented by numerator/denominator. Multiplying by zero (eg) (0*1/8) will add an deselected piece of the given fraction size. Multiple pieces can be displayed by using a + between each fraction.

Valid CTAT controller components include CTATButton, CTATImageButton, CTATTextInput, and CTATNumericStepper.

Action-Input

In addition to the common Actions listed in Often Used TPAs this component supports the following actions:

Action	Input	Notes
SetPieces	a fraction string	See above for the format of this string.
AddPiece	a fraction string	Adds a piece of the given value.
set_denominator	an integer	Set the number of pieces without changing the value represented.
set_number_pieces	an integer	Set the number of pieces without changing the number of pieces selected.

Styling

.CTATFractionBar { width: 240px; height: 70px; } /* default size */
.CTATFractionBar--container { /* fraction bar container */
	border: 2px solid #CCCCCC;
	border-radius: 5px;
}
.CTATFractionBar--piece { /* fraction bar piece */
	padding: 2px;
	stroke-width: 1px;
	stroke: black;
	fill: purple;
}
.CTATFractionBar--piece[data-selected="false"] { /* deselected fraction bar piece */
	fill-opacity: 0.2;
}
.CTATFractionBar--label { /* fraction bar piece value labels */
	display: none;
	pointer-events: none;
}

To show fraction labels on the pieces add the following CSS:

#my_fraction_bar .CTATFractionBar--label {
	display: initial;
}

Mass Production

Example for mass producing the initial value of a CTATFractionBar:

<div id="fraction_bar" class="CTATFractionBar"
     data-ctat-value="%(fb-value)%"></div>