Building Cross Training
Sessions 1–7: Brainstorm, Build, Refinement & Ecosystem Integration
How a Movie Credits lesson plan became TNT’s cross-language concept hub
This is the development diary for TNT Cross Training — the section of TechNoviceTools where a TNT app is the hook, a CS concept is the lesson, and two or three language implementations are the payoff. Every entry is concept-centric: the page is titled after the idea, not the language.
The log follows the S.P.A.R.K. method: Set goal → Prompt thoughtfully → Analyze the response → Refine → Know what you built.
Session 1 (2026-08-08) covers the brainstorming document that established the concept, its name, its housing structure, and the four priority topics to build.
Session 2 (2026-08-09) is the first implementation: the hub page, the first concept page (Iterate & Display, anchored in Movie Credits), and the index.html card and page-card.
Session 3 (2026-08-09) documents a browser-breaking HTML bug (nested anchors) found in the hub page card, its root cause, and the fix.
Session 4 (2026-08-09) covers two UX improvements: a “See Concept Pages” secondary CTA button in the hub hero, and Copy buttons on every code panel — a staple feature for all future concept pages.
Session 5 (2026-08-09) replaces the Trinket Python link (service ending August 2026) with OnlineGDB, adds a mini-nav bar to the concept page as a staple feature, and corrects the chatlog convention of attributing user prompts to their author by initials.
Session 6 (2026-08-09) is a design discussion: the teacher supplies two full programs and two classroom lesson plans. The session formalizes the three-tier Cross Training rhythm and adds a “Go Deeper” Tier 3 section to the concept page.
Session 7 (2026-08-09) is the final pre-deployment ecosystem integration: Cross Training is added to the Resources page (TNT’s Own Resources) and a launch news entry is written for the News page.
What the Movie Credits Simulator is really doing: Behind the starfield, the cinematic fonts, and the Superman-style zoom is something simple — a list of names, and for each name, the program does something with it. That’s iteration. Every language you’ll ever use has a way to express this idea. The syntax changes. The vocabulary changes. The concept does not.
The insight worth building around: every flashy TNT app has a mundane CS concept at its core. Stripping the fireworks away to show the same concept in Java or Python teaches students that the idea is language-agnostic. That is a genuinely important insight most intro courses fail to deliver.
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.
Four concepts were ranked by hiring value. These appear in every CS interview and AP CS exam. Build in this order; more advanced topics (OOP, file I/O, data structures) come later.
| Priority | Concept | Why it matters to employers |
|---|---|---|
| 1 | Iterate over a collection | The building block of everything — already anchored in Movie Credits |
| 2 | Functions & Methods | How logic is organized and reused across a codebase |
| 3 | Conditional Logic | Decision-making; also reveals whether a student can reason about debugging |
| 4 | String Manipulation | Appears in almost every real-world program; highly practical |
- Name the section after its function, not its content. “Cross Training” names what the student does here — trains across disciplines — not what the section contains. A name that communicates purpose is a name students remember and seek out.
- Concept-centric pages are more durable than language-centric pages. Languages come and go; the concept of iterating a list is the same in COBOL, Java, Python, and whatever comes next. A page that owns an idea — rather than a syntax — never becomes obsolete.
- Every page must answer the guiding question: “Why does this look different in each language, and what does each version reveal about the language’s personality?” This is the section students remember. This is what they say in an interview. Syntax is forgettable. Philosophy sticks.
I’m thinking we create a card on the index page (Cross Training, and I have the artwork) which connects to a crossTrainingHome page where we list the various aspects we’ve been ‘cross training’ in. What is your perspective of this direction, and can you help me implement it? I can supply the files as you need them.
The direction is solid and well-reasoned in the brainstorm. Two immediate recommendations before building: (1) build the hub and index card together now, with Movie Credits as the first live entry — so the card on the home page isn’t a dead end from day one; (2) the brainstorm recommended building the first concept page before designing the hub, but since the Movie Credits Java/Python work is already done, the hub can launch with one live entry and two transparent placeholder cards for Functions and Conditional Logic.
This gives Cross Training a discoverable home immediately while leaving the design space open for the next two entries.
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:
CREATE a list containing several names
// Iterate it — visit each one:
FOR EACH name IN the list:
DO something with name
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.
| File | Action | What it contains |
|---|---|---|
CrossTraining/crossTrainingHome.html | Created | Hub page: "What is Cross Training?" explanation; Concept #1 live card; Concepts #2–3 placeholder cards; priority queue |
CrossTraining/movieCredits-names/index.html | Created | Concept #1 page: pseudocode section; 3-column code comparison (p5.js / Java / Python 3); language philosophy paragraphs; navigation footer |
index.html (TNT root) | Updated | Cross Training feature card added to "Featured Destinations"; Cross Training page-card added to "Explore All Sections" grid |
Teacher action needed: replace the placeholder code in the Java and Python panels of
CrossTraining/movieCredits-names/index.html with the field-tested lesson code.
The Java panel is the <code class="language-java"> block;
the Python panel is the <code class="language-python"> block.
Run the Python version through a Skulkt compatibility check before enabling live execution.
- Lead with the concept, not the code. The pseudocode block before the language panels is not decoration — it is the pedagogical claim. “These three programs are the same four lines of pseudocode written in different vocabularies.” Without that claim made explicit, a student sees three programs. With it, they see one idea in three dialects. That shift is the entire lesson.
- Language philosophy paragraphs are the section students remember. Syntax is queryable (Stack Overflow, W3Schools). The answer to “why does Python have no curly brackets?” is not queryable — it requires someone to explain a language’s design values. These paragraphs are the TNT value-add that no reference site provides. They must appear on every concept page, and they must be written before the page is considered complete.
After reviewing the hub page in a browser, the teacher reported that Concept #1’s card content appeared outside the card. Root cause: nested <a> tags. The card was an <a> element; the “Inspired by: Movie Credits Simulator” source attribution inside it was also an <a>. This is invalid HTML.
The HTML spec does not permit <a> elements nested inside other <a> elements. When a browser encounters this pattern, it attempts to “fix” the markup by ejecting the inner <a> outside the outer one. The result: the text and link that were inside the card appear after the card in the DOM, visually below the card boundary.
The Concept #1 card was an <a href="movieCredits-names/index.html">. Inside it, the source attribution was <a href="...movieCreditsSim18.html">Movie Credits Simulator</a>. Both are valid anchors individually — nested, they are invalid HTML and produce unpredictable rendering across browsers.
<div role="link"> with stopPropagationThe outer card <a> was changed to a <div> with:
role="link"andtabindex="0"to preserve accessibilityonclickandonkeypresshandlers for keyboard + mouse navigationcursor: pointerCSS 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.
| File | What Changed |
|---|---|
CrossTraining/crossTrainingHome.html | Concept #1 card changed from <a> to <div role="link">; CSS hover selector updated; back-bar added linking to this chatlog |
CrossTraining/crossTrainingChatlog.html | Created |
An <a> card that contains a second <a> is invalid HTML — use a <div role="link"> instead. When a card links to a destination and contains a separate attribution or source link, the outer element must not be an anchor. The pattern is: <div role="link" tabindex="0" onclick="..."> for the card shell; a proper <a> with event.stopPropagation() for any inner link. This is the rule for every future Cross Training entry card that carries a source attribution.
Two user-experience improvements added in the same session: a secondary “See Concept Pages” CTA in the hub hero for visitors who want to skip the explanation and jump straight to the code; and Copy buttons on every code panel so students can paste examples directly into an editor or online compiler without manually selecting text.
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.
| File | What Changed |
|---|---|
CrossTraining/crossTrainingHome.html | Secondary “See Concept Pages” CTA button added to hero; .btn-ct-secondary and .ct-hero-cta CSS classes added |
CrossTraining/movieCredits-names/index.html | Copy button added to all three language panel headers; .ctc-copy-btn CSS added; copyCode(), fallbackCopy(), showCopied() JS functions added |
CrossTraining/crossTrainingChatlog.html | Session 4 documented; about-box updated |
- Any code block a student is expected to run somewhere else needs a Copy button. This is not optional polish — it is the minimum respect for a student’s workflow. The absence of a Copy button on a teaching code block is a quiet signal that the page was built for display, not for use. Cross Training pages exist to be used.
- A hero with two CTAs serves two audiences simultaneously. “What is Cross Training?” serves the first-time visitor. “See Concept Pages” serves the returning student and the student who arrived with intent. Forcing both to take the same path is a choice that benefits neither.
Two items: Trinket (the Python “Try It” destination) is shutting down at the end of August 2026 and needs a replacement; and concept pages need a mini-nav bar connecting back to Cross Training Home and the Development Chat Log. Both become staple features for all future entries. The session also corrects a chatlog convention that had been slipping: user prompts belong in their own chat-turn bubble, credited by initials.
I’m very pleased with the movieCredits-names/index.html file. Sadly, I notice that the Trinket application linked to the Python snippet is due to ‘go away’ the end of August 2026. Are there simple alternatives we can use instead? By contrast, the JDoodle app seems like a place a novice could create an account and practice their Java online without going to all the trouble of opening VSCode, etc. Also, I think each concept page should have a mini-nav bar that connects back to the home page for cross training and to the developer chatlog for this endeavor. That also should be a feature of all future concept pages. Please include this prompt in the chatlog (and be sure to denote it, like you did earlier, with my initials); it looks like you may have been deviating from this pattern.
The teacher is right. Sessions 3 and 4 embedded the prompt text inside the spark-banner spark-p block rather than in a separate chat-turn bubble. That is a shortcut that loses the historical record. The P-banner is Copilot’s framing of what was asked — a summary. The chat bubble is the exact text the teacher typed. These are not the same thing, and both belong in the log.
Rule going forward: Every session that originated from a teacher prompt gets a chat-turn block with a bubble-user bubble credited by initials. The P-banner provides context; the bubble preserves the original voice.
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.
| File | What Changed |
|---|---|
CrossTraining/movieCredits-names/index.html | Trinket link replaced with OnlineGDB in Python panel footer; mini-nav bar added below main navbar |
CrossTraining/crossTrainingChatlog.html | Session 5 documented; back-bar and hero updated to Sessions 1–5; about-box updated; user-attribution convention corrected |
- External service links require a maintenance policy. Trinket shutting down is not an edge case — it is the normal lifecycle of a free web service. Every “Try It” link on a Cross Training page should be reviewed annually. Prefer services with institutional backing (OnlineGDB, JDoodle, the p5.js editor) over those dependent on VC funding or subscription pivots.
- Navigation redundancy is not noise — it is respect. The main navbar links to sections. The mini-nav bar links to the immediate context: where this page lives in the Cross Training ecosystem. A student deep in a concept page should never have to think about how to get back to the hub. The mini-nav removes that cognitive load.
- A chat log without author attribution is a summary, not a record. The point of a S.P.A.R.K. chatlog is to preserve the actual conversation so future contributors can reconstruct not just what was decided, but who asked, what they said, and what the reasoning was. Initials on the bubble, verbatim text, every time.
The teacher supplies two field-tested programs (movieCreditsDemo.py, MovieCreditsDemoDriver.java) and two classroom lesson plans (PDF). This session is a design discussion: how do the teacher’s richer programs relate to the Copilot-supplied concept snippets? The outcome formalizes the three-tier Cross Training rhythm and adds a Tier 3 “Go Deeper” section to the concept page.
You may have noticed that I have two complete programs in Python and Java from development elsewhere, along with PDF lesson plans for each. I like the fact that you wrote simpler, non-distracting code snippets that precisely show the idea of Iterate and Display. These do too, but offer a bit more. What are the pros and cons of including them here, and even their lesson plans? Let’s discuss this and write it up in the chatlog, and then decide formally what to do. I could see this being a great rhythm: Inspiring app from TNT; Copilot-supplied demos of the essence of the concept showcased; teacher-supplied more detailed programs and accompanying lesson plans. I’m interested in your perspective.
The Copilot snippets and the teacher’s programs are answering different questions. The snippets answer: “What is iteration, stripped of everything else?” The teacher’s programs answer: “What does a complete, classroom-ready implementation look like, and how exactly does the syntax differ between Python and Java?” Both questions are valuable. Neither replaces the other.
The key structural insight is in your framing. The three-tier rhythm you described is not just a Cross Training pattern — it is a pedagogical progression. The app (Tier 1) creates motivation. The distilled snippets (Tier 2) isolate the concept. The teacher’s programs (Tier 3) provide the classroom-tested, commentary-rich versions that can be handed to a student or used in a lesson. Each tier serves a different learner in a different moment.
What makes the teacher’s programs genuinely different — and worth keeping — is the inline commentary. movieCreditsDemo.py does not just show Python iteration; it shows Python iteration while simultaneously explaining what the equivalent Java line would be. The comments are the lesson. Replacing those with the lean snippets would be the wrong trade. The right structure keeps both: the clean Tier 2 panels for the “aha moment,” and the rich Tier 3 programs for the student who wants to go further, or the teacher who wants a classroom-ready starting point.
On the lesson plans: these are teacher documents, not student documents. A full lesson plan embedded as HTML would feel like reading a staff meeting agenda — the format is wrong for the context. The right treatment is to link them as downloadable PDFs. A student who wants to understand the concept reads the page. A teacher who wants to deploy this in a classroom downloads the PDF.
| Consideration | Copilot Snippets (Tier 2) | Teacher’s Programs (Tier 3) |
|---|---|---|
| Primary purpose | Isolate the concept; remove all noise | Classroom-ready; running program with time delays |
| Inline commentary | Language philosophy paragraphs (below the code) | Java vs. Python comparison baked into the code itself |
| Time delay | Not included — irrelevant to the iteration concept | Included — connects viscerally to the original Movie Credits app |
| Data | Generic names (Alice, Bob, Carmen…) | Full fictional movie cast (The Last Signal) |
| Complexity | 10–15 lines; no imports beyond p5.js | 50–80 lines including comments; requires import time / try-catch |
| Runs in browser | p5.js: yes; Java/Python: via external link | No — terminal/VS Code only; adds time.sleep() which blocks threads |
| Skulkt-compatible | Yes (no time module) | No — time.sleep() blocks the browser event loop in Skulkt |
| Audience | Any visitor, any device, no setup | Student with Python/Java installed; teacher with lesson context |
Verdict: The two sets of programs are complementary, not competing. The Skulkt observation is decisive for the Python panel: the teacher’s program cannot run live in a browser because time.sleep() blocks the event loop. This means it can never be Tier 2. It belongs in Tier 3, where it runs in a terminal and is clearly labeled as such.
The teacher’s three-tier framing is correct and generalizes to every future Cross Training entry. It is now the official pattern:
| Tier | What it is | Who creates it | Purpose |
|---|---|---|---|
| 1 — The Hook | The live TNT app | TNT (existing) | Motivation — makes the student want to know how it works |
| 2 — The Essence | Lean code snippets, 10–15 lines, no noise | Copilot (designed for the concept page) | Insight — the “aha moment” where the concept becomes visible |
| 3 — The Workshop | Full programs with inline commentary; lesson plans | Teacher (field-tested, classroom-ready) | Depth — for the student who wants to go further; for the teacher who wants to deploy it |
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.
| File | What Changed |
|---|---|
CrossTraining/movieCredits-names/index.html | Tier 3 “Go Deeper” section added after Language Philosophy; CSS for #ctcDeeper section, tier3 panel variant, and resource download buttons added |
CrossTraining/crossTrainingChatlog.html | Session 6 documented; back-bar and hero updated to Sessions 1–6; about-box updated |
CrossTraining/movieCredits-names/movieCreditsDemo.py | Linked as download (pre-existing) |
CrossTraining/movieCredits-names/MovieCreditsDemoDriver.java | Linked as download (pre-existing) |
CrossTraining/movieCredits-names/Python-Movie-Credits-Animation-Lesson-for-Beginners.pdf | Linked as download (pre-existing) |
CrossTraining/movieCredits-names/Java-Movie-Credits-Animation-Lesson-Plan.pdf | Linked as download (pre-existing) |
- Three tiers, three purposes, three audiences — none is optional. Tier 1 hooks the student who has never thought about the concept. Tier 2 gives the “aha moment” to the student who is ready to see it. Tier 3 gives depth and classroom tooling to the student and teacher who want to do something with it. Removing any tier removes a category of learner.
- The inline commentary in teacher-written code is not noise — it is the pedagogy.
movieCreditsDemo.py’s comments explaining what the equivalent Java line would be are doing something the Tier 2 panels cannot: they make the comparison visible at the exact moment the student is reading the code, not three paragraphs later. Both approaches are valuable. They work at different cognitive levels. - Format the artifact for its audience. The lesson plan is a teacher document. It contains rubrics, scaffolded practice tasks, and formative assessment protocols. Embedding it as HTML on a student-facing page would be wrong in both form and function. PDFs downloaded by teachers — and concept pages read by students — are different artifacts serving different people. Treat them accordingly.
Pre-deployment integration: Cross Training is added to the Resources page under TNT’s Own Resources, and a full news entry (#048) is written for the News page. Both actions give Cross Training its proper place in the TNT ecosystem before the live server deployment.
I’m about to deploy our new work to the live server. Before I do, I think this Cross Training idea should be featured in the Resources area, under TNT’s Own Resources, and also, of course, on the news page. What’s your opinion and let’s finalize the chatlog and make the changes suggested.
Both placements are correct, and both are necessary before deployment.
Resources is right because Cross Training is not just a section of the site — it is a reusable teaching tool in the same category as DWR & Eureka, Code Word Collector, and Follow the Leader. A student or teacher who opens the Resources page looking for classroom-ready CS material should find it there. The framing “same concept in multiple languages, with philosophy paragraphs and lesson plans” is exactly the kind of description that makes Resources useful.
News is right because Cross Training has enough depth and deliberate design to warrant its own headline. The three-tier rhythm, the concept-centric framing, the language philosophy paragraphs, the Tier 3 workshop programs, the lesson plan PDFs — these are not incidental. The news entry serves as the discovery path for visitors who browse News before Explore, and it gives the section a timestamp and a narrative that the hub page alone cannot provide.
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.
| File | What Changed |
|---|---|
resources.html | Cross Training card added to TNT’s Own Resources grid; lastUpdate updated to 08/09/2026 |
news.html | Entry #048 “New TNT Section: Cross Training” added at top of 2026 accordion; lastUpdate updated to 08/09/2026 |
CrossTraining/crossTrainingChatlog.html | Session 7 documented; back-bar and hero updated to Sessions 1–7; about-box updated |
- A new section is not deployed until it has both a News entry and a Resources card (if applicable). The hub page and concept page give Cross Training a home. The News entry gives it a timestamp and a narrative that a search engine, a new visitor, and a returning student can all use as an entry point. The Resources card places it where a teacher looking for classroom tools will actually find it. All three placements serve different audiences arriving from different directions.
- The chatlog is the deployment document. Seven sessions, 18 decisions, every bug and its fix, every design rationale. A future contributor who wants to add Concept #2 can read this log and understand not just what was built, but why every choice was made and what must be preserved. That is the point of the S.P.A.R.K. chatlog — not documentation for its own sake, but documentation that enables someone else to continue the work without asking the same questions twice.