<problem>

<problem> 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 an <problem> to group and order content. Some examples are: another <problem>, a <section>, a <figure>, or an <example>.

Attributes and Properties

Example: <problem> with default title

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

Example: <problem> with custom title

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

Example: Nesting sectional components

A hierarchy is created by nesting one or more sectional components within an <problem>.

Attribute Example: includeParentNumber

<section boxed>
  <problem>
    <p>This problem is nested inside a section. The default number does not include the parent number.</p>
  </problem>
</section>
 
<section boxed>
  <problem includeParentNumber="true">
    <p>This exercise is nested inside a section. Rendering of the parent section number has been included.</p>
  </problem>
</section>

The includeParentNumber attribute is false by default for the <problem> component (and true by default for the <section> component).

In order to include the number of the parent sectional component, set includeParentNumber to true.

Attribute Example: includeAutoNumber

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

The includeAutoNumber attribute is false by default for the <problem> component. This means that if a problem 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 problem number in addition to the custom <title>, set the includeAutoNumber attribute to true.

Attribute Example: aggregateScores and sectionWideCheckWork

<problem 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>
</problem>

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

Attribute Example: boxed

<problem boxed>
  <title>Boxed problem</title>
    <p>Move the point.</p>
    <graph size="tiny">
      <point name="p"/>
    </graph>
 
    <answer>
      <award><when>$p != (0,0)</when></award>
    </answer>  
</problem>

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

Attribute Example: hide

<booleanInput name="hideProblem">
  <label>Click here to hide the problem</label>
</booleanInput>
 
<problem hide="$hideProblem">
  <title>Now you see me...</title>
    <p>Type "sassafras" 
      <answer type="text">sassafras</answer>.
    </p>
</problem>

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