Twelve Days of Christmas
Parody — S.P.A.R.K. Chat Log

The core data structure is a single GENRES object with one key per genre. Each genre entry contains its name, emoji, openingTemplate string (with {ordinal} placeholder), a placeholder boolean, and a 12-element gifts array. Each gift object has a text property and an optional andText (the refrain form) and special boolean.

The renderVerse(day) function reads the selected genre from this object and builds the verse entirely from data. Adding a sixth genre (e.g., “Computer Science AP”) requires only a new entry in GENRES and a new button in the HTML. Zero changes to the rendering logic or CSS.

In the traditional carol, day 1’s gift appears as “A partridge in a pear tree” in verse 1, but becomes “And a partridge in a pear tree” in verses 2 through 12. This is the standard performance convention. Each genre’s day-1 gift therefore has two forms stored: text (verse 1) and andText (verses 2–12).

// In renderVerse(), the choice is made at render time:
if (d === 1 && day > 1) {
    text = giftData.andText || ('And ' + lcFirst(giftData.text));
} else {
    text = giftData.text;
}

The lcFirst() fallback lower-cases the first character, so even if andText is not supplied, “A partridge” becomes “And a partridge” cleanly. All five genres supply explicit andText values for their day-1 gift.

Three states govern the genre menu:

1. Idle — all five genre buttons enabled, no song in progress, Restart disabled.
2. Singing — selected genre button highlighted, all other buttons disabled (dimmed to 30% opacity), Restart enabled. Next Verse reveals days 1–12 one at a time.
3. Complete — all 12 days revealed, Next Verse button hidden, “All twelve days complete” banner shown. Restart (or the “Sing Again” button in the banner) returns to Idle.

The onGenreSelect(), onNextVerse(), and onRestart() functions manage these state transitions. The selectedGenreId variable (null = Idle, string = Singing/Complete) is the single source of truth for which state the app is in.

In the traditional carol, the fifth day’s gift (“Five golden rings!”) is traditionally sung with extra emphasis — a held note, a key change, a dramatic pause. Every genre preserves this as a design convention: day 5’s gift carries special: true, which the renderer marks with the gift-item--special CSS class (gold color, bold, italic). This gives each genre its own equivalent “golden rings” moment: 5 inline styles!, 5 data types!, 5 golden ratios!.

The convention also serves a pedagogical purpose: the surprise and emphasis of the traditional carol’s fifth gift is intentionally preserved, reminding students that musical structure and code structure share the same device — a pattern with a deliberate disruption.

The Twelve Days of Christmas is already the anchor app for Cross Training Concept #4: Conditional Logic — The Switch & Cascade. The concept page demonstrates that the cumulative verse structure (enter at day 12, fall through to day 11, 10… down to 1) is a natural model for a switch statement with deliberate fall-through — the language feature most beginners are warned against.

A Cross Training showcase section was added to the bottom of the app page to surface this connection. Students who use the parody app see the song as a fun classroom artifact; the showcase invites them to discover that the song’s structure has a name in computer science: the cascade.

The Cross Training concept pages use a mini-nav bar immediately below the main navbar: a dark #0a0e1a banner with a colored bottom border, left-aligned links in gold (primary) and semi-transparent white (secondary), and a right-aligned faded page label. The pattern uses inline styles so it is self-contained and requires no external CSS class.

The SPARK bar on the parody page and the back bar on this chatlog were updated to match that same structure. The border-bottom accent uses Christmas red (#C41E3A) instead of the Cross Training holly green, so each section keeps its thematic color while sharing the same layout.

Takeaway: visual consistency across companion pages — app, chatlog, concept page — reinforces the relationships between them. When the navigation chrome speaks the same design language everywhere, users move through the set with less friction.

With the app, chatlog, movie clips page, and Cross Training page all updated, the final step is wiring the app into the site-wide discovery pages: news.html (entry #066, positioned above the Parabola Saga as the most recent 2026 entry) and explore.html (three offcanvas panels).

The news entry summarizes the array-driven architecture, the five genres, and the Cross Training connection, and provides direct links to the app, this chatlog, the movie clips page, and the Cross Training concept page — the same four-corner link set used at the bottom of each companion page.

For the Explore page, the app was classified in three panels:

• S.P.A.R.K. — Both the app and this chatlog are listed here, consistent with the pattern for all SPARK projects. The chatlog is listed only in the SPARK panel; the other panels link to the app alone.
• Text-Based — The app’s primary output is structured text (song lyrics) assembled from JavaScript data arrays. There is no canvas, no physics, no graphics — it is fundamentally a text-generation and display problem. Text-Based is the right home.
• Miscellaneous — The app is a seasonal song-and-parody classroom utility. Its closest sibling in the site is Vibe Codin’ (a Bee Gees parody), which is already in Miscellaneous. The app’s educational value comes from its Cross Training connection, not from being a standalone CS tool, so Misc is the correct secondary classification rather than a more specific category.

All three classifications will appear in the offcanvas panels only; the featured cards on the Explore page main view already have five entries each.