<conditionalContent>

<conditionalContent> is a General Operator component that defines one or more blocks of content that are evaluated only when certain conditions are met. Conditions may be defined directly on the <conditionalContent> tag using the condition attribute.
Alternatively, one can use one or more <case> children with an optional <else> child.

Attributes and Properties

The <conditionalContent> component has no attributes or properties.

Example: <conditionalContent> with nested <case> children

The <conditionalContent> component defines a block of content containing individual <case> children. The doenetML within each <case> is only rendered when its specified condition is true.

Example: <conditionalContent> with nested <else>

The <conditionalContent> component defines a block of content containing individual <case> children. To catch all remaining cases following a given condition or set of conditions, the <else> component may be used.

Attribute Example: condition

<p>Let's graph a... 
    <choiceInput name="shape">
      <choice>circle</choice>
      <choice>square</choice>
      <choice>pentagon</choice>
    </choiceInput></p>
 
  <graph size="small">
    <conditionalContent 
      condition="$shape.selectedValues = circle">
        <circle radius="4" filled/>
    </conditionalContent>
 
    <conditionalContent 
      condition="$shape.selectedValues = square">
        <rectangle 
          width="8" 
          height="8" 
          filled 
          center="(0,0)" 
          verticesDraggable="false"/>
    </conditionalContent>
 
    <conditionalContent 
      condition="$shape.selectedValues = pentagon">
        <regularPolygon 
          numVertices="5" 
          sideLength="6" 
          filled/>
    </conditionalContent>
  </graph>

A <conditionalContent> block with a <condition> attribute renders only when the condition is satisfied. This allows for use of a <conditionalContent> component without nested <case> components.