<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

Examples

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 Examples

Attribute Example: prefill

<p>
  <mathInput name="userInput" prefill="x^() sin()">
    <shortDescription>fill in the blanks</shortDescription>
  </mathInput>
</p>
<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

<p>
  <mathInput name="userInput" prefillLatex="\binom{n}{ }">
    <shortDescription>fill in the bottom of the binomial coefficient</shortDescription>
  </mathInput>
</p>
<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>
  <mathInput name="fraction1" prefill="\frac{ }{ }" format="latex">
    <label>Enter a fraction (LaTeX prefill)</label>
  </mathInput>
</p>
 
<p>
  <mathInput name="fraction2" prefill=" / ">
    <label>Enter a fraction (default prefill)</label>
  </mathInput>
</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>
  <mathInput name='mi1' prefill="xyz">
    <label>With <attr>splitSymbols="true"</attr>, by default</label>
  </mathInput>
</p>
<p>The square of $mi1 is <math simplify>$mi1^2</math>.</p>
      -------------------------
<p>
  <mathInput splitSymbols="false" name="mi2" prefill="xyz">
    <label>With <attr>splitSymbols="false"</attr></label>
  </mathInput>
</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: forAnswer

Specifying the attribute forAnswer of a <mathInput> does two things:

1. It colors the border of the math input based on the correctness of the response (assuming colorCorrectness is not set to false).
2. It includes the value of the math input as a response of the answer.

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.

An alternative way to create the same bidirectional link is to simply put the reference to the component as a child of the <mathInput>.

Attribute Example: unionFromU

<p>
  <mathInput name="union" unionFromU>
    <label>Type <m>A U B</m> (with spaces between)</label>
  </mathInput>
</p>
<p>Value interpreted as $union.</p>
 
<p>
  <mathInput name="noUnion">
    <label>Type <m>A U B</m> (with spaces between)</label>
  </mathInput>
</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">
    <shortDescription>numeric input with hideNaN default</shortDescription>
    <number />
  </mathInput>
  = $mi1
</p>
<p>
  <mathInput name="mi2" hideNaN="false">
    <shortDescription>numeric input with hideNaN false</shortDescription>
    <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>
  <mathInput name="mi1">
    <label>Enter <m>20\%</m></label>
  </mathInput>
  = $mi1
</p>
 
<p>
  <mathInput name="mi2" removeStrings="%">
    <label>Enter <m>20\%</m> (with <c>%</c> removed)</label>
  </mathInput>
  = $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>
  <mathInput name="mi1">
    <label>Enter <m>ax^2 + bx + c</m> (default width)</label>
  </mathInput>
  = $mi1
</p>
 
<p>
  <mathInput name="mi2" minWidth="100">
    <label>Enter <m>ax^2 + bx + c</m> (minWidth 100)</label>
  </mathInput>
  = $mi2
</p>
 
<p>
  <mathInput name="mi3" minWidth="20">
    <label>Enter <m>ax</m> (minWidth 20)</label>
  </mathInput>
  = $mi3
</p>

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

Property Examples

Property Example: Attributes as properties

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

Property Example: value

<mathInput name="mi1">
  <shortDescription>any math expression</shortDescription>
</mathInput>
= $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">
  <shortDescription>any math expression</shortDescription>
</mathInput>
= $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>
  <mathInput name="mi1">
    <label>Enter an expression with text and math</label>
  </mathInput>
</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>
  <mathInput name="mi1">
    <label>Type an expression involving latex, or using a mathematical operator</label>
  </mathInput>
</p>
 
<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.