Index by Component Type
Paragraph markup components
These components can be placed within a <p> tag to change the rendered appearance of the enclosed text.
| Component | Description |
|---|---|
<alert> | Bold text |
<attr> | Renders a styled attribute name |
<c> | Inline code text |
<ellipsis> | Renders a horizontal ellipsis (…) character |
<em> | Emphasized inline text (italic by default) |
<footnote> | Inline footnote whose body is shown on demand and is auto-numbered in the document |
<lorem> | Generates lorem ipsum placeholder text |
<lq> | Renders a left double quotation mark (“) |
<lsq> | Renders a left single quotation mark (‘) |
<mdash> | Renders an em-dash (—) character |
<nbsp> | Renders a non-breaking space character |
<ndash> | Renders an en-dash (–) character |
<pluralize> | Renders a word in its singular or plural form based on a count |
<pre> | A preformatted block preserving whitespace |
<q> | Inline double-quoted text |
<rq> | Renders a right double quotation mark (”) |
<rsq> | Renders a right single quotation mark (’) |
<sq> | Inline single-quoted text |
<tag> | Renders enclosed text as an opening tag, `< >` |
<tagc> | Renders enclosed text as a closing tag, `</ >` |
<tage> | Renders enclosed text as a self-closing tag, `< />` |
<term> | An inline term, styled distinctively |
Sectional components
Sectional components are blocks of content that serve as containers for other components. Some of these accept a custom <title> and/or auto-generate a title with a number when no <title> is supplied. General content that is not typically included inside a paragraph is also included here.
| Component | Description |
|---|---|
<activity> | A sectional component with score aggregation, similar to `<problem>` |
<aside> | A note set off from the main flow of the document |
<blockQuote> | A block-level quotation |
<br> | A line break |
<caption> | A caption attached to a figure or table |
<cascade> | Sectional component that reveals its children step-by-step |
<cascadeMessage> | Placeholder shown inside a `<cascade>` in place of a not-yet-revealed entry |
<cell> | A single cell within a tabular layout or spreadsheet |
<cellBlock> | Container for grouping `<cell>`, `<row>`, and `<column>` children inside a `<spreadsheet>` |
<codeEditor> | An interactive DoenetML code editor |
<column> (in a table) | A column of cells within a `<spreadsheet>` |
<conclusion> | A block container for the conclusion of a section |
<definition> | A sectional component for defining a term or concept |
<displayDoenetML> | Displays a DoenetML source string verbatim |
<div> | A generic block-level container |
<document> | The top-level container for a DoenetML document (added implicitly if not present) |
<example> | A sectional component that defines an example |
<exercise> | A sectional component that defines a scored exercise |
<exercises> | A container element grouping `<exercise>` components, which are rendered as a list by default |
<figure> | A figure container holding graphical content with a caption |
<givenAnswer> | A sectional component that renders an expandable block labeled “Answer” |
<hint> | Hint shown on demand to help with an exercise |
<hr> | A horizontal rule used to separate content |
<image> | Displays a static image |
<introduction> | A block container for the introduction of a section |
<li> | A list item within `<ol>` / `<ul>` |
<note> | A note section, set off from the main flow of the document |
<objectives> | A section listing learning objectives |
<ol> | An ordered list |
<p> | A paragraph of inline content |
<paginator> | Defines a paginated section of content |
<paragraphs> | A subsection of paragraphs (rendered at heading level 4) |
<part> | A subsection-style block rendered as a list item (a part of an exercise or problem) |
<pretzel> | A response-matching component where students enter a sequence to match statements and answers |
<problem> | A sectional component that defines a scored problem |
<problems> | A container element grouping `<problem>` components, which are rendered as a list by default |
<proof> | A proof section |
<question> | A sectional component that defines a scored question; similar to a `<problem>` |
<row> (in a table) | A row within a tabular layout |
<sbsGroup> | A group of `<sideBySide>` components that share alignment and spacing |
<section> | A section of a document, with a title (auto-generated or custom) and content |
<setup> | Container for components used for setup but not rendered |
<sideBySide> | Renders children in a side-by-side horizontal layout |
<solution> | A solution to an exercise, shown on demand |
<span> | A generic inline container |
<stack> | A vertical container element for organizing content within a `<sideBySide>` |
<statement> | A block container for the statement of a problem, theorem, or similar |
<subsection> | A sectional component nested one heading level deeper than `<section>` |
<subsubsection> | A sectional component nested one heading level deeper than `<subsection>` |
<table> | A container element for a `<tabular>` |
<tabular> | A simple tabular layout of cells |
<task> | A task of a multi-task activity or problem (alias for `<part>`) |
<theorem> | A sectional component for the statement of a theorem (or similar formal statement) |
<title> | Creates a title within a document, section, or other block component |
<ul> | An unordered list |
Input components
Input components collect responses from students or users of your DoenetML activity. Response values are stored for author/instructor retrieval if the activity is assigned.
| Component | Description |
|---|---|
<booleanInput> | An interactive boolean (toggle/checkbox) input |
<choice> | A single choice within a `<choiceInput>` or an `<answer>`. |
<choiceInput> | A multiple-choice input, allowing selection from a list of choices |
<fractionInput> | An interactive fraction input with a numerator and a denominator, each accepting a math value. |
<mathInput> | An interactive math input |
<matrixInput> | An interactive matrix input where each cell accepts a math value |
<orbitalDiagramInput> | An interactive widget where students fill in an orbital diagram by adding boxes, rows, and up/down arrows (block-level; does not inherit from Input) |
<slider> | An interactive slider input |
<spreadsheet> | An interactive spreadsheet |
<subsetOfRealsInput> | An interactive number-line widget for entering a subset of real numbers (block-level; does not inherit from Input) |
<textInput> | An interactive text input |
Graphical components
Graphical components are any objects that can be placed on a <graph>. The following components are not considered Graphical Components, but they may be placed on a graph when given an anchor attribute for location:
<textInput/><math><m>(or any Mathematical Display component)<image/><booleanInput/>
| Component | Description |
|---|---|
<angle> | An angle defined by three points or a measure |
<annotation> | An annotation for screen reader navigation of a graph |
<annotations> | A container of annotation children for screen reader navigation of a graph |
<attractTo> | Attracts a graphical component’s position to another component when nearby |
<attractToConstraint> | Wraps another constraint so it acts as a soft attraction within a threshold |
<attractToGrid> | Attracts a graphical component’s position to grid lines when nearby |
<bestFitLine> | The best-fit line for a set of points |
<bezierControls> | Defines Bezier control vectors at points along a curve |
<circle> | A circle, potentially defined by center, radius, and/or points on the circle |
<cobwebPolyline> | An interactive cobweb diagram for visualizing iteration of a one-variable function |
<constrainTo> | Constrains a graphical component’s position to be within another component or components |
<constrainToGraph> | Constrains a graphical component’s position to lie within a graph’s bounds |
<constrainToGrid> | Constrains a graphical component’s position to lie on a grid |
<constrainToInterior> | Constrains a graphical component’s position to lie inside a region |
<constraintUnion> | A constraint that is satisfied if any of its child constraints are satisfied |
<controlVectors> | Bezier control vectors at points defining a curve (used inside `<bezierControls>`) |
<curve> | A curve defined by a function, parametric formulas, or control points |
<endpoint> | A point that marks the endpoint of an interval, rendered open or closed |
<equilibriumCurve> | An equilibrium curve of a dynamical system, rendered solid if stable or dashed if unstable |
<equilibriumLine> | An equilibrium line of a dynamical system, rendered solid if stable or dashed if unstable |
<equilibriumPoint> | An equilibrium point of a dynamical system, rendered as a filled point if stable or open if unstable |
<function> | A mathematical function, defined by formula or interpolation |
<graph> | A 2D coordinate-axis graph |
<intersection> | Renders intersections between graphical objects |
<label> | A label for an input, answer, button, or graphical object |
<legend> | A legend describing the contents of a graph |
<line> | A line through two points or defined by an equation |
<lineSegment> | A line segment between two endpoints |
<parabola> | A parabola defined by formula or geometric parameters |
<pegboard> | Renders a grid of pegs on a graph |
<piecewiseFunction> | A function defined piecewise from sub-functions on intervals |
<point> | A point with coordinates that can be displayed and dragged on a graph |
<pointList> | A list of points |
<polygon> | A polygon defined by a list of vertices |
<polyline> | A polyline (open polygon) defined by a list of vertices |
<ray> | A ray starting at one point passing through another |
<rectangle> | A rectangle, potentially defined by width, height, center and/or corner vertices |
<regionBetweenCurves> | A region bounded between two curves |
<regionBetweenCurveXAxis> | A region bounded between a curve and the x-axis |
<regionHalfPlane> | A half-plane region bounded by a line |
<regularPolygon> | A regular polygon with a given number of sides |
<stickyGroup> | Constrains group members to attract to each other when nearby |
<triangle> | A triangle defined by three vertices |
<vector> | A geometric vector with tail and head |
<vectorList> | A list of vectors |
<xLabel> | A label for the x-axis of a graph |
<yLabel> | A label for the y-axis of a graph |
Display Math components
Display math components take arguments written in LaTeX. No computations or simplifications can be performed with these components, as they do not have access to the CAS.
Additionaly, Evaluation Components (such as <answer>) and Input Components (such as <mathInput>) cannot be embedded or nested within Display Math Components.
| Component | Description |
|---|---|
<m> | Inline math rendered with LaTeX |
<md> | Display math with multiple aligned rows |
<mdn> | Numbered display math with multiple aligned rows |
<me> | Display math rendered with LaTeX |
<men> | Numbered display math rendered with LaTeX |
<mrow> | A row of math within an aligned display |
Math components
Mathematical content can be defined and rendered with Math Components. These components can be simplified and used in computations.
| Component | Description |
|---|---|
<column> (in a matrix) | A list of math values defining the column of a matrix |
<coords> | A math expression treated as a vector of coordinates |
<derivative> | The derivative of a function |
<function> | A mathematical function, defined by formula or interpolation |
<integer> | An integer value |
<interval> | A math expression treated as an interval of real numbers |
<intervalList> | A list of intervals |
<math> | A math expression |
<mathList> | A list of math expressions |
<matrix> | A matrix of math values |
<number> | A numeric floating point value |
<numberList> | A list of numbers |
<odeSystem> | A system of first-order ordinary differential equations with initial conditions, rendered as math and numerically integrable |
<periodicSet> | A periodic set of real numbers |
<rightHandSide> | A right-hand-side expression of an equation in an ODE system |
<row> (in a matrix) | A list of math values defining the row of a matrix |
<samplePrimeNumbers> | Samples random prime numbers |
<sampleRandomNumbers> | Samples random numbers from a distribution |
<selectFromSequence> | Randomly selects values from a sequence of numbers, math expressions, or letters to create document variants |
<selectPrimeNumbers> | Randomly selects prime numbers from a range to create document variants |
<selectRandomNumbers> | Selects a fixed set of random numbers to create document variants |
<sequence> | Generates a sequence of numbers, math expressions, or letters |
<setSmallToZero> | Replaces values with magnitude below a threshold with zero |
<sign> | Sign of the input (-1, 0, or 1) |
<subsetOfReals> | A subset of the real numbers, defined by intervals and points |
<tupleList> | A list of math tuples, parsed from parenthesized comma-separated pieces |
Math operator components
Math Operator components perform computations or take actions on the math components they reference or the values they enclose.
| Component | Description |
|---|---|
<abs> | Absolute value of an expression |
<ceil> | Smallest integer ≥ the input value |
<clampFunction> | A function clamped to a specified output range |
<clampNumber> | Clamps a number to a specified range |
<convertSetToList> | Converts a math set expression into a list expression |
<count> | The number of the child math or number values |
<eigenDecomposition> | Computes the eigenvalues and eigenvectors of a square matrix |
<evaluate> | Evaluates a function at a math value |
<floor> | Largest integer ≤ the input value |
<functionIterates> | List of values produced by iterating a function |
<gcd> | Greatest common divisor of integer inputs |
<intComma> | Renders a numeric value with thousands separators (e.g. 1,000,000) |
<lcm> | Least common multiple of integer inputs |
<max> | Maximum of the child math or number values |
<mean> | Arithmetic mean of the child math or number values |
<median> | Median of the child math or number values |
<min> | Minimum of the child math or number values |
<mod> | Modulo (remainder) of two values |
<product> | Product of the child math or number values |
<round> | Rounds a number to a specified precision |
<solveEquations> | Numerically solves a system of equations |
<standardDeviation> | Standard deviation of the child math or number values |
<sum> | Sum of the child math or number values |
<variance> | Variance of the child math or number values |
<wrapFunctionPeriodic> | A function wrapped into a periodic output range |
<wrapNumberPeriodic> | Wraps a number into a periodic range |
General operator components
These components perform actions on Math components as well as other component types.
| Component | Description |
|---|---|
<animateFromSequence> | Animates a value through a sequence over time |
<asList> | Renders its children as a comma-separated list |
<callAction> | Triggers an action when clicked or in response to a specified user interaction |
<case> | A single conditional branch within `<conditionalContent>` |
<collect> | Collects descendants of a component matching a specified component type |
<conditionalContent> | Renders content conditionally based on its `<case>` or `<else>` children |
<extractMath> | Extracts a sub-expression from a math expression by name or index |
<extractMathOperator> | Returns the top-level operator of a math expression as text (e.g. ”+”, “vector”) |
<feedbackDefinition> | A reusable feedback definition referenced by other components |
<group> | A logical grouping of components |
<module> | A reusable group with parameterized attributes; can be copied elsewhere with new parameter values |
<moduleAttributes> | Declares attributes accepted by an enclosing `<module>` |
<option> | A single option within a `<select>` block |
<paginator> | Defines a paginated section of content |
<paginatorControls> | Previous/next page controls referencing a paginator elsewhere in the document |
<ref> | A link to a component reference or to a URL |
<repeat> | Repeats template content for each item in a source |
<repeatForSequence> | Repeats template content for each value in an arithmetic sequence |
<select> | Randomly selects components from a list of children to create document variants |
<shuffle> | Randomly shuffles its children |
<sort> | Sorts a list according to a comparison function |
<split> | Splits a string or list into pieces |
<styleDefinition> | A reusable style definition referenced by other components |
<substitute> | Substitutes math expressions into another expression |
<triggerSet> | Groups a set of `<updateValue>` or `<callAction>` components which share a single trigger condition |
<updateValue> | Updates one or more state variables on a target component |
<variantControl> | Configures how variants are generated for the enclosing document or section |
<video> | Embeds a video player |
Logic components
Logic components define boolean conditions or are used in logical expressions.
| Component | Description |
|---|---|
<and> | Logical AND: true only when all child boolean values are true |
<boolean> | A boolean value |
<booleanInput> | An interactive boolean (toggle/checkbox) input |
<booleanList> | A list of booleans |
<else> | Default branch within a `<conditionalContent>`; matched when no `<case>` condition is true |
<iff> | IF and only iF: Logical bicondition (IFF): true when all child boolean values are the same |
<implies> | Logical implication (binary): true when the first value is false or the second value is true |
<isBetween> | True when a math value is between two given bounds |
<isInteger> | True when the math child evaluates to an integer |
<isNumber> | True when the math child evaluates to a finite number |
<not> | Logical negation of a boolean value |
<or> | Logical OR: true when at least one child boolean value is true |
<xor> | Logical exclusive OR: true when exactly one child boolean value is true |
Evaluation components
These components are used in answer validation, evaluation, or the awarding of credit.
| Component | Description |
|---|---|
<answer> | Assigns credit to student responses based on matches or logical rules |
<award> | Specifies conditions for awarding credit in an answer |
<considerAsResponses> | Marks its children as response components for an enclosing answer |
<feedback> | Targeted feedback shown when conditions are met |
<hasSameFactoring> | Boolean condition that tests for equivalent factoring |
<matchesPattern> | Boolean condition that tests whether input matches a math pattern |
<when> | Defines logical conditions within an `<award>` |
Text components
Text components are values containing strings that are not necessarily embedded in paragraphs.
| Component | Description |
|---|---|
<description> | Extra information about an enclosing component, shown to all users in a popup or disclosure |
<latex> | A snippet of LaTeX that can be rendered as math |
<pluralize> | Renders a word in its singular or plural form based on a count |
<shortDescription> | A short accessibility description (e.g. for a `<graph>`) read by screen readers |
<text> | A text string |
<textList> | A list of texts |
Subject-specific components
These components are classified based on their relevance to a particular subject.
| Component | Description |
|---|---|
<atom> | Represents a chemical element by symbol or atomic number, exposing its periodic-table properties |
<electronConfiguration> | Renders an electron configuration with sublevel labels and superscripted electron counts |
<ion> | Represents a charged ion specified by element and charge, rendered with its chemical formula |
<ionicCompound> | Forms a balanced ionic compound from constituent ions and renders its chemical formula |
<orbitalDiagram> | Renders an orbital diagram showing electrons in atomic orbitals as up/down arrows in boxes |
<orbitalDiagramInput> | An interactive widget where students fill in an orbital diagram by adding boxes, rows, and up/down arrows (block-level; does not inherit from Input) |