Browser Random Assignment Summary

1. Behavior Summary

The app is built as a two-column reader layout inside a dark glassmorphism shell. Its advertised workflow is:

1. User pastes (or picks a sample) JSON URL hosted on producingtechnology.com.
2. The app fetches the JSON, expecting a MediaWiki-style payload with parse.text["*"] containing raw HTML.
3. It then “remixes” that HTML into:
   • A summary bar of three stat cards — Topic, Sections, Images.
   • A Quick Navigation sidebar linking to each section heading.
   • A cleaner, article-style body with a visual gallery of embedded images.

In its empty (pre-load) state, the app shows a prominent hero heading, a URL input prefilled with https://producingtechnology.com/a1/15-json/yourname.json, two buttons (Load JSON and Use Sample Path), a muted “No article loaded / Waiting for a JSON URL” placeholder card, empty stat cards (Topic: —, Sections: 0, Images: 0), and an explanatory “How this mock works” block describing the earlier Wikipedia API assignment flow this project remixes.

2. What Did Not Work As Expected

• The default URL is a literal placeholder, not a real file. The input is prefilled with .../a1/15-json/yourname.json. Clicking Load JSON on the pristine page produces Request failed with status 404 in the UI and Failed to load resource: the server responded with a status of 404 (Not Found) in the console.
• “Use Sample Path” does not load a sample. Clicking it simply re-inserts the exact same yourname.json placeholder into the URL field. It does not substitute a known-good URL, does not trigger an automatic fetch, and does not populate the view with any embedded example. In effect, the button is indistinguishable from a reset.
• No embedded fallback content. Unlike several other apps in the same viewer (e.g. MindFlow), this one has no bundled sample JSON. If the remote fetch fails — which it always does by default — there is no way to see what the “summary cards,” “section navigation,” or “visual gallery” described in the intro are supposed to look like.
• Error state is dead-end. The error chip reads “Load failed · Check your JSON URL” with a red banner. That’s clear, but there is no suggested URL, no link to an example hosted on the same origin, and no file-picker fallback — leaving the reviewer with nothing to inspect.
• Empty-state stat cards are static. The Topic / Sections / Images cards are rendered even before a load is attempted, which reads “broken” rather than “empty.” A skeleton-loading or hidden-until-ready approach would better communicate intent.
• Only a URL input — no file upload. Because the JSON must live on producingtechnology.com, a grader who has a JSON locally (or a slightly different URL) has no way to drop it in for inspection.

3. Prompt to Improve the App

Rewrite this Text Media JSON Viewer so it demonstrates itself out of the box and tolerates real-world input. Specifically:

1. Replace the literal yourname.json placeholder with a real, shipped sample file at a stable path (e.g. ./sample-article.json next to the HTML). The Use Sample Path button should populate this URL and auto-fetch so the page renders a complete demo article on first click, including populated Topic / Sections / Images cards, Quick Navigation sidebar, and an image gallery.
2. Bundle a second embedded JSON fallback (inline in a <script type="application/json"> block) so the app can render offline / on 404. On fetch failure, render the embedded sample and show a non-blocking banner “Live fetch failed — showing bundled example.”
3. Add a file upload input (accept=application/json) next to the URL field so a reviewer can drag-drop a local JSON without hosting it. Also allow pasting raw JSON into a textarea as a third input mode.
4. Make the summary cards skeleton-state-aware: during fetch, show shimmering placeholders; on success, animate counts up from zero; on error, dim the card and show the reason inline.
5. Validate the JSON shape before rendering (check for parse.text["*"]) and show a helpful error like “Loaded JSON does not look like a MediaWiki parse response — missing parse.text["*"]. Expected keys: parse.title, parse.text.” with an “Accept anyway” button for partial renders.
6. Improve accessibility: the Quick Navigation links should be real <a href="#id"> anchors with keyboard focus styles, and the image gallery should use <figure>/<figcaption> with alt text pulled from the source HTML where available.
7. Persist the last successfully loaded URL in localStorage so re-opening the page picks up where the reviewer left off.

Keep the project a single HTML file with vanilla JS so it continues to run inside the TERMINAL_VIEWER iframe without a build step.