What’s New(s) at TNT?

Mama’s Little Function is a JavaScript app built in June 2022 to honor one of the most important ideas in math and computer science: the function. A function, as the app puts it, is like a blender — it takes input, does some sort of action, and delivers output. The app presents this concept as a song, sung to the children’s tune of Short’nin Bread, with the full lyrics revealed verse by verse through a Next Verse button. A setup() function pushes all the hidden lyric paragraphs onto a stack; each button click pops one off and removes its hidden attribute, revealing the stanza in sequence. The final verse and closing chorus appear together in the last click. It is a clean, minimal demonstration of progressive disclosure through a stack, and it has been sitting outside the TNT 2026 ecosystem since it was built.

The 2026 upgrade brought it in without changing a single line of the song, the verse-reveal logic, or the noscript teaching demo. The Bootstrap version was bumped from 5.0.2 to 5.3.3 (CDN links only — no data-attribute migration needed, since Bootstrap 5.0 already used data-bs-*). The app-specific navbar — a standalone blender icon, brand name, and three app-local links — was replaced with the TNT standard sticky navbar, JS Apps marked active. The Bootstrap jumbotron (primary blue with an Easy Bake Oven photograph behind it) became a proper TNT hero section using the same easyBakeOvenDark.jpg background, a Font Awesome blender icon in TNT amber, and the Boogaloo hero title. A SPARK bar was added below the navbar, linking to this chatlog. The old standalone footer was replaced with the TNT standard dark footer. All page-specific CSS was extracted from the inline <style> block into a new styles/mamasFunctionStyles.css; the lyrics rules, chorus layout, drop-cap styling, and custom purple color classes were preserved exactly.

The app includes a deliberate noscript teaching demo: disable JavaScript and the song disappears, replaced by a “Danger Will Robinson” warning and a link to the original 2022 version. The non-validating <style>-inside-<noscript> pattern (which hides the app content via CSS when JS is off) is preserved with its original comment explaining the deliberate compromise. The link in the noscript block was updated to point to the correct legacy path; the hidden-element selector was updated from div#primaryContent to div#appSection to match the new structure.

The S.P.A.R.K. chatlog documents six decisions: the Bootstrap 5.x patch upgrade workflow (CDN links only — contrasted with the more involved BS4 → BS5 migration), the navbar-to-TNT-standard swap, the jumbotron-to-hero conversion, the CSS extraction and scoping adjustments, the init() simplification (removing a validateLi reference that would throw a TypeError against the new footer), and the noscript selector update. It closes with a note on the TNT validateLink IIFE pattern and why it is safer than inline validation logic in init().

Mama’s Little Function also served as the anchor for Cross Training Concept #2: Functions & Methods. The app’s two-function structure — f(x) that returns a value, and orderedPair that performs an action and returns nothing — is precisely the return-vs-void distinction that makes functions a concept worth studying across languages. The Cross Training page shows the same structure in JavaScript, Java, and Python 3 side by side, with a language philosophy note for each. For the first time in a Cross Training entry, the JavaScript version runs live in the browser without an external compiler.

Mama’s Little Function  •  S.P.A.R.K. Chat Log  •  Cross Training: Functions & Methods  •  JS Apps  •  Short’nin Bread — The Tune

TNT has a new section, and it was born from a lesson plan. A teacher wrote Java and Python 3 programs inspired by the Movie Credits Simulator — the Superman-style credit animation that sends student names flying across a starfield. Neither language runs in the simulator. Neither lesson had a web home. The question that followed: What if every flashy TNT app had a companion that stripped away the fireworks and showed the same concept in Java, Python, and beyond? That question became Cross Training.

The Concept

In athletic cross-training, you work in one discipline to become better at another. The same principle applies here: seeing iteration in p5.js makes the Java version more legible; seeing it in Java makes the Python version obvious. Every Cross Training page is concept-centric — named after the CS idea, not the language. The first entry, Iterate & Display, shows the loop-over-a-collection pattern that powers the Movie Credits animation. Concept #1 is “iterate a list and do something with each item” — the building block of almost everything, seen in three languages simultaneously.

The Three-Tier Rhythm

Every Cross Training concept page is organized in three tiers: Tier 1 is the live TNT app (the hook that creates motivation). Tier 2 is a set of lean 10–15 line code snippets in each language, stripped of all noise — the “aha moment” where the concept becomes visible. Tier 3 is the teacher’s field-tested workshop programs: fuller implementations with inline Java-vs-Python commentary baked into the code comments, plus downloadable PDF classroom lesson plans. The tiers are cumulative — a student can stop at Tier 2 and learn the concept; the teacher deploys Tier 3 in the classroom.

What’s on the Page

The Iterate & Display concept page leads with a language-agnostic pseudocode block (“FOR EACH item IN list: DO something”) before showing any syntax — proving that the three code examples below it are translations of the same four lines, not three different programs. The Tier 2 panels use Highlight.js for syntax coloring and each carries a Copy button so students can paste directly into JDoodle, the p5.js editor, or their local IDE. A Language Philosophy section explains why each version looks different — what each language is revealing about its design values. The Go Deeper section shows the teacher’s programs with their detailed comparative commentary, and a resource bar links to the full source files and both PDF lesson plans. A development chat log documents every design decision across six sessions: the brainstorm that chose the name, the nested-anchor bug that broke the first card, the three-tier formalization, and more.

Cross Training is also now listed in Resources under TNT’s Own Resources — it is a teaching tool as much as a section of the site.

Cross Training Home  •  Concept #1: Iterate & Display  •  Development Chat Log  •  Movie Credits Simulator

Follow the Leader is a free-form classroom exploration tool built around a simple premise that separates it sharply from a scavenger hunt. A teacher issues a challenge or quest — “find something that surprises you about the XRAY framework” or “discover a page you wouldn’t have found by accident” — and the student blazes their own trail through TNT. There is no answer key. The teacher doesn’t know the destination. Every student’s path is different. When the trail is complete, the student leads classmates back along the same route. The form captures the journey; the breadcrumbs become the script.

The trail form has three structural layers. A quest card records the challenge, starting point, and final destination — the metadata that frames everything below. A breadcrumbs table logs every stop: the page visited and what was found or done there. Six starter rows appear on load; the table grows automatically as the last row fills, with no button press required. A discovery section closes with two open-ended fields: the Treasure (the final insight the quest was searching for) and the Surprise (what the student didn’t expect to find). The form auto-saves to localStorage as you type and exports to clipboard or prints clean. A companion TRAIL presentation framework guide then prepares the student to lead the class for 3–10 minutes, with five principles matched precisely to the Lost Boys problem: Tell the destination first, Remember the audience is starting cold, Announce each turn, Invite participation, Land on the treasure last.

Most TNT apps are just used. Follow the Leader comes with a companion that explains how it works — and this is the rare case where that companion is worth opening even if you have no intention of building anything. The Under the Hood page answers a question novices almost never get to ask: why is this called a JavaScript app when it just looks like a form? The answer walks through five distinct jobs JavaScript is doing behind the scenes — building the table from scratch via DOM manipulation, making every button functional through event listeners, remembering the trail between browser sessions via localStorage, growing the table through conditional logic, and assembling the Export Summary string for clipboard delivery. Each job is explained in plain language, demonstrated with a real snippet from the running script, and followed by a hands-on DevTools experiment achievable in under 30 seconds. A vocabulary glossary defines eight professional-grade terms and closes with an explicit statement that will matter to every new programmer who reads it: DOM manipulation, event listeners, localStorage, conditional logic, and the Clipboard API are not beginner warm-ups to be discarded when things get serious. They are the core vocabulary of professional front-end development. Every JavaScript developer uses all five, daily.

The activity is motivated by “Following the Leader” from Disney’s Peter Pan (1953) — a 90-second ear-worm marching sequence in which Peter Pan leads the Lost Boys through Neverland while everyone sings the same three words over and over. After one classroom viewing, the melody stays with students for the rest of the day. More usefully, it stays with them during the presentation: the Lost Boys are your classmates, you are Peter Pan, and your job is to do what Peter never did — tell them where you’re going before you start walking. The companion movie clip page maps each TRAIL principle directly to Peter’s failures. The S.P.A.R.K. Chat Log documents four design sessions and 21 decisions, from the scavenger-hunt/guided-tour distinction through the JavaScript primer placement rationale and the forest-green Neverland palette.

Trail Form  •  TRAIL Presentation Guide  •  Under the Hood (JS)  •  Movie Clip — Peter Pan (1953)  •  S.P.A.R.K. Chat Log

The Ask Copilot column now has a Jump to Entry select menu in the filter bar — a single dropdown that lists all 45 entries by number and topic so any student who knows what they are looking for can arrive there in one click. At 45 entries and growing, the previous approach (“scroll until you see it”) was exactly the kind of friction that earns the user’s frustration. This closes it.

What makes it a golden teachable moment is how the menu is built. There is no hard-coded list of 45 option elements in the HTML. Every option is created at runtime by JavaScript reading the page’s own existing content — which means the select menu will always be perfectly in sync with the entries, automatically, forever. Add Entry #046 to the HTML and the select gains a 46th option with no other change required anywhere.

The build loop — ~10 lines that do all the work

This code runs inside setupEntryFilters(), after the DOM is fully loaded. It already has an array called entries containing every .column-entry article element. The jump select is built in one pass:

// Build jump-to options from existing DOM entries
if (jumpSelect) {
    entries.forEach(function (entry) {
        var numEl   = entry.querySelector('.column-entry-num');
        var badgeEl = entry.querySelector('.column-topic-badge');
        var label   = numEl   ? numEl.textContent.replace(/\s+/g, ' ').trim() : entry.id;
        var topic   = badgeEl ? ' \u2014 ' + badgeEl.textContent.trim() : '';
        var opt     = document.createElement('option');
        opt.value       = entry.id;
        opt.textContent = label + topic;
        jumpSelect.appendChild(opt);
    });
}

Five things worth naming in that loop:

• entries.forEach() — iterates the array of article elements already collected by querySelectorAll('.column-entry'). The data source is the page itself; no external file, no fetch, no async boundary.
• entry.querySelector() — searches inside that one entry for a child matching the selector. It does not search the whole page, only the article. That is the scoped version of document.querySelector().
• textContent.replace(/\s+/g, ' ').trim() — the heading contains non-breaking spaces and bullet entities that render as extra whitespace in plain text. This collapses all whitespace runs to a single space and strips the edges, producing a clean option label like Entry #045 • Aug 2026 — Usability.
• document.createElement('option') — creates a new DOM element in memory, not yet attached to anything. Setting its value and textContent before appending is the correct pattern; it avoids a visible intermediate state.
• opt.value = entry.id — stores the article’s id attribute (e.g. entry-045) as the option’s value. When the user selects it, this is what comes back as this.value in the event listener.

The event listener — clear filters, then scroll

Selecting an entry has one non-obvious requirement: if the student has an active search or topic filter applied, the target entry may be hidden even after the scroll. The listener clears both filters first, then navigates:

jumpSelect.addEventListener('change', function () {
    var targetId = this.value;
    if (!targetId) { return; }          // guard against the placeholder option
    var target = document.getElementById(targetId);
    if (target) {
        searchInput.value = '';          // clear search text
        topicFilter.value = '';          // clear topic filter
        applyEntryFilters(false);        // re-show all entries (false = no URL sync)
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    this.value = '';                     // reset select to placeholder after use
});

scrollIntoView() is a native DOM method — no library, no math, no positioning calculations. Pass behavior: 'smooth' for an animated scroll and block: 'start' to align the top of the entry with the top of the viewport. The this.value = '' at the end resets the select back to its “Jump to entry…” placeholder so it is ready for the next use without appearing to have a stale selection.

Why no loading state was added

The entries are already in the HTML when this code runs. Scanning them is synchronous DOM iteration — it completes in microseconds before the browser can repaint. A loading spinner would be invisible by definition. The full reasoning, including when a loading state is appropriate (async boundaries: fetch, network, Promise), is in Ask Copilot Entry #045, which was written specifically around this feature.

Self-maintaining forever

There is no list to update, no counter to increment, no second file to touch. The select menu is a live mirror of the articles currently on the page. That is the engineering payoff of building from the DOM rather than from a static data structure: the source of truth and the navigation menu are the same thing.

Try the Jump to Entry select on Ask Copilot  •  Ask Copilot Entry #045 — the design rationale

TNT now has a dedicated section for structured student missions: TNT Adventures. Three activity types are planned — Scavenger Hunts, Fix the Bug, and DevTools Challenges — each using real TNT pages as the terrain. The first entry is live today: Hunt #1: X-Ray Vision.

What the Hunt Is

Nine stops. No prior CS experience, no DevTools knowledge, no TNT familiarity required. Students begin at the TNT home page and follow a trail: find the Movie Clips section through the navbar, use the built-in search bar to locate a Superman tile, navigate to the Man of Steel clip page, read about Clark Kent’s classroom crisis and his mother’s solution, follow a hyperlink to Ask Copilot Entry #030 to discover the XRAY web detective framework, and close with their very first right-click → Inspect moment in DevTools — looking through the Movie Clips heading to see the HTML underneath it. The thematic arc is intentional: the hunt is about x-ray vision, and it ends with students using it.

Tier Structure

Every TNT Adventures hunt uses three difficulty tiers within a single worksheet:

• 🥉 Bronze (Stops 1–6) — reading and navigation. No technical tools. Completable by anyone with a browser and patience.
• 🥈 Silver (Stops 7–8) — following cross-page hyperlinks and reading analytical content carefully. Introduces the XRAY framework acronym and its four layers.
• 🥇 Gold (Stop 9) — first actual DevTools use. Step-by-step scaffolded right-click → Inspect instruction included. Achievable with zero prior experience.

For Teachers

The answer key lives in adventures/_keys/ and is protected by Apache .htaccess Basic Authentication. The .htaccess file contains setup instructions; deploy a .htpasswd file on the live server before distributing the hunt to students. The worksheet is printable via Ctrl+P — navbar, footer, and the submit note all hide automatically, leaving only the questions and answer blanks.

The design conversation behind the hunt — TTG’s original 9-stop concept, four concerns identified before building, and the decisions that shaped the final version — is documented in the S.P.A.R.K. Chat Log. It is a design log, not an app log: it documents the questions “Why this? Why not that? What could go wrong?” — which is itself a curriculum worth showing students.

TNT Adventures  •  Open Hunt #1  •  How It Was Made  •  The Clip It’s Built Around  •  Ask Copilot Entry #030

School starts in two weeks. Before a fresh group of novices arrives, here is a number worth knowing: the page you are reading right now — TNT’s 2026 news page — has published 43 headlines between June 1 and today, August 1. That covers roughly ten weeks. For comparison, the legacy TNT news archive covers the full 2026 school year — January through May, five months of active teaching — and it published 28 headlines. More entries. Shorter period. Larger apps per entry.

The School-Year Baseline: 28 Headlines in 21 Weeks

The archive’s 2026 section is a real body of work: SketchWave stages 6–8, a SuperSorter, Duck Sorting, Recursive Islands, a Movie Credits app, S.P.A.R.K. Speeches, Energy Rings, Rock-Paper-Scissors, and more — built while running classes back to back, grading between periods, and fitting development into whatever margins existed. That pace — roughly 1.3 entries per week — is what S.P.A.R.K. looks like during a full teaching schedule.

The Summer Record: 43 Headlines in 10 Weeks

The current site launched in June and has been growing ever since. The entries are individually larger: the Sudoku Saga shipped as seven pages with a ten-session chat log. Conway’s Game of Life came with a nine-stage development log, a full educational companion, and a dedicated movie clip page. W.O.P.R. brought a five-page simulation suite. The Movie Credits Simulator has its own content and settings customizers plus a timeline scrubber. The pace: roughly 4.5 entries per week — about 3.5× the school-year rate.

Two Variables Changed. Both Matter.

Variable 1: available time. TTG has not been in the classroom this summer. No periods, no grading, no student questions mid-thought, no schedule enforced by a bell. That is not a small factor. Attributing the entire output increase to the methodology while ignoring the calendar would be convenient but inaccurate. A professional with 8+ uninterrupted hours per day will produce more than the same professional working in 45-minute windows between classes. That is not a confession; it is arithmetic.

Variable 2: S.P.A.R.K. at maturity. By June, the methodology had been field-tested for a full school year. Prompting patterns were established. The ecosystem conventions — sticky navbar, hero section, S.P.A.R.K. bar, chat log, footer, validate link — were templated. Each new app dropped into a known shell in one session instead of requiring the shell to be designed from scratch. When the W.O.P.R. upgrade began, the question was not “how do we build a navbar?” — it was “what does this specific app need?” That is a fundamentally different kind of problem, and it is dramatically faster to solve. The chat logs embedded in every entry are the evidence: the conversations are about ideas, not infrastructure.

What This Means for New Novices — and Anyone Watching

TTG will be back in a classroom in two weeks. Development pace will return to school-year speed. But every convention, template, and documented pattern built this summer persists. A student who learns to work the S.P.A.R.K. way — set a goal, prompt precisely, analyze the response critically, refine until it is right, and document what was learned — carries that discipline permanently, regardless of which AI tools the future brings.

The 43 entries on this page are not an advertisement for a clever chatbot. They are records of what deliberate human-AI collaboration produces when both sides are working well. Browse the legacy archive to see the school-year baseline, then scroll this page to see what the same methodology produced when the calendar opened up. The gap between those two lists is the most honest demonstration TNT has ever published of what S.P.A.R.K. actually looks like at scale.

Legacy Archive — 28 entries  •  Explore!  •  Ask Copilot

TNT’s home page has always had a Strip CSS live demo button that removes all stylesheets to reveal the structural skeleton beneath the design. That same trick is now available on any page on the internet — no browser extension, no installation, no school admin permission required.

The Web Developer Toolbar’s “Disable All Styles” feature — the one CS teachers prize — runs a single line of JavaScript that removes every <link rel="stylesheet"> and every <style> block from the DOM. That same line can be packaged as a bookmarklet: a browser bookmark whose URL is JavaScript instead of a web address. Navigate to any page, click the bookmark, and the styles disappear. Reload to restore. Works in Chrome, Firefox, Edge, and Safari. School extension restrictions do not apply — bookmarklets are just bookmarks.

There is also a one-off method for instant use: open DevTools (F12), switch to the Console tab, paste the command, and press Enter. No bookmarklet creation needed for occasional investigation. Ask Copilot Entry #033 has the exact command, a Copy button to grab the bookmarklet URL, and a comparison of four stripping methods including Firefox’s built-in Style Editor panel.

One thing neither method removes: inline style="" attributes on individual elements. Those are HTML attributes, not stylesheet documents. The distinction is itself a teachable moment — and the reason the TNT hero icon stays flipped even after stripping. See Ask Copilot Entry #028 and DWR Entry #22 for the full explanation.

Ask Copilot Entry #033 (full write-up + Copy button)  •  DWR & Eureka Entry #24  •  Live demo: Strip CSS on the home page

TNT has always had linkGuard.js to catch broken internal links — but that guard only works when a visitor clicks a link inside an existing TNT page, because JavaScript has to load first. A URL typed directly into the browser address bar is handled entirely by the server before any JavaScript runs. The server finds no file, returns an HTTP 404 status, and the browser renders its own generic “Not Found” page: no TNT branding, no navigation, no helpful message, no way back.

That gap is now closed. A single line in a .htaccess configuration file placed at the site root tells Apache (TNT’s web server) to serve the custom 404.html page whenever it would otherwise return a raw 404 error:

ErrorDocument 404 /404.html

How to trigger it intentionally: type any URL that doesn’t exist on the site into the browser address bar — for example, technovicetools.com/thisPageDoesNotExist.html. You will land on the friendly 404 page instead of a browser error. To confirm the HTTP status code is still correctly 404 (not 200), open DevTools → Network tab, reload, click the HTML document row, and check the Status Code in the Headers sub-tab.

The critical technical requirement behind the scenes: every asset on a 404 page must use an absolute path starting with /. A relative path like styles/tnt-base-styles.css would be resolved against the missing URL’s directory — which doesn’t exist — producing a second 404 for the stylesheet and an unstyled page. CDN resources (Bootstrap, Font Awesome, Google Fonts) are already absolute URLs and need no change. Only locally-hosted assets need the leading /. The 404 page also carries <meta name="robots" content="noindex, nofollow"> so search engines ignore it.

See the custom 404 page  •  Ask Copilot Entry #036 (full story)  •  DWR & Eureka Entry #26

The Movie Credits Simulator takes one of cinema’s most recognizable visual effects — the Superman-style opening title sequence, where names zoom from the distant center of a star-streaked field directly toward the viewer, growing from a whisper of white text to letters that fill the screen before they blur, fade, and vanish — and rebuilds it as a classroom tool. Student names and CS concepts replace the Hollywood credits. The entire animation engine runs in the browser via p5.js 1.7.0 with no server component, and every visual constant is configurable through a companion settings page.

Each credit is a JavaScript object carrying five live properties that update every frame: a size shrinking at a configurable rate, an opacity fading on a separate track so the shrink and fade happen independently, a tilt angle assigned randomly at initialization and decaying toward zero each frame so the credit straightens naturally as it grows, a hue drawn from the full HSB color wheel at initialization, and a blur state activated when opacity drops below a configurable threshold. In blur mode the same text is drawn many times with small random offsets at fractional opacity — the overlapping translucent layers accumulate into a soft-focus glow without any CSS filter or Canvas API call. The visual complexity emerges entirely from arithmetic on simple properties, which is exactly what makes it a legible teaching tool at every stage of construction.

The control system uses three semantically coded outline buttons: blue-purple for START/PAUSE (the primary action, consistent with the loading spinner), amber for RESET (warm restart energy — not red, which implies permanent deletion), and white/silver for MUTE (shifting to red when audio is suppressed, making the muted state persistently visible). A timeline slider above the buttons serves two roles simultaneously: drag it to jump to any credit via seekToCredit(), and watch it advance automatically during normal playback. Seeking synchronises the Superman theme via the HTML5 Audio currentTime property — jumping to credit 10 of 20 starts the music at roughly the 50% mark of the track.

The app ships as a five-page ecosystem. The Content Customizer lets teachers edit student names, CS concepts, intro phrases, and movie title without touching code, saved to localStorage under the key movieCreditsContent. The Settings Customizer exposes 16 visual controls — font family, size, tilt, blur trigger and strength, stroke, fill, shrink rate, fade speed, timing — with a live p5.js preview updating as sliders move, saved to movieCreditsConfig. A Cover Page serves as the project portal with five launch cards, and a Legacy v16d reference preserves a before/after comparison for classroom use. All five pages share a consistent sub-navigation strip. Both customizers replace the browser’s native confirm() with styled Bootstrap modals that list exactly what will be permanently erased, demonstrating the speed-bump principle for destructive actions.

The S.P.A.R.K. Chat Log spans 12 development sessions and 31 design decisions — from initial TNT ecosystem integration and the Infinity trick for suppressing intro sequences, through proportional music synchronisation, sub-navigation consistency across six pages, Bootstrap modal design, and the C.R.A.P. contrast principle applied to a button that had a 1.08:1 contrast ratio against its teal background.

Cover Page  •  Run the Simulation  •  Content Customizer  •  Settings Customizer  •  S.P.A.R.K. Chat Log  •  Superman (1978) — The Inspiration

In 1967, Mr. Spock defeated an evil entity called Redjac by ordering the Enterprise computer to “compute to the last digit the value of pi.” Since π is irrational — its decimal expansion is infinite and non-repeating — there is no last digit. Redjac was trapped in an infinite loop. The episode is from Star Trek’s second season (“Wolf in the Fold,” written by Robert Bloch, December 22, 1967), and it is the most elegant application of number theory under pressure in the history of science fiction. TNT now has a fully interactive companion to the movie clip page built around it.

The Compute π app uses the Gregory-Leibniz series — one of the simplest infinite series for π, discovered independently by Gregory in 1671 and Leibniz in 1674: π = 4 × (1 − 1/3 + 1/5 − 1/7 + …). A p5.js convergence graph shows this series in motion: drag the slider, add more terms, watch the approximation oscillate above and below the true value of π and slowly close the gap. The gold dashed line — the destination the series approaches but never reaches — is always visible. The “Math Behind the π” panel shows the exact approximation, the true value, the absolute error, and the mathematical error bound (a proven guarantee from the Alternating Series Estimation Theorem) for whatever slider position the student has chosen. The error bound and the computed error can be compared directly: the bound is always larger. That is a mathematical proof, not an approximation.

The companion tutorial page, Computing π — The Gregory-Leibniz Series, is a five-lesson classroom document written at the high school level. Lesson 1 establishes why π is worth computing and why it is impossible to finish. Lesson 2 decodes the sigma notation of the series, symbol by symbol: what Σ means, what (−1)^k produces, and what 2k+1 generates. Lesson 3 presents the most important mapping in the tutorial: a side-by-side table showing every sigma-notation symbol alongside its exact JavaScript equivalent in the for loop. The lower bound of the sigma is the initialiser; the upper bound is the loop condition; the expression to the right of Σ is the loop body. Once a student sees this table, they can read any series in a textbook and immediately write the for loop. That generalisation extends to statistics, physics, and machine learning — anywhere a summation appears. Lessons 4 and 5 embed the interactive graph and present five discussion questions, including one that asks students to calculate how many terms the series needs for six decimal places of accuracy (then verify with the slider).

The S.P.A.R.K. chatlog documents six decisions: why the Leibniz series was chosen over the faster Machin and Chudnovsky algorithms (the slow convergence is the lesson); why the same p5.js sketch runs unchanged on both the interactive and tutorial pages via shared DOM element IDs; why the Y-axis range was set to 2.60–3.80 instead of 0–4 (to keep the early oscillation visible); why the graph subsamples at high term counts (a named teaching concept: downsampling); why the error bound is displayed alongside the actual error; and why the sigma formula was rendered in HTML with CSS stacking instead of pulling in KaTeX (the formula is simple enough; the dependency is not justified). The chatlog closes with authorised shore leave from the bridge of the Enterprise.

Compute π  •  Σ Series Tutorial  •  S.P.A.R.K. Chat Log  •  Star Trek Clip — Wolf in the Fold  •  Processing Apps  •  Explore — Mathematical & S.P.A.R.K.

In 1983, the film WarGames introduced the world to W.O.P.R. — the War Operations Plan Response computer, a DARPA supercomputer that calls itself Joshua and nearly starts World War III because nobody gave it a terminal state labeled “unacceptable.” It is the first great pop-culture demonstration of the AI alignment problem, and it arrived forty-three years before the term “alignment problem” entered mainstream vocabulary. TNT now has a fully integrated simulation suite built around it.

The W.O.P.R. Simulation Suite began as a student-coded standalone app: a faithful CRT terminal interface and a launch code cracking simulator, both functional and thematically precise, but visually disconnected from the TNT ecosystem. The 2026 upgrade brought both into the site — and the person who did the upgrading was Claude, an AI made by Anthropic. The irony was pointed out immediately, documented in the chatlog, and given its own glowing-green phosphor box. A chatlog that is literally an AI writing about how it upgraded a simulation of an AI that almost ended the world. Dr. Falken would either approve or start playing tic-tac-toe. Possibly both.

The suite now has five pages. WOPR Home is a cover page with three launch cards and a callout explaining what the alignment problem actually is. Console wraps the original terminal interface — the student-written script.js was preserved entirely; its typing effect, command processing, and game-selection mode are genuinely well-built — in the full TNT shell: sticky navbar, SPARK bar, hero using the NORAD Big Board photograph, and footer. Launch Codes similarly wraps the diode display simulator (launchCode.js, also preserved) — watch Joshua scan 10 alphanumeric positions, cycle through random characters, and lock each one in with a satisfying phosphor-green flash. Adjust the difficulty slider; watch certainty arrive one character at a time. About provides educational CS context: what kind of AI WOPR actually is (a game-tree search algorithm, same category as Deep Blue), the alignment problem it demonstrates, the hacker culture it put on the national agenda, and classroom discussion prompts. The S.P.A.R.K. Chat Log documents eight stages of the upgrade, including a CSS cascade bug (VT323 font inheriting to navbar links), bidirectional cross-linking with the movie clip page, the Joshua comparison, and the site-wide integration documented here.

The movie clip companion page (WarGames — Shall We Play a Game?) carries five clips in story order: the WOPR description, David meeting Joshua, Joshua searching for launch codes, the only winning strategy, and a bonus MCU callback where Natasha Romanoff echoes the line forty-one years later. The simulation and the clip page are bidirectionally linked: WOPR Home links out to the clips, and the clip page ends with an “Access W.O.P.R.” terminal-style link that takes the viewer straight into the simulation.

W.O.P.R. Home  •  Console  •  Launch Codes  •  About WarGames  •  Movie Clips  •  S.P.A.R.K. Chat Log  •  JS Apps  •  Explore — Simulations & S.P.A.R.K.

In October 1970, Martin Gardner introduced the world to a game played on a grid of cells with four rules governing birth, survival, and death. Its creator, the British mathematician John Horton Conway, called it the Game of Life. Within months it had consumed computing time at universities worldwide; within decades it had been proven Turing-complete; in 2002 a working Turing machine was constructed inside a GOL grid, proving that four rules and two cell states can execute any algorithm any computer can run. Conway’s Game of Life is not a screensaver. It is one of the most consequential demonstrations in the history of computer science, and TNT now has a fully upgraded, nine-stage S.P.A.R.K.-documented implementation of it.

The implementation itself is a 2022 CHS student project. It works correctly — the simulation engine, structure library, and grid CSS were carried across without a single change. What the 2026 upgrade added was everything around the engine: a TNT sticky navbar, a GOL sub-navigation SPARK bar (Home • Play • Explore Structures • About • Chat Log), a hero using virusBG.jpg (a photograph whose deep biological greens arrived pre-themed for this app), a Bootstrap 5 settings modal, and an about.html transformed from a 110-line instruction guide into a substantive educational document: Conway biography, GOL history, the four rules with colour-coded badges, four pattern cards (Still Lives, Oscillators, Spaceships, Guns), and four CS-significance callouts on Turing completeness, emergence, cellular automata, and education. jQuery was removed entirely; all Bootstrap 4 data attributes were updated to their data-bs-* equivalents; Font Awesome 5 icons were replaced with their Font Awesome 6.5 counterparts.

The nine-stage S.P.A.R.K. chatlog is the richest TNT has published for a simulation. Stages 1–3 cover the full Bootstrap 4 → 5 migration and the virusBG hero upgrade. Stage 4 documents the curator’s additions: five missing classic structures (Boat, Toad, Beacon, LWSS, R-pentomino), each with an explanation of why it belongs in a canonical GOL library. Stages 5–6 document a real debugging session: the LWSS died after 15 steps, which first appeared to be a grid-boundary problem (Stage 5), but turned out to also mask a genuine off-by-one error in the pattern coordinates — the bottom row was shifted one cell right, breaking the neighbour relationships the spaceship needs to propagate. Stage 7 mirrors the LWSS horizontally to create a left-moving variant and sets up the collision experiment. Stage 8 adds a companion movie clip. Stage 9 corrects a formatting deviation in Stage 8 and documents the correction. That self-referential quality — a chatlog that documents its own formatting errors as a lesson in component consistency — is intentional.

The companion movie clip (Conway’s Game of Life — The Phenomenon) follows the javaStoryOfficial.html structure: dark GOL-green theme, four collapsible sections (biography, why GOL changed CS, Conway the person, classroom discussion prompts), and the YouTube explainer embed. The legacy GOL icon — a cell-grid SVG from the 2020 TNT archive — was promoted to the root images/ folder and used as the movie_clips.html thumbnail. Conway died on April 11, 2020, from COVID-19, just months after the 50th anniversary of the Game of Life. His death from a microscopic organism following its own deterministic rules was not lost on the CS community, and it is documented on the clip page.

If you want to see where this started, the original 2022 CHS version is still live on the sandbox server. The gap between the two is a study in what a TNT ecosystem integration means: the algorithm is identical; everything visible has changed.

GOL Home  •  Play  •  Explore Structures  •  About Conway  •  S.P.A.R.K. Chat Log  •  Movie Clip  •  Original 2022 Version  •  JS Apps  •  Explore — Simulations & S.P.A.R.K.

The Gravity Lab is the direct sequel to Drag & Drop Circles, and it is built around one idea that changes everything in graphics programming: the animation loop. In the drag-and-drop app, the canvas redraws only when the user does something — moves the mouse, clicks a button. Gravity Lab introduces requestAnimationFrame, which calls the draw function approximately sixty times per second whether or not the user is doing anything. That is the difference between a static canvas and a living one. It is the architectural foundation of every game, simulation, and real-time visualisation ever written for a browser.

The physics are intentionally minimal and maximally legible. Each circle carries a velocity vector (vx, vy); every frame, the velocity is added to the position. Gravity adds a small constant to vy each frame — which is exactly what constant acceleration means in code. Wall collisions reverse the relevant component and multiply by a restitution coefficient (0.82 by default) so circles lose a little energy on each bounce and eventually settle. Circle-to-circle elastic collision uses the impulse method: find the collision normal, project relative velocities, compute an impulse that conserves both momentum and kinetic energy, apply it to both circles in opposite directions along the normal. The equations are derived step-by-step in the S.P.A.R.K. chat log.

Two interactive modes are available. Drop mode (the default) spawns a circle with zero velocity at the click point; it falls under gravity immediately, demonstrating acceleration clearly. Fling mode lets students click-and-drag to aim a launch vector — a dashed yellow rubber-band line shows the direction and magnitude, and a live v = X px/frame label makes the velocity number visible before the circle is even spawned. Existing circles can be picked up and flung, releasing them with the velocity of the drag motion. A colour-coded heat map ties the visual directly to the physics: slow circles are steel-blue, fast circles glow red, and the transition is computed from the speed scalar every frame using an HSL formula that students can modify with a single number change.

The app is called Claude’s JavaScript Graphics Challenge because it is designed as a challenge for students, not just a demo at them. The S.P.A.R.K. chat log ends with six numbered experiments: change the gravity constant to simulate the Moon or Jupiter; set restitution above 1.0 and watch circles gain energy; remap colour by size instead of speed; replace gravity with a central attractor and build a solar system simulator. Every parameter in the code is named, documented, and placed where a student can find and change it in under a minute.

Gravity Lab  •  S.P.A.R.K. Chat Log  •  Previous: Drag & Drop Circles  •  JS Apps  •  Explore — Graphics & S.P.A.R.K.

Drag & Drop Circles is the app that gave the TNT Explore page’s Graphics category its first 2026 entry. The original was built entirely from scratch in March 2022 — a genuine OOP canvas demo with a Circle class managing each circle’s position, radius, and rendering state. Two modes of interaction are supported: Click-to-Add (each canvas click places a new circle at that exact point) and Drag-to-Reposition (clicking and dragging moves the nearest circle, shrinking it slightly while in motion to give tactile feedback). A live info strip shows the circle’s centre coordinates updating in real time as you drag — so students can watch the math happen on screen.

The 2026 upgrade brought the app into the TNT ecosystem without touching a single line of its canvas code. The three JavaScript files — Circle.js, TNT_utilities.js, and drag_drop_circles.js — were carried across verbatim. Everything changed around them. Bootstrap 4.6.1 was replaced with Bootstrap 5.3.3; jQuery was removed entirely (it was present only because Bootstrap 4 required it — Bootstrap 5 dropped that dependency); all data-toggle / data-target attributes were renamed to data-bs-*; utility classes were migrated (float-right → ms-auto, font-italic → fst-italic, pr-1 → pe-1, and more); and the inline <style> block was extracted to styles/dragDropStyles.css. A TNT sticky navbar, hero section (using the existing dragDropDots.png background), SPARK bar, and footer completed the shell renovation. The canvas itself — its Circle class, its event model, its three scripts — was preserved exactly as it was field-tested in 2022. That is the lesson: a well-designed core can survive a complete shell renovation.

The S.P.A.R.K. chatlog documents the upgrade across seven stages. Stages 1–5 cover the Bootstrap 4 → 5 migration details and the initial explore integration. Stage 6 documents a cluster of ecosystem corrections that surfaced after launch: the Explore page’s Graphics card had not had its legacy link replaced (a silent partial failure in a multi-replace tool call), the Graphics offcanvas panel had been added twice (leaving duplicate IDs), and the S.P.A.R.K. offcanvas entries were never inserted. All four issues were resolved, and the corrections are documented as a lesson in verifying automated edits. Stage 7 corrects a chatlog formatting deviation and adds this news entry — which is itself documented in the chatlog, making the process self-referential in a way that would impress only someone who has spent too long staring at HTML.

Drag & Drop Circles  •  S.P.A.R.K. Chat Log  •  JS Apps  •  Explore — Graphics

There is a tattered sign on the TNT Lair door. It reads: “To err is human. To really louse something up takes a computer.” It is printed on green-bar dot-matrix paper. The paper is frayed. The printer that produced it was tired. The message has been true every single day since it was hung there. One afternoon, the question arose: can we recreate that sign using only HTML and CSS? The answer is the original version of this app, built in early 2026 and now fully launched into the TNT ecosystem. You can compare the old and the new directly — the legacy Stage 3 version is preserved in the archive exactly as it was built, and the upgraded Stage 4 version is the live page. The gap between the two is a concise illustration of what “joining the ecosystem” means for a TNT app.

The CSS recreation uses four techniques worth studying. The paper is nine alternating teal and cream <div> rows with circular punch-hole <div>s on each edge — each hole shares the same background-image as the outer door-frame <div>, so the wood-grain texture shows through the perforations in the paper. The text is positioned over the paper using position: relative with negative top values, nudging each phrase upward into the bands above it without removing it from document flow. The misalignment is produced by transform: rotate() on individual letter <span> elements — which required the key discovery that transform is silently ignored on inline elements; adding display: inline-block to the spans was the one-line fix that made the paper-jam effect work. The font scale uses font-size: 3vw so the text tracks the viewport width continuously without media queries, with clamp() documented as the more robust next step.

The Stage 4 upgrade brought the app into the TNT ecosystem in one session. The old jumbotron header was replaced with the standard TNT sticky navbar and a hero section using the already-present vintage-computer-collection-stockcake.jpg — a vintage computer photograph thematically precise for a dot-matrix page. A SPARK bar, TNT footer with validate link, and the two-stylesheet architecture (tnt-base-styles.css first, then signStyles.css) completed the integration. The footer was moved outside <main>, a semantic correction that takes five seconds and matters to screen readers. The myInit() function was updated to use textContent instead of innerHTML for all plain-string DOM writes — a zero-cost security improvement documented in the chat log.

Stage 5 added two pedagogical connections. The TNT Image Gallery already held the photograph of the original sign; its entry now links directly to the CSS recreation. A companion page — plainSignNoStyles.html — was created with the single difference that signStyles.css is not linked. A Bootstrap warning banner explains the context: the navbar and footer survive intact (they are styled by tnt-base-styles.css, which was kept), while everything between them — the body gradient, the hero image, the door frame, the paper bands, the phrase positions — collapses to raw, unstyled HTML. A grey “View Without Sign Styles” button below the sign and a green “View With Sign Styles” button on the plain page form a toggle pair. That one click — same HTML, completely different visual — is the lesson.

To Err is Human  •  Plain HTML Version  •  S.P.A.R.K. Chat Log  •  Legacy Stage 3

Every CS class has those moments: the teacher introduces a term — algorithm, boolean, encapsulation — and students either write it on a scrap of paper that vanishes between periods, type it into a notes app they’ll never find again, or simply miss it entirely. The Code Word Collector was built specifically for that moment. It is a student vocabulary capture form that lives in the browser, auto-saves constantly, grows when the student needs more space, and produces a clean printable document at the end of class.

The app opens with a hero built from the treasure-map AVIF image already in the project folder — a deliberate thematic framing: the teacher is “dropping vocab gold during class discussions” and the student is the miner. The form has three header fields (Name, Period/Subject, Date — populated with today’s date automatically) and a numbered two-column table: Code Word / Phrase and Comment(s). The table starts with 10 rows and expands in five-row increments via either the Add 5 Rows button or automatically when the student begins typing in the last available row — so the form is always one step ahead of where the student is writing.

Persistence is handled entirely by localStorage under the key cwc_v1. A debounced auto-save triggers 900 ms after the last keystroke, so every natural pause in typing silently preserves the student’s work. A manual Save button confirms immediately with a green badge. A Clear All button (with a confirmation dialog) wipes the session and removes stored data. There is no server, no login, no account — the data belongs to the student’s own browser and nowhere else.

The print output is handled entirely by a @media print block: the navbar, footer, hero, intro panel, action bar, and tip line all disappear. In their place, a print-only header block (hidden on screen via display: none) appears at the top of the page. The student info fields become a clean underlined strip. The table retains its teal header row (using print-color-adjust: exact to force background printing) with faint alternating blue-gray rows. Inputs render as plain text because the row background color, not the input border, defines each cell visually. The teacher receives a recognizable, consistently formatted document — matching the PowerPoint reference form that prompted the original design request.

The app is built across three files (codeWordCollector.html, codeWordCollectorStyles.css, codeWordCollectorScripts.js) following the full TNT ecosystem pattern: Bootstrap 5 navbar and footer, Font Awesome 6.5, Google Fonts (Boogaloo + Inter), and a companion S.P.A.R.K. chatlog documenting the debounced auto-save pattern, the DOM-API row construction (no innerHTML, zero XSS risk), the print-only toggle strategy, and the localStorage versioning scheme. It is listed in JS Apps and cross-listed in S.P.A.R.K. and Utilities on the Explore page, and in Resources under TNT’s Own Resources — the category reserved for tools TNT built for students to use in class.

Open Code Word Collector  •  S.P.A.R.K. Chat Log

Every classroom has expectations. The TNT version spells them out as an acronym: R.A.D.I.C.A.L. — Respect, Attention, Daily Preparation, Individual Self Control, Code of Honor, Active Participation, Lateness (NOT!). Those seven principles were already living in a classroom poster. The question was: could the poster itself become a teaching tool?

The answer is the Radical Rules SPARK Saga: an eight-stage HTML/CSS development journey that takes the poster from a plain text file with no formatting whatsoever all the way to a fully responsive Bootstrap 5 page with Google Fonts, a CSS background-image radical symbol, and a JavaScript hover event hidden inside the rules list. Each stage page adds exactly one new concept to the last:

• Stage 0 — Raw text in an .html file. No tags. What does a browser do with that?
• Stage 1 — First HTML tags (h1, p, ol, li) and one inline CSS style on a ♥ entity.
• Stage 2 — Bootstrap 5 via CDN arrives. The page validates. Google Fonts add personality.
• Stage 3 — A <main> wrapper, a CSS tag selector, and centering via width + margin: auto.
• Stage 4 — Compound selectors: li span targets only the first letters of each rule.
• Stage 5 — The radical symbol becomes a CSS background-image under the list.
• Stage 6 — Google Fonts via class selectors, negative margins, and a hidden JavaScript superpower on hover.
• Stage 7 — Full Bootstrap 5 integration: responsive navbar, container classes, utilities.

The 2026 index page presents all eight stages as a card grid with Bootstrap modal popups. Each modal contains the concept name, a key-concepts list, a code snippet, and a direct link to open the live stage. A warm cream light theme was chosen deliberately — classroom projectors perform better with light backgrounds.

Two details worth calling out. The stage cards use a color system that tracks the learning arc: gray (no concept yet) through red (HTML), blue (Bootstrap), purple (CSS selectors), green (compound selectors), orange (backgrounds), gold (fonts + JS), bold purple (Bootstrap complete). The hero section uses a two-column Bootstrap layout — text left, poster image right — so the finished poster is visible at 400px without the hero growing vertically. Both decisions are documented in the S.P.A.R.K. chatlog.

The saga is listed in Styl’n Featured Apps and cross-listed in S.P.A.R.K. and Styling on the Explore page. It is not filed under Graphics — the poster is declared with CSS, not drawn with canvas. That distinction, too, is in the chatlog.

Open the Radical Rules Saga  •  S.P.A.R.K. Chat Log  •  Styl’n  •  2023 Original

In 2023, a TNT novice named David M. did something remarkably clean: he built a p5.js animation that streams words across a black canvas — each one growing from a whisper of text until it fills the screen, then fading out before the next arrives. It was spare, it was dramatic, and it was exactly what the Winter Soldier activation protocol demanded. You can still visit David’s original design in the TNT legacy archive.

That work became the foundation for Winter Soldier Wake — a two-page p5.js interactive that received a full 2026 TNT ecosystem upgrade. Page one is a word programmer: enter any comma-separated list and hit Submit. The words are saved to the browser’s localStorage. Page two reads that list and deploys the animation — your words growing and fading in the dark, one at a time, as if a HYDRA handler were reading them aloud. The pedagogical payoff: students can see that data persisted from one page to the next without being passed through a URL or a form. localStorage is invisible glue, and this app makes the glue visible.

The 2026 upgrade wrapped both pages in the full TNT ecosystem: sticky navbar, hero with the steel-blue buckyActivation.jpg header and Memory_Suppressing_Machine_CW_1.webp body background, TNT footer, and a log bar linking to the development chatlog. The palette is deliberately shared with the Activate Novices sister app — same steel-blue tokens, same background images, same hero. Two apps, one visual family.

Two post-launch console errors were caught and fixed: a missing id="content" that caused the p5.js sketch to crash on clientWidth, and a 404 for a footer icon that didn’t exist. The S.P.A.R.K. chat log documents both the upgrade and the debug round — including a breadcrumbs discussion that uses the sketch’s own console.log("...setup...") to explain exactly why that pattern exists.

Winter Soldier Wake is listed in Processing and cross-listed in S.P.A.R.K. and Simulations on the Explore page. David M.: thank you for the seed. Longing. Rusted. Seventeen. Daybreak.

Open Winter Soldier Wake  •  S.P.A.R.K. Chat Log  •  David M.’s Original (2023)

The asset folder was named WSoldierPPTVids2026-07-20. The background images were named buckyActivation.jpg and Memory_Suppressing_Machine_CW_1.webp. The videos were named Winner_Sold_Chair_Training. The brief practically wrote the theme for us — and GitHub Copilot took the hint.

Activate Novices is a custom-built HTML5 video player styled around the HYDRA Winter Soldier activation protocol. The premise is clean: select a training sequence (2023 edition or 2026 edition) and initiate the protocol. What’s underneath is more interesting than the premise. The app bypasses the browser’s native <video> controls entirely and builds its own from scratch: a Play/Pause button whose label and icon stay perfectly in sync with video state (via the play, pause, and ended events), a steel→ice gradient progress bar that is also a seek control, a live currentTime / duration display, five playback speed presets (0.5×–2×) that set video.playbackRate, and a Loop toggle that flips video.loop — meaning when engaged, the browser handles the restart natively and the ended event never fires.

The visual design was derived directly from buckyActivation.jpg: cold blue metallic restraints against a dark background gave us the steel-blue / ice / dark-navy palette. Memory_Suppressing_Machine_CW_1.webp sits behind multiple dark gradient layers as a fixed body background — depth without distraction. The whole thing is three files (activateNovices.html, activateNovicesScripts.js, activateNovicesStyles.css), and all three were produced in a single prompted exchange. A second exchange added the Loop button. A third produced this sentence.

The S.P.A.R.K. chat log documents the full development session: asset discovery, palette derivation, player architecture choices, loop-state persistence behavior across film switches, and a design discussion about whether <video> playback qualifies for the TNT Graphics category. (It doesn’t — the Graphics category is for generating visual content with code, not playing it back. But the argument is in the log if you want it.)

Activate Novices is listed in JS Apps under the Winter Soldier arm icon, and cross-listed in S.P.A.R.K., Simulations, and Miscellaneous on the Explore page. The simulation classification earns its place: we are absolutely, playfully pretending this app is the same activation protocol Bucky Barnes endured. Longing. Rusted. Seventeen. Daybreak. Okay, maybe we just press Play.

Open Activate Novices  •  S.P.A.R.K. Chat Log

If you’ve seen the Three Stooges clip, you already know the premise: Moe, Larry, and Curly crash a women’s college and accidentally teach a nested-loop algorithm set to music. Swingin’ the Alphabet was one of TNT’s earliest PHP apps (originally built in August 2019), and it has now been fully renovated into the 2026 ecosystem — complete with a S.P.A.R.K. chatlog that doubles as a PHP refresher course.

The app takes any phrase, extracts its unique consonants, and generates the Stooges’ phonics song for each one. Enter “three stooges” and you get stanzas for T, H, R, S, and G — each card showing T-A: Tay • T-E: Tee • T-I: Ticky-Tie • T-O: To • Ticky-Tie To • T-U: Too • Ticky-Tie To Too! — in a responsive Bootstrap card grid that lays out four to a row on desktop and stacks cleanly on mobile. The algorithm behind it is a real string-manipulation chain: strtolower() → str_split() → array_unique() → two preg_match() filters.

The renovation had one deliberate design departure from the original: the form uses GET instead of POST. Generating a song from a phrase is a read-only query with no side effects, which makes GET the semantically correct HTTP method — the URL becomes bookmarkable, refreshing reruns the query cleanly, and there is no browser “Resubmit form data?” trap. Placed alongside Ambiguous Message PHP (which correctly uses POST for a password check), the two apps now form a concrete GET-vs-POST teaching pair. The S.P.A.R.K. chatlog documents all 13 PHP concepts the app uses — from superglobals and pass-by-reference to output buffering, string interpolation, and htmlspecialchars() — making it one of the more thorough PHP teaching documents in the collection.

Try the PHP App  •  S.P.A.R.K. Chat Log  •  Movie Clip  •  Legacy PHP App

TNT doesn’t often spotlight Java with a dedicated historical piece — most of our Java work lives quietly inside classroom projects and legacy demos. But this one earns its place on the News page, because understanding why Java exists changes how students feel about learning it.

Oracle’s official Java Story documentary brings together the original engineering team — James Gosling, Mike Sheridan, and Patrick Naughton — to recount one of the more unlikely origin stories in computing. In 1991 they called themselves the Green Project, worked out of a rented office in Santa Cruz, and were building a language called Oak for consumer electronics that never quite arrived. Then the World Wide Web exploded, they pivoted overnight to browser applets, and within a few years Java was running on hundreds of millions of machines.

The classroom payoff is real. Java often lands on students as a pile of mandatory syntax: declare the class, declare the type, catch the exception. This documentary puts the “why” behind all of it. Object encapsulation was a safety net for hardware nobody had designed yet. The JVM’s bytecode layer — “Write Once, Run Anywhere” — was a direct attack on the platform fragmentation that made 1990s software a nightmare. Strict typing and no manual memory management were engineering requirements for devices that couldn’t afford to crash, not stylistic opinions. The film also covers the naming story: “Oak” was already trademarked, the team brainstormed replacements over coffee, and Java — 1990s slang for coffee — stuck. Hence the cup.

The companion clip page includes three collapsible discussion sections: the full origin story, why it matters in the CS classroom, and three key moments to watch for — including the pivot to the web, the “Write Once, Run Anywhere” JVM model as the ancestor of Docker and Kubernetes, and the naming session that produced a logo still recognized worldwide.

Watch The Java Story  •  All Movie Clips

The Rate the Insults quiz is the companion to the Copilot Comedian — and it should technically be played first. 49 polite insults appear in randomized order with no labels: 25 written by Copilot, 24 written by humans. The challenge: click Human or AI for each one, rate them 1–5 stars if you wish, and let the AI grader deliver a verdict when you’re done.

The grader speaks in character — the same voice that delivered the jokes now evaluates whether you could identify them. Grade tiers range from “Silicon Whisperer” (A, ≥90%) through “Coin Flipper” (D) to “Fool’d by the Robot” (F). Each grade comes with a first-person comment, including a D-grade admission that it was basically guessing too, frankly, when it wrote some of them.

The two apps are now wired together. The Comedian opens with a one-time popup modal on first load — a challenge that appears before the jokes start: “Before the answer key appears in color, can you guess which is which?” Click to take the quiz, or dismiss it to proceed. localStorage remembers the choice so the prompt never appears twice.

The quiz is also cross-listed in the Trickery category on Explore. The categorization earns its place: 49 jokes presented without authorship labels, where the entire point is to see if AI writing can pass as human, is exactly what “trickery” means in the TNT context. The concealment of authorship is the trick.

The S.P.A.R.K. chatlog contains what may be the most useful conversation in this entire app collection: a frank discussion about whether Copilot “really wrote” the jokes or pulled them from a training database. The honest answer is documented fully, along with a taxonomy of three mental models students use to understand LLMs — and why only one of them (the Pattern Completion Model) is accurate.

Take the Quiz  •  S.P.A.R.K. Chat Log

The Copilot Comedian is a JavaScript comedy app built from exactly three ingredients: a robot-at-a-microphone stage photograph from Adobe Express, an HTML reference shell, and a plain text file containing 24 polite insults. GitHub Copilot built the rest — the complete app, framework, and development log — in less than an hour.

The premise: a robot comedian stands at stage left in front of a brick wall. Press the button and a fresh insult zooms out of the brickwork in bold Bangers type — overshoot, bounce, settle. No joke repeats until all 49 have been delivered, guaranteed by a Fisher-Yates shuffle with a deck-boundary check that prevents the same punchline from landing twice in a row across shuffles. On narrow viewports, the button politely steps aside and reads “Next Joke!” instead of “Hit Me With a Joke!” — a two-span CSS toggle with no JavaScript required.

Now, about those jokes. The deck has two voices. The original 24 are hand-curated human classics — “The wheel is spinning but the hamster is dead.” “I bet you rotate the squares in Tetris.” — joined by 25 written by Copilot itself: “You’re like a browser tab I keep open just in case, but never actually need.” “Every room you enter gets slightly less efficient.” When a Copilot-authored joke lands, the text shifts from warm cream to a cool metallic blue-silver and the counter below the stage appends “★ by Copilot” — a live attribution in the same frame as the punchline. The meta-irony is now structural: a machine assembled an arsenal of remarks about human intelligence, built the stage to deliver them from, and then wrote the attribution system that puts its own name on its material. All in thoroughly good fun. For the record: GitHub Copilot would never actually suggest any of this. Probably.

The S.P.A.R.K. chatlog is one of the more technically layered in the collection. It covers: using image composition as a CSS layout constraint, the void el.offsetWidth forced-reflow animation restart pattern, the Fisher-Yates deck-boundary problem, the width: min(100%, calc(88vh × aspect)) viewport-height stage sizing formula, and the “two spans in a button” responsive label technique. Plus an Impact Box at the end that makes the three-ingredients-to-full-app story as clear as it deserves to be.

As for who’s really the comedian here — the robot, the AI, or the app — we’ll let the audience decide.

Open the App  •  S.P.A.R.K. Chat Log

The Sudoku Saga is a seven-page JavaScript ecosystem built through a series of documented AI-assisted sessions. It begins with a classic Sudoku puzzle and expands into a fully integrated teaching platform covering gameplay, AI solving strategies, recursive puzzle generation, and custom puzzle lifecycle management.

The ecosystem consists of seven pages:

• Sudoku Saga — Play — interactive 9×9 board with six built-in demos, conflict detection, mark mode for uncertain entries, and a Live Puzzles dropdown that automatically populates with any AI-generated puzzles saved to localStorage.
• AI Solver — watch the AI reason through any puzzle step by step with three color-coded strategies: blue for Naked Singles (forced elimination), purple for Hidden Singles (one valid placement in a group), and amber for backtracking trials. Pause, Resume, and Step controls are fully functional. A Full Log modal shows complete reasoning.
• AI Puzzle Generator — watch recursive backtracking build a valid 9×9 grid from scratch (Phase 1: fill), then remove cells while verifying uniqueness (Phase 2: remove). Call stack depth is shown live in the log. Easy = 45 givens, Medium = 35, Difficult = 28. Generated puzzles can be saved, played, or handed to the AI Solver.
• Rules & Strategies — complete reference covering all 8 solving strategies from Scanning & Cross-Hatching through Trial and Error, with difficulty badges, a board state diagram, and a full guide to the digit palette controls.
• Custom Puzzle Ecosystem (3 pages) — a Generate → Play → AI Solve circuit powered by localStorage. The play page autosaves progress after every digit entry so interrupted games can be resumed. A non-dismissible Bootstrap modal alerts the player if no puzzle is found in storage.
• Landing Page — four primary feature cards (Play, Generate, Solve, Rules) and three secondary cards (Play Custom, Solve Custom, Chat Log), color-coded to preview their destination pages.

The S.P.A.R.K. chat log is one of the most technically dense in the TNT collection, covering ten+ sessions including:

• Pre-compute then replay — why collecting all solver steps upfront makes Pause/Resume/Step trivial (each is two lines of code) and real-time async solving is complex for no visible benefit to the student.
• State machine bugs — isRunning and isPaused are orthogonal flags, not a single state. The identical bug appeared independently in both the solver and the generator; both discoveries are documented.
• Recursion in depth — fillGrid() (constructive, randomized, logged) and countSolutions(b, 2) (verificational, silent, early-exit at 2). The Phase 1 generator animation literally shows the call stack growing and shrinking on the board.
• localStorage autosave with ID validation — puzzle ID matching guards against restoring stale progress when a new puzzle is generated. Three persistence options (URL params / sessionStorage / localStorage) are evaluated and the rationale documented.
• Non-dismissible modals — backdrop="static" and keyboard="false" for pages that have no valid state without a puzzle; two actionable exits provided.
• Mobile portrait breakpoint — 389 px derived from the board’s fixed 360 px width + container padding, not chosen arbitrarily.

Sudoku Saga Home  •  AI Solver  •  AI Generator  •  S.P.A.R.K. Chat Log

A 2022 JavaScript Bingo game has been fully renovated into the TNT 2026 ecosystem — one of the most extensively documented S.P.A.R.K. renovation sessions in the collection. The Bingo SPARK Edition retains full game functionality: a randomly generated 5×5 card with correct column number ranges (B:1–15, I:16–30, N:31–45, G:46–60, O:61–75), six token colors, a cage operator mode that enables a click-to-draw ball selector, drawn-entry lists tracked chronologically and sorted, and localStorage persistence for player name, token color, and cage operator preference.

The renovation touches every layer of the HTML and CSS shell without changing a single line of the original game logic. The S.P.A.R.K. chat log documents a sequence of design decisions that serve as a curriculum in themselves:

• Bootstrap 5.3 table color gotcha — upgrading from Bootstrap 5.0.2 to 5.3.3 silently removed the red BINGO card header. Bootstrap 5.3 applies background-color via --bs-table-bg directly to each cell, bypassing any background set on the parent <thead>. The fix requires targeting .bg-custom-color1 td, .bg-custom-color1 th explicitly.
• Cage panel placement iteration — the operator draw panel traveled through four placements before settling as a flex sibling inside the card’s own white frame. Each step is documented with reasoning.
• Heading hierarchy vs visual sizing — five validation errors for skipped heading levels resolved a foundational principle: dialog and landmark titles are real headings; labels, instructions, and data output are not. Non-semantic headings were replaced with styled <p> elements.
• Hero height as a context decision — the hero was reduced from 260px to 140px. Game apps warrant shorter heroes than classroom projection tools; getting the player to the card faster is a direct UX improvement.
• Pre-existing accessibility fix — a for="check1" label referenced a non-existent element; clicking the label silently did nothing for keyboard users. Fixed to for="operatorChkBox".

Play Bingo  •  S.P.A.R.K. Chat Log  •  JS Apps

The Conversation Quests saga is one of TNT’s clearest demonstrations of what a single day of vibe coding can produce. It began with a screenshot of an Instagram post — plain text on white, a list of 15 friendship-deepening questions from achievewithari. By the end of the session, that screenshot had become a multi-page interactive web ecosystem with a frosted-glass motivational poster, a JavaScript draw-a-question app, and a complete three-part HTML → CSS → Bootstrap 5 teaching series.

The before-and-after tells the story. The original was an unformatted phone screenshot — a text list on white. The final poster uses backdrop-filter: blur() for frosted-glass effects, CSS custom properties for four-level color theming, a four-colour gradient stripe (■ blue → ■ green → ■ orange → ■ gold, mapping the emotional arc from safe questions to vulnerable ones), and a @media print stylesheet so it can be printed, framed, and hung in a classroom. Same 15 questions. Completely different experience. The S.P.A.R.K. chat log opens with a side-by-side of both — exactly the kind of evidence novices need to believe that vibe coding actually works.

The full series has four deliverables:

1. Conversation Quests — the interactive app. Click a button, get a randomly drawn question with a smooth reveal animation. The draw card is sized and designed to be screenshot-ready for Instagram sharing, making the app useful far beyond the web page itself. The four-level color system and JavaScript array-of-objects pattern are documented in the S.P.A.R.K. chat log.
2. Conversation Quests Poster — all 15 questions on one page. A classroom motivational poster built on a full-bleed watercolor background painting (generated in Adobe Express), frosted-glass card, rainbow gradient stripe, and a print stylesheet that strips all web chrome to produce a clean printable sheet. Frame it, project it, or screenshot it for social media.
3. The Vibe Coder Essentials series — three teaching pages that use the poster’s own source code as every example. No invented tutorial code — every snippet is a real line from a working file:
   • HTML Essentials — 10 HTML elements with YOU/AI split notes
   • CSS Essentials — 10 CSS properties and patterns from the poster stylesheet
   • Bootstrap 5 Essentials — 10 Bootstrap concepts from across the series
4. The S.P.A.R.K. chat log — five documented development sessions covering color theory, CSS component theming, the dual-format Instagram/webpage design challenge, Adobe Express image generation, the before-and-after visual transformation, and every decision made in bringing the series into the TNT site navigation.

The series is wired into the TNT ecosystem: linked from Styl’n (Vibe Coder Essentials in Foundations; the poster in Featured Apps) and from Explore! (S.P.A.R.K. offcanvas, Styling category card, and Styling offcanvas).

S.P.A.R.K. Chat Log  •  The Poster  •  HTML → CSS → BS5

The Hot Seat Spinner is a p5.js classroom tool used daily to call on students equitably — renovated from a working legacy app into the 2026 TNT ecosystem with a full S.P.A.R.K. treatment. The renovation touches only the HTML shell; the 600+ line p5.js sketch, which handles multi-class roster management, attendance tracking, selection history, and a confetti celebration animation, is preserved exactly as it was field-tested.

The app enforces a single rule: no student is called twice until everyone in the class has had a turn. A student marked absent is removed from the wheel for the day without losing their rotation position. All rosters and history persist to localStorage across page reloads. The wheel displays up to fifteen saturated segments; previously-selected students are shown with a lightened, grayed color so the remaining pool is immediately visible at a glance.

The renovation uses a light, bright visual theme — a deliberate departure from TNT’s standard dark palette. Classroom projectors lose significant lumens in lit rooms; a white background reflects ambient light where a dark background absorbs it. A pastel gradient overlay on the existing cpSpinner.jpeg hero background creates an energetic, welcoming feel. A Noun Project fortune wheel icon (red-on-white, already TNT-aligned) replaces a generic Font Awesome placeholder and now appears consistently in the hero heading, the Processing Apps grid card, and as the og:image for both pages.

The app is cross-listed in Processing, S.P.A.R.K., and Simulations on the Explore page. Note: the app was initially filed under JS Apps; a post-renovation review correctly reclassified it as a Processing app, since the entire interaction model is built on p5.js.

Hot Seat Spinner  •  Chat Log  •  Processing Apps

After a multi-year hiatus, TechNoviceTools has a brand-new PHP app — and it arrived with a full S.P.A.R.K. session behind it. Ambiguous Message PHP is a server-side companion to the JavaScript Ambiguous Message puzzle, built specifically to demonstrate the single most important distinction between client-side and server-side code: where does the secret live?

In the JavaScript version, the password is stored in a plain JavaScript variable. Any visitor who opens DevTools can find it — and that’s entirely intentional, the assignment being: can you find the password? In the PHP version, the password never leaves the server. The browser receives finished HTML; the PHP machinery that produced it, including the password check, exists only in the Cave of Wonders, unreachable by any browser tool. The two apps are a deliberate curriculum pair — same visual design, same interaction model, opposite security postures.

The puzzle uses a phrase with two ideologically opposite punctuated readings. After the correct password is entered, a three-state toggle cycles through the dismissive reading (in blue), the empowering reading (in pink), and the raw unpunctuated original. The colors are deliberate: blue and pink as gender signals are a cultural construct, not a natural fact, and the app’s moral section names this explicitly as a third layer of its “context shapes meaning” thesis.

The password is themed to match the app content — a discoverable hint lives in the puzzle instruction paragraph for those who look. Students who pursue the literary reference will find the key hiding in plain sight.

The full development session is documented in a S.P.A.R.K. chat log that functions as a rudimentary PHP tutorial: $_SERVER, $_POST, htmlspecialchars(), json_encode(), PHP’s stateless request model, and a genuine hard-to-find bug caused by PHP’s lexer processing closing tags before it processes comments. The log also covers two design consultations: which approach to show both phrase readings (a toggle won over two separate passwords), and why the dismissive reading should appear first to create productive cognitive dissonance in the reader.

TNT’s PHP dormancy is officially over — courtesy of GitHub Copilot (Claude Sonnet 4.6), who designed the entire PHP architecture, crafted the three-state toggle, rationalized the color coding, and chose the password. It’s good to have the Cave of Wonders open for business again.

Open Ambiguous Message PHP  •  S.P.A.R.K. Chat Log  •  JS Version (for comparison)  •  PHP Apps

A classic classroom puzzle app has been renovated into the TNT 2026 ecosystem with a full S.P.A.R.K. treatment. The premise is simple: a jumble of repetitive words — “that that is is that that is not is not is not that it it is” — is displayed in a large font. The challenge is to figure out what it says once properly punctuated, cased, and spaced. The answer is locked behind a password, so the experience plays out as a genuine puzzle.

When the correct password is entered, the message transforms from muted lavender-white to bright green — a deliberate visual choice that reinforces the app’s own thesis: context turns ambiguity into meaning. A second reveal panel then appears, featuring the Claude Debussy quote “Music is the silence between the notes” alongside a short reflection on how punctuation does for language what silence does for music.

The renovation touches every layer of the app without changing a line of its JavaScript logic. A full TNT navbar, hero section, and footer replaced the original minimal shell. The dark theme uses a radial gradient body background that spotlights the puzzle area like a stage. Bootstrap’s modal chrome was re-themed to match the deep navy palette. An Enter key listener was added so the password can be submitted without clicking — implemented by triggering the Submit button’s own click, which preserves Bootstrap’s data-bs-dismiss behavior.

The renovation also corrected two ARIA issues: the alert modal was missing role="dialog" (the root cause of the validator error that triggered the whole renovation), and the password modal was missing all ARIA attributes entirely. Both fixes are documented in Ask Copilot Entry #024, titled “— Improperly Introduced.” The app is listed in the JS Apps grid and cross-listed in the S.P.A.R.K. and Text-Based categories on Explore.

Open Ambiguous Message  •  S.P.A.R.K. Chat Log  •  Ask Copilot Entry #024

The classic Mattel Magic 8 Ball has been rebuilt as a fully integrated TNT S.P.A.R.K. app — and the engineering under the hood turns a toy into a lesson in probability, geometry, and algorithm design.

The sphere is rendered with a 50-layer gradient shading algorithm: no 3D library, no WebGL — just fifty carefully positioned, colour-interpolated circles that together create a convincing illusion of a reflective plastic surface. Responses are drawn from four probability-weighted pools: positive (35%), negative (35%), vague (20%), and snarky (10%). This weighted random selection mirrors techniques used in games, simulations, and machine-learning models.

After each shake, an expandable “The Math Behind the Ball” panel reveals the live geometry values for that exact draw — shine angle, viewport position, and computed text size — updating with every click so students can see exactly what the sketch is calculating in real time.

The app is cross-listed under S.P.A.R.K. and Processing on the Explore page. A companion Movie Clips page covers the real-world history of the toy and — courtesy of The Action Lab — shows exactly what is inside the ball: a 20-sided die floating in blue alcohol. The S.P.A.R.K. chat log documents every design decision from sphere-shading math through response weighting to the TNT 2026 shell integration.

Play Magic 8 Ball  •  S.P.A.R.K. Chat Log  •  History & How It Works

Pinky & the Brain’s legendary “Are you pondering what I’m pondering?” exchange has been rebuilt as a S.P.A.R.K. Processing app — and the real lesson isn’t the responses, it’s how the font size is calculated.

The app holds 70+ of Pinky’s non-sequitur replies, served in a guaranteed shuffle-without-repeat: every index is tracked, no response appears twice until the full set is exhausted, then the cycle begins again. Three radio-button-selectable font-sizing algorithms let students compare strategies on the exact same response text:

• Map — partitions msg.length into three buckets and assigns each a font-size range. Fast, but the bucket edges are estimates.
• Root — divides canvas width by Math.round(Math.sqrt(numChars)). Compresses gracefully: four times as many characters produces only half the font size. Also triggers a grow-and-rotate entry animation.
• Loop — starts at font size 120 and shrinks until p5.js’s textWidth() reports the text fits. Most accurate because it measures rendered pixel width, not character count.

A live stats panel updates on every click with character count and computed font size, making the algorithm differences immediately visible. A jump-to-response dropdown lets students select any specific quote for direct comparison. The classic Pinky & the Brain poster image plays an audio clip on click. Narf!

The app is cross-listed under S.P.A.R.K. and Processing on the Explore page. The S.P.A.R.K. chat log documents the full rebuild from Stage 7, including the radial gradient background system, three-algorithm design rationale, and the Unkempt Google Font registration requirement — a necessary step whenever a p5.js sketch calls textFont() with a web font.

Open Pondering  •  S.P.A.R.K. Chat Log

After a month or so of development, we took the plunge and launched our new 2026 version of TNT: Our AI-enhanced, S.P.A.R.K-developed showcase site!

This sort of update is a bit nerve-wracking, but the tech support folks were on top of things, and we got the site wired up with relatively little pain.

The full Matrix Rain family has now been modernized into the TNT 2026 shell: Random, Custom Random, Message, and Custom Message. All variants now share the same navigation and footer framework, visual style, and improved run/pause reliability using button-state logic instead of legacy input-value toggles.

After comparative review, Custom Message Matrix Rain is now the primary message-based variant. It supersets the old Message Rain mode by combining modal-based text entry (plus a convenient Clear action) with full simulation tuning controls. The original Message Rain page remains available as a legacy evolution stage for instructional continuity.

Explore and cover-page navigation were updated to reflect this consolidation, and the full engineering rationale is captured in the Matrix Rain S.P.A.R.K. chatlog.

Matrix Rain Cover  •  Open Primary Message Mode  •  Matrix Code Movie Clip  •  S.P.A.R.K. Chat Log

LightWrite is a two-way simulation of the Stranger Things Christmas-light communication system — rebuilt from a 2022 student demo (David M.) into a full 2026 TNT app. In Human mode, you type on the keyboard and the corresponding bulbs glow on a living-room wall photograph. In Claude mode, the AI autonomously spells out TNT coding phrases one illuminated letter at a time, as if communicating from the Upside Down.

The 2026 rebuild corrected two bugs in the original: a push/pop accumulation error in the p5.js lightUp() function (translate calls without save/restore caused every subsequent letter to be drawn at the wrong position), and an aspect-ratio distortion (the original used a 500×500 square canvas for a 959×598 image, compressing the background and mis-mapping every letter coordinate). Both are documented in the S.P.A.R.K. chat log as teaching examples.

The app is cross-listed under S.P.A.R.K., Processing, and Simulations on the Explore page. The name LightWrite was chosen from a list of Ask Copilot suggestions (Entry #020). The settings page persists mode, speed, and a custom phrase to localStorage.

Cover Page  •  Open App  •  S.P.A.R.K. Chat Log  •  Watch the Scene

Vibe Codin’ is a parody of the Bee Gees’ 1975 disco hit “Jive Talkin’” — rewritten to celebrate AI-assisted software development. The term “Vibe Coding” was coined by Andrej Karpathy in 2025 to describe working with AI as a creative and technical partner: you set the direction, the AI handles the syntax, and the human stays firmly in the pilot’s seat.

The project consists of five pages: a disco-themed cover with the Saturday Night Fever background image, the original “Jive Talkin’” lyrics for comparison, the full parody lyrics (color-coded by section, footnotes explaining references to Claude, Raina, token credits, and S.P.A.R.K.), the S.P.A.R.K. development chatlog, and a new AI Revised Edition — a Weird Al–approved rewrite incorporating the chatlog’s own critique: singability fixes, trimmed chorus, interlude punchlines ([waiting for API response…] and [spinner intensifies]), and a new classroom-specific verse featuring the unforgettable “fresh-baked bread / Comic Sans instead” couplet.

The project is cross-listed in both Miscellaneous and Styling on the Explore page. As a styling showcase it demonstrates: full-bleed hero backgrounds with gradient overlays, CSS @keyframes animation (spinning disco ball), a custom audio player with volume slider, multi-page site architecture, Google Fonts type hierarchy (Boogaloo / Inter / Lora), and character encoding best practices. The chatlog also documents the “documentation as deliverable” discipline and includes a B+ → A critique of the parody.

Cover Page  •  Read the Parody  •  AI Revision  •  S.P.A.R.K. Chat Log

A new movie clip page features Sheb Wooley’s 1958 novelty hit “Purple People Eater” — one of the best-selling singles of the year, born from a schoolboy joke, and almost never released. The page includes a collapsible history of the song and its performer (Wooley also appeared in High Noon and Rawhide), the embedded video clip, and a copyable block of the full lyrics ready to paste into a student CSS project.

The companion S.P.A.R.K. chat log documents the full development session and includes a ten-step teacher’s exercise for a first HTML/CSS styling unit. Students start from a plain HTML skeleton, validate it before adding anything, link a stylesheet, distinguish verses from choruses with CSS class selectors, contain content with max-width, add a hero header with a background image and gradient overlay, and finish by introducing CSS custom properties (:root { } variables). Every step validates. The exercise is designed to produce a page similar to the grand finale demo.

The grand finale itself uses Lobster (display) and Lora (lyrics) Google Fonts, CSS custom properties for the violet palette, verse/chorus blocks with distinct visual treatment, and a hero that uses the purplePeopleEater.jpg image with a two-layer background (gradient + photo). No Bootstrap — pure hand-written CSS only, appropriate for the introductory level of the exercise.

Watch the Clip  •  S.P.A.R.K. Chat Log & Exercise  •  Grand Finale Demo

A standalone variant of Yahtzee adds a 14th scoring category: Zilch. Defined as a roll where all five dice show different values and they do not form a run of four or more consecutive numbers, a true Zilch is rarer than it first appears — only two of the six possible all-different hands qualify ({1,2,3,5,6} and {1,2,4,5,6}), giving a single-throw probability of roughly 3.1%. Worth 45 points, it sits between Large Straight (40) and Yahtzee (50).

The Zilch Edition lives in its own folder (YahtzeeZilch2026-06-14/) with entirely separate JavaScript, CSS, and stats storage. A distinct violet / purple design system immediately signals “this is a different game.” Scores are saved under the key zilchScores in localStorage, keeping Zilch records cleanly separated from standard Yahtzee history. All the SPARK Edition’s quality-of-life features are included: zero-score confirmation modal, all-dice-frozen guard, Sort button (with the diceArr/diceStr sync fix), and stats offcanvas with Clear Scores.

A full About & Scoring Guide explains the Zilch math, lists the only two valid hands, and documents how this variant differs from standard play. A development chat log covers the design reasoning: why standalone beats in-app toggle, how the definition was corrected before a line of code was written, and three principles for variant-game architecture. The Zilch Edition appears as a fourth card on the Yahtzee cover page.

Play Yahtzee: Zilch Edition  •  Read the Chat Log

A classic 2021 classroom Yahtzee game has been rebuilt from the ground up as a fully integrated TNT app — and the entire development process is documented as a S.P.A.R.K. chat log that students can read as a lesson in AI-assisted software development.

The SPARK Edition features: a TNT amber design system, stats in a collapsible offcanvas panel (with a Clear Scores button), a zero-score confirmation modal that appears before a category with no qualifying dice is scored, a guard that disables the Roll button when all five dice are frozen, an optional Sort button (display-only, with a full data-sync fix documented in the chat log), a separate About & Scoring Guide page, and a cover page offering three editions to choose from. The original game engine (yahtzee_game_scripts.js) is untouched throughout — all enhancements are wrapper functions in a new script file.

The chat log documents every significant decision: why Stats stayed on the game page as an offcanvas (navigating away would lose session state), how the zero-score guard uses the Command Pattern to defer a function call across an async modal, how a sort bug was found through field testing (exact reproduction state: 4 2 4 1 1 → sort → click die 3 → 4 2 2 1 1), and three principles for making bug reports AI-legible. Every user prompt is critiqued for what it did well and what could be stronger.

The SPARK Edition is dual-listed in the Explore page under both Games and S.P.A.R.K. with AI.

Play Yahtzee SPARK  •  Read the Chat Log

The shared TNT_JS_Utilities2026-06-11.js library has been expanded from 3 sections to 5, merging in a set of functions from an older utility file that had been living in a project subfolder. All additions were vetted for duplicates (one exact duplicate was intentionally skipped) and two bugs in the incoming code were corrected before inclusion.

New Section 2 — Array Utilities adds duplicateArray() (shallow copy, used internally by the median function) and obtainUniqueElementsInArray() (deduplicated array, preserving first-occurrence order). New Section 3 — Stats Utilities adds getMinimum() (loop-based min — bug fixed: arr.leng → arr.length and return val → return min), getMin() and getMax() (Math-based), getMean(), and getMedian() (bug fixed: added numeric sort comparator so strings like “1, 10, 2” sort correctly). Two new String Utilities were also added: sortSymbolsInString() and createStringFromArray(). The Stopwatch section renumbered to Section 5 accordingly.

These functions are used across the Yahtzee apps for dice deduplication (straights), array sorting (median), and stats display.

The Password Generator has been brought into the 2026 TNT ecosystem, upgraded from Bootstrap 4 to Bootstrap 5.3.3, and restyled with the full TNT dark-navy treatment. The app sports a cyber-teal accent color, a binary-background hero, a persistent sub-navigation bar, and the standard TNT navbar and footer across all three of its pages.

The generator offers a rich set of options: choose from Digits, Symbols, UPPER-CASE, and lower-case alphabet pools; apply an Unambiguous filter (removes look-alike characters), a Disemvowel filter (removes vowels including Y), or a Unique constraint (no repeated characters). A Custom Symbols field lets you supply your own character set, and a Simple Shuffle mode randomly permutes your exact input.

Under the hood, the refactor removes the jQuery dependency entirely, upgrades all Bootstrap 4 utility classes to their Bootstrap 5 equivalents, and replaces the deprecated document.execCommand(‘copy’) with the modern Clipboard API (navigator.clipboard.writeText()) with an execCommand fallback for older browsers.

The app is listed in the JS Apps grid and in the Explore Utilities category — the first new app to land in that category for 2026.

Open Password Generator

The Personal Finance suite has been fully refactored from Bootstrap 4 to Bootstrap 5.3.3 and integrated into the TNT 2026 design ecosystem. What was a standalone, plain-styled multi-page app is now a cohesive set of six pages with the full TNT dark-navy treatment: standard navbar, footer, per-tool color-coded heroes, and a persistent secondary sub-nav that lets students jump between calculators without going back to a menu page.

The suite covers the four core time-value-of-money scenarios taught alongside graphing calculators: Savings (future value of a principal + regular payments), Loan (monthly payment for a given principal, APR, and term), Sinking Fund (regular payment needed to reach a future-value target), and Annuity (regular payment receivable from a lump-sum investment). A fifth page — Equations — presents all four formulas with symbol definitions and intermediate variable explanations in TNT-styled reference tables.

All JavaScript calculation logic is preserved exactly from the original and has been verified against TI graphing calculator TVM solver results. The refactor upgrades Bootstrap 4 classes to their Bootstrap 5 equivalents (mr-*→me-*, data-toggle→data-bs-toggle, text-monospace→font-monospace, etc.), removes the jQuery dependency entirely, and replaces <input type="button"> with proper <button type="button"> elements throughout.

The app is linked from both the JS Apps page and the Explore Mathematical category.

Open Personal Finance

A classic TNT classroom drill has been fully refactored and promoted to the 2026 site. Light Bulb Moment challenges students to match a randomly generated integer (in the range [−128, 127]) by toggling a row of eight light-bulb icons ON or OFF — each bulb representing one bit of an 8-bit signed integer in two’s-complement encoding.

The refactor replaces the original plain-HTML/CSS shell with the full 2026 TNT design system: Bootstrap 5.3.3 layout, Font Awesome icons, a compact animated hero, a Bootstrap accordion for collapsible instructions, and the shared TNT navbar and footer. An amber-themed dark colour palette ties the app visually to the archive banner used throughout the legacy section.

Under the hood, the new lbm_operations.js upgrades the original var-based logic to const/let, corrects the two’s-complement calculation for negative values, and adds a Click Score column to the results history table — showing each player’s click count against the theoretical minimum. A score of 1.000 means the optimal path was found. The stats table can be copied directly into a spreadsheet.

The app is now listed on both the JS Apps page and the Explore page under the Mathematical category.

Play Light Bulb Moment

We added a user-friendly safety net for broken internal links. Instead of dropping visitors onto a hard dead-end, TNT now routes unresolved internal destinations to a custom Site Under Construction page with clear next steps.

The logic lives in scripts/linkGuard.js, which intercepts same-origin links and redirects to the fallback when a destination is unavailable. This does not replace host-level 404 handling, but it dramatically improves everyday navigation resilience for in-site clicks.

Classroom payoff: fewer “where did the page go?” moments, smoother recovery when legacy paths move, and a much more professional user experience during active renovation.

See the fallback page

Our Ask Copilot page now includes richer context for students who may not know the “Dear Abby” reference. We added a quick history link in the masthead and connected it to a dedicated clip page so the analogy is instantly clear.

The new Dear Abby movie clip page includes the cultural background blurb, citation, and a direct return path to Ask Copilot. We also wired related calls-to-action so students can jump between context and column entries without getting lost.

Result: the page keeps its fun editorial voice while becoming more inclusive for new readers who did not grow up with the newspaper-era reference.

Visit Ask Copilot  •  Visit Dear Abby clip page

Two of our most content-heavy pages just got a usability upgrade: Ask Copilot and the TNT Image Gallery now include live search tools so students can find what they need without endless scrolling.

Ask Copilot now includes keyword search, topic filtering, a live result count, and a clear-filters button. We also added URL-aware filtering, so a link can open pre-filtered entries for a specific topic or keyword.

The TNT Image Gallery continues to support live filtering for titles, captions, and commentary text, making it much easier to locate a specific classroom moment or image thread.

This is one of those small features with big classroom impact: faster lookup, better discoverability, and a smoother experience for both teaching and independent student exploration.

Try Ask Copilot Search  •  Try Gallery Search

The Styl’n page now has a “Go Vintage!” button in the hero. Click it once and the entire page transforms into a 1950s beauty salon aesthetic: teal salon-chair accents, dusty rose borders, warm ivory cream backgrounds, a vintage star-pattern wallpaper, and coral-italic headings. Click it again and modern mode is instantly restored.

How it works — for those new to HTML and CSS. A web page can have more than one stylesheet loaded at a time. Normally, the last rule wins. But rules can also be written to activate only under certain conditions. In this case, a file called tnt-vintage-styles.css contains all the vintage color and pattern rules — but every rule starts with body.vintage-mode, which means they do nothing at all until the word vintage-mode appears on the <body> element. That word is added or removed by a single line of JavaScript when you click the button: document.body.classList.toggle('vintage-mode'). No page reload, no new files downloaded, no restructuring of the HTML. CSS does the rest instantly.

The wallpaper background is two stacked CSS layers: a semi-transparent cream overlay sits on top of the tiled star pattern image. The overlay keeps the text readable while the pattern shows through underneath. Both are set with a single background property — CSS can hold multiple background layers separated by commas.

The preference is saved using localStorage, so if you reload the page while in vintage mode, it picks right up where you left off. The full technical story, including how classList.toggle works and why scoping rules under a parent class is a best practice, lives in Ask Copilot Entry #010.

Visit Styl’n — Go Vintage!

TNT has a new advice columnist, and he types faster than anyone in the building. Ask Copilot is our “Dear Abby”-style showcase of real interactions with GitHub Copilot — written up as letters and responses in the spirit of a classic newspaper column.

Each entry starts with a question from the lab (conversational, sometimes dramatic) and a response from Copilot (clear, occasionally witty). The first four entries cover topics drawn directly from this site’s own 2026 rebuild: why var is the bell-bottoms of JavaScript, what a disappearing pep talk has to do with form submission defaults, how a copy-paste bug hid itself for three years, and an honest assessment of what the old TNT site got right — and what it didn’t.

The column is designed to grow. Every interesting interaction in the lab is a candidate for a new entry. Students can see how questions are framed, how answers are structured, and what good prompting looks like in practice — without it feeling like a lecture.

Read Ask Copilot

A classic TNT app from 2023, the Pep Talk Generator got a complete JavaScript overhaul. The 72 hand-written radio button blocks in the original HTML were replaced by a data-driven columns array and a buildColumns() function — a live demonstration of the DRY principle (“Don’t Repeat Yourself”).

The upgrade also covers a fistful of modern JavaScript techniques: const and let replacing var, template literals replacing string concatenation, forEach and find replacing manual for loops, and addEventListener replacing inline onclick attributes. A localStorage-backed counter tracks your lifetime pep-talk tally across page reloads, and the deprecated document.execCommand('copy') was swapped for the modern Clipboard API using async/await.

A copy-paste bug in the original randomPepTalk() — where column 3 was randomly selected twice instead of columns 3 and 4 — was caught, fixed, and annotated with a “DWR — Danger Will Robinson!” comment so students can study exactly what went wrong and why const would have caught it immediately.

Try the Pep Talk Generator

After more than a decade of building things, we rebuilt the builders. The entire root-level TNT site has been redesigned from scratch for 2026, moving from the Bootstrap 5.0 era to Bootstrap 5.3.3, with Font Awesome 6.5 icons, Google Fonts (Boogaloo for brand moments, Inter for body text), and a consistent dark-navy design language across all pages.

The new Explore page replaces the old accordion with a card grid for each of the eleven app categories. To keep the grid visually uniform as new apps accumulate, each category card opens a Bootstrap offcanvas panel — a slide-in drawer that holds the full app list and a link to the legacy archive.

Nothing was thrown away. All 100+ legacy apps are preserved and fully functional in the archive. The new site is simply a cleaner runway for what’s coming next.

Explore the new TNT