<section>

<section> is a Sectional component that renders an auto-numbered block of content. 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>.

Attributes and Properties

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

A subsection is created by nesting one or more sections within a <section>.

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 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: aggregateScores and sectionWideCheckWork

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

The aggregateScores and sectionWideCheckWork attributes together combine validation for all <answer> components within the <section> under a single “Check Work” button.

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: 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.