A component for visualizing and manipulating fractions. This component displays a circular area that can be subdivided int0 fractional wedges of the whole area. For a rectangular dispay, see CTATFractionBar.

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

CTATPieChart Example

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATPieChart 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.
• data-ctat-explode: a number that specifies the number of pixels that each wedge should be displaced from the center of the chart. This has the effect of spacing the wedges from each other. Default is 3.
• data-ctat-shadow-distance: a number indicating the displacement distance of each wedge's drop shadow. Set to 0 to disable the drop shadows. Default is 3.

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:

.CTATPieChart { width: 100px; height: 100px; } /* default size */
.CTATPieChart--container { /* pie chart container */
	padding: 0px;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	overflow: visible;
}
.CTATPieChart--piece { /* pie chart wedge */
	stroke: black;
	stroke-width: 1px;
	fill: purple;
	overflow: visible;
}
/* Can specify .CTAT-pie-chart--piece[data-value="1/4"] to change color based on values */
.CTATPieChart--piece[data-selected="false"] { /* deselected pie chart wedge */
	fill-opacity: 0.2;
}

Example for mass producing the initial value for a CTATPieChart:

<div id="pie_chart" class="CTATPieChart"
     data-ctat-value="%(pie-value)%"></div>