The problem part starts with a small heading and divider.
Section A nodes organize the assignment.
Action C nodes are checkable assignment steps.
Action D nodes provide a nested checkable step.
Check D nodes verify a nested result.
Check C nodes verify a result.
Submit C nodes identify a submission action.
Reflect C nodes ask the learner to consider the result.
This C step verifies that a checkbox is generated without a Y/N field and that its letter label has no trailing period.
This D step verifies the same implicit-checkbox and punctuation rules at the nested level.
The problem part starts with a small heading and divider.
The solution part follows without a nested frame.
Acceptance criteria use the same part treatment.
Instructions use the same part treatment.
Expected results use the same part treatment.
Setup B nodes prepare the learner for later work.
Submit B nodes group submission work.
Reflect B nodes group reflection work.
These samples exercise common callout layout cases. The short height samples use explicit line breaks; resize the browser to also check natural wrapping.
Zoo 1.1 LastName.zip External Link Example A longer external resource label for checking wrapping on a narrow screen without clipping its icon or textCompare the matching borders, left accents, one-line heights and icon sizes. Hover over each related page, download and external link to check the larger upward movement.
Switch between light and dark mode and inspect each callout type.
This section compares the full semantic callout toolbox with all four clickable resource-card types. Palette names identify the shared color set; icon names refer to Font Awesome 7 Free Classic Solid.
| Type | Palette | Font Awesome 7 icon | Purpose |
|---|---|---|---|
| userstory | Steel | fa-user | State a learner-centered goal or desired outcome. |
| task | Steel | fa-gear | Identify required work the learner must complete. |
| tryit | Steel | fa-keyboard | Invite a brief, low-stakes action, prediction, experiment, or question while learning. |
| hint | Green | fa-lightbulb | Offer optional help without giving away the result. |
| success | Green | fa-circle-check | Confirm a correct or successful outcome. |
| checkpoint | Green | fa-flag-checkered | Mark an intermediate milestone the learner should verify before continuing. |
| caution | Yellow | fa-triangle-exclamation | Warn about a likely mistake or something requiring care. |
| alert | Red | fa-circle-exclamation | Call immediate attention to a significant problem or requirement. |
| bug | Red | fa-bug | Identify or discuss a programming defect or incorrect behavior. |
| troubleshoot | Red | fa-screwdriver-wrench | Provide diagnostic or recovery guidance after something goes wrong. |
| note | Purple | fa-circle-info | Provide useful supplemental information. |
| definition | Purple | fa-book | Define a term, construct, or concept. |
| why | Purple | fa-circle-question | Explain the rationale behind a rule, step, or design choice. |
| focus | Blue | fa-bullseye | Establish what matters in the current section and what is intentionally out of scope. |
| important | Blue | fa-thumbtack | Emphasize information that deserves special attention. |
| takeaway | Blue | fa-key | Distill the main idea the learner should retain. |
| example | Orange | fa-code | Show a compact illustrative or worked example. |
| refresher | Orange | fa-clock-rotate-left | Point back to previously learned material or a quick review. |
| Page resource | Orange | fa-book-open | Link to another course content page. |
| External link resource | Purple | fa-arrow-up-right-from-square | Link to an external HTTPS site or resource. |
| File resource | Yellow | fa-download | Provide a downloadable file. |
| Video resource | Red | fa-play | Link to a video resource. |
The five resource-card types use consistent semantic palettes and hover/click behavior. Page cards that point to content with an indexed video also show a smaller, vertically centered fa-play indicator in the same orange accent as the page card.
Page resource card — Orange palette — fa-book-open
Page resource card with indexed video — Orange palette — fa-book-open with a smaller, vertically centered orange fa-play indicator
Reference resource card — Green palette — fa-reply
TaskExternal link resource card — Purple palette — fa-arrow-up-right-from-square
External Link ExampleFile resource card — Yellow palette — fa-download
Zoo 1.1 LastName.zipVideo resource card — Red palette — fa-play
Video: The Object-Oriented Programming Series (6:34)