Skip to Content
Referencecascade

<cascade>

Reveals its children one step at a time, each once the steps before it are complete

<cascade> reveals its children one at a time as the learner makes progress. Each child is hidden until the preceding child has been completed — answered correctly (creditAchieved = 1), or having no creditAchieved at all (in which case it is treated as auto-completed the moment it becomes visible).

The numCompleted property tracks how many children have been completed so far. Use <cascadeMessage> inside a <cascade> to show a “continuation message” in place of a not-yet-revealed entry.

To give a cascade a title, a box or a score, put it inside a <section>, as in the examples below. The section is scored on the steps inside the cascade, the same as if they were written in the section directly.

A <cascade> automatically turns on aggregateScores on every scored child (sections, <problem>, nested <cascade>s, even bare <p> paragraphs that contain answers). That is what gives each child a creditAchieved value the cascade can watch — without it, a paragraph or section containing an <answer> would not roll the answer’s credit up into its own, and the cascade would have no way to tell when the child is “done”. You therefore do not need to set aggregateScores by hand on cascade children.

A handGraded <answer> is the one exception to “answered correctly”. Its credit stays at 0 until an instructor grades it, which happens long after the learner has moved on, so a cascade would otherwise stop there for good. Instead, such an answer counts as completed as soon as the learner submits a response that is not blank — submitting an untouched input does not count, except for a <booleanInput>, whose unchecked box is itself an answer. The answer’s actual creditAchieved is unchanged; it is still awaiting a grade.

The same rule colors the heading bar of a boxed or collapsible section, so a step whose questions have all been answered shows as completed rather than staying gray until an instructor gets to it. Set completedColorRequiresCredit on a section, on any section that encloses it, or on the cascade itself, to have the bar wait for the real credit instead; that affects only the color, never when the cascade advances. The cascade’s completedColor, inProgressColor and notStartedColor set the colors of its steps’ heading bars; when it sets none, its steps use the colors of the section around it.

The sections in a cascade are numbered along with the sections beside it, just as if they were written there directly, and the sections after the cascade continue the count. Inside a <problems>, the problems in a cascade are likewise numbered as items of the list. Revealing a step never changes a number.

Attributes and Properties

Attributes for <cascade>

Other (10)
boxAllAdded in 0.7.10

boolean. Default value: false. Whether to draw boxes around all cascade entries regardless of progress.

completedColor

text. Default value: var(--lightGreen). Color used to indicate this section has been completed.

completedColorDarkModeAdded in 0.7.21

text. Default value: #1a5e20. Color used to indicate this section has been completed (dark mode). If omitted, the dark-mode color is derived from completedColor when that attribute is explicitly set; otherwise falls back to a dark green that meets WCAG AA contrast for white text.

completedColorRequiresCreditAdded in 0.7.26

boolean. Default value: false. Whether the completed color requires full creditAchieved, so that a section holding a hand-graded answer is not colored as completed until an instructor grades it. By default a hand-graded answer counts as completed once a non-blank response has been submitted. Affects only the color, not when a <cascade> advances.

boolean. Default value: false. Whether to hide later cascade sections until previous ones are completed.

inProgressColor

text. Default value: var(--mainGray). Color used to indicate this section is in progress.

inProgressColorDarkModeAdded in 0.7.21

text. Default value: #3a3a3a. Color used to indicate this section is in progress (dark mode). If omitted, the dark-mode color is derived from inProgressColor when that attribute is explicitly set; otherwise falls back to a dark gray that meets WCAG AA contrast for white text.

notStartedColor

text. Default value: var(--mainGray). Color used to indicate this section has not been started.

notStartedColorDarkModeAdded in 0.7.21

text. Default value: #3a3a3a. Color used to indicate this section has not been started (dark mode). If omitted, the dark-mode color is derived from notStartedColor when that attribute is explicitly set; otherwise falls back to a dark gray that meets WCAG AA contrast for white text.

boolean. Default value: false. Whether all cascade entries should be revealed regardless of progress.

Common to all components (9)
copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for <cascade name="c">

Other (4)
$c.asList

boolean. Whether this cascade's children are rendered as a list, which is whatever its parent does.

$c.completedColorRequiresCreditAdded in 0.7.26

boolean. Whether the heading bar's completion state is driven by the real creditAchieved rather than by progress, so that a hand-graded answer keeps the section from being colored as completed until an instructor grades it.

$c.hideFutureSections

boolean. Whether to hide later cascade sections until previous ones are completed.

integer. The number of cascade sections currently completed.

Common to all components (8)
$c.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$c.doenetML

text. The DoenetML source code that produced this component.

$c.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$c.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$c.hidden

boolean. Whether this component is hidden from the rendered output.

$c.hide

boolean. Whether to hide this component from the rendered output.

$c.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$c.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: Step-by-step questions

Each <section> is revealed only after the previous one is answered correctly. The numCompleted property of the named <cascade> updates as the learner progresses. The title comes from the enclosing <section>, and the three steps are subsections of it.


Example: Nested cascade inside a section

The outer <cascade> reveals its three <section> children one at a time. The middle section contains an inner <cascade> whose children are bare <p> paragraphs. Because the outer cascade has turned on aggregateScores for the middle section, and that section’s inner cascade turns it on for each <p>, each paragraph rolls up the credit of its <answer> — so the inner cascade can hide the second paragraph until the first answer is correct, then reveal it.


Example: Cascade with continuation messages

A <cascadeMessage> replaces the entry that would otherwise be hidden. One shows at a time — the first one after the last revealed section — so here “Solve the previous step to continue” shows until Step 1 is completed, at which point Step 2 appears and “One more step to go” takes its place.


Example: A scored, boxed cascade

The enclosing <section> supplies the box and the score. Its credit comes from the answers inside the cascade, the same as if they were written in the section directly.

Attribute Examples

Attribute Example: hideFutureSections

With hideFutureSections, later children are completely hidden (titles and all) until the preceding child is completed. Without it, the title of the next section still appears greyed-out so the learner can see what is coming.


Attribute Example: revealAll

Setting revealAll shows every child immediately, ignoring completion. This is useful when authoring (so you can see every step) or when you want the cascade structure without enforcing the order.


Attribute Example: boxAll

boxAll draws a box around every child section, as if each had been given boxed. To box the whole cascade instead, put it in a boxed section.

Property Examples

Property Example: numCompleted

The numCompleted property counts how many children have been completed so far, in order. Once a child is skipped (e.g. its answer is wrong), counting stops at that point.

Last updated on