Code Word Collector — S.P.A.R.K. Chat Log
Building a live classroom vocabulary tool — dynamic rows, auto-save, a treasure-map hero, and a print-ready form for teacher submission.
This page chronicles the creation of the Code Word Collector from initial concept to finished app. Watch for S.P.A.R.K. banners framing each development phase, prompt critiques explaining what made each request effective, and decision boxes documenting the key design choices.
Three technologies combine here: HTML structures the form, CSS controls both screen and print appearance (with a dedicated @media print block), and JavaScript manages data flow — creating rows, auto-saving to localStorage, and wiring up every button.
Previously, you helped me create the radicalRules page (attached). I’m wanting to create an app, with a similar layout (specifically the navbar and footer) that will allow a student to enter in ‘Code Words’ (and any associated comments) into a form and then print it out to submit to the teacher. I have attached a picture of a form made in PowerPoint. I’m thinking the form could ‘grow’ as a student supplies the entries. They should be able to save their work if interrupted, and then when class is over, they should be able to print the document to send to the teacher. I’m imagining this process as ‘digging for gold’ that the teacher is supplying during classroom discussions. This page should be codeWordCollector.html with associated pages codeWordCollectorStyles.css and codeWordCollectorScripts.js. The treasure maps image could be used for the hero background. As is common with SPARK apps, I want you to supply a codeWordCollectorChatlog.html page to showcase this development. An example is supplied from the radicalRules app. When the form is printed, it should only showcase the page’s author, date, period and form content, possibly styled with faint alternating colors for the row entries, as was done with the example form.
This prompt packs seven distinct requirements into a single request: (1) navbar/footer from Radical Rules; (2) a PowerPoint reference image as a visual spec; (3) dynamic “growing” rows; (4) localStorage persistence; (5) print-only output; (6) the treasure-map AVIF as the hero; (7) a chatlog companion. The reference to two existing files (Radical Rules HTML and an attached chatlog) gave Copilot structural templates to follow for both deliverables simultaneously.
The phrase “digging for gold that the teacher is supplying during classroom discussions” is the creative anchor of the whole app — it sets the visual theme (treasure maps, gold coins, teal table headers) and the micro-copy tone (“Mine vocabulary gold during class”). A single evocative metaphor in a prompt can carry the entire design direction.
Workspace analysis completed:
CodeWordCollectorSPARK/
acblackflagresynced-treasure-maps-header.avif ✓ (hero background)
CodeWordCollector2025-08-14.png ✓ (print header logo)
Root resources available:
styles/tnt-base-styles.css ✓ (navbar, footer, shared tokens)
scripts/linkGuard.js ✓ (footer validate-link helper)
images/favicon-32x32.png ✓
images/np_dynamite_1426997_D81827.svg ✓ (navbar brand icon)
images/dynamiteTNTgray.png ✓ (footer icon)
images/[validator icons] ✓
Model app examined:
RadicalSPARKSaga2026-07-22/radicalRulesIndex.html
→ navbar markup copied verbatim, active link changed to JS Apps
→ footer copied verbatim
→ log-bar pattern adopted (teal, 0.30rem padding, chatlog link)
RadicalSPARKSaga2026-07-22/radicalRulesChatlog.html
→ SPARK banner classes, chat-turn pattern, critique/decision boxes
→ back-bar pattern, hero with overlay adopted
Three new files to create, zero existing files to modify.
The PowerPoint reference showed a dark teal table header (#1a5276) with white bold text, and alternating white/light-gray rows. That teal is carried into the entire app as the primary accent, with gold (#c9972b) as the secondary accent. This pairing directly maps to the “treasure” metaphor: teal water, gold coins.
The parchment background (#faf8f0) echoes old treasure maps and keeps the app tonally consistent from hero to table. On print, the background becomes pure white and the alternating row tones shift to very soft blue-grays so the printed page reads cleanly without using much ink.
The app stores one JSON object under the key cwc_v1. The object contains name, period, date, a rows array, and a saved ISO timestamp. Auto-save fires 900 ms after the last keystroke (debounced) so every pause in typing quietly persists the student’s work without any interruption.
On load, the saved rows are restored exactly as they were. If there are fewer than 10 stored rows, the array is padded to the minimum before rendering. If localStorage is unavailable or the stored JSON is corrupt, the app silently falls back to 10 fresh empty rows. The student never sees an error.
The version suffix _v1 in the key means a future schema change can use cwc_v2 without corrupting old saves.
The table starts with 10 rows. Two growth mechanisms exist: (1) the Add 5 Rows button appends five rows immediately; (2) auto-grow triggers when the student types the first character into the code-word field of the last row in the table. This means the form is always one step ahead — the student never hits a hard boundary.
Every row is built with DOM API calls (createElement, appendChild) rather than innerHTML. This means input values set via .value are never parsed as HTML, eliminating any risk of stored text being interpreted as markup when rows are restored from localStorage.
Build completed across four new files:
Created: codeWordCollector.html (main app)
Created: styles/codeWordCollectorStyles.css (screen + @media print)
Created: scripts/codeWordCollectorScripts.js (localStorage IIFE)
Created: codeWordCollectorChatlog.html (this document)
Key @media print rules:
• Hide: #mainNav, footer, .cwc-log-bar, #cwcHero,
.cwc-intro-panel, .cwc-actions-bar, .cwc-tip
• Show: .cwc-print-header (print-only logo block)
• print-color-adjust: exact → teal header row prints in color
• input styling → border: none, background: transparent
• row colors → --cwc-print-odd: #f5f8fc / --cwc-print-even: #e8f0f8
• @page { size: letter; margin: 0.75in; }
• thead { display: table-header-group } → repeats on each print page
The print output is handled entirely by a single @media print block in the stylesheet — no JavaScript, no popup windows, no cloning. The browser’s native window.print() call triggers the media query, which applies a parallel set of rules on top of the screen rules.
The print-only header (the app logo and tagline) is a .cwc-print-header div set to display: none on screen and display: flex in the print query. The student never sees it in the browser, but it appears at the top of every printed page. The same print-color-adjust: exact directive forces the teal table header background to print even when the user has “save ink” turned on in the browser.
Inputs inside the table cells are printed by the browser with their current values visible. The print CSS removes all visible borders and backgrounds from those inputs so they read as plain text — the row background color, not the input border, defines each cell visually.
All row creation uses document.createElement() and sets .value on inputs directly. If a student types <script>alert(1)</script> as a code word, it is stored in localStorage as a plain string and restored into an input’s .value — never parsed as HTML. There is no injection pathway.
By contrast, an innerHTML approach would require careful HTML escaping of every stored value before insertion. DOM API sidesteps that class of risk entirely, which is the preferred modern pattern for building UI from user-supplied data.
Three reusable patterns from this build worth studying:
/* ── 1. Debounced auto-save ───────────────────────────────── */
var autoTimer = null;
function scheduleAutoSave() {
clearTimeout(autoTimer);
autoTimer = setTimeout(function () { saveData(false); }, 900);
}
// Every keystroke resets the 900 ms clock.
// Only the pause after typing actually triggers a save.
/* ── 2. Auto-grow sentinel ────────────────────────────────── */
wordIn.addEventListener('input', function () {
var allRows = tableBody.querySelectorAll('tr');
if (tr === allRows[allRows.length - 1] && wordIn.value.trim()) {
growTable(ADD_COUNT); // append 5 more rows
}
});
/* ── 3. Print-only block ──────────────────────────────────── */
/* In CSS: */
.cwc-print-header { display: none; } /* hidden on screen */
@media print {
.cwc-print-header { display: flex !important; } /* shown on print */
#mainNav, footer, .cwc-actions-bar { display: none !important; }
* { print-color-adjust: exact !important; }
}
These three techniques — debounce, sentinel, and print-toggle — combine to make the app feel professional without requiring a server, a database, or any backend at all.
The Code Word Collector targets the exact moment in a CS class when a teacher introduces key vocabulary: algorithm, boolean, iteration, abstraction. Students often copy terms on paper and lose them; others type into a notes app and can’t find them later. This tool gives each term its own numbered row with a comment column for the student’s own definition or an example the teacher used.
The “digging for gold” metaphor does real pedagogical work. It reframes passive note-taking as active collection — the student is mining, not just listening. Each code word is a coin. The Comment column is where the student makes each coin their own.
The print output is intentionally minimal: no nav, no hero, no decorations — just name, period, date, and the table. The teacher can scan 30 printed sheets quickly. The teal header row with white bold text matches the PowerPoint reference the teacher already uses, so the output will look familiar on both sides of the desk.
- Export to CSV — add a button that builds a comma-separated string from the row data and triggers a file download using a
data:URL. Students could then open their list in a spreadsheet. - Subject presets — a dropdown that pre-fills the Period/Subject field and maybe sets a subject-specific color theme.
- Star / flag a row — let students mark entries they want to study later; the print output could highlight those rows.
- Multiple sessions — store a list of sessions (by date) instead of a single save slot so students can compare vocabulary from different class days.
I’m very pleased with this design; let’s incorporate it into the TNT framework by creating a card on the js apps page (use the gold coins icon you used in the app). We’ll need to add it to the news page as well as the explore page: I’d say it’s obviously a SPARK-type app as well as a Utility type app. In the Resources page, I could see it as either a ‘Learning and Reference’ resource and/or a TNT’s own Resources type classification. Your view? Please make the necessary updates to the chatlog.
The Code Word Collector belongs in TNT’s Own Resources, not in Learning & Reference. The Learning & Reference category is reserved for external knowledge sites — W3Schools, MDN, Bootstrap docs, CSS-Tricks — places a student visits to look something up. The Code Word Collector is not a reference: it contains no content to consult. It is a capture instrument used during class to collect the content that exists only in the teacher’s voice.
The precedent is clear: DWR & Eureka (a bug log), Past Blasts (a site history archive), and Explore! (an app index) are all internal instruments TNT built to serve students. The Code Word Collector joins that family. Cross-listing it in Learning & Reference would misrepresent its purpose and dilute the clarity of both categories — a student looking for W3Schools should not scroll past a classroom form.
Integration completed across five files:
js_apps.html
+ Code Word Collector figure with inline fas fa-coins span (gold #c9972b,
70×70 px matching .app-icon standard; no PNG equivalent in images/)
→ lastUpdate updated to 07/22/2026
explore.html (SPARK offcanvas)
+ Code Word Collector [JS badge]
+ Code Word Collector Chat Log [S.P.A.R.K. badge]
added after Radical Rules Chat Log entry
explore.html (Utilities offcanvas)
+ Code Word Collector [JS badge]
added after Password Generator
explore.html (Utilities category card)
+ Code Word Collector featured link with fa-coins icon
news.html
+ Entry #034: "Code Word Collector — Mining Vocabulary Gold During Class"
inserted as newest entry at top of newsAccordion2026
resources.html (TNT's Own Resources accordion)
+ Code Word Collector resource card
added after the Explore! card
NOT added to Learning & Reference (see decision box)
The JS Apps icon uses a Font Awesome fas fa-coins inline <span> rather than a PNG because no matching coin image exists in the root images/ folder. The span uses display:flex;align-items:center;justify-content:center to replicate the 70×70px .app-icon footprint without requiring a CSS file change.
The Code Word Collector is dual-listed in S.P.A.R.K. and Utilities on the Explore page. The S.P.A.R.K. listing is justified by the development method: this chatlog documents the full S.P.A.R.K. process from goal to integration, and the chatlog is linked directly from the app. The Utilities listing is justified by function: like the Password Generator, this is a practical tool that solves a specific classroom problem with satisfying elegance — no backend, no login, works offline, prints cleanly.
The app was not cross-listed in Styling (no novel CSS technique is the primary lesson), Text-Based (the text manipulation is incidental), or Games. Category assignments should reflect what a student can do with the app or learn from studying it, not merely which technologies it used to build it.