`<fractionInput/>`

An interactive fraction input with a numerator and a denominator, each accepting a math value.

<fractionInput/> is an Input component that renders a numerator input box above a denominator input box, separated by a fraction bar. Each box accepts a math value, just like a <mathInput/>.

Attributes and Properties

Attributes for `<fractionInput>`

Number display (5)

avoidScientificNotation

boolean. Default value: false. Whether to render numbers in full decimal form rather than scientific notation.

displayDecimals

integer. Default value: 2. Number of decimal places to display when rendering this number.

displayDigits

integer. Default value: 10. Number of significant digits to display when rendering this number.

displaySmallAsZero

number. Default value: 0. Threshold below which numbers are displayed as zero.

padZeros

boolean. Default value: false. Whether to pad displayed numbers with trailing zeros to fill the requested digits/decimals.

Labels (1)

labelIsName

boolean. Default value: false. Whether to use this component's name as its rendered label.

Other (11)

bindValueTo

math. Two-way binding target for the fraction's value.

forAnswer

reference. References to <answer> elements that this input should submit to.

format

keyword. Input format for the math entered.

Value	Description
`text` (default)	Plain-text math notation (e.g., `x^2 + 1`).
`latex`	LaTeX-formatted math (e.g., `x^{2} + 1`).

functionSymbols

textList. Default value: ["f","g"]. Symbols treated as function names when parsing.

labelPosition

keyword. Position of the label relative to the input.

Value	Description
`left` (default)	Place the label to the left of the input.
`right`	Place the label to the right of the input.

minComponentWidth

integer. Default value: 0. Minimum rendered width for the numerator and denominator, in pixels.

parseScientificNotation

boolean. Default value: false. Whether to parse expressions like 1e3 as scientific notation.

prefillDenominator

math. Default value: $＿$. Initial value displayed in the denominator input.

prefillNumerator

math. Default value: $＿$. Initial value displayed in the numerator input.

splitSymbols

boolean. Default value: true. Whether multi-character symbols are split into a product of variables.

unionFromU

boolean. Default value: false. Whether "U" between sets is parsed as union.

Common to all components (9)

copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for `<fractionInput name="f">`

Number display (5)

$f.avoidScientificNotation

boolean. Whether to render numbers in full decimal form rather than scientific notation.

$f.displayDecimals

integer. Number of decimal places to display when rendering this number.

$f.displayDigits

integer. Number of significant digits to display when rendering this number.

$f.displaySmallAsZero

number. Threshold below which numbers are displayed as zero.

$f.padZeros

boolean. Whether to pad displayed numbers with trailing zeros to fill the requested digits/decimals.

Labels (2)

$f.label

label. The label rendered with this component.

$f.labelIsName

boolean. Whether to use this component's name as its rendered label.

Other (21)

$f.denominator

math. The denominator of the fraction.

$f.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$f.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$f.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$f.focused

boolean. Whether the fraction input currently has keyboard focus.

$f.format

text. Input format for the math entered.

$f.functionSymbols

textList. Symbols treated as function names when parsing.

$f.hidden

boolean. Whether this component is hidden from the rendered output.

$f.immediateValue

math. The fraction value reflecting the user's in-progress edits.

$f.immediateValueChanged

boolean. Whether the value, including in-progress edits, has been changed from its initial state.

$f.labelPosition

text. Position of the label relative to the input.

$f.numerator

math. The numerator of the fraction.

$f.parseScientificNotation

boolean. Whether to parse expressions like 1e3 as scientific notation.

$f.prefillDenominator

math. Initial value displayed in the denominator input.

$f.prefillNumerator

math. Initial value displayed in the numerator input.

$f.shortDescription

text. A short accessibility description of this input; it is visible to screen readers but not rendered visually.

$f.splitSymbols

boolean. Whether multi-character symbols are split into a product of variables.

$f.text

text. The current fraction as a text string.

$f.unionFromU

boolean. Whether "U" between sets is parsed as union.

$f.value

math. The fraction value of the input (numerator divided by denominator).

$f.valueChanged

boolean. Whether the value has been changed from its initial state.

Common to all components (4)

$f.doenetML

text. The DoenetML source code that produced this component.

$f.hide

boolean. Whether to hide this component from the rendered output.

$f.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$f.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: Default `<fractionInput/>`

A <fractionInput/> exposes the numerator and denominator separately, as well as the combined value (the numerator divided by the denominator).

Example: Using a `<fractionInput/>` in an `<answer>`

Because its value is the math expression numerator divided by denominator, a <fractionInput/> can be checked directly by an <answer>. Here symbolicEquality makes the answer compare expressions symbolically, so only the reduced fraction $\frac{1}{5}$ is accepted (an unreduced $\frac{2}{10}$ is marked incorrect).

Example: Linking the value to another component

Referencing another component as a child creates a two-way link between the fraction’s value and that component: editing the boxes updates the linked value, and changing the linked value updates the boxes. If the linked value is not a fraction, it is placed in the numerator over a denominator of 1.

The bindValueTo attribute (<fractionInput bindValueTo="$mi" />) creates the same link, but the child form above is usually clearer.

Attribute Examples

Attribute Example: prefillNumerator / prefillDenominator

Use prefillNumerator and prefillDenominator to set the initial contents of each box.

Attribute Example: format

Set format="latex" to provide prefilled values written in LaTeX.

Attribute Example: minComponentWidth

The minComponentWidth attribute adjusts the width of the numerator and denominator input boxes.

Property Examples

Property Example: numerator / denominator / value

The numerator and denominator properties give the contents of each box, while value gives the numerator divided by the denominator.

Property Example: valueChanged / immediateValueChanged

The valueChanged property is true once the user has changed either box and the page has updated (when the user clicks elsewhere, hits Enter, or interacts with another part of the page). The immediateValueChanged property becomes true immediately as the user types.

footnote function (Basic Use)

<fractionInput/>