CTATFractionBar Example

A simple CTATFractionBar example for showing some basic functionality.

Click on the pieces until only 1/2 is selected.

The default value is 1/2+1/4+(0*1/8)

<div id="fractionbar1" class="CTATFractionBar">
</div>

Make a fraction by clicking on the pieces or on the controller buttons. This example is ungraded and is meant to show how the various controllers work with the fraction bar.

Denominator:

den_inc

den_dec

Partitions:

part_inc

part_dec

Numerator:

num_inc

num_dec

<div id="fractionbar2" class="CTATFractionBar"
     data-ctat-value="1/2+(0*1/2)"
     data-ctat-tutor="false"
     data-ctat-ctrl-denominator="den_inc;den_dec"
     data-ctat-ctrl-partition="part_inc;part_dec"
     data-ctat-ctrl-numerator="num_inc;num_dec">
</div>

Fraction labels enabled on a noninteractive fraction bar:

CSS:

#fractionbar3 .CTAT-fraction-bar--label {
    display: initial;
}

HTML:

<div id="fractionbar3" class="CTATFractionBar">
     data-ctat-tutor="false"
     data-ctat-enabled="false">
</div>