Visual Decision Tree | eLearningDesign.org

TitleSubtitle / Directions

Activity mode

Set the default here. Each question can use its own mode and incorrect-answer behavior.

Tree navigation

Guided Tree keeps the whole tree on screen: the route taken lights up, the branches not chosen fade back.

Branch Reveal (Guided Tree only)

Show the full map upfront, or hold it back so learners commit before seeing what they missed.

Viewport Height

Height (px) 700

Completion

Enable completion tracking

Correct leaf IDs (comma-separated) Max retries (0 = unlimited)

Typography

Font Family

Node Title Size 14px

Question Size 16px

Button Size 13px

Corner Rounding 10px

Tree Layout

Branch Spacing (side to side) 64px

Level Spacing (top to bottom) 90px

Node Width 360px

Image preview

Maximum image height 180px

Images keep their full proportions. Learners can enlarge them in the reading panel.

Question Nodes

Background Border Title Color Text Color

Outcome Nodes

Background Border Text Color

Each outcome's accent stripe uses the Leaf Color set on that node in the Content tab.

Buttons & Lines

Button Color Connector Lines Path Highlight

This is a Pro Generator

You can build and preview your interaction, but exporting requires a Pro subscription.

Upgrade to Pro

Uploaded images travel inside your exported code. Save an editable project to keep your pictures, content, and settings for next time.

Live Preview: dimensions in the live preview are not always to scale.

Select the small thumbnails to switch pictures. Open View images & details to inspect evidence and make a choice. This sample includes both retries and consequence branches.

⚡ Quick Build

Copy the prompt below, paste it into ChatGPT or Claude, then paste the JSON result back here.

Step 1: Copy this prompt

Create a visual decision tree for a learning activity. Return ONLY valid JSON, with no markdown, explanation, or HTML. Use this complete structure. Add as many question and outcome nodes as the scenario needs: { "title": "Activity title", "subtitle": "Inspect the pictures and information, then choose your next step.", "decisionMode": "practice", "nodes": [ { "id": "q1", "title": "First decision", "isLeaf": false, "images": [], "context": "Essential scenario information.", "detailsTitle": "Additional evidence", "details": "Optional longer information. Use \n\n between paragraphs.", "question": "What should the learner do?", "assessment": "inherit", "incorrectBehavior": "retry", "answers": [ { "label": "A correct action", "next": "leaf1", "correct": true, "feedback": "Explain why this action is appropriate." }, { "label": "A plausible incorrect action", "next": "", "correct": false, "feedback": "Explain the issue without simply repeating the answer." } ] }, { "id": "leaf1", "title": "Outcome", "isLeaf": true, "images": [], "context": "", "detailsTitle": "Additional information", "details": "", "body": "Explain the outcome and what the learner should take away.", "leafColor": "#0f766e", "answers": [] } ] } Rules: - Activity decisionMode is "explore" or "practice". Each question assessment is "inherit", "explore", or "practice". - A practice question needs at least two distinct choices. Mark every choice correct true or false, with at least one correct choice. The learner selects one choice at a time. - Each question independently uses incorrectBehavior "retry" or "branch". In retry mode, an incorrect choice stays at the same question and next may be empty. In branch mode, every choice needs an existing destination ID. - Correct choices always need an existing destination. Exploration choices also need a destination. Include every referenced node. - Feedback can be different for every answer, including exploration choices. Keep it specific to the learner's decision. - A consequence can lead to another question where the learner can recover. Use loops only when useful. - Each node, including outcomes, can have zero, one, or multiple images. Each image uses {"url":"https://...", "alt":"Description of visible evidence", "caption":"Caption"}. - Leave images empty unless I supply actual image links and descriptions. Never invent URLs or pretend to see an image. I can upload pictures after importing. - Keep the question separate from context, longer details, and image captions. - Use unique IDs beginning with a letter, such as q1 or leaf1. The first node is the starting point. My topic, evidence, images, and preferred behaviors: [DESCRIBE HERE]

Step 2: Paste the AI response

// ── Trace layer: full tree stays visible, chosen path highlighted ──
var TRACE_ON = (TRACE_MODE === 'trace');
var traceChoices = {}, tracePath = [], traceEdges = [], traceComplete = false;

function _tracePathId(f, t, l) {
  return 'ep-' + [f, t, l].map(function (s) {
    return String(s).replace(/[^a-z0-9]/gi, '');
  }).join('-');
}

function _svgMark(el, add) {
  var keep = (el.getAttribute('class') || '').split(/\s+/).filter(function (c) {
    return c && c !== 'on-path' && c !== 'off-path' && c !== 'pre-reveal';
  });
  if (add) keep.push(add);
  el.setAttribute('class', keep.join(' '));
}

function applyTrace() {
  if (!TRACE_ON) return;
  var onPath = {};
  tracePath.forEach(function (id) { onPath[id] = 1; });
  var started = tracePath.length > 1;
  var hideRest = (TRACE_REVEAL === 'end') && !traceComplete;

nodes.forEach(function (n) {
    var el = document.getElementById('node-' + n.id);
    if (!el) return;
    el.classList.remove('on-path', 'off-path');
    if (hideRest) {
      if (onPath[n.id]) {
        el.classList.remove('hidden-node');
        if (started) el.classList.add('on-path');
      } else {
        el.classList.add('hidden-node');
      }
      return;
    }
    el.classList.remove('hidden-node');
    if (!started) return;
    el.classList.add(onPath[n.id] ? 'on-path' : 'off-path');
  });

markTraceEdges();
}

// Edge marking lives on its own because the engine redraws edges inside a
// requestAnimationFrame after layout settles, which would wipe these classes.
function markTraceEdges() {
  if (!TRACE_ON) return;
  var svg = document.getElementById('svg-overlay');
  if (!svg) return;
  var onPath = {};
  tracePath.forEach(function (id) { onPath[id] = 1; });
  var started = tracePath.length > 1;
  var hideRest = (TRACE_REVEAL === 'end') && !traceComplete;
  var onEdge = {};
  traceEdges.forEach(function (e) { onEdge[_tracePathId(e.from, e.to, e.label)] = 1; });

// SVG elements: set the class attribute directly. SVGElement.classList is
  // unreliable in older LMS webviews, and the engine writes class the same way.
  svg.querySelectorAll('.ep').forEach(function (p) {
    var isOn = !!onEdge[p.getAttribute('id')];
    _svgMark(p, hideRest ? (isOn ? 'on-path' : 'pre-reveal')
                         : (!started ? '' : (isOn ? 'on-path' : 'off-path')));
  });

svg.querySelectorAll('.el').forEach(function (t) {
    var tp = t.querySelector('textPath');
    var href = tp ? (tp.getAttribute('href') || tp.getAttribute('xlink:href') || '') : '';
    var isOn = !!onEdge[href.replace('#', '').replace(/-r$/, '')];
    _svgMark(t, hideRest ? (isOn ? 'on-path' : 'pre-reveal')
                         : (!started ? '' : (isOn ? 'on-path' : 'off-path')));
  });
}

if (TRACE_ON) {
  viewMode = 'none'; // engine lays out and draws the complete tree

var _origRenderChart = renderChart;
  renderChart = function () { _origRenderChart(); applyTrace(); };

// The engine redraws edges again on the next frame to resolve label overlap.
  // Re-mark after every draw so the highlight survives that pass.
  var _origDrawEdges = drawEdges;
  drawEdges = function () { _origDrawEdges(); markTraceEdges(); };

onAnswerClick = function (e) {
    var btn = e.currentTarget;
    traceChoices[btn.dataset.from] = btn.dataset.label;
    rebuildTrace();
    renderChart();
    if (completionEnabled && traceComplete) {
      var last = tracePath[tracePath.length - 1];
      if (completionLeafIds.has(last)) isCompleted = true;
      else attemptsUsed++;
    }
    updateResetBtn();
  };

var _origReset = resetChart;
  resetChart = function () {
    traceChoices = {};
    isCompleted = false;
    attemptsUsed = 0;
    rebuildTrace();
    _origReset();
  };

rebuildTrace();
}

// ── Constants ─────────────────────────────────────────────────────
let NODE_W  = 240;
let COL_GAP = 64;
let ROW_GAP = 90;
const PAD     = 25;
// Arrowhead dimensions (userSpaceOnUse)
const ARW = 10; // length of arrow (base → apex)
const ARH = 8;  // height of arrow (full, apex is at ARH/2)

// ── State ─────────────────────────────────────────────────────────
let nodes    = [];
let nodeMap  = {};
// viewMode: 'none' | 'single' | 'backtrack' | 'reveal'
let viewMode = 'single';
let zoomLevel = 1.0; // canvas scale

// Completion
let completionEnabled = false;
let completionLeafIds = new Set();
let maxRetries        = 3;   // 0 = unlimited
let attemptsUsed      = 0;
let isCompleted       = false;

// Labels
let labelReset            = 'Reset';
let labelTryAgain         = 'Try again ({n} left)';
let labelTryAgainUnlimited = 'Try again';
let labelCompleted        = 'Completed';

// All active edges: [{from, label, to}]
let clickedEdges = [];
// selectedAnswers[nodeId] = Set of selected labels
let selectedAnswers = {};
// visible sets
let activePath    = new Set(); // single / backtrack
let revealedNodes = new Set(); // reveal

// Layout
let positions = {};
let canvasW = 800, canvasH = 600;
let _topPad = PAD; // set by buildLayout, used by refineHeights

// Pan
let panX = 0, panY = 0;
let dragStartX = 0, dragStartY = 0;
let dragOriginX = 0, dragOriginY = 0;
let isDragging = false, dragMoved = false;
let panInitialised = false;

const viewport = document.getElementById('viewport');
const resetBtn = document.getElementById('reset-btn');

// ── Layout engine ─────────────────────────────────────────────────
// Subtree-width layout against the currently-active edge graph.
// Each node's visible children get their own non-overlapping column slice.

// In 'none' mode we pre-compute a BFS depth for every node from the static
// answer graph, ignoring back-edges (edges to already-visited nodes).
// This prevents cycles from exploding the layout.
let noneBfsDepth = {}; // nodeId -> depth, only used in 'none' mode

// Return the pixel width of a node (custom or default)
function nodeW(nodeId) {
  return Math.min(nodeMap[nodeId]?.nodeWidth || NODE_W, Math.max(240, viewport.clientWidth - 28));
}

// subtreePixelWidth: total pixel width this subtree needs (including gaps)
function subtreePixelWidth(nodeId, visited) {
  const v2 = new Set(visited); v2.add(nodeId);
  const children = activeChildIds(nodeId, v2);
  if (!children.length) return nodeW(nodeId);
  // sum of children widths + gaps between them
  const childrenPx = children.reduce((s, cid) => s + subtreePixelWidth(cid, v2), 0)
    + (children.length - 1) * COL_GAP;
  // node itself must be at least as wide as its children span
  return Math.max(nodeW(nodeId), childrenPx);
}

// assignPos in pixel space
function assignPos(nodeId, depth, startX, visited) {
  if (visited.has(nodeId)) return;
  visited.add(nodeId);
  const v2 = new Set(visited);
  const children = activeChildIds(nodeId, v2);
  const totalPx = subtreePixelWidth(nodeId, new Set(visited));
  // Centre this node over its subtree
  const cx = startX + totalPx / 2;
  positions[nodeId] = {
    x: cx - nodeW(nodeId) / 2,
    y: PAD + depth * (160 + ROW_GAP), // refined after render
    depth,
    cx // store centre x for edge drawing
  };
  // Distribute children
  if (children.length) {
    const childrenTotalPx = children.reduce((s, cid) => s + subtreePixelWidth(cid, new Set(visited)), 0)
      + (children.length - 1) * COL_GAP;
    let x = startX + (totalPx - childrenTotalPx) / 2;
    children.forEach(cid => {
      const cw = subtreePixelWidth(cid, new Set(visited));
      assignPos(cid, depth + 1, x, new Set(visited));
      x += cw + COL_GAP;
    });
  }
}

// ── Render ────────────────────────────────────────────────────────
function renderChart() {
  try {
  buildLayout();

const canvas = document.getElementById('chart-canvas');
  const svg    = document.getElementById('svg-overlay');
  canvas.innerHTML = '';
  canvas.appendChild(svg);

// Arrowhead marker.
  // refX="0" → the BASE (wide end) of the triangle attaches to the path endpoint.
  // The APEX (tip) protrudes ARW pixels forward in the path direction.
  // So we end the path ARW pixels ABOVE the target node top,
  // and the apex travels those ARW px to touch the box border exactly.
  svg.innerHTML = `<defs>
    <marker id="ah" markerWidth="${ARW}" markerHeight="${ARH}"
            refX="0" refY="${ARH / 2}"
            orient="auto" markerUnits="userSpaceOnUse">
      <polygon points="${ARW} ${ARH/2}, 0 0, 0 ${ARH}"
               fill="var(--line-color,#94a3b8)"/>
    </marker>
  </defs>`;

canvas.style.width  = canvasW + 'px';
  canvas.style.height = canvasH + 'px';
  svg.setAttribute('width',  canvasW);
  svg.setAttribute('height', canvasH);

document.getElementById('zoom-slider').value = Math.round(zoomLevel * 100);

// 'none' mode: all nodes visible
  if (viewMode === 'none') {
    nodes.forEach(n => revealedNodes.add(n.id));
  }
  const visible = (viewMode === 'reveal' || viewMode === 'none') ? revealedNodes : activePath;

nodes.forEach(node => {
    if (!positions[node.id]) return;
    const pos = positions[node.id];

const el = document.createElement('div');
    el.className = 'd-node' + (node.leaf ? ' leaf leaf-node' : '');
    el.id = 'node-' + node.id;
    el.style.left = pos.x + 'px';
    el.style.top  = pos.y + 'px';
    el.style.position = 'absolute'; // ensure relative positioning for badge
    if (node.leaf && node.leafColor) el.style.borderColor = node.leafColor;
    el.style.width = nodeW(node.id) + 'px';

if (node.leaf) {
      html += `<div class="leaf-body">${node.body || ''}</div>`;
    } else {
      html += `<div class="node-question">${node.question || ''}</div>`;
      html += `<div class="answer-row" id="ar-${node.id}"></div>`;
    }

el.innerHTML = html;
    if (!visible.has(node.id)) el.classList.add('hidden-node');
    canvas.appendChild(el);
    wireNodeMedia(el,node);

if (!node.leaf && node.answers) {
      const row    = el.querySelector('.answer-row');
      const selSet = selectedAnswers[node.id] || new Set();
      node.answers.forEach(a => {
        const btn = document.createElement('button');
        btn.className   = 'answer-btn';
        btn.textContent = a.label;
        btn.dataset.from  = node.id;
        btn.dataset.label = a.label;
        btn.dataset.to    = a.next;
        // Stop pointerdown from starting a canvas drag
        btn.addEventListener('pointerdown', e => e.stopPropagation());
        btn.addEventListener('click', onAnswerClick);
        const isSel = selSet.has(a.label);
        if (isSel) btn.classList.add('selected');
        if (selSet.size > 0 && !isSel) {
          if (viewMode === 'single') btn.classList.add('dimmed');
          else if (viewMode === 'backtrack') btn.classList.add('dimmed-soft');
        }
        // Per-answer colour override
        if (a.color) {
          btn.style.borderColor = a.color;
          btn.style.color = isSel ? '#fff' : a.color;
          btn.style.backgroundColor = isSel ? a.color : 'transparent';
          btn.addEventListener('mouseenter', () => {
            if (!btn.classList.contains('dimmed')) {
              btn.style.backgroundColor = a.color;
              btn.style.color = '#fff';
            }
          });
          btn.addEventListener('mouseleave', () => {
            if (!btn.classList.contains('selected')) {
              btn.style.backgroundColor = 'transparent';
              btn.style.color = a.color;
            }
          });
        }
        row.appendChild(btn);
      });
    }
  });

requestAnimationFrame(() => {
    refineHeights();
    requestAnimationFrame(() => {
      updateZoomOrigin();
      drawEdges();
      requestAnimationFrame(() => avoidLabelNodeOverlap());
      if (!panInitialised) {
        // Centre horizontally, but pin the top of the canvas to a small fixed offset
        const rootId  = nodes[0]?.id;
        const rootPos = rootId ? positions[rootId] : null;
        const rw      = rootId ? nodeW(rootId) : NODE_W;
        panX = rootPos ? viewport.clientWidth / 2 - (rootPos.x + rw / 2) * zoomLevel : 0;
        panY = 15 - (rootPos ? rootPos.y * zoomLevel : 0); // pin the first card to the viewport top
        clampPan();
        applyPan();
        panInitialised = true;
      }
    });
  });
  } catch(err) {
    console.error('renderChart error:', err);
    // Show error in viewport so it's visible without devtools
    const vp = document.getElementById('viewport');
    if (vp) {
      const msg = document.createElement('div');
      msg.style.cssText = 'position:absolute;top:20px;left:20px;right:20px;background:#fee2e2;border:1px solid #ef4444;border-radius:8px;padding:12px;font-size:13px;color:#991b1b;z-index:99;white-space:pre-wrap';
      msg.textContent = 'Chart error: ' + err.message;
      vp.appendChild(msg);
    }
  }
}

// ── Per-colour arrowhead markers ─────────────────────────────────
// SVG markers can't use CSS variables for fill when the marker is referenced
// by a path on a different element, so we create a dedicated <marker> element
// for each unique colour used by an answer.
function ensureMarker(svg, color) {
  // Use a safe ID derived from the colour hex
  const id = 'ah-' + color.replace(/[^a-zA-Z0-9]/g, '');
  if (!svg.querySelector('#' + id)) {
    const defs = svg.querySelector('defs');
    const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
    marker.setAttribute('id', id);
    marker.setAttribute('markerWidth', ARW);
    marker.setAttribute('markerHeight', ARH);
    marker.setAttribute('refX', '0');
    marker.setAttribute('refY', ARH / 2);
    marker.setAttribute('orient', 'auto');
    marker.setAttribute('markerUnits', 'userSpaceOnUse');
    const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    poly.setAttribute('points', `${ARW} ${ARH/2}, 0 0, 0 ${ARH}`);
    poly.setAttribute('fill', color);
    marker.appendChild(poly);
    defs.appendChild(marker);
  }
  return id;
}

// ── Draw edges ────────────────────────────────────────────────────
function drawEdges() {
  const svg = document.getElementById('svg-overlay');
  [...svg.querySelectorAll('.ep,.el')].forEach(e => e.remove());
  // Also remove stale reversed label paths from defs (they have ids ending in '-r')
  [...svg.querySelectorAll('defs path[id$="-r"]')].forEach(e => e.remove());

// In 'none' mode draw all static answer edges; otherwise draw clicked edges
  const edgesToDraw = viewMode === 'none'
    ? nodes.flatMap(n => (n.answers || []).map(a => ({ from: n.id, label: a.label, to: a.next })))
    : clickedEdges;

edgesToDraw.forEach(edge => {
    const fp = positions[edge.from];
    const tp = positions[edge.to];
    if (!fp || !tp) return;
    const fEl = document.getElementById('node-' + edge.from);
    const tEl = document.getElementById('node-' + edge.to);
    if (!fEl || !tEl) return;

const fH = fEl.offsetHeight;
    const tH = tEl.offsetHeight;
    const isBackEdge = tp.depth <= fp.depth;

let d, lx, ly;

const fW = nodeW(edge.from);
    const tW = nodeW(edge.to);
    const fCx = fp.cx ?? (fp.x + fW / 2);
    const tCx = tp.cx ?? (tp.x + tW / 2);
    // Look up per-answer colour for this edge
    const srcNode   = nodeMap[edge.from];
    const edgeAns   = srcNode?.answers?.find(a => a.label === edge.label);
    const edgeColor = edgeAns?.color || null;

if (!isBackEdge) {
      // Forward edge: bottom-centre of source → top-centre of target
      const x1 = fCx;
      const y1 = fp.y + fH;
      const x2 = tCx;
      const y2 = tp.y - ARW;  // path ends here; apex extends ARW to touch box top
      const cy = (y1 + y2) / 2;
      d  = `M ${x1} ${y1} C ${x1} ${cy}, ${x2} ${cy}, ${x2} ${y2}`;
      lx = (x1 + x2) / 2;
      ly = cy - 8;
    } else {
      // Back / circular edge: horizontal side routing.
      // Exit from whichever side of the source is closest to the target (by centre x).
      // The arrowhead enters the near side of the target.
      // refX=0 means the marker BASE is at the path endpoint; the APEX protrudes
      // ARW px further in the path direction, so:
      //   rightward: path ends ARW to the LEFT of target right-side  -  wait, we enter LEFT side of target
      //     x2 = tp.x - ARW  → base at tp.x-ARW, apex reaches tp.x (left edge) ✔
      //   leftward:  path ends ARW to the RIGHT of target left-side  -  we enter RIGHT side of target
      //     x2 = tp.x + tW + ARW → base at tp.x+tW+ARW, apex reaches tp.x+tW (right edge) ✔
      const sideOff = 80;
      // In single/backtrack there's only one path so always route right to keep it consistent.
      // In reveal/none use centre comparison to pick the closest side.
      const exitRight = (viewMode === 'single' || viewMode === 'backtrack')
        ? true
        : fCx < tCx;
      // Source exit point
      const x1 = exitRight ? fp.x + fW : fp.x;
      const y1 = fp.y + fH / 2;
      // Target entry: in single/backtrack both exit and entry are on the RIGHT,
      // so x2 is outside the right edge of the target (tp.x + tW + ARW).
      // In reveal/none entry mirrors exit side.
      const enterRight = (viewMode === 'single' || viewMode === 'backtrack') ? true : exitRight;
      const x2 = enterRight ? tp.x + tW + ARW : tp.x - ARW;
      const y2 = tp.y + tH / 2;
      // cp1 extends outward from x1 in the exit direction.
      // cp2 extends outward from x2 in the entry direction.
      const cp1x = exitRight  ? x1 + sideOff : x1 - sideOff;
      const cp2x = enterRight ? x2 + sideOff : x2 - sideOff;
      d  = `M ${x1} ${y1} C ${cp1x} ${y1}, ${cp2x} ${y2}, ${x2} ${y2}`;
      // Label at 2/5 along the path (biased toward source) to reduce overlap
      lx = x1 + (x2 - x1) * 0.4;
      ly = y1 + (y2 - y1) * 0.4 - 8;
    }

// Unique path id so the textPath label can reference it
    const pathId = 'ep-' + [edge.from, edge.to, edge.label]
      .map(s => s.replace(/[^a-z0-9]/gi, '')).join('-');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('class', 'ep');
    path.setAttribute('id', pathId);
    path.setAttribute('d', d);
    const strokeColor = edgeColor || 'var(--line-color,#94a3b8)';
    path.setAttribute('stroke', strokeColor);
    path.setAttribute('stroke-width', '2');
    path.setAttribute('fill', 'none');
    const markerId = edgeColor ? ensureMarker(svg, edgeColor) : 'ah';
    path.setAttribute('marker-end', `url(#${markerId})`);
    svg.appendChild(path);

// For the label we need a path that always travels left-to-right so text
    // isn't rendered upside-down. We check the x direction of the path and if
    // it goes right-to-left we register a reversed version in <defs>.
    const [startX, startY] = d.match(/M ([\d.]+) ([\d.]+)/).slice(1).map(Number);
    const endMatch = d.match(/[\d.]+\s+([\d.]+)\s*$/);
    const endX = parseFloat(d.trimEnd().split(/\s+/).at(-2));
    const goesRTL = endX < startX;
    let labelPathId = pathId;
    if (goesRTL) {
      // Create a reversed path (end → start) so textPath reads L→R
      labelPathId = pathId + '-r';
      if (!svg.querySelector('#' + labelPathId)) {
        // Reverse a cubic bezier M x1 y1 C cp1x cp1y, cp2x cp2y, x2 y2
        // becomes M x2 y2 C cp2x cp2y, cp1x cp1y, x1 y1
        const nums = d.replace(/[MC,]/g,' ').trim().split(/\s+/).map(Number);
        // nums: x1 y1 cp1x cp1y cp2x cp2y x2 y2
        const [x1,y1,cp1x,cp1y,cp2x,cp2y,x2,y2] = nums;
        const rev = `M ${x2} ${y2} C ${cp2x} ${cp2y}, ${cp1x} ${cp1y}, ${x1} ${y1}`;
        const rpath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        rpath.setAttribute('id', labelPathId);
        rpath.setAttribute('d', rev);
        rpath.setAttribute('fill', 'none');
        rpath.setAttribute('stroke', 'none');
        svg.querySelector('defs').appendChild(rpath);
      }
    }

// Approximate pixel length of the edge for textLength (spreads chars to avoid box overlap)
    const dx = endX - startX;
    const endY = parseFloat(d.trimEnd().split(/\s+/).at(-1));
    const dy2 = endY - startY;
    const approxLen = Math.sqrt(dx*dx + dy2*dy2) * 0.8; // 80% of chord length

const lbl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    lbl.setAttribute('class', 'el');
    lbl.setAttribute('font-size', '11');
    lbl.setAttribute('font-family', 'system-ui,sans-serif');
    lbl.setAttribute('font-weight', '600');
    lbl.setAttribute('fill', strokeColor);  // match label to line/answer colour
    const tpath = document.createElementNS('http://www.w3.org/2000/svg', 'textPath');
    tpath.setAttribute('href', '#' + labelPathId);
    // RTL paths are reversed so text reads L→R. On the reversed path the
    // tangent points upward, so dy=-4 would push text further away from the
    // line. Use dy=+4 to compensate. LTR/vertical paths keep dy=-4.
    tpath.setAttribute('startOffset', '50%');
    tpath.setAttribute('text-anchor', 'middle');
    const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
    tspan.setAttribute('dy', '-4');
    tspan.textContent = edge.label;
    tpath.appendChild(tspan);
    lbl.appendChild(tpath);
    svg.appendChild(lbl);
  });
}

// ── Dynamic row gap expansion ─────────────────────────────────────
// Per-depth extra gap; reset each render.
let rowGapExtra = {};

// Estimate where a label will appear on a forward edge between two nodes.
// The label sits at startOffset=40% along the bezier. For a near-vertical
// cubic bezier M x1 y1 C x1 cy, x2 cy, x2 y2 where cy=(y1+y2)/2,
// the point at t=0.4 has y ≈ y1 + (y2-y1)*0.352 (cubic interpolation).
// We use this to find the label's approximate Y, then check whether it
// intrudes into the destination node's bounding box.
function avoidLabelNodeOverlap() {
  const LABEL_H   = 16;  // approximate rendered height of 11px bold text
  const LABEL_PAD = 8;   // padding above/below/around label
  const M_WIDTH   = 7.5; // conservative per-character width for 11px bold (em ~8px)
  let needsRelayout = false;

const edgesToCheck = viewMode === 'none'
    ? nodes.flatMap(n => (n.answers || []).map(a => ({ from: n.id, label: a.label, to: a.next })))
    : clickedEdges;

edgesToCheck.forEach(edge => {
    const fp = positions[edge.from];
    const tp = positions[edge.to];
    if (!fp || !tp) return;
    if (tp.depth <= fp.depth) return; // skip back-edges
    if (tp.depth !== fp.depth + 1) return; // only adjacent rows

const fEl = document.getElementById('node-' + edge.from);
    if (!fEl) return;
    const fH = fEl.offsetHeight;

const y1 = fp.y + fH;   // bottom of source node
    const y2 = tp.y - ARW;  // top of dest node
    const cy = (y1 + y2) / 2;

// Cubic bezier Y at t=0.4 with symmetric control points at cy
    const t = 0.4, mt = 1 - t;
    const labelY = mt*mt*mt*y1 + 3*mt*mt*t*cy + 3*mt*t*t*cy + t*t*t*y2;
    // Text is lifted 4px above the line (dy=-4), so label bottom = labelY - 4
    const labelBottom = labelY - 4;
    const nodeTop = tp.y;
    const intrusion = labelBottom - nodeTop;

// 2. Text-width minimum: ensure text fits in the base ROW_GAP.
    // Compare against ROW_GAP only (not the full y2-y1 which includes node heights)
    // to avoid double-counting when extra gap has already been added.
    const fCx = fp.cx ?? (fp.x + nodeW(edge.from) / 2);
    const tCx = tp.cx ?? (tp.x + nodeW(edge.to)   / 2);
    const dx = Math.abs(tCx - fCx);
    const pathLen = Math.sqrt(dx*dx + (y2-y1)*(y2-y1)) || 1;
    const sinAngle = Math.abs(y2 - y1) / pathLen;
    const textWidth = edge.label.length * M_WIDTH;
    const textVertical = LABEL_H + textWidth * sinAngle;
    const textShortfall = textVertical + LABEL_PAD * 2 - ROW_GAP;

const extra = Math.max(
      intrusion > 0 ? intrusion + LABEL_PAD : 0,
      textShortfall > 0 ? textShortfall : 0
    );
    if (extra > 0) {
      rowGapExtra[fp.depth] = Math.max(rowGapExtra[fp.depth] || 0, extra);
      needsRelayout = true;
    }
  });

if (needsRelayout) {
    refineHeightsWithExtra();
    drawEdges();
    const lastEdge = clickedEdges[clickedEdges.length - 1];
    if (lastEdge && positions[lastEdge.to]) centreNode(lastEdge.to, false);
  }
}

// refineHeights variant that applies rowGapExtra per depth row
function refineHeightsWithExtra() {
  const rowMaxH = {};
  Object.entries(positions).forEach(([id, pos]) => {
    const el = document.getElementById('node-' + id);
    if (!el) return;
    rowMaxH[pos.depth] = Math.max(rowMaxH[pos.depth] || 0, el.offsetHeight);
  });
  let y = _topPad;
  const depthVals = Object.values(positions).map(p => p.depth);
  const maxDepth  = depthVals.length ? Math.max(...depthVals) : 0;
  const rowY = {};
  for (let d = 0; d <= maxDepth; d++) {
    rowY[d] = y;
    const extra = rowGapExtra[d] || 0;
    y += (rowMaxH[d] || 160) + ROW_GAP + extra;
  }
  canvasH = y + PAD;
  Object.entries(positions).forEach(([id, pos]) => {
    pos.y = rowY[pos.depth];
    const el = document.getElementById('node-' + id);
    if (el) el.style.top = pos.y + 'px';
  });
  const canvas = document.getElementById('chart-canvas');
  const svgEl  = document.getElementById('svg-overlay');
  canvas.style.height = canvasH + 'px';
  svgEl.setAttribute('height', canvasH);
}

// ── Zoom ──────────────────────────────────────────────────────────
function onZoom(val) {
  const newZoom = val / 100;
  // Anchor zoom to the viewport top-centre (above the root node).
  // A canvas point (anchorCx, anchorCy) currently appears at viewport position:
  //   vpX = panX + anchorCx * oldZoom
  //   vpY = panY + anchorCy * oldZoom
  // We want it to remain at the same viewport position after zoom:
  //   panX_new = vpX - anchorCx * newZoom
  const rootId  = nodes[0]?.id;
  const rootPos = rootId ? positions[rootId] : null;
  const nodeW   = rootPos ? (nodeMap[rootId]?.nodeWidth || NODE_W) : NODE_W;
  const anchorCx = rootPos ? rootPos.x + nodeW / 2 : canvasW / 2;
  const anchorCy = rootPos ? rootPos.y              : 0;
  const vpX = panX + anchorCx * zoomLevel;
  const vpY = panY + anchorCy * zoomLevel;
  panX = vpX - anchorCx * newZoom;
  panY = vpY - anchorCy * newZoom;
  zoomLevel = newZoom;
  clampPan();
  applyPan();
}

// ── Answer click ──────────────────────────────────────────────────
function onAnswerClick(e) {
  // Do NOT gate on dragMoved here  -  pointerdown on buttons stops propagation
  // so the drag system never sees button presses. dragMoved stays false.
  const btn   = e.currentTarget;
  const from  = btn.dataset.from;
  const label = btn.dataset.label;
  const to    = btn.dataset.to;

if (viewMode === 'single') {
    // Single path: replace the entire path from this node downward.
    const isBackRef = activePath.has(to); // target already visited = back-reference
    pruneFrom(from);
    selectedAnswers[from] = new Set([label]);
    clickedEdges.push({ from, label, to });
    activePath.add(to);
    revealedNodes.add(to);
    if (isBackRef) {
      // Stuck in a loop  -  render first, then update label + flash.
      if (completionEnabled) attemptsUsed++;
      renderChart();
      // updateResetBtn AFTER renderChart so it isn't overwritten by renderChart's own call
      if (completionEnabled) {
        updateResetBtn();
        setTimeout(() => {
          resetBtn.classList.remove('flashing');
          void resetBtn.offsetWidth;
          resetBtn.classList.add('flashing');
          resetBtn.addEventListener('animationend', () => resetBtn.classList.remove('flashing'), { once: true });
        }, 200);
      }
      return;
    }
  } else if (viewMode === 'backtrack') {
    // Backtrack: re-choosing at any node prunes everything below it,
    // then sets the new selection. Allows going back and making a different choice.
    pruneFrom(from);
    selectedAnswers[from] = new Set([label]);
    clickedEdges.push({ from, label, to });
    activePath.add(to);
    revealedNodes.add(to);

} else {
    // Reveal: add this edge if not already present; accumulate selections.
    const exists = clickedEdges.some(ed => ed.from === from && ed.to === to);
    if (!exists) clickedEdges.push({ from, label, to });
    if (!selectedAnswers[from]) selectedAnswers[from] = new Set();
    selectedAnswers[from].add(label);
    revealedNodes.add(from);
    revealedNodes.add(to);
  }

renderChart();
  requestAnimationFrame(() => requestAnimationFrame(() => centreNode(to, true)));
  checkCompletion(to);
}

// Remove all outgoing edges from nodeId and prune all their descendants.
// The node itself (nodeId) stays in activePath / revealedNodes so it
// remains visible  -  only its children and below are erased.
function pruneFrom(nodeId) {
  // Build the set of ancestors (root → nodeId chain) so we never delete them,
  // even if a back-edge leads to them during the descendant walk.
  const ancestors = new Set();
  (function markAncestors(id) {
    if (ancestors.has(id)) return;
    ancestors.add(id);
    clickedEdges.forEach(edge => {
      if (edge.to === id) markAncestors(edge.from);
    });
  })(nodeId);

const toRemove = new Set();
  // visited starts with nodeId and all ancestors so we never re-enter them
  const visited  = new Set(ancestors);

// Collect direct outgoing edges from nodeId
  const stack = [];
  clickedEdges.forEach(edge => {
    if (edge.from === nodeId) {
      toRemove.add(edge);
      if (!visited.has(edge.to)) stack.push(edge.to);
    }
  });

// Walk descendants; skip anything that is an ancestor (back-edge target)
  while (stack.length) {
    const id = stack.pop();
    if (visited.has(id)) continue;
    visited.add(id);
    activePath.delete(id);
    revealedNodes.delete(id);
    delete selectedAnswers[id];
    clickedEdges.forEach(edge => {
      if (edge.from === id) {
        toRemove.add(edge);
        if (!visited.has(edge.to)) stack.push(edge.to);
      }
    });
  }

// Clear the selection on the node making the new choice (not its ancestors)
  delete selectedAnswers[nodeId];
  clickedEdges = clickedEdges.filter(e => !toRemove.has(e));
}

// ── Pan / drag ────────────────────────────────────────────────────
function applyPan() {
  // transform-origin is always 0 0.
  // panX/panY are in viewport pixels. The canvas pixel (cx,cy) appears at
  // viewport position (panX + cx*zoom, panY + cy*zoom).
  const canvas = document.getElementById('chart-canvas');
  canvas.style.transformOrigin = '0 0';
  canvas.style.transform = `translate(${panX}px,${panY}px) scale(${zoomLevel})`;
}

viewport.addEventListener('pointerdown', e => {
  if (e.target.tagName === 'BUTTON') return;
  isDragging  = true;
  dragMoved   = false;
  dragStartX  = e.clientX - panX;
  dragStartY  = e.clientY - panY;
  dragOriginX = e.clientX;
  dragOriginY = e.clientY;
  viewport.classList.add('dragging');
  viewport.setPointerCapture(e.pointerId);
});
viewport.addEventListener('pointermove', e => {
  if (!isDragging) return;
  const dx = e.clientX - dragOriginX, dy = e.clientY - dragOriginY;
  if (Math.sqrt(dx * dx + dy * dy) > 6) dragMoved = true;
  panX = e.clientX - dragStartX;
  panY = e.clientY - dragStartY;
  clampPan(); applyPan();
});
viewport.addEventListener('pointerup', () => {
  isDragging = false;
  dragMoved  = false; // reset immediately  -  not on a timeout
  viewport.classList.remove('dragging');
});
viewport.addEventListener('pointercancel', () => {
  isDragging = false;
  dragMoved  = false;
  viewport.classList.remove('dragging');
});

// ── Mouse wheel zoom ──────────────────────────────────────────────────
const ZOOM_MIN = 0.20, ZOOM_MAX = 1.50;

// Wheel zoom is only active after the user has clicked/tapped inside the
// viewport, and deactivates when the pointer leaves it. This prevents the
// scroll trap when the interactive is embedded in a scrolling page.
let wheelZoomActive = false;

viewport.addEventListener('pointerenter', () => {
  // Show a subtle focus ring so users know it's interactive, but don't
  // activate wheel zoom yet  -  wait for an explicit click/tap.
});
viewport.addEventListener('pointerleave', () => {
  wheelZoomActive = false;
});

function showRipple(x, y) {
  const el = document.createElement('div');
  el.className = 'scroll-ripple';
  el.style.left = x + 'px';
  el.style.top  = y + 'px';
  viewport.appendChild(el);
  el.addEventListener('animationend', () => el.remove());
}

viewport.addEventListener('click', e => {
  if (!wheelZoomActive) {
    // First click inside  -  activate wheel zoom and show ripple at cursor
    wheelZoomActive = true;
    const rect = viewport.getBoundingClientRect();
    showRipple(e.clientX - rect.left, e.clientY - rect.top);
  }
  // Already active  -  no ripple, no effect
});

viewport.addEventListener('wheel', e => {
  if (!wheelZoomActive) return; // let the page scroll normally
  e.preventDefault();
  // Anchor zoom to the pointer position in viewport space
  const rect    = viewport.getBoundingClientRect();
  const vx      = e.clientX - rect.left;  // pointer in viewport coords
  const vy      = e.clientY - rect.top;
  // Canvas-space point currently under the pointer:
  const anchorCx = (vx - panX) / zoomLevel;
  const anchorCy = (vy - panY) / zoomLevel;
  // Compute new zoom level
  const delta   = e.deltaY < 0 ? 1.08 : 1 / 1.08;
  const newZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, zoomLevel * delta));
  // Adjust pan so the canvas point under the pointer stays fixed
  panX = vx - anchorCx * newZoom;
  panY = vy - anchorCy * newZoom;
  zoomLevel = newZoom;
  clampPan();
  applyPan();
  // Sync slider
  document.getElementById('zoom-slider').value = Math.round(zoomLevel * 100);
}, { passive: false });

// ── Pinch-to-zoom (touch) ───────────────────────────────────────────
let activeTouches = {}; // pointerId -> {x,y}
let lastPinchDist = null;
let lastPinchMid  = null;

viewport.addEventListener('pointerdown', e => {
  if (e.pointerType === 'touch') activeTouches[e.pointerId] = { x: e.clientX, y: e.clientY };
}, true); // capture so it fires alongside the existing drag handler

viewport.addEventListener('pointermove', e => {
  if (e.pointerType !== 'touch') return;
  activeTouches[e.pointerId] = { x: e.clientX, y: e.clientY };
  const pts = Object.values(activeTouches);
  if (pts.length !== 2) { lastPinchDist = null; lastPinchMid = null; return; }

// Two-finger pinch
  const [a, b] = pts;
  const dist = Math.hypot(a.x - b.x, a.y - b.y);
  const mid  = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };

if (lastPinchDist !== null) {
    const rect    = viewport.getBoundingClientRect();
    const vx      = mid.x - rect.left;
    const vy      = mid.y - rect.top;
    const anchorCx = (vx - panX) / zoomLevel;
    const anchorCy = (vy - panY) / zoomLevel;
    const delta   = dist / lastPinchDist;
    const newZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, zoomLevel * delta));
    panX = vx - anchorCx * newZoom;
    panY = vy - anchorCy * newZoom;
    zoomLevel = newZoom;
    clampPan();
    applyPan();
    document.getElementById('zoom-slider').value = Math.round(zoomLevel * 100);
  }
  lastPinchDist = dist;
  lastPinchMid  = mid;
}, true);

viewport.addEventListener('pointerup', e => {
  if (e.pointerType === 'touch') delete activeTouches[e.pointerId];
  if (Object.keys(activeTouches).length < 2) { lastPinchDist = null; lastPinchMid = null; }
}, true);
viewport.addEventListener('pointercancel', e => {
  if (e.pointerType === 'touch') delete activeTouches[e.pointerId];
  if (Object.keys(activeTouches).length < 2) { lastPinchDist = null; lastPinchMid = null; }
}, true);

// ── Completion ────────────────────────────────────────────────────
function checkCompletion(nodeId) {
  if (!completionEnabled) {
    if (nodeMap[nodeId]?.leaf) // completion
    return;
  }
  if (completionLeafIds.has(nodeId)) {
    isCompleted = true;
    // completion
    updateResetBtn();
  } else if (nodeMap[nodeId]?.leaf) {
    // Reached a non-completing leaf  -  count this as an attempt then update label
    attemptsUsed++;
    updateResetBtn();
    setTimeout(() => {
      resetBtn.classList.remove('flashing');
      void resetBtn.offsetWidth; // force reflow to restart animation
      resetBtn.classList.add('flashing');
      resetBtn.addEventListener('animationend', () => {
        resetBtn.classList.remove('flashing');
      }, { once: true });
    }, 200);
  }
}

// ── Reset ─────────────────────────────────────────────────────────
function resetChart() {
  if (completionEnabled && isCompleted) return; // locked after completion
  if (completionEnabled && maxRetries > 0 && attemptsUsed >= maxRetries) return;
  isCompleted = false;
  clickedEdges = []; selectedAnswers = {};
  const rootId  = nodes[0]?.id;
  activePath    = new Set(rootId ? [rootId] : []);
  revealedNodes = new Set(rootId ? [rootId] : []);
  panInitialised = false;
  renderChart();
  updateResetBtn();
}

// ── Utility ───────────────────────────────────────────────────────
function esc(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;')
    .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
// Galleries, reading panel, and optional answer feedback.
let decisionMode='explore';
let activeImages=Object.create(null);
let pendingDecision=null;
let decisionRecords=Object.create(null);
let advanceDecision=null;
const reader=document.getElementById('node-reader');
let readerNodeId=null,readerReturnFocus=null;
function isPractice(node){return !node.leaf&&(node.assessment==='practice'||(node.assessment!=='explore'&&decisionMode==='practice'))}
function nodeImages(node){return node.images||[]}
function imageIndex(node){return Math.min(activeImages[node.id]||0,Math.max(0,nodeImages(node).length-1))}
function thumbnailMarkup(node,readerView){
  const imgs=nodeImages(node),active=imageIndex(node);
  if(imgs.length<2)return '';
  return imgs.map((a,i)=>'<button type="button" class="gallery-thumb" data-gallery-index="'+i+'" aria-pressed="'+(i===active)+'" aria-label="Image '+(i+1)+(a.caption?': '+esc(a.caption):'')+'"><img src="'+esc(a.url)+'" alt="" draggable="false"><span>'+(i+1)+'</span></button>').join('');
}
function nodeMediaMarkup(node){
  const imgs=nodeImages(node),a=imgs[imageIndex(node)];let out='';
  if(a){
    out+='<figure class="node-figure"><button type="button" class="node-image-button" data-open-node aria-label="Inspect images for '+esc(node.title||node.id)+'"><img class="node-img" src="'+esc(a.url)+'" alt="'+esc(a.alt||'')+'" draggable="false"><span class="image-error" hidden></span></button><div class="node-thumbnails" role="group" aria-label="Images for '+esc(node.title||node.id)+'">'+thumbnailMarkup(node,false)+'</div><div class="gallery-count" aria-live="polite" '+(imgs.length>1?'':'hidden')+'>Image '+(imageIndex(node)+1)+' of '+imgs.length+'</div><figcaption '+(a.caption?'':'hidden')+'>'+esc(a.caption||'')+'</figcaption></figure>';
  }
  if(node.context)out+='<div class="node-context">'+esc(node.context)+'</div>';
  if(a||node.context||node.details)out+='<button type="button" class="node-open" data-open-node>'+(a?'View images &amp; details':'Read full information')+' <span aria-hidden="true">↗</span></button>';
  return out;
}
let imageLayoutFrame=0;
function reflowImageNodes(){cancelAnimationFrame(imageLayoutFrame);imageLayoutFrame=requestAnimationFrame(()=>{refineHeights();drawEdges();avoidLabelNodeOverlap()})}
function showImageError(img,node,index,error){const a=nodeImages(node)[index];img.hidden=true;error.hidden=false;error.textContent='Image unavailable. '+(a?.alt||'Please check the image source.');reflowImageNodes()}
function wireNodeMedia(el,node){
  el.querySelectorAll('[data-open-node]').forEach(btn=>{btn.addEventListener('pointerdown',e=>e.stopPropagation());btn.addEventListener('click',()=>openNodeReader(node.id,btn))});
  el.querySelectorAll('[data-gallery-index]').forEach(btn=>{btn.addEventListener('pointerdown',e=>e.stopPropagation());btn.addEventListener('click',()=>selectNodeImage(node.id,Number(btn.dataset.galleryIndex)))});
  const img=el.querySelector('.node-img');if(img){img.addEventListener('load',()=>{img.hidden=false;el.querySelector('.image-error').hidden=true;reflowImageNodes()});img.addEventListener('error',()=>showImageError(img,node,imageIndex(node),el.querySelector('.image-error')))}
}
function selectNodeImage(id,index){
  const node=nodeMap[id],a=node&&nodeImages(node)[index];if(!a)return;
  activeImages[id]=index;
  const el=document.getElementById('node-'+id);
  if(el){
    const img=el.querySelector('.node-img');if(img){img.hidden=false;img.alt=a.alt||'';img.src=a.url;el.querySelector('.image-error').hidden=true}
    const cap=el.querySelector('figcaption');if(cap){cap.textContent=a.caption||'';cap.hidden=!a.caption}
    const count=el.querySelector('.gallery-count');if(count)count.textContent='Image '+(index+1)+' of '+nodeImages(node).length;
    el.querySelectorAll('[data-gallery-index]').forEach(btn=>btn.setAttribute('aria-pressed',String(Number(btn.dataset.galleryIndex)===index)));
  }
  if(reader.open&&readerNodeId===id)updateReaderImage(node);
  reflowImageNodes();
}
function answerUnavailable(node,answer,btn){
  const el=document.getElementById('node-'+node.id);
  const retry=isPractice(node)&&node.incorrectBehavior!=='branch'&&answer.correct===false;
  return !!pendingDecision||!el||el.classList.contains('hidden-node')||el.classList.contains('off-path')||btn.classList.contains('dimmed')||(completionEnabled&&isCompleted)||(isPractice(node)&&typeof answer.correct!=='boolean')||(!retry&&!nodeMap[answer.next]);
}
function syncAnswerAccess(){
  document.querySelectorAll('.d-node').forEach(el=>{
    const node=nodeMap[el.id.slice(5)];if(!node)return;
    el.inert=el.classList.contains('hidden-node');
    el.querySelectorAll('.answer-btn').forEach((btn,i)=>{
      btn.dataset.index=String(i);btn.disabled=answerUnavailable(node,node.answers[i],btn);
      btn.classList.remove('result-correct','result-incorrect');
      const record=decisionRecords[node.id];
      if(record&&record.index===i&&isPractice(node))btn.classList.add(record.correct?'result-correct':'result-incorrect');
    });
  });
  if(reader.open){
    const source=document.getElementById('node-'+readerNodeId);
    const originals=source?source.querySelectorAll('.answer-btn'):[];
    document.querySelectorAll('#reader-answers .answer-btn').forEach((btn,i)=>{if(!originals[i])return;btn.disabled=originals[i].disabled;['result-correct','result-incorrect'].forEach(cls=>btn.classList.toggle(cls,originals[i].classList.contains(cls)))});
  }
}
function updateReaderImage(node){
  const imgs=nodeImages(node),index=imageIndex(node),a=imgs[index],img=document.getElementById('reader-image'),visual=document.getElementById('reader-visual');
  visual.hidden=!a;document.getElementById('reader-layout').classList.toggle('text-only',!a);
  if(!a){img.removeAttribute('src');return}
  const stage=document.getElementById('reader-image-stage');stage.classList.remove('zoomed');stage.scrollTop=0;stage.scrollLeft=0;img.style.width='';img.hidden=false;
  const zoom=document.getElementById('reader-zoom');zoom.textContent='Zoom image';zoom.setAttribute('aria-pressed','false');
  const error=document.getElementById('reader-image-error');error.hidden=true;img.alt=a.alt||'';
  img.onload=()=>{img.hidden=false;error.hidden=true};
  img.onerror=()=>{img.hidden=true;error.textContent='Image unavailable. '+(a.alt||'Please check the image source.');error.hidden=false};img.src=a.url;
  const cap=document.getElementById('reader-caption');cap.textContent=a.caption||'';cap.hidden=!a.caption;
  const thumbs=document.getElementById('reader-thumbnails');
  if(thumbs.dataset.node!==node.id){thumbs.innerHTML=thumbnailMarkup(node,true);thumbs.dataset.node=node.id;thumbs.querySelectorAll('[data-gallery-index]').forEach(btn=>btn.addEventListener('click',()=>selectNodeImage(node.id,Number(btn.dataset.galleryIndex))))}
  thumbs.querySelectorAll('[data-gallery-index]').forEach(btn=>btn.setAttribute('aria-pressed',String(Number(btn.dataset.galleryIndex)===index)));
  const count=document.getElementById('reader-image-count');count.textContent='Image '+(index+1)+' of '+imgs.length;count.hidden=imgs.length<2;
}
function openNodeReader(id,trigger){
  const node=nodeMap[id];if(!node)return;
  if(pendingDecision&&pendingDecision.from!==id)pendingDecision=null;
  readerNodeId=id;readerReturnFocus=trigger;
  const title=document.getElementById('reader-title');title.textContent=node.title||(node.leaf?'Outcome':'Decision');
  reader.classList.toggle('reader-outcome',!!node.leaf);
  document.getElementById('reader-kind').textContent=node.leaf?'Outcome':isPractice(node)?'Inspect and decide':'Explore the decision';
  updateReaderImage(node);
  const context=document.getElementById('reader-context');context.textContent=node.context||'';context.hidden=!node.context;
  document.getElementById('reader-details').hidden=!node.details;document.getElementById('reader-details-title').textContent=node.detailsTitle||'Additional information';document.getElementById('reader-details-text').textContent=node.details||'';
  document.getElementById('reader-question').innerHTML=node.leaf?node.body||'':node.question||'';
  document.getElementById('reader-feedback').hidden=true;
  const row=document.getElementById('reader-answers');row.replaceChildren();
  const source=document.getElementById('node-'+id);syncAnswerAccess();
  if(!node.leaf&&source)source.querySelectorAll('.answer-btn').forEach((original,i)=>{
    const btn=original.cloneNode(true);btn.removeAttribute('id');btn.dataset.index=String(i);
    btn.addEventListener('click',()=>{const live=document.getElementById('node-'+id)?.querySelectorAll('.answer-btn')[i];if(live&&!live.disabled)live.click()});row.appendChild(btn);
  });
  const note=document.getElementById('reader-note'),blocked=!!row.children.length&&Array.from(row.children).every(b=>b.disabled);
  note.hidden=!blocked;note.textContent=source?.classList.contains('off-path')?'This branch is outside your selected path. Return to the tree to change an earlier choice.':'These choices are currently unavailable.';
  if(!reader.open)reader.showModal();reader.scrollTop=0;title.focus({preventScroll:true});
  if(pendingDecision&&pendingDecision.from===id)showDecisionFeedback();
}
function closeNodeReader(){reader.close()}
reader.addEventListener('close',()=>{
  pendingDecision=null;syncAnswerAccess();
  const el=readerReturnFocus?.isConnected?readerReturnFocus:document.getElementById('node-'+readerNodeId)?.querySelector('[data-open-node]');if(el)el.focus({preventScroll:true});
});
reader.addEventListener('click',e=>{if(e.target===reader){const r=reader.getBoundingClientRect();if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)reader.close()}});
document.getElementById('reader-zoom').addEventListener('click',()=>{const stage=document.getElementById('reader-image-stage'),img=document.getElementById('reader-image'),zoomed=stage.classList.toggle('zoomed');img.style.width=zoomed?Math.max(img.naturalWidth,stage.clientWidth*1.8)+'px':'';const btn=document.getElementById('reader-zoom');btn.textContent=zoomed?'Fit image':'Zoom image';btn.setAttribute('aria-pressed',String(zoomed))});
function showDecisionFeedback(){
  const pending=pendingDecision;if(!pending)return;
  const node=nodeMap[pending.from],a=node.answers[pending.index],box=document.getElementById('reader-feedback');
  box.hidden=false;box.className='decision-feedback '+(pending.graded?(a.correct?'feedback-correct':'feedback-incorrect'):'feedback-neutral');
  document.getElementById('feedback-title').textContent=pending.graded?(a.correct?'Correct':'Incorrect'):'Your choice';
  document.getElementById('feedback-choice').textContent=a.label;
  document.getElementById('feedback-text').textContent=a.feedback||(pending.retry?'Review the images and information, then choose again.':pending.graded?(a.correct?'This is a correct choice. Continue to see the next step.':'This choice leads to a consequence. Continue to see what happens.'):'Continue to see what happens next.');
  const action=document.getElementById('feedback-action');action.textContent=pending.retry?'Try again':pending.graded&&!a.correct?'See the consequence':'Continue';
  document.getElementById('reader-note').hidden=true;syncAnswerAccess();
  requestAnimationFrame(()=>{box.scrollIntoView({block:'nearest',behavior:'instant'});action.focus({preventScroll:true})});
}
document.getElementById('feedback-action').addEventListener('click',()=>{
  const pending=pendingDecision;if(!pending)return;
  if(pending.retry){
    pendingDecision=null;document.getElementById('reader-feedback').hidden=true;syncAnswerAccess();
    const question=document.getElementById('reader-question');question.setAttribute('tabindex','-1');question.focus({preventScroll:true});question.scrollIntoView({block:'nearest',behavior:'instant'});
  }else advanceDecision(pending.from,pending.index);
});
function installDecisionBehavior(){
  const originalAnswer=onAnswerClick,originalReset=resetChart;
  advanceDecision=function(from,index){
    const node=nodeMap[from],a=node?.answers[index],btn=document.getElementById('node-'+from)?.querySelectorAll('.answer-btn')[index];
    if(!a||!btn||!nodeMap[a.next])return;
    pendingDecision=null;if(reader.open)reader.close();
    originalAnswer({currentTarget:btn});
    requestAnimationFrame(()=>requestAnimationFrame(()=>{
      centreNode(a.next,true);syncAnswerAccess();
      const next=document.getElementById('node-'+a.next),focus=next&&(next.querySelector('[data-open-node]')||next.querySelector('.answer-btn')||next);
      if(focus){if(focus.tabIndex<0)focus.tabIndex=-1;focus.focus({preventScroll:true})}
    }));
  };
  onAnswerClick=function(e){
    const btn=e.currentTarget,from=btn.dataset.from,node=nodeMap[from];if(!node||pendingDecision)return;
    const index=node.answers.findIndex(a=>a.label===btn.dataset.label),a=node.answers[index];
    if(!a||answerUnavailable(node,a,btn))return;
    const graded=isPractice(node);
    if(!graded&&!a.feedback){advanceDecision(from,index);return}
    if(graded)decisionRecords[from]={index:index,correct:a.correct};
    if(!reader.open||readerNodeId!==from)openNodeReader(from,btn);
    pendingDecision={from:from,index:index,graded:graded,retry:graded&&a.correct===false&&node.incorrectBehavior!=='branch'};
    showDecisionFeedback();
  };
  resetChart=function(){
    if(completionEnabled&&isCompleted)return;
    pendingDecision=null;decisionRecords=Object.create(null);activeImages=Object.create(null);if(reader.open)reader.close();originalReset();
  };
}
const originalVisualRender=renderChart;
renderChart=function(){originalVisualRender();requestAnimationFrame(syncAnswerAccess)};
window.addEventListener('resize',()=>{renderChart();requestAnimationFrame(()=>centreNode(readerNodeId||nodes[0]?.id,false))});
if(document.fonts)document.fonts.ready.then(reflowImageNodes);