<cascade>
<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.10boolean. Default value: false. Whether to draw boxes around all cascade entries regardless of progress.
completedColortext. Default value: var(--lightGreen). Color used to indicate this section has been completed.
completedColorDarkModeAdded in 0.7.21text. 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.26boolean. 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.
inProgressColortext. Default value: var(--mainGray). Color used to indicate this section is in progress.
inProgressColorDarkModeAdded in 0.7.21text. 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.
notStartedColortext. Default value: var(--mainGray). Color used to indicate this section has not been started.
notStartedColorDarkModeAdded in 0.7.21text. 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)
copyreference. Create an independent copy of another component by reference. Enter a references a $name.
disabledboolean. Default value: false. Whether this component is disabled and cannot be interacted with.
extendreference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.
fixedboolean. Default value: false. Whether this component's value is fixed and cannot be modified.
fixLocationboolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).
hideboolean. Default value: false. Whether to hide this component from the rendered output.
isResponseboolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.
nametext. The name used to reference this component from elsewhere in the document.
styleNumberinteger. 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.asListboolean. Whether this cascade's children are rendered as a list, which is whatever its parent does.
$c.completedColorRequiresCreditAdded in 0.7.26boolean. 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.hideFutureSectionsboolean. Whether to hide later cascade sections until previous ones are completed.
$c.numCompletedinteger. The number of cascade sections currently completed.
Common to all components (8)
$c.disabledboolean. Whether this component is disabled and cannot be interacted with.
$c.doenetMLtext. The DoenetML source code that produced this component.
$c.fixedboolean. Whether this component's value is fixed and cannot be modified.
$c.fixLocationboolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).
$c.hideboolean. Whether to hide this component from the rendered output.
$c.isResponseboolean. Whether this component is treated as a response for the purposes of assessment.
$c.styleNumberinteger. 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.