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.

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

CTATFractionBar Example

• 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.

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

.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;
}

Example for mass producing the initial value of a CTATFractionBar:

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