Building Conversation Quests

Each of the four level colours is defined once in :root as a CSS custom property (variable). The actual elements — tier headers, question cards, the draw card — use a second layer of custom properties to read those values:

/* Layer 1: global palette, defined once */
:root {
    --cq-curiosity:  #5B9BD5;
    --cq-connection: #5DA87A;
    --cq-vulnerable: #D96A3E;
    --cq-vision:     #D4A830;
}

/* Layer 2: modifier class sets a component-scoped token */
.draw-card--curiosity { --current-level-color: var(--cq-curiosity); }

/* Layer 3: base component reads the token */
.draw-card { border-top: 6px solid var(--current-level-color); }

This pattern is called CSS component theming. It means the base .draw-card rule never needs to know which level is active. JavaScript only needs to swap one class (draw-card--curiosity → draw-card--connection, etc.) to update every coloured element on the card at once. The CSS handles the rest.

This is the same technique large design systems use to support dark/light mode with a single class on the <html> element. The principle scales from a four-card app to a thousand-component design system.

TNT’s Boogaloo brand font (defined in tnt-base-styles.css) appears only in the navbar brand. It was not used anywhere on the content page. This is an intentional boundary.

Boogaloo is playful and energetic — the right voice for the TNT brand identity. But conversation questions about vulnerability and legacy need a quieter voice. Using Boogaloo for the tier titles or question text would create tonal confusion: the typography would be saying “fun!” while the content is asking “When did you feel truly alive?” Brand fonts have appropriate contexts. The skill is knowing when to step them back.

The draw card is the only element on the page with a light background (#FDF6EC, warm cream). The rest of the page is dark. This is deliberate.

Against the dark page, the cream card creates a spotlight effect — the eye goes directly to it. This mirrors the function of the draw feature: isolating one question from fifteen, pulling it into focus. The visual design enacts the interaction’s intent.

The cream was chosen over pure white because white on a very dark background creates harsh contrast that reads as a technical artefact (a missed colour choice) rather than a design choice. The warm undertone (#FDF6EC) says parchment, not screen. It belongs to the same family as candlelight and paper, which is the emotional register these questions inhabit.

The CSS in convQuest1Styles.css is written so the page looks good without the image:

#hero {
    background:
        linear-gradient(160deg, rgba(20,8,45,0.80) 0%, rgba(8,4,22,0.90) 100%),
        url('../images/convQuestHero.jpg') center / cover no-repeat;
    background-color: #100828; /* solid fallback if image fails */
}

The two-layer background declaration lists the gradient overlay first (top layer) and the image second (bottom layer). If the image file is absent, the browser skips the second layer silently and renders the gradient alone against the fallback background-color. The overlay also darkens any image enough that white text stays readable regardless of the image’s original brightness.

This pattern — overlay first, image second, solid fallback on background-color — is the correct way to design hero sections that can operate with or without an image. It decouples the content from the availability of the asset.

The draw card’s question text is set via innerHTML, not textContent:

document.getElementById("drawText").innerHTML =
    "\u201C" + q.text + "\u201D";  // \u201C = " , \u201D = "

Using innerHTML allows the Unicode curly quotation marks (\u201C and \u201D) to be inserted as real typographic characters, matching the HTML entities (“ and ”) used in the static tier cards below. The result is visual consistency between the drawn question and the catalogue cards.

Is innerHTML safe here? Yes — because the data source is the hardcoded questions array in the JavaScript file itself, not user input. The question text cannot contain an injected <script> tag because a developer wrote every value. The OWASP XSS rule is: never insert untrusted input via innerHTML. Hardcoded application data is trusted.

If this app ever added a feature allowing users to type their own questions, the insertion method would need to change to textContent (which renders everything as literal text, never as HTML). That is when the distinction becomes a security concern.

A <style> block inside the HTML works. So why a separate file?

• Browser caching. An external CSS file is downloaded once and cached. Subsequent page loads (and any other page that links the same file) skip the download entirely. A <style> block is re-downloaded with every page load.
• Separation of concerns. HTML describes structure. CSS describes appearance. Keeping them in separate files means a designer can edit visual styles without touching the HTML, and a developer can edit structure without touching the CSS. Both are less likely to break each other’s work.
• Reusability. The TNT base styles file is a working example of this: one CSS file, every page links it, every page gets the same navbar and footer styles for free.

The tradeoff: an extra HTTP request for the first page load (though modern HTTP/2 makes this negligible). For a small educational site, separation of concerns wins.

Two options for keeping questions readable over the background image:

• Solid opaque card — background: rgba(8,5,20,1.0). Fully readable. The image is completely invisible behind the card.
• Frosted glass card — backdrop-filter: blur(12px) + background: rgba(8,5,20,0.82). The image shows through, blurred, as a warm atmospheric texture. Still fully readable because the 82% opacity is high enough.

The frosted glass wins for the poster because the background image was generated specifically for this context. Hiding it entirely behind a solid card would waste its emotional contribution. The blur softens the figurative content just enough that the eye doesn’t race to the figures instead of the questions — but the warmth and colour of the scene remain perceptible as mood.

backdrop-filter is supported in all modern browsers (Chrome 76+, Safari 9+, Firefox 103+) and degrades gracefully: in environments that don’t support it, the card’s rgba background renders as a solid dark panel. No fallback code required — the property is simply ignored.

All 15 questions on one page in a legible size requires a layout choice: (a) single vertical list, (b) four equal columns, or (c) two columns of two tier blocks each.

The 2×2 grid wins because the four tiers already have a natural pairing: the two safe tiers (Curiosity + Connection) sit side by side on the first row; the two bolder tiers (Vulnerability + Vision) sit together on the second. The visual rhythm of the page matches the emotional rhythm of the questions.

Four equal columns would pack the text too tightly for wall-mounting or comfortable reading. A single column would require very small type on a printed A4 sheet. Two columns gives each tier room to breathe.

On mobile, Bootstrap’s col-md-6 collapses to full-width automatically — each tier stacks vertically. The same HTML, two layouts, zero JavaScript. This is the Bootstrap grid system doing its core job.

The five-pixel stripe at the top of the poster card is a single CSS linear-gradient with four hard colour stops:

background: linear-gradient(
    to right,
    var(--cq-curiosity)  0%  25%,   /* no gradual transition */
    var(--cq-connection) 25% 50%,   /* start = end of previous stop */
    var(--cq-vulnerable) 50% 75%,
    var(--cq-vision)     75% 100%
);

Setting each colour’s start position to equal the previous colour’s end position creates a hard edge with no blending. The result is four even solid-colour bands rather than a rainbow blur. This encodes the “four levels” concept in the stripe rather than a continuous spectrum — the distinction is semantically correct and visually sharp.

The stripe also solves the border-image problem: CSS border-image clips border-radius. A div with negative margins + overflow: hidden on the parent achieves the same visual effect while preserving the card’s rounded corners. This is a common workaround worth knowing.

A motivational poster intended for classroom walls should be printable. The @media print block in convQuestPosterStyles.css handles the transition from screen to paper:

• Navbar, SPARK bar, hero, and footer are hidden (display: none). None of these belong on a printed poster.
• The dark body background becomes white. The frosted-glass card becomes a plain white rectangle with a light grey border.
• Dark text colours are overridden to near-black for ink contrast.
• The rainbow stripe is preserved (it’s just colours — it prints fine).
• The tier blocks get a light grey fill for visual separation on paper.

The print block is an example of progressive enhancement in reverse: the screen design is rich (dark, blurred, layered); the print version is stripped to what’s essential (text, structure, colour accents). Both serve the same content.

Each question in the poster uses <li data-num="01">. The CSS reads it as:

.poster-qs li::before {
    content: attr(data-num);  /* reads the HTML attribute */
    color: var(--tier-color); /* inherits the tier’s level color */
}

This keeps the sequential global numbering (01–15) without JavaScript and without CSS counters that would reset at each <ul>. The display number is in the HTML (inspectable, copyable, accessible), styled by CSS, and colours itself from the tier’s CSS custom property. Three layers, one element.

An alternative would be CSS counter-reset and counter-increment. Those are powerful for auto-numbering but would restart at 1 for each tier. To continue from 04 on Tier 2 would require counter-reset: q-counter 3 on that list — fragile if questions are ever reordered. The data-num pattern is more explicit and more robust.

Three pages share one identity: the interactive app, the poster, and the chatlog. Each page needs to be reachable from either of the other two. The structure is a navigation triangle:

• convQuest1.html → chatlog, poster (via SPARK bar)
• convQuestPoster.html → chatlog, interactive app (via SPARK bar)
• convQuestChatlog.html → interactive app, poster (via CTA buttons at the bottom)

This pattern means a user who arrives at any one page can find everything else in the family without returning to an external index. The SPARK bar is the right place for these links because it persists across scrolling (it sits just below the sticky navbar) and announces the page’s context: this page is part of a SPARK edition, here are its companions.

The chatlog uses CTA buttons at the bottom rather than the SPARK bar because the chatlog’s SPARK bar is its own back-bar pattern — a single directional link matching the ambigMsgChatlog convention. The bottom buttons serve the same navigation purpose for a page the user reads top to bottom.

All three Essentials pages link to the same stylesheet: styles/convPosterCSSEssentials.css. The file was named when the first page was created; it became the shared stylesheet for the series. Every .elem-card, .vibe-note, and .elem-code-block is defined once and consumed by three HTML files.

This is CSS reuse demonstrating itself. The lesson it teaches students who inspect the page source: “One CSS file serves multiple pages. That is not a coincidence — it is the point of external stylesheets.”

The naming is a mild inconsistency: a file called convPosterCSSEssentials.css also styles a page called convPosterCSSEssentials.html. The CSS file predates the HTML file by one session and was named for the HTML Essentials page’s companion stylesheet. Its shared-use reality overrides the original naming intent — and that is itself a real-world lesson about how files evolve.

The three-page sequence follows the browser’s own dependency order:

1. HTML first — the structural vocabulary. Every CSS rule and Bootstrap class targets an HTML element. Without HTML, there is nothing to style.
2. CSS second — the styling vocabulary. Custom CSS rules target HTML elements. Understanding CSS makes Bootstrap demystifiable: Bootstrap is CSS, pre-written.
3. Bootstrap last — the framework layer. Once students understand what CSS does, Bootstrap’s utility classes make immediate sense: they’re shortcuts for CSS rules the student has already learned. The Bootstrap page’s observation “Bootstrap is CSS, pre-written” lands differently after the CSS page than it would as a first impression.

The HTML and CSS essentials pages label each code snippet “IN THE POSTER” because every snippet comes from convQuestPoster.html or its stylesheets. The Bootstrap 5 page uses “IN THE SERIES” because Bootstrap is used across all three pages in the family — the modal pattern, for example, comes from convQuest1.html, not the poster.

When the source file is named explicitly, students can open it and find the exact code in context. “In the Poster” is a navigable reference. “In the Series” says: this code exists somewhere in the project — go find which file. Both are honest. Neither overpromises.

The Stylin page has two sections: Foundations (teaching tools) and Featured Apps (showpieces). The Essentials series belongs in Foundations for the same reason “The Fantastic Four” and “Assemble the Stack” do: it teaches how to build, not just what something looks like when built.

The card title “Vibe Coder Essentials” names the audience explicitly. The subtitle line (① HTML → ② CSS → ③ Bootstrap 5) mirrors the “Assemble the Stack” card’s five-phase progression — a deliberate echo that places this series in the same pedagogical family.

The card’s blue icon (#5B9BD5 = Level 1 Curiosity blue from the poster) signals its origin without needing a separate label. Students who recognise the color will know where it came from.

A chatlog entry for this moment serves a different purpose than earlier entries. Earlier entries document design decisions and prompt techniques for students reading the chatlog as a tutorial. This entry documents an ecosystem event: when a series was promoted from a standalone SPARK folder to a named location in the TNT site navigation.

That distinction matters for maintenance. When someone asks “where in TNT is the Essentials series linked from?” the answer is in this chatlog entry. When someone asks “why did it land in Foundations rather than Featured Apps?” the reasoning is here. Chatlogs are not just for students — they are also for the next developer (or the next AI session) who needs to understand the project’s evolution.

The principle: any decision that changes the site’s navigation or content hierarchy is worth documenting explicitly. Folder structure is invisible until it isn’t.

The S.P.A.R.K. category in Explore documents apps built with the S.P.A.R.K. methodology. The interactive app qualifies because it has a development chatlog that documents every major design decision. The chatlog itself qualifies as a standalone resource — students arriving at the chatlog directly get the full development narrative. The poster qualifies because it was built in the same SPARK session.

The pattern across all SPARK entries in explore.html is consistent: the app gets a lang-badge lang-js badge; the chatlog gets lang-badge S.P.A.R.K.. The poster gets lang-badge lang-css because its primary teaching value is CSS technique, even though it was built with SPARK methodology.

The Styling category card allows up to three featured items. It had two (Purple People Eater and Vibe Codin’). The poster earns the third slot because it demonstrates three distinct advanced CSS techniques that no other featured item in the Styling category covers:

• backdrop-filter: blur() — the frosted-glass effect.
• CSS custom properties used for component theming across four tier blocks.
• @media print — the classroom printing stylesheet.

These three make it a richer CSS showcase than the existing featured items for different reasons. Purple People Eater teaches CSS selectors and specificity. Vibe Codin’ teaches layout and animation. The Conversation Quests Poster teaches modern filter effects, design tokens, and print design. Three different lessons, three different cards.

The Essentials series (HTML, CSS, Bootstrap 5) was added to the Styling offcanvas as a single entry pointing to convPosterHTMLEssentials.html. This is the same entry-point decision made for Stylin: the HTML Essentials page is the most aligned with the Styling category mission (teach how the techniques work, not just use them), and from there the full series is navigable.

Adding all three individual Essentials pages (HTML, CSS, Bootstrap 5) to the offcanvas would triple the entry footprint without adding proportional value. One entry with a clear label (“HTML → CSS → BS5”) communicates the series structure. Students who click it discover the chain.

After Stage 5, the poster is discoverable from:

• Stylin Featured Apps — reached by students browsing CSS showpieces
• Explore → Styling card — reached by students browsing by category from the main Explore page
• Explore → Styling offcanvas — reached by students opening the full Styling list
• Explore → S.P.A.R.K. offcanvas — reached by students browsing SPARK apps
• Poster’s own SPARK bar — reached from the interactive app or chatlog

Multiple paths to the same page is not redundancy — it is discoverability. Different students arrive from different starting points. A student who opens Explore looking for CSS examples should find it. A student who opens S.P.A.R.K. looking for AI development examples should also find it. The content is the same; the context changes what it teaches.