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

A <div> or a <cascade> does not start a count of its own, and neither does an <introduction>, <conclusion> or <statement>. The sectional components inside it are numbered along with the ones beside it, and the count continues after it: in <section><subsection/><div><subsection/></div><subsection/></section> the subsections are numbered 1.1, 1.2 and 1.3. Other containers, such as a <sideBySide>, a <blockQuote>, a <solution> or a list item, number the sectional components inside them from 1. So does a <proof>, which itself takes no place in the count.

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

<section boxed aggregateScores name="lenient">
  <title>Colored once answered</title>
  <p><answer><label>What is <m>1+1</m>?</label>2</answer></p>
  <p><answer handGraded type="text">
    <label>Explain your reasoning.</label>
  </answer></p>
</section>
 
<section boxed aggregateScores completedColorRequiresCredit name="strict">
  <title>Colored once graded</title>
  <p><answer><label>What is <m>1+1</m>?</label>2</answer></p>
  <p><answer handGraded type="text">
    <label>Explain your reasoning.</label>
  </answer></p>
</section>

A handGraded <answer> scores no credit until an instructor grades it, which happens after the learner has finished. By default the title banner does not wait for that: such an answer counts as completed as soon as the learner submits a response that is not blank, so answering both questions above turns the first banner green.

The second section sets completedColorRequiresCredit, which opts out of that. Its banner stays gray no matter what the learner submits, and turns green only once an instructor has given the hand-graded answer credit. The attribute is inherited by every section nested inside the one that sets it, so an instructor who wants this throughout an activity can set it once on the outermost section.

The attribute changes the color and nothing else. Both sections report the same creditAchieved, and in a <cascade> both would reveal the next step alike.

Both sections above set aggregateScores, without which a plain <section> does not roll up the credit of the answers it contains and so never leaves its not-started color. A <cascade> turns that on for its children automatically, and the problem-flavored sections — <problem>, <exercise>, <question> and <activity> — have it on by default. Everywhere else, <section> and <aside> and the rest, it has to be spelled out.

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.