Radical Rules — S.P.A.R.K. Chat Log

The convQuestPoster app uses a deep dark background (#050d1a to #000) because its content — intimate conversation questions — benefits from a nocturnal, reflective atmosphere. The Radical Rules Saga is a classroom tool displayed on a projector in a lit room, used with K-12 students during the school day.

Light themes perform better on classroom projectors: white reflects ambient room light where dark backgrounds absorb it. The warm cream background (#faf8f2) was chosen over pure white to avoid harsh contrast and to echo the feel of printed classroom materials.

The purple accent color (#6f2da8) is carried from the original’s hlAccent purple, maintaining visual continuity with the legacy design while giving the page a strong, coherent identity.

Each of the eight stages is assigned a distinct accent color that communicates the category of concept introduced at that stage:

• Stage 0 Gray — No concept yet; neutral starting state
• Stage 1 Red — HTML tags (foundational, energetic)
• Stage 2 Blue — Bootstrap / external frameworks (cool, technical)
• Stage 3 Purple — CSS selectors (brand color; this is the CSS milestone)
• Stage 4 Green — Compound selectors (growth, branching)
• Stage 5 Orange — Background images (warm, visual)
• Stage 6 Gold — Fonts + JavaScript (polished, earned)
• Stage 7 Bold purple — Bootstrap complete (powerful, complete)

The progression cool→warm follows the complexity arc: early stages are structural and neutral; later stages become more expressive and warm. Students reading the card grid subconsciously see a journey from gray to gold.

The original index listed all eight stage descriptions as a continuous block of inline text — readable but not interactive, and not distinguishable from one another visually. Students had to scroll through all descriptions even if they only wanted one stage.

Bootstrap modals solve this in three ways:

1. Discoverability: Eight compact stage cards are visible at once, each representing one concept. Students can scan all stages before choosing which to explore.
2. Focus: The modal dialog isolates one stage’s content against a backdrop. There is no competing text. The student’s attention is fully on that stage.
3. Depth on demand: Each modal contains the full description, key concepts, a code snippet, and a direct link to open the live stage. Students who want the quick version see the card; students who want depth open the modal.

The modal also demonstrates Bootstrap’s interactive component system — which is itself part of what the saga teaches. The index page uses the very technology it describes.

Each stage card and its matching modal use a CSS custom property --stage-color set via inline style on the card container:

<div class="stage-card" style="--stage-color: var(--s3);">

Every visual element inside the card — the numbered badge, the concept tag pills, the Explore button, the card’s top border — reads from var(--stage-color) rather than hardcoding a color. The modal uses the same token:

<div class="modal fade" id="modal3" style="--stage-color: var(--s3);">

This is the same CSS component theming pattern used in the Conversation Quests app. Setting one property on the parent updates every colored element in the component simultaneously. Adding a Stage 8 in the future requires only a new CSS variable (--s8) and one inline style attribute on the card.

The convQuestPoster hero uses a dark gradient overlay (rgba(20,8,45,0.80)) so white text reads against the background image. The Radical Rules hero uses the opposite approach: a light gradient overlay with dark text.

/* Dark overlay (poster app): */
background: linear-gradient(rgba(20,8,45,0.80), rgba(8,4,22,0.90)),
            url(...) center/cover;

/* Light overlay (Radical Rules): */
background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(253,248,237,0.75)),
            url('images/classroomKids.jpg') center 40%/cover;

The light overlay lets the classroom photo show through warmly while keeping the purple text readable. The result is energetic and classroom-ready: the children in the photo and the purple headline coexist without either overwhelming the other.

The eight stage pages (rRulesStage0.html through rRulesStage7.html) were not modified. This is a deliberate constraint, not an oversight.

The stage pages exist as independent teaching documents. They use old Bootstrap versions, older CSS patterns, and — in the early stages — technically invalid HTML structure. That is the point. A student opening Stage 1 is supposed to see markup without a DOCTYPE. A student opening Stage 3 is supposed to see a temporary yellow background-color scaffold. Updating them would destroy the pedagogical value.

The upgrade improves the presentation layer (the index page) while leaving the teaching content (the stage pages) exactly as they were. The chatlog makes this decision explicit so future developers know the constraint is intentional.

The HTML validator flagged the same error eight times — once for each Bootstrap modal:

Attribute "aria-labelledby" not allowed on element "div" at this point.

The root cause: aria-labelledby attaches an accessible name to an element, but that only makes semantic sense when the element has a role that can be labelled. A plain <div> has an implicit ARIA role of generic, which does not support being labelled. The attribute was pointing at a real ID — the problem was the element it was attached to, not the target.

Bootstrap modals manage ARIA behavior dynamically at runtime, but the static HTML still needs the role declared for the validator (and screen readers parsing the document before JavaScript runs). The fix on each of the 8 modal <div> elements:

<!-- Before -->
<div class="modal fade" id="modal3" tabindex="-1"
     aria-labelledby="modal3Label" aria-hidden="true"
     style="--stage-color: var(--s3);">

<!-- After -->
<div class="modal fade" id="modal3" tabindex="-1"
     aria-labelledby="modal3Label" aria-hidden="true"
     style="--stage-color: var(--s3);" role="dialog">

One attribute added to each of the 8 modal containers. The page now validates. Screen readers receive a properly labelled dialog element. Bootstrap’s JavaScript continues to layer on top of the correct static foundation. See Ask Copilot Entry #024 for the full explanation of why this pattern matters and when to use role="alertdialog" instead.

The simpler alternative was to increase the max-height value from 220px to 380px+ and keep the text stacked above. That would also make the poster bigger. Two reasons the split column is the better choice:

1. The hero height doesn’t grow. A stacked layout with a 400px poster and 3 lines of text above it would push the hero past 700px — the stage cards would be below the fold on most screens. The split layout keeps text and image side-by-side, so the hero height stays compact even as the image grows.
2. The poster is now the visual anchor. In the original stacked layout, the title was the first thing the eye found. In the split layout, the title and poster compete for equal attention — which is correct for this page. The poster is the product. It should be visually prominent from the first viewport.

The Bootstrap col-12 col-md-6 breakpoint means the columns exist at 768px and above. On smaller screens the text stacks above the poster — the logical reading order on mobile (understand the context, then see the result).

The TNT Graphics category description reads: “Who knew JavaScript could do Flash-like animations? We did. Vector curves, canvas painting, and motion — no Flash required.” The key words are vector, canvas, painting, and motion. The category is for apps that generate visual content programmatically — code that draws.

The Radical Rules Saga does not draw anything. The “poster” it produces is an HTML document styled with CSS. The poster is declared, not drawn: markup describes structure, CSS describes appearance, the browser renders both. That is the Styling category — exactly what Styl’n exists to showcase.

The distinction matters for students learning to categorize tools. The Graphics category teaches: “code can draw.” The Styling category teaches: “markup + CSS = designed documents.” Filing Radical Rules under Graphics would blur that distinction and misrepresent what CSS actually does.

Primary category: Styling. The saga’s entire arc is the progressive application of CSS to unstyled HTML. Secondary category: S.P.A.R.K. It has a chatlog, a documented development process, and was built using the S.P.A.R.K. methodology. Graphics: no.

The HTML content model defines exactly what is allowed where. Inside <html>, the only permitted children are <head> and <body> (and optional whitespace). Once </body> closes, the parser is in a state where only </html> is expected. Any other start tag at that point is “stray” — arriving somewhere the spec says nothing should arrive.

Browsers are forgiving: they quietly adopt stray scripts into the document and run them anyway. The W3C validator is not forgiving. This is by design. The validator’s job is to report what the spec says, not what browsers happen to tolerate. Pages that rely on browser forgiveness will behave differently across engines, assistive technologies, and future parser versions.

The integrity / SRI red herring is worth understanding. The integrity attribute on a <script> tag carries a cryptographic hash:

integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"

The browser fetches the script, hashes the bytes it receives, and compares that hash to the declared value. If they match, the script runs. If not, it is blocked. This is a runtime network security check: it prevents a CDN from silently serving a tampered file. HTML validation is a parse-time structure check: it verifies that the markup conforms to the spec. The two systems do not intersect.

Preservation note: The earlier decision to preserve the stage pages without modification applies to their pedagogical content — the intentionally incomplete markup of Stage 1, the scaffold CSS of Stage 3, the missing Bootstrap in Stage 0. A structurally misplaced <script> tag is not content; it is an error. Correcting it does not change what the page teaches.

Why Stage 7 specifically? Stages 0 through 6 are works-in-progress by definition — each one is incomplete relative to the next. A student visiting Stage 3 expects to see scaffolding. Validation errors in those pages are beside the point: the point is the concept being introduced. Stage 7 is different. It is the finished product — the complete, Bootstrap-integrated poster that all previous stages are building toward. When a student opens Stage 7, they should be looking at the goal state. A page that is the goal state of a development saga should itself be a model of correct practice. Running the validator on Stage 7 was the right instinct; fixing the result was the right follow-through.

The Explore page structure gives each category two discovery surfaces: a card (always visible, 2–3 featured apps maximum) and an offcanvas panel (opened on demand, complete list). This creates an editorial hierarchy: the card is promotional real estate; the offcanvas is the full catalog.

The principle for card selection: feature the app whose primary identity is this category. An app that lives in another folder, belongs to another natural category, and happens to demonstrate a CSS concept is a guest in the Styling category. An app whose entire arc — from folder name to chatlog to Styl’n listing — is Styling is a resident.

Guests belong in the offcanvas. Residents get the card. Purple People Eater is a guest; Radical Rules is a resident.

Two audiences encounter this project from two different entry points. The principle: meet each audience where they are, with the depth they are prepared to use.

• News reader: arriving through the headline, probably seeing the 2026 app for the first time, may never have encountered the 2023 version. A single link — “2023 Original” — at the foot of the entry serves this reader. It does not interrupt the story of the upgrade; it gives the curious reader one more door.
• Chatlog reader: arriving to study the development process, actively learning. For them, a comparison exercise is not an optional extra — it is the payoff of reading the log. They need both links, a label, and a specific thing to look for.

A comparison link in one place but absent from the other would fail at least one of these two audiences. Putting it in both costs one additional link in the news entry — a trivially small overhead for a meaningfully larger reach.