Decision Tree

TitleSubtitle / Directions

Interaction Mode

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) 600

Completion

Enable completion tracking

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

Typography

Font Family

Node Title Size 12px

Question Size 15px

Button Size 13px

Corner Rounding 10px

Tree Layout

Branch Spacing (side to side) 64px

Level Spacing (top to bottom) 90px

Node Width 240px

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

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

// ── 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 nodeMap[nodeId]?.nodeWidth || NODE_W;
}

// 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;
    if (node.nodeWidth) { el.style.width = node.nodeWidth + '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);

if (!node.leaf && node.answers) {
      const row    = el.querySelector('#ar-' + node.id);
      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 ? (nodeMap[rootId]?.nodeWidth || NODE_W) : NODE_W;
        panX = rootPos ? viewport.clientWidth / 2 - (rootPos.x + rw / 2) * zoomLevel : 0;
        panY = 15; // small fixed top offset so root node sits near the 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);

// ── Lightbox ────────────────────────────────────────────────────
function openLightbox(imgEl) {
  const lb    = document.getElementById('lightbox');
  const lbImg = document.getElementById('lightbox-img');

// Snapshot position before anything moves
  const rect   = imgEl.getBoundingClientRect();
  const vpRect = viewport.getBoundingClientRect();
  const relLeft = rect.left - vpRect.left;
  const relTop  = rect.top  - vpRect.top;
  const vpW = viewport.clientWidth, vpH = viewport.clientHeight;
  const originX = ((relLeft + rect.width  / 2) / vpW * 100).toFixed(1) + '%';
  const originY = ((relTop  + rect.height / 2) / vpH * 100).toFixed(1) + '%';

// Fade out the source image as a loading indicator
  imgEl.classList.add('loading');

// Precache the full image before animating
  const preload = new Image();
  preload.onload = preload.onerror = () => {
    // Restore source image opacity
    imgEl.classList.remove('loading');

// Ghost clone zooms out from image position
    const ghost = document.createElement('img');
    ghost.className = 'lightbox-ghost';
    ghost.src = imgEl.src;
    ghost.style.left   = relLeft + 'px';
    ghost.style.top    = relTop  + 'px';
    ghost.style.width  = rect.width  + 'px';
    ghost.style.height = rect.height + 'px';
    viewport.appendChild(ghost);
    ghost.addEventListener('animationend', () => ghost.remove());

// Prepare lightbox image
    lbImg.src = imgEl.src;
    lbImg.classList.remove('lb-visible');
    lbImg.classList.add('lb-hidden');
    lbImg.style.transformOrigin = `${originX} ${originY}`;

lb.style.display = 'flex';
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        lb.classList.add('open');
        lbImg.style.transformOrigin = 'center center';
        lbImg.classList.remove('lb-hidden');
        lbImg.classList.add('lb-visible');
      });
    });
  };
  preload.src = imgEl.src;
}

function closeLightbox() {
  const lb    = document.getElementById('lightbox');
  const lbImg = document.getElementById('lightbox-img');
  lb.classList.remove('open');
  lbImg.classList.remove('lb-visible');
  lbImg.classList.add('lb-hidden');
  setTimeout(() => {
    lb.style.display = 'none';
    lbImg.classList.remove('lb-hidden');
    lbImg.src = '';
  }, 300);
}

// Close on backdrop click
document.getElementById('lightbox').addEventListener('pointerdown', e => {
  if (e.target === document.getElementById('lightbox')) closeLightbox();
});

// ── 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;');
}

⚡ Quick Build

Step 1: Copy this prompt

Step 2: Paste the AI response

This is a Pro Generator