Skip to content

Render the trace diagrams in misconception explainers - #177

Merged
sidprasad merged 1 commit into
mainfrom
fix/explainer-trace-diagrams
Jul 25, 2026
Merged

Render the trace diagrams in misconception explainers#177
sidprasad merged 1 commit into
mainfrom
fix/explainer-trace-diagrams

Conversation

@sidprasad

Copy link
Copy Markdown
Contributor

What was wrong

The "recommended review" card on the home page embeds a misconception explainer fragment, and two of the eight (implicitf, exclusiveu) build their argument around trace diagrams. index.html was the one page emitting .trace-diagram markup without loading tracerenderer.js, so those diagrams stayed empty <div>s.

The Finally explainer ended on "Thus both these traces satisfy F p:" followed by nothing; the Until explainer's closing sentence ("This shows that x can still hold true when y is satisfied…") referred to a trace that wasn't there.

It read as intermittent because the card picks one explainer at random from the student's top two misconceptions, and most explainers have no traces to lose.

exercise.html and stepper.html already loaded the renderer and ran their own render pass, which is why traces worked everywhere else.

The fix

  • Load tracerenderer.js on the home page and run a render pass on DOMContentLoaded.
  • Collapse the three copies of that pass (home page, exercise questions, answer feedback) into one TraceRenderer.renderAll(root) helper, so the next page that emits trace markup only has to call it. Same semantics as before: descendants only, skip anything already carrying data-rendered, per-diagram try/catch.

renderAll deliberately has no visibility filter — exercise.html hides all but the current question and renders each one as it is shown, so diagram widths are measured against a laid-out container. That behavior is unchanged.

Verification

Ran the app locally and checked all three paths in a browser:

  • Home page — rendered index.html with each trace-bearing explainer forced into the review card. Both now draw: the Finally explainer's two traces (!p; cycle{p} and !p; !p; cycle{!p; p}) and the Until explainer's single trace. No console errors.
  • Exercise questions — the shown question's diagram renders; hidden questions stay unrendered until shown, at full container width.
  • Answer feedback — submitted a wrong trace-satisfaction answer; the per-state ✓/✗ feedback trace still renders.

331 passed on the Python suite.

Notes

Version bumped to 2.1.6 with a CHANGELOG entry.

The "recommended review" card on the home page embeds a misconception
explainer fragment, and two of the eight (implicitf, exclusiveu) build
their argument around trace diagrams. index.html was the only page
emitting .trace-diagram markup without loading tracerenderer.js, so
those diagrams stayed empty divs: the Finally explainer ended on "Thus
both these traces satisfy F p:" followed by nothing.

It read as intermittent because the card picks one explainer at random
from the student's top two misconceptions, and most explainers have no
traces to lose.

Load the renderer on the home page and run a render pass there. The
three copies of that pass (home page, exercise questions, answer
feedback) collapse into one TraceRenderer.renderAll(root), so the next
page to emit trace markup only has to call it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@sidprasad
sidprasad merged commit a3843d1 into main Jul 25, 2026
2 checks passed
@sidprasad
sidprasad deleted the fix/explainer-trace-diagrams branch July 25, 2026 13:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant