ReferenceorbitalDiagram

<orbitalDiagram>

Renders an orbital diagram showing electrons in atomic orbitals as up/down arrows in boxes

<orbitalDiagram> is a Subject-specific component that renders an orbital diagram: rows of labeled boxes containing up and down arrows representing electrons in atomic orbitals.

Most documents use the orbitalDiagram property of an <atom>, which already returns a fully-populated <orbitalDiagram>. Write an <orbitalDiagram> directly when you need to display a custom diagram — for example, the expected diagram for a problem, or a comparison against a student response from an <orbitalDiagramInput/>.

Attributes and Properties

Attributes for <orbitalDiagram>

Other (1)

textList. Text labels for each orbital row.

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 <orbitalDiagram name="o">

Other (5)
$o.disabled

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

$o.fixed

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

$o.fixLocation

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

$o.hidden

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

orbitalDiagram. The orbital diagram value as a list of rows, each with a label and boxes containing up/down arrows.

Common to all components (4)
$o.doenetML

text. The DoenetML source code that produced this component.

$o.hide

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

$o.isResponse

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

$o.styleNumber

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

Examples

Example: Built-in orbitalDiagram property of an <atom>

The orbitalDiagram property of an <atom> returns an <orbitalDiagram> filled in to match the element’s ground-state electron configuration. This is the easiest way to display a diagram for a known element.

Example: Build a diagram by hand

The body of an <orbitalDiagram> is a tuple list: one parenthesized tuple per row, listed from lowest to highest sublevel. Inside each tuple, write one entry per box, using

  • u for an up arrow,
  • d for a down arrow,
  • ud (or du) for a paired up/down arrow, and
  • an empty entry (a space between commas) for an empty box.

The labels attribute provides the sublevel label shown to the left of each row, listed from the lowest row up.

Example: Use as the expected answer for an <orbitalDiagramInput/>

An explicit <orbitalDiagram> can serve as the reference answer for an <orbitalDiagramInput/> — useful when you want a particular diagram independent of any <atom> source.

Attribute Examples

Attribute Example: labels

The labels attribute is a list of text labels, one per row, with the bottom row first. Each label is rendered as the orbital text to the left of the corresponding row.

Property Examples

Property Example: value

The value property returns the diagram as a list of rows; each row is an object with an orbitalText label and a boxes array containing strings like "U", "D", "UD", or "" for each box.

ororbitalDiagramInput