Building the True Story of the Three Little Pigs

Note: trueStoryWolfHome.html validated with zero errors — the validator confirmed it was already clean.

Also note: The <blockquote> quotation marks in the four fixed paragraphs were upgraded from plain ASCII " to proper HTML entities “ / ” as part of the correction.

Repetition that earns its place. The three pigs appear in the story illustrations (houseStraw.jpg, houseSticks.jpg, houseBricks.jpg), in the app’s branding, and now in the chatlog hero. Each occurrence reinforces the subject matter before a word is read. Visitors moving between the app and the chatlog feel the same visual world — that continuity is exactly what C.R.A.P. Repetition is for.

Tonal alignment is strong. The warm illustrated style — cartoon pigs in colorful knitwear — matches the app’s playful, storytelling register. A stark or technical image would feel incongruous. This image communicates “you are in a fairy-tale zone” instantly.

Palette harmony is a bonus. The pigs’ sweaters (russet, orange, tan) echo the wolf-brown --tsw-wolf: #7a3c0a and amber tokens already in use. The colors are already in conversation with the design system; no clash to manage.

Narrative irony. The pigs headline the chatlog of an app that tells the wolf’s side of the story. Three pigs staring back at you while you read about how it was all a misunderstanding has quiet wit. Design details that reward attention are a sign of craft.

The white background of the illustration is the main risk. Unlike a photograph (which is naturally dark and textured), this cartoon has a near-white background around the pigs. A semi-transparent gradient overlay over a light background produces a faded, washed-out look rather than a dramatic one. The gradient was made slightly more aggressive for this image — rgba(42,16,8,0.88) at the top and rgba(42,16,8,0.92) at the bottom. If the text feels hard to read in context, increase those alpha values toward 0.92 and 0.96.

Viewport cropping and the outer pigs. With cover sizing on a wide banner that is only 210px tall, the image zooms in significantly. background-position: center top shows the upper portion — heads and faces — which is exactly the goal. However, at narrower viewports, the image crops toward center and the outer pig (right side) may be clipped. This is acceptable; the visual intent (fairy-tale character) remains clear even with partial cropping.

The chatlog vs. the home page. The home page hero uses a different image (3pigs.jpg is the jumbotron background on the home page too). If the same image appears in both heroes, the repetition is strong — but confirm that the positioning and overlay treatment are distinct enough that the two pages feel related but not identical.

The hero rule in trueStoryWolfChatlogStyles.css was updated from a solid-color gradient to a layered background:

#tswclHero {
    background:
        linear-gradient(to bottom, rgba(42,16,8,0.88) 0%, rgba(122,60,10,0.52) 50%, rgba(42,16,8,0.92) 100%),
        url('../images/3pigs.jpg') center top / cover no-repeat;
    background-color: #2a1008;
}

center top anchors the image so the pigs’ heads appear in the banner. The gradient alpha values were reduced slightly from the original (which had no image) so the illustration shows through without overpowering the text. The fallback background-color ensures the banner is never blank while the image loads.

Context note: trueStoryWolf0.html already exists in the folder as the pre-validation-fix (broken) Bootstrap 4 backup. That file is NOT a clean pedagogical reference — it has 7 known errors. The comparison below is about creating clean Bootstrap 4 preservation copies.

Before beginning the Bootstrap 5 refactor, copy the current valid BS4 pages to trueStoryWolfHome-bs4.html and trueStoryWolf-bs4.html. Then upgrade the originals. The chatlog for Session 5 will link both versions side by side.

The instinct is exactly right, and the reason goes beyond convenience. The -bs4 HTML files reference trueStoryStyles.css. If that CSS file is modified during the Bootstrap 5 upgrade — even slightly — the BS4 comparison pages are now rendering with a BS5-modified stylesheet. The comparison is corrupted. The HTML says “Bootstrap 4” but the CSS says “Bootstrap 5.”

Three reasons to preserve trueStoryStyles-bs4.css:

1. Pair integrity. A BS4 snapshot is only trustworthy as a complete matched pair: HTML + CSS. One versioned and not the other is a half-measure.
2. Bootstrap 4 → 5 may touch the CSS. This app’s CSS is mostly custom classes (.jumble, .speech, .has-dropcap) and is unlikely to change dramatically. But utility classes used in the HTML (font-italic, text-monospace, mr-4) may require CSS adjustments. Locking in the CSS now means the BS4 snapshot is authentic regardless of what the upgrade touches.
3. Symmetry is the pedagogical signal. A student following the comparison should encounter a complete, self-contained pair. Finding one half versioned and the other not raises a question that shouldn’t need to be raised.

The cost, as with the HTML, is one file copy. The value is permanent.

Updated Session 5 checklist — three copies before the upgrade begins:

• Copy trueStoryWolfHome.html → trueStoryWolfHome-bs4.html
• Copy trueStoryWolf.html → trueStoryWolf-bs4.html
• Copy styles/trueStoryStyles.css → styles/trueStoryStyles-bs4.css
• Update both -bs4 HTML files to reference trueStoryStyles-bs4.css instead of trueStoryStyles.css

The -bs4 files are then frozen. They do not change again. The originals proceed through the Bootstrap 5 upgrade.

• 🏆 The instinct is exactly right. The preservation chain is HTML + CSS + JS. Copying the HTML and CSS without the JS leaves the BS4 snapshot functionally incomplete — a visitor loading trueStoryWolf-bs4.html gets the original markup and original styles, but potentially a modified script. That’s a hybrid, not a snapshot.
• 🧠 The reasoning is more sophisticated than it looks. domTargeting.js doesn’t use Bootstrap classes — it targets elements by the custom class .jumble. A student who understood only Bootstrap might have assumed the script was safe. This student understood that a Bootstrap 5 refactor often involves restructuring HTML: IDs can change, elements can be wrapped differently, and a script that assumed a specific DOM structure can silently break.
• 🔧 “Wiring it all up” is the completion that matters. Copying a file and not wiring it is dead weight. Wiring each -bs4 page to its own matched CSS and JS means the snapshot is self-contained and will render correctly even if the originals are significantly changed. That is precisely the right endgame.
• 📐 Defensive programming, practiced correctly. The concern — “mix-and-match components across stages” — names the exact failure mode: BS4 HTML + BS5 script = unpredictable behaviour, and vice versa. Preventing that collision before it can happen is a mark of engineering maturity.
• ✅ One thing to confirm. Verify that trueStoryWolf-bs4.html references scripts/domTargeting-bs4.js explicitly, not the original scripts/domTargeting.js. The wiring is only complete if the reference is explicit. If the BS4 page still points to the original, the safety net has a hole.
• 🔒 Now freeze it. domTargeting-bs4.js, trueStoryStyles-bs4.css, trueStoryWolfHome-bs4.html, and trueStoryWolf-bs4.html are all now reference documents, not working files. They do not receive further edits. The originals evolve; the -bs4 set is the museum exhibit.
• 📚 Classroom takeaway. The question “what does this script depend on in the DOM?” is one of the most underasked questions in front-end development. A student who asks it — and then acts on the answer — before a major refactor is thinking like a professional.

• 📎 Thin archive banner above the navbar (recommended primary). A narrow colored strip at the very top of the <body> — before the navbar — that says something like: “📦 Bootstrap 4 Archive — This is a frozen reference version. View current version →” This is the industry standard for archived or versioned pages (GitHub branch warnings, MDN “this is an older version” banners, Wayback Machine headers). It is unmissable, immediately explains the context, and provides the escape route in one element. It is not cluttered because it is distinct metadata chrome, not page content.
• 📑 Page title includes “(Bootstrap 4 Reference)”. Update <title> to: TNT | JS Apps | True Story of the 3 Little Pigs | Bootstrap 4 Reference. Zero visual footprint. Costs nothing. Critically useful when a student has both versions open in separate tabs — the tab label tells them instantly which window is which.
• 🎨 Tonal body color change in trueStoryStyles-bs4.css. Add a subtle sepia or amber tint to the page body — something like background-color: #fdf6e3 rather than pure white. The aged-paper tone signals “historical version” without any text. This is the same psychological cue as a sepia photograph. Pairs naturally with the amber TNT palette already in use.
• 🏷️ Navbar border or badge. Add a border-bottom: 3px solid #E8862A to the navbar in trueStoryStyles-bs4.css, and/or a small <span> badge next to the app title reading “Bootstrap 4” in an amber pill. Subtle, permanent, and within the existing nav chrome — not a new element on the page.
• 🧱 Footer version tag. Add a one-line note to the footer: “Bootstrap 4 Archive Version • Return to current version” Less prominent than the top banner but always present at the bottom of the page for anyone who reads to the end.
• 🚫 What NOT to do: a modal on page load. A Bootstrap 4 modal that fires on first visit is technically possible and impossible to miss — but it interrupts the experience before the student has done anything. Modals are hostile for orientation. They feel like a warning rather than a map marker. Avoid.

Recommended combination for the Bootstrap 5 renovation: thin archive banner (#1) + title tag update (#2) + tonal body tint (#3). Three independent “you are here” signals across different sensory channels: a visible strip, a browser-tab label, and an environmental color tone. Any one of the three could be overlooked; all three together cannot.

The -bs4 files are now frozen. They carry their own orientation identity and are self-contained reference documents. They do not receive further edits. The originals proceed to Stage 2 (Bootstrap 5 upgrade).