Building Cross Training

Three names were considered:

• Language Bridges — accurate but passive; implies a one-way translation, not a workout
• Translation Lab — too close to a foreign-language metaphor; undersells the CS insight
• Polyglot Studio — sounds like a language-learning product; would attract the wrong expectation

Cross Training wins. The athletic metaphor is apt and sticky: you train in one discipline to get better at another. Seeing iteration in p5.js makes the Java version more legible; seeing it in Java makes the Python version obvious. The metaphor maps cleanly to what the section actually does — and students remember it.

Two page designs were considered:

• Language-centric: pages titled “Java at TNT,” “Python at TNT” — would drift into being tutorial sites and duplicate content W3Schools and Codecademy already cover better.
• Concept-centric: pages titled “Iterate & Display: from p5.js to Java to Python” — each language is a different lens on the same idea.

Concept-centric wins, and the reason is not just design preference — it is the approach that builds the skill employers actually pay for. Nobody in a technical interview asks “which languages do you know?” They give you a problem. The candidate who says “this is an iteration problem — here’s how I’d approach it in whatever language you prefer” gets the offer.

Rule: Every Cross Training page is named after its CS concept. The originating TNT app is always the anchor. Each language is a lens, not the subject.

Two housing options were considered:

• App-companion pages (e.g., MovieCredSPARK.../crossTraining.html) — works at small scope but makes the concept invisible. A student who doesn’t already know to look there will never find it.
• Hub + entries (CrossTraining/crossTrainingHome.html → CrossTraining/movieCredits-names/index.html) — gives Cross Training a discoverable identity independent of any single app.

Hub wins. The entry points always link both ways — originating app links forward to the Cross Training concept page; concept page links back to the originating app. The hub also makes the section expandable: when entry #2 arrives, there is already a home for it.

TNT is a display and teaching platform, not a development environment for Python or Java. Java needs a JDK, a proper stack trace, javac, and a terminal. Python needs a REPL or VS Code with the Python extension. Neither workflow belongs inside a web page build.

The rule: write and debug in the proper environment first. Polish until the program is classroom-ready. Then bring the clean source into TNT — as static display for Java (with an external “Try it →” link), and as live-runnable code for Python (via Skulkt or Trinket, after a compatibility pass).

The Skulkt caveat is a construction gate: Skulkt is not full CPython. Some standard library modules are missing or incomplete. A program that runs perfectly in VS Code can silently fail in Skulkt. Do not finalize the Python panel of a Cross Training page until the code has been verified to run correctly in Skulkt — not just in a standard Python 3 interpreter.

Three options were considered for syntax-highlighted code panels:

• Hand-tokenized HTML spans — <span class="keyword">for</span> — fragile, unmaintainable, breaks when code is edited.
• Plain <pre><code> — zero dependencies but no syntax coloring; harder to read for a teaching page.
• Highlight.js CDN — 11.9.0 via cdnjs; auto-detects JavaScript, Java, and Python; renders on page load; zero configuration.

Highlight.js wins. Code display is the entire point of a Cross Training concept page — syntax coloring is not decoration here, it is functional. hljs.highlightAll() is called after Bootstrap JS; the library handles all three languages automatically.

The concept page leads with a pseudocode block before showing any language-specific code:

This section appears before any language code. Its purpose: prove to the student that the three code examples below are translations of four lines, not three different programs. The pseudocode is the concept; the code panels are the vocabulary lessons.

Each language panel has a footer with a “Try It” link. Choices by language:

• p5.js: editor.p5js.org — the official online editor; students already know it from TNT Processing apps.
• Java: JDoodle — paste-and-run, no account required, handles standard library classes including ArrayList.
• Python 3: Trinket — browser-based, no account required. Note: once the code passes a Skulkt compatibility check, the Python panel will run live on the page — Trinket is a temporary bridge.

The outer card <a> was changed to a <div> with:

• role="link" and tabindex="0" to preserve accessibility
• onclick and onkeypress handlers for keyboard + mouse navigation
• cursor: pointer CSS so the element still looks clickable

The inner source attribution <a> gained onclick="event.stopPropagation()" so clicking it opens the originating app without also triggering the card’s own navigation handler.

The placeholder cards (Concepts #2 and #3) were already <div> elements, so this change brings the live card into structural consistency with them.

The hub hero previously had one button: “What is Cross Training?” linking to the #ctWhat explainer. A returning student or a student who arrived with intent already knows what Cross Training is — making them scroll past the explainer to reach the cards is friction with no payoff.

A ghost-style secondary button (“See Concept Pages” → #ctEntries) was added alongside the primary. The two-button CTA row mirrors the pattern already established on index.html’s hero. Primary = learn the concept; Secondary = skip to the work.

Every code panel on every future Cross Training concept page must have a Copy button. The reason is not convenience — it is respect. A student who wants to test a snippet in JDoodle, the p5.js editor, or their local IDE should not have to manually select text in a syntax-highlighted block. The workflow is: read the code, understand the concept, paste it somewhere and run it. Friction at step three breaks the lesson.

Implementation: navigator.clipboard.writeText() (async, requires HTTPS or localhost) with a document.execCommand('copy') fallback for older browsers. The button uses Font Awesome fa-copy → fa-check for two seconds of visual confirmation that the copy succeeded.

Pattern to replicate: every .ctc-lang-header gets a <button class="ctc-copy-btn" onclick="copyCode(this)">. The copyCode() function traverses up to the nearest .ctc-lang-panel and grabs its <code> element’s innerText. No IDs needed — the DOM relationship does the targeting.

Alternatives evaluated:

• Replit — good for ongoing projects but requires an account and has shifted toward paid tiers.
• Python Tutor (pythontutor.com) — excellent for visualizing execution step-by-step; better suited to a debugging lesson than a first-run check.
• W3Schools TryIt — familiar to TNT students but very limited; cannot run multi-line programs reliably.
• OnlineGDB — free, no account required to run code, supports Python 3, clean interface, same UX as JDoodle. An account can be created for saving work.

OnlineGDB wins for the same reasons JDoodle won for Java: paste-and-run with no friction, optional account for students who want to save their work. The teacher’s observation about JDoodle being a low-barrier practice environment applies equally to OnlineGDB for Python. URL: https://www.onlinegdb.com/online_python_compiler

Every concept page is two levels deep in the folder structure (CrossTraining/[concept]/index.html). A student who has read the code and wants to get back to the hub, or who wants to understand the design decisions behind what they just read, should not have to use the browser Back button or hunt through the main navbar.

A mini-nav bar sits directly below the main navbar on every concept page. It carries two links: Cross Training Home (amber, the primary destination) and Development Chat Log (muted, for the curious student or the teacher reviewing the session history). A right-aligned label identifies the current concept by name. The bar is inline-styled for simplicity — no new CSS class needed since it is one element per page, not a reusable component. The pattern is identical to the back-bar already established on crossTrainingHome.html and the Adventures pages.

The P-banner summarizes what a session was about. The chat bubble preserves the original prompt, word for word, credited by the author’s initials. Conflating the two loses the historical record. From Session 5 forward: if the session originated from a teacher prompt, a chat-turn block with a bubble-user bubble and initials is required. The P-banner may also appear for context, but it does not substitute for the bubble.

The teacher’s three-tier framing is correct and generalizes to every future Cross Training entry. It is now the official pattern:

The tiers are cumulative, not interchangeable. A student can stop at Tier 2 and learn the concept. A student who wants more has Tier 3 one scroll away. A teacher deploying the lesson opens the PDF. No tier replaces another.

The teacher’s programs are added to CrossTraining/movieCredits-names/index.html as a new #ctcDeeper section below the Language Philosophy section. It carries:

• A Tier 3 badge (green, visually distinct from the blue Tier 2 panels)
• Two panels: Python and Java workshop versions with key code excerpts and copy buttons
• Download links for the full source files (.py, .java)
• PDF download links for both lesson plans

The section is clearly labeled “The Teacher’s Programs” so both students and teachers understand who made it and what it is for. Tier 2 panels are untouched.

Both lesson plans are linked as downloadable PDFs from the Tier 3 resources bar at the bottom of the Go Deeper section. They are not rendered as HTML. Reasons:

• Lesson plans are teacher documents: they contain rubrics, guided practice scaffolds, formative checks, and differentiation notes. These are valuable in context but would read as bureaucratic noise on a student-facing page.
• PDFs preserve the formatting the teacher designed. Converting them to HTML would degrade both fidelity and readability.
• A teacher downloading a PDF can print it, annotate it, and share it directly. A web embed cannot be annotated or printed cleanly.

The Cross Training card is added as the final entry in the TNT’s Own Resources grid, after Ask Copilot. Blue dumbbell icon (#1a5c8a) matches the Cross Training accent color used throughout the section. Description emphasizes the three-tier structure and the lesson plans as the concrete classroom-ready artifact.

The news entry leads with the origin story (the Movie Credits lesson plan), explains the concept-centric philosophy and three-tier rhythm, and describes what is specifically on the concept page (pseudocode, code panels, Copy buttons, language philosophy, Go Deeper programs, PDF lesson plans). Four links: hub, concept page, development chat log, originating app. The entry also notes the Resources placement, connecting the two ecosystem additions.

The Concept #2 placeholder in the hub used p5.js as a stand-in for the first language badge. The actual originating app (Mama’s Little Function) is vanilla JavaScript running in a browser — not a p5.js sketch. There is no p5.js version of the functions-and-methods concept, nor is one needed: the JavaScript version is more instructive precisely because it shows the event-driven entry point rather than a p5.js setup()/draw() pair.

A new .ct-lang-js badge class (JavaScript yellow, #f7df1e) was added to the hub’s style block. The Concept #2 card was updated to show JavaScript, Java, Python 3. The p5.js badge placeholder was removed from this card. The p5.js badge class remains in the CSS because Concept #1 still uses it.

In Concept #1, Tier 2 was a simplified snippet and Tier 3 was the teacher’s more complex program (with time.sleep() and a full cast list). Here, no such split exists. The three source files are not “more complex workshop versions” of simpler snippets — they are the examples. Each is already focused on the core concept (return vs void functions) with a minimal supporting structure (an input loop for Java/Python, an event-driven shell for JavaScript).

The concept panels show the function definitions plus a clean calling example extracted from each source file. The full files are available as downloads from a source bar below the code panels. The source bar occupies the same visual position where the Tier 3 resources bar appeared in Concept #1, but without the green Tier 3 labeling.

The MamasFunctionApp/ folder already contains a complete, self-hosted browser terminal: mamasLittleFunction.html + mamasLittleFunctionApp.js. This is the only Cross Training concept page to date where the JavaScript version runs live in the same folder, without needing an external compiler or editor. The “Try it” link in the JavaScript panel footer points directly to mamasLittleFunction.html.

The comparison markdown (comparingVersionsMamasLittleFunction.md) documents why simulating a terminal in the browser requires the two helpers printLine() and printInline() — because the DOM is element-based, not a character stream, so inline print behavior (Java’s System.out.print() / Python’s print(..., end="")) must be built manually. That context lives in the markdown; the concept page focuses on the function structure itself.

Every Cross Training concept page can carry a distinct accent color tied to its originating app. Concept #1 used the Cross Training blue (#1a5c8a) because the Movie Credits app was already blue-accented. Mama’s Little Function uses #4C009E (its --mlf-purple) throughout its own pages. Concept #2 inherits that purple: the concept badge, the pseudocode border, the mini-nav bottom border, the philosophy section label, the origin link color, and the navigation footer button all use #4C009E.

This creates a visual breadcrumb: a student who navigates between Mama’s Little Function and the Cross Training concept page sees the same purple accent on both, reinforcing that the two pages are related. The Cross Training hub and chatlog retain their own blue accent (#1a5c8a).

The three source files each contain an input loop (Java’s do…while with Scanner; Python’s while True with input(); JavaScript’s event-driven addEventListener). That loop structure is interesting and worth studying — but it is not the concept this page is teaching. Including the full input loop in the Tier 2 code panels would bury the return/void distinction in scaffolding.

The concept panels show only the two function definitions and a minimal calling example. The input loop difference is surfaced in the JavaScript philosophy card (“you register code; the browser calls it for you”) rather than in the code panel. Students who want the full loop see it by clicking “try the live terminal version” (JS) or downloading the source file (Java, Python). The concept page teaches the concept. The source files demonstrate it in full.

The first answer recommended anchoring Concept #3 directly to the Twelve Days of Christmas with Switch Fall-Through as the concept. This was correct: the app’s architecture is fall-through, and the language comparison (JS/Java agree; Python refuses) is philosophically rich. The 2-day simplification keeps the code compact enough for a concept page.

Ranked list from that exchange: (1) Switch Fall-Through / Cascade Pattern, (2) Modulo Cycling, (3) Accumulator Pattern, (4) Computed Array Indexing.

The teacher proposed splitting Conditional Logic into two Cross Training entries — one for basic if/else and one for advanced switch/fall-through. The instinct was correct. The two concepts belong together as a progression but tell different language comparison stories:

• if/else: how each language generates a random number + how it writes a branch
• switch/fall-through: does the language allow cascade by default, or refuse it?

Two entries, two stories, one arc from basic to advanced. The Cross Training grid shows them as Concept #3 and Concept #4 respectively.

The crucial refinement: the two entries should use different anchor apps. The Twelve Days’ if/else solution would be deliberately clunky (the point of showing it is to make switch look good). An if/else entry needs an anchor where if/else is the right solution.

The Magic 8 Ball SPARK Edition is that anchor. Its chooseMessageType() function is a pure if/else chain classifying a random number into one of four probability regions. The language comparison is immediately interesting:

• JavaScript: Math.random() — built-in global, no import
• Java: new Random().nextDouble() — randomness as an object you instantiate
• Python 3: random.random() — module import required; module name = function name (beginner trap)

The same three languages as Concept #2. All three have native randomness with meaningfully different access patterns, and all three share the same if/else if/else branching structure — making the random number generation the primary language comparison story rather than the branching syntax itself.

No p5.js: the Magic 8 Ball is a p5.js Processing app, but chooseMessageType() is pure JavaScript with no p5.js dependency. The concept page correctly labels it “Vanilla JS” rather than a p5.js entry.

The Magic 8 Ball’s defining visual is the dark navy viewport where the answer appears. The concept page accent color is drawn from that detail: #1e40af (deep navy) for the badge, pseudocode border, mini-nav border, and origin link color.

This follows the per-concept accent color convention established in Session 8 (Concept #2 uses Mama’s Little Function’s purple #4C009E). The accent creates a visual breadcrumb between the originating app and its concept page without any text explanation.

The Java concept panel uses new Random().nextDouble() rather than the simpler Math.random(). Both are valid. The choice was intentional: new Random() is the professional-grade approach because it supports seeding — new Random(42) produces the same sequence every run, which is essential for reproducible testing and debugging.

This distinction was surfaced in a Java philosophy card P.S. section — a deliberate teaching moment showing that the longer approach is chosen for a professional reason, not redundancy. It reinforces the session’s core message: Java rewards the extra line.

The Magic 8 Ball SPARK Edition previously had links scattered below the canvas (S.P.A.R.K. Chat Log, Original Version, History & How It Works). These were refactored into a spark bar placed immediately after the navbar — the same pattern used in Mama’s Little Function.

The spark bar now carries three links: S.P.A.R.K. Chat Log, Cross Training: Conditional Logic (pointing to the new concept page), and History & How It Works. The .spark-bar CSS was added to magic8BallSparkStyles.css. The bottom link-bar was removed. Bidirectional linking between the app and its concept page is complete.

With Concept #3 live, a fourth card was added to the hub grid as a teaser: Conditional Logic: The Switch & Cascade, anchored to the Twelve Days of Christmas legacy app. The card carries the 🎄 thumbnail, a description of deliberate fall-through with no break, and an “Inspired by: Twelve Days of Christmas (Legacy)” attribution at reduced opacity. The card is a placeholder (non-interactive) until the concept page is built. Priority queue renumbered: String Manipulation moves to #5; Data Structures / OOP / File I/O to #6+.

The legacy movie clip page embeds the 2021 Pentatonix YouTube performance and asks: “can you write a program to generate the lyrics to the song with the least amount of code?” That question is the hook that motivates the switch/fall-through concept.

This follows the same pattern as Concept #1 (the Movie Credits Simulator has its own movie clip) and Concept #2 (Mama’s Little Function links to a Shortnin’ Bread performance). Every Cross Training anchor app has a human-scale cultural hook that gives the concept a reason to exist beyond the classroom. For Concept #4, that hook is a children’s song that is tedious to sing, nearly impossible to memorize, and perfectly designed to be generated by a loop — or better, a cascading switch.

The concept page will need both examples: a “normal” switch (with break, one match, one result) and the deliberate fall-through version. Building them in the same session ensures they are structurally parallel — same languages, same code density, same commenting style — so the concept page can place them side by side or in sequence without visual inconsistency.

The sequencing plan: the concept page will present the normal switch first (establishing the baseline), then remove the breaks and show the Twelve Days version (making the cascade feel like a choice, not an accident). The student who has seen the high school class lookup understands immediately that the absence of break in the Twelve Days version is intentional.

The “normal” switch example maps grade levels 9, 10, 11, 12 to Freshman, Sophomore, Junior, Senior, with a default of Unspecified. This mapping was chosen for three reasons:

• Familiarity: every student in the room knows what grade they are in. The domain requires no explanation.
• Completeness: four explicit cases plus a default — exactly the structure needed to show all three anatomical parts of a switch: individual cases, break statements, and the default clause.
• Clean contrast: the output is a simple one-to-one mapping with no cumulative behavior. This makes the fall-through version feel like a deliberate departure from the norm rather than a different kind of normal.

The file names reflect the pattern established in Concept #2 (Mama’s Little Function) and Concept #3: highSchoolClassDemo.js, HighSchoolClassDriver.java, and highSchoolClassDemo.py.

Python’s match/case (introduced in 3.10) is the philosophical climax of Concept #4. JavaScript and Java both fall through by default — the programmer must add break to stop the cascade. Python made the opposite architectural choice: match/case cannot cascade at all. Each case executes only its own block and exits. There is no way to opt in to fall-through.

For the high school class lookup, this is fine — the behavior is the same as the JS and Java versions. For the Twelve Days problem, Python’s refusal is dramatically visible: the cumulative verse that cascades automatically in JS and Java must be spelled out word-for-word in each Python case. The Python version is longer and more explicit. Whether that is a feature or a limitation depends on your philosophy.

This three-way comparison — JS and Java agree on cascading, Python refuses it — is the Cross Training payoff for Concept #4, exactly as the randomness-access comparison (no import vs. object vs. module) is the payoff for Concept #3.

The Magic 8 Ball concept page uses the ball’s viewport navy (#1e40af). Concept #2 uses Mama’s Little Function’s purple (#4C009E). Each accent is drawn from the originating app’s most recognizable visual.

The Twelve Days of Christmas is a Christmas song. The legacy app uses a holiday-themed image folder and a partridge-in-a-pear-tree icon. Holly green (#166534) is the natural accent: dark enough to be legible against white backgrounds and light backgrounds, saturated enough to read clearly in the dark code section, and unmistakably Christmas without requiring an image. The mini-nav border, concept badge, and pseudocode border all carry this color. The visual breadcrumb between the concept page and its seasonal anchor app is established without a single word of text.

The concept page is structured as an explicit pedagogical arc rather than a single three-panel comparison. Part 1 (“Normal switch”) shows the grade-to-class-name lookup with breaks — one match, clean exit, no surprises. Part 2 (“The Cascade”) removes the breaks and shows the Twelve Days fall-through.

The divider between the two groups reads: “Now remove the breaks ↓” — a single line that frames what follows as a deliberate departure from established behavior rather than an unexplained exception. A student who has seen Part 1 arrives at Part 2 with a mental model of what break normally does. Removing it is then a meaningful choice rather than a baffling omission. The sequencing is the lesson; the code is the demonstration.

The home page feature cards use a .feature-card-bg absolutely-positioned div inside the card, with opacity: 0.35 at rest and a scale + opacity transition on hover. The same technique was applied to the Cross Training entry card thumbnail area as .ct-entry-thumb-bg.

Images used, one per concept, pulled from each concept page’s own hero background-image:

• Concept #1 — Iterate & Display: ../images/film-credits-1024x683.jpg
• Concept #2 — Functions & Methods: ../MamasFunctionSPARK2026-08-10/images/easyBakeOven.jpg
• Concept #3 — Conditional Logic: if/else: ../Magic8Ball2026-07-05-Stg6/images/mattel8Ball.webp
• Concept #4 — The Switch & Cascade: ../images/twelveDaysXmas.jpg

The emoji icon in each thumbnail is wrapped in a <span class="ct-entry-thumb-icon"> with position: relative; z-index: 1 so it floats visibly above the background image. Opacity at rest is 0.32 (slightly lower than the home page’s 0.35) because the dark-card context of the hub makes the images read more strongly. On hover, opacity lifts to 0.55 with a subtle scale(1.05) — identical to the home page behavior.

The image choice rule is simple and self-maintaining: the card thumbnail always uses the same image as the concept page’s hero background. This creates a visual echo — a student who has visited Concept #3 and remembers the Magic 8 Ball photograph recognizes it immediately in the hub card. It also means that when a new concept page is created with its own hero image, the rule for which image belongs on the hub card is already decided. The CRAP principle of Repetition is enforced structurally, not by convention.

The Session 13 design put one element (the icon) in two roles simultaneously: decorative identity marker and overlay on a photo. Those two roles conflict. An icon centered on a photograph competes with the photo’s subject and draws the eye away from both.

Separating them gives each element a clear job:

• Thumbnail background image — thematic atmosphere, fills the thumbnail area cleanly with no overlay competing for attention.
• Icon beside the title — decorative identity marker that also reinforces quick scanning. A student can read “🎬 Iterate & Display” faster than “Iterate & Display” alone.

The icon is now inside a .ct-entry-header flex container alongside a stacked .ct-entry-concept + .ct-entry-title div. The icon aligns with the top of the two-line text block via align-items: flex-start. .ct-entry-title’s margin-bottom is moved to the header container, keeping the spacing clean.

The aboutUs.html hero uses <i class="fas fa-users me-2"></i>Who Are We? inline in the <h1>. That pattern appears throughout TNT. The concept card adaptation is the same idea scaled to a two-line label+title block: the icon acts as a visual anchor to the left of the text column. A student scanning the hub grid can identify each concept by icon before reading a single word. This is the same scan-path economy that makes font-awesome icons valuable in navigation bars.

The Conlexia hero image is a boy overwhelmed by swirling letters. The boy’s sweater is a saturated cobalt blue — distinctive, immediately visible, and thematically appropriate (letters, reading, text). Sampling that color gives #1a86d8 (cobalt blue) with hover #1570ba.

The initial build used teal (#0f766e) as a placeholder. After reviewing the hero image, the teacher correctly identified the shirt blue as a better fit — it creates a genuine visual breadcrumb between the image and the accent color system. This follows the established Cross Training convention: Concept #2 uses Mama’s Little Function’s purple, Concept #3 uses the Magic 8 Ball’s viewport navy, Concept #4 uses holly green. Each accent is drawn from the most recognizable visual in the anchor app. For Concept #5, that visual is the boy’s shirt.

The scrambleTargetLetters function is a clean showcase for three distinct string manipulation philosophies:

• JavaScript — strings behave like arrays; str[i], includes(), replace() (first occurrence only), no import for Math.random().
• Java — charAt() returns a char primitive (not a String); Character.* utility class for case operations; StringBuilder.append() required for efficient loop accumulation; String.valueOf(c) needed to convert char to String for contains().
• Python 3 — for symbol in message direct iteration (no index); random.choice(pool) replaces five tokens of index math; str.isupper() and str.upper() as methods on the string itself.

The Java demo includes a full runnable public class ConlexiaDemoDriver { ... public static void main } so students can paste it directly into JDoodle. This matches the established rule from Concept #4: every Java panel must be paste-and-run without modification.

A sub-navigation bar (matching the mini-nav pattern used on concept pages and the spark bars on other anchor apps) was added to conlexiaIndex.html immediately after the navbar. It carries two links: Cross Training: String Manipulation (amber, primary) and p b d q Confusion Clip (muted, cultural hook). Bidirectional linking between the Conlexia app and the concept page is now complete — the same pattern established for Magic 8 Ball (Concept #3) and Movie Credits (Concept #1).