<mathInput/>

<mathInput/> is an Input component that renders a user-input field that stores mathematical content. When referenced, a named <mathInput/> can be used in computations in the same manner as a <math> component.

Attributes and Properties

Example: Assign a name to user-input math expression

A <mathInput/> renders an input field for storing and naming user-provided math expressions.

Example: Do some math with user-input

A named <mathInput/> can be referenced within a <math> for computations.

Example: <mathInput/> with structured prefill

A <mathInput/> can incorporate a prefill with shaded blanks.

Attribute Example: prefill

<mathInput name="userInput" prefill="x^() sin()" />
<p>You entered: $userInput</p>

The prefill attribute can be used to specify an initial value of the <mathInput/>, or a template for anticipated responses. Blank spaces, if used, are rendered as grey input boxes.

Attribute Example: prefillLatex

<mathInput name="userInput" prefillLatex="\binom{n}{ }"/>
<p>You entered: <m>$userInput.rawRendererValue</m></p>

The most common way to enter LaTex in a prefill is to use the format = "latex" attribute. However, the prefillLatex attribute is a means of preserving non-standard formatting which is typically removed when LaTeX is parsed as a math component.

Attribute Example: format

<p>Enter a fraction (LaTeX prefill):
  <mathInput name="fraction1" prefill="\frac{ }{ }" format="latex" />
</p>
 
<p>Enter a fraction (default prefill):
  <mathInput name="fraction2" prefill=" / " />
</p>
 
<p><m>$fraction1 + $fraction2 = 
  <math name="sumOfFractions" simplify>$fraction1 + $fraction2</math></m></p>

The format attribute gives the option for prefilled <mathInput/> components to contain content formatted in LaTex. If supported, expressions entered in the prefill of the <mathInput/> will be parsed by Doenet as math components and may be used in further computations.

Attribute Example: functionSymbols

The functionSymbols attribute is used to specify when a character is formatted as a function that takes an argument in parentheses. The default values that are automatically considered functions symbols are f and g.

Attribute Example: splitSymbols

<p>With <attr>splitSymbols="true"</attr>, by default:
  <mathInput name='mi1' prefill="xyz"/></p>
<p>The square of $mi1 is <math simplify>$mi1^2</math>.</p>
      -------------------------
<p>With <attr>splitSymbols="false"</attr>:
   <mathInput splitSymbols="false" name="mi2" prefill="xyz" /></p>
<p>Notice how adding spaces between the characters above will change this value.</p>   
<p>The square of $mi2 is <math simplify>$mi2^2</math>.</p>   

The splitSymbols attribute is used to modify the default mathematical simplification of multicharacter values in a <mathInput/>. By default, Doenet assumes adjacent characters are single variables multiplied together, and “splits” them during parsing. So, for example, multicharacter values such as xyz are interpreted as the product $x \cdot y \cdot z$. However, if you wish to treat a grouping of symbols as a single variable, you can turn off this behavior by specifying splitSymbols="false".

Attribute Example: bindValueTo

The bindValueTo attribute is used to create a bidirectional link between the value of a <mathInput/> and that of another component. This attribute accepts a reference to a named math component or the property of a named component as input.

Attribute Example: unionFromU

<p>Type <m>A U B</m> (with spaces between): 
  <mathInput name="union" unionFromU />.</p>
<p>Value interpreted as $union.</p>
 
<p>Type <m>A U B</m> (with spaces between): 
  <mathInput name="noUnion" />.</p>
<p>Value interpreted as $noUnion, a product of three variables.</p>

By default, an uppercase “U” entered in a <mathInput/> will be interpreted as the letter U. To enter a union, one can use the virtual keyboard (by clicking button at the bottom of the screen), and finding the $\cup$ symbol in the keyboard’s Set menu.
(Or, if one knows LaTeX, one could type \cup for union.)

Attribute Example: hideNaN

<p><mathInput name="mi1"><number /></mathInput> = $mi1</p>
<p><mathInput name="mi2" hideNaN="false"><number /></mathInput> = $mi2</p>

By default, the text NaN is suppressed within the <mathInput/> box. To override this behavior, the hideNaN attribute may be set to false.

Attribute Example: removeStrings

<p>Enter <m>20\%</m> 
  <mathInput name="mi1" /> = $mi1
</p>
 
<p>Enter <m>20\%</m> 
  <mathInput name="mi2" removeStrings="%" /> = $mi2
</p>
 
<p>Removing the string character allows the mathInput to be used in further calculations:</p>
  <p>$mi1 of <m>50 = <math simplify>($mi2/100) 50 </math></m></p>

The removeStrings attribute allows Doenet to ignore elements of a user’s input which cannot be parsed into a math.

Attribute Example: minWidth

<p>Enter <m>ax^2 + bx + c</m>: 
  <mathInput name="mi1"/> = $mi1
</p>
 
<p>Enter <m>ax^2 + bx + c</m>: 
  <mathInput name="mi2" minWidth="100" /> = $mi2
</p>
 
<p>Enter <m>ax</m>: 
  <mathInput name="mi3" minWidth="20"/> = $mi3
</p>

The minWidth attribute is set to 50 by default. Adjust this value for a longer or shorter input box.

Property Example: Attributes as properties

The above-listed attributes of <mathInput/> are also accessible as properties.

Property Example: value

<mathInput name="mi1"/> = $mi1
 
<p><c>value</c> = $mi1.value</p>

The value property renders the value stored in the <mathInput> after the user has clicked Enter (or mouse-clicked on another part of the screen).

Property Example: immediateValue

<mathInput name="mi1"/> = $mi1
 
<p><c>immediateValue</c> = $mi1.immediateValue</p>

The immediateValue property contains the value the user enters into the input as they are typing.

Property Example: text

<p>Enter an expression with text and math:
<mathInput name="mi1"/> </p>
 
<p><c>text</c> = $mi1.text</p>
<p><c>mi1</c> = $mi1</p> 

The text property of a <mathInput/> stores its content as a string.

Property Example: rawRendererValue

<p>Type an expression involving latex, or using a mathematical operator.</p>
<mathInput name="mi1"/>
 
<p><c>rawRendererValue</c> = $mi1.rawRendererValue</p>
<p><c>mi1</c> = $mi1</p> 

The rawRendererValue property stores/renders the LaTeX code required for rendering the math expression, updated as the user types.