<section>

<section> is a Sectional component that renders a titled block of content. If no <title> is provided, an auto-generated title (e.g. Section 1) is rendered. Inline components such as paragraphs (<p>) and other components can be nested within a <section> to group and order content. Some examples are: another <section>, a <figure>, or a <problem>.

Content can also be added to or removed from a <section> at runtime using the <callAction> addChildren and deleteChildren actions. The same applies to the other sectioning components (such as <subsection>, <paragraphs>, <problem>, <exercise>, and <example>).

Attributes and Properties

Examples

Example: <section> with default title

Within a DoenetML document, default titles for sectional components are auto-numbered. Each sectional component is on the same counter.

Example: <section> with custom title

A custom <section> title is creating by providing a <title> tag within the <section>.

Example: How to create a subsection (and subsubsection)

A subsection is created by nesting a <section> within another <section>; nesting one level deeper creates a subsubsection, and so on. The heading level of each <section> is determined by how deeply it is nested.

Example: equivalent nesting with <subsection> and <subsubsection>

<subsection> and <subsubsection> are equivalent to nesting <section>s to the same depth. Use whichever form makes the intent clearer in the source: nested <section> lets the heading level follow the structure, while <subsection> / <subsubsection> make the intended level explicit at every tag.

Example: named <section> as a parent reference

When reference names are used more than once in the same document, they can be distinguished (when outside their parent component) by attaching the name of the parent component to the reference.

Above, the <section> named treeSection is the parent of the <text> named plant. Therefore, when referencing this specific instance of the component with that name, you should use $treeSection.plant as shown.

Attribute Examples

Attribute Example: includeParentNumber

<section boxed>
  <section>
    <p>This content is inside a nested section. The default number includes the parent number as well.</p>
  </section>
</section>
<section boxed>
  <section includeParentNumber="false">
    <p>This content is inside a nested section. Rendering of the parent section number has been repressed.</p>
  </section>
</section>

The includeParentNumber attribute is true by default for the <section> component (and false for other sectional components, such as <problem> and <exercise>). This allows the default numbering system to include the number of the parent sectional component, followed by the number of the <section>.

If it is preferable to display the section number without the parent section preceding it, set the includeParentNumber attribute to false.

Attribute Example: includeAutoNumber

  <section boxed><title>Custom title</title>
    <p>In this section, the custom title overrides the default numbering of the section.</p>
  </section>
 
  <section boxed includeAutoNumber="true">
    <title>Special title</title>
    <p>In this section, the number of the section is still rendered in addition to the custom title.</p>
  </section>

The includeAutoNumber attribute is false by default for the <section> component. This means that if a section contains a nested <title>, it will not render the default numbering (although it will still be counted in the numbering scheme behind the scenes).

In order to display the section number in addition to the custom <title>, set the includeAutoNumber attribute to true.

Attribute Example: sectionWideCheckWork

<section sectionWideCheckWork><title>Multiple questions</title>
  <p><answer><label>Enter <m>x</m></label>x</answer></p>
  <p><answer><label>Enter <m>y</m></label>y</answer></p>
  <p><answer><label>Enter <m>z</m></label>z</answer></p>
</section>

The sectionWideCheckWork attribute combines validation for all <answer> components within the <section> under a single “Check Work” button.

Attribute Example: maxNumAttempts

<section sectionWideCheckWork maxNumAttempts="2"><title>Multiple questions</title>
  <p><answer><label>Enter <m>x</m></label>x</answer></p>
  <p><answer><label>Enter <m>y</m></label>y</answer></p>
  <p><answer><label>Enter <m>z</m></label>z</answer></p>
</section>

When combined with sectionWideCheckWork, the maxNumAttempts attribute limits how many times the section-wide “Check Work” button can be submitted. The number of attempts remaining is shown next to the button, and once the attempts are exhausted, all <answer> components within the <section> become disabled.

Attribute Example: colorAnswersSeparately

<section sectionWideCheckWork colorAnswersSeparately><title>Multiple questions</title>
  <p><answer><label>Enter <m>x</m></label>x</answer></p>
  <p><answer><label>Enter <m>y</m></label>y</answer></p>
  <p><answer><label>Enter <m>z</m></label>z</answer></p>
</section>

Typically, the sectionWideCheckWork attribute causes all answer box border colors to correspond to the overall correctness of the entire section (i.e., the colors don’t reveal additional information about which answer is correct). If colorAnswersSeparately is also specified, then each answer box border will instead be colored according to its own answer’s correctness.

Attribute Example: boxed

<section boxed><title>Boxed section</title>
  <p><lorem generateWords="10"/></p>
</section>

The boxed attribute changes the default formatting for section to one that has a border and a shaded banner for the title.

Attribute Example: collapsible

<section collapsible><title>Optional reading</title>
  <p>This section can be collapsed and expanded by clicking the title banner.</p>
</section>
 
<section collapsible startOpen="false"><title>Start collapsed</title>
  <p>This section starts collapsed because <c>startOpen</c> is set to <c>false</c>.</p>
</section>

The collapsible attribute makes a <section> collapsible — clicking the title banner toggles the section open or closed. By default a collapsible section starts expanded; set startOpen="false" to have it start collapsed.

(<aside> and <proof> are collapsible and start collapsed by default without setting this attribute.)

Attribute Example: hide

<booleanInput name="hideSection">
  <label>Click here to hide the section</label>
</booleanInput>
 
<section hide="$hideSection"><title>Now you see me...</title>
  <p><lorem generateWords="10"/></p>
</section>

The hide attribute takes a boolean as input and can be used with any rendered component.