<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 8px;
      user-select: none;
    }

    .controls-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-bottom: 12px;
      width: 100%;
    }

    .instruction {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
    }

    .controls {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .btn {
      appearance: none;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #1e293b;
      font-size: 13px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.06);
      transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .btn.active {
      background: #2563eb;
      border-color: #1d4ed8;
      color: #ffffff;
    }

    .graphs-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 640px;
    }

    @media (max-width: 500px) {
      .graphs-container {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .graph-panel {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 6px 6px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .panel-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .badge-f { color: #0284c7; }
    .badge-df { color: #dc2626; }

    svg {
      width: 100%;
      height: auto;
      max-height: 220px;
      overflow: visible;
    }

    .axis { stroke: #334155; stroke-width: 1.5; }
    .grid { stroke: #cbd5e1; stroke-width: 0.9; stroke-dasharray: 3,3; }
    .axis-label { font-size: 11px; fill: #1e293b; font-weight: 700; font-family: system-ui, -apple-system, sans-serif; }
    
    .curve-f { fill: none; stroke: #0284c7; stroke-width: 2.5; stroke-linecap: round; }
    .curve-df { fill: none; stroke: #dc2626; stroke-width: 2.5; stroke-linecap: round; }
    
    .tangent-line { stroke: #d97706; stroke-width: 2.2; stroke-linecap: round; }
    .tangent-ext { stroke: #f59e0b; stroke-width: 1.5; stroke-dasharray: 4,3; }

    .pt-ref { fill: #ffffff; stroke: #94a3b8; stroke-width: 1.5; cursor: pointer; }
    .pt-f { fill: #0284c7; stroke: #ffffff; stroke-width: 2; }
    .pt-df { fill: #dc2626; stroke: #ffffff; stroke-width: 2; }
    .pt-active { fill: #d97706 !important; stroke: #ffffff; stroke-width: 2; r: 5.5; }

    .tag-bg {
      fill: #ffffff;
      fill-opacity: 0.92;
      stroke-width: 1;
      rx: 4px;
      ry: 4px;
    }

    .tag-bg-f { stroke: #d97706; }
    .tag-bg-df { stroke: #dc2626; }

    .value-tag {
      font-size: 11px;
      font-weight: 700;
      font-family: system-ui, -apple-system, sans-serif;
      dominant-baseline: central;
    }
  </style>
</head>
<body>

  <div class="controls-wrapper">
    <div class="instruction">Select point to compare slope of <i>f(x)</i> with value of <i>f'(x)</i>:</div>
    <div class="controls">
      <button class="btn active" onclick="setPoint(-1)">x = −1</button>
      <button class="btn" onclick="setPoint(0)">x = 0</button>
      <button class="btn" onclick="setPoint(3)">x = 3</button>
    </div>
  </div>

  <div class="graphs-container">
    
    <div class="graph-panel">
      <div class="panel-title badge-f">Function f(x) = x²</div>
      <svg id="svgLeft" viewBox="0 0 260 210">
        <g id="gridLeft"></g>
        <path id="curveLeft" class="curve-f" />
        
        <circle id="refPtL_neg1" class="pt-ref" r="3.5" onclick="setPoint(-1)" />
        <circle id="refPtL_0" class="pt-ref" r="3.5" onclick="setPoint(0)" />
        <circle id="refPtL_3" class="pt-ref" r="3.5" onclick="setPoint(3)" />
        
        <line id="tangentExt" class="tangent-ext" />
        <line id="tangentLine" class="tangent-line" />
        <circle id="ptLeft" class="pt-f pt-active" />
        
        <g id="tagGroupLeft">
          <rect id="tagBgLeft" class="tag-bg tag-bg-f" />
          <text id="tagLeft" class="value-tag" fill="#b45309"></text>
        </g>
      </svg>
    </div>

    
    <div class="graph-panel">
      <div class="panel-title badge-df">Derivative f'(x) = 2x <span style="font-size: 11px; font-weight: 600; color: #475569;">(Slope)</span></div>
      <svg id="svgRight" viewBox="0 0 260 210">
        <g id="gridRight"></g>
        <path id="curveRight" class="curve-df" />
        
        <circle id="refPtR_neg1" class="pt-ref" r="3.5" onclick="setPoint(-1)" />
        <circle id="refPtR_0" class="pt-ref" r="3.5" onclick="setPoint(0)" />
        <circle id="refPtR_3" class="pt-ref" r="3.5" onclick="setPoint(3)" />
        
        <circle id="ptRight" class="pt-df pt-active" />
        
        <g id="tagGroupRight">
          <rect id="tagBgRight" class="tag-bg tag-bg-df" />
          <text id="tagRight" class="value-tag" fill="#b91c1c"></text>
        </g>
      </svg>
    </div>
  </div>

  <script>
    const W = 260, H = 210;
    const xMin = -2.3, xMax = 3.7;
    const yMinL = -1.5, yMaxL = 10;
    const yMinR = -5.2, yMaxR = 7.5;

    function toSvgL(x, y) {
      const sx = 26 + ((x - xMin) / (xMax - xMin)) * (W - 38);
      const sy = (H - 20) - ((y - yMinL) / (yMaxL - yMinL)) * (H - 35);
      return [sx, sy];
    }

    function toSvgR(x, y) {
      const sx = 26 + ((x - xMin) / (xMax - xMin)) * (W - 38);
      const sy = (H - 20) - ((y - yMinR) / (yMaxR - yMinR)) * (H - 35);
      return [sx, sy];
    }

    function drawGrid(containerId, toSvg, yRange, yStep) {
      const g = document.getElementById(containerId);
      let out = '';
      
      // X grid & high-contrast ticks
      for (let x = -2; x <= 3; x++) {
        const [x1, y1] = toSvg(x, yRange[0]);
        const [x2, y2] = toSvg(x, yRange[1]);
        out += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" class="grid" />`;
        const [tx, ty] = toSvg(x, 0);
        if (x !== 0) {
          out += `<text x="${tx}" y="${ty + 13}" class="axis-label" text-anchor="middle">${x}</text>`;
        }
      }

      // Y grid & high-contrast ticks
      for (let y = yRange[0]; y <= yRange[1]; y += yStep) {
        if (y === 0) continue;
        const [x1, y1] = toSvg(xMin, y);
        const [x2, y2] = toSvg(xMax, y);
        out += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" class="grid" />`;
        const [tx, ty] = toSvg(0, y);
        out += `<text x="${tx - 5}" y="${ty}" class="axis-label" text-anchor="end" dominant-baseline="central">${y}</text>`;
      }

      // Origin label
      const [ox, oy] = toSvg(0, 0);
      out += `<text x="${ox - 4}" y="${oy + 12}" class="axis-label" text-anchor="end">0</text>`;

      // High-contrast Axes
      const [ax0, ay0] = toSvg(0, yRange[0]);
      const [ax1, ay1] = toSvg(0, yRange[1]);
      out += `<line x1="${ax0}" y1="${ay0}" x2="${ax1}" y2="${ay1}" class="axis" />`;

      const [bx0, by0] = toSvg(xMin, 0);
      const [bx1, by1] = toSvg(xMax, 0);
      out += `<line x1="${bx0}" y1="${by0}" x2="${bx1}" y2="${by1}" class="axis" />`;

      // Axis name indicators (x and y)
      const [xEndPos, yAxisZero] = toSvg(xMax - 0.15, 0);
      out += `<text x="${xEndPos}" y="${yAxisZero - 6}" class="axis-label" text-anchor="end" style="font-style: italic;">x</text>`;

      const [xAxisZero, yEndPos] = toSvg(0, yRange[1] - 0.3);
      out += `<text x="${xAxisZero + 6}" y="${yEndPos + 4}" class="axis-label" text-anchor="start" style="font-style: italic;">y</text>`;

      g.innerHTML = out;
    }

    // Initialize backgrounds
    drawGrid('gridLeft', toSvgL, [-1, 10], 2);
    drawGrid('gridRight', toSvgR, [-4, 7], 2);

    // Setup static reference points
    [ -1, 0, 3 ].forEach(x => {
      const [lx, ly] = toSvgL(x, x * x);
      const idL = 'refPtL_' + (x === -1 ? 'neg1' : x);
      const dotL = document.getElementById(idL);
      if (dotL) { dotL.setAttribute('cx', lx); dotL.setAttribute('cy', ly); }

      const [rx, ry] = toSvgR(x, 2 * x);
      const idR = 'refPtR_' + (x === -1 ? 'neg1' : x);
      const dotR = document.getElementById(idR);
      if (dotR) { dotR.setAttribute('cx', rx); dotR.setAttribute('cy', ry); }
    });

    // Draw Parabola f(x) = x^2
    let dLeft = '';
    for (let x = -2.2; x <= 3.25; x += 0.05) {
      const [sx, sy] = toSvgL(x, x * x);
      dLeft += (dLeft === '' ? 'M' : 'L') + `${sx.toFixed(1)},${sy.toFixed(1)}`;
    }
    document.getElementById('curveLeft').setAttribute('d', dLeft);

    // Draw Line f'(x) = 2x
    let dRight = '';
    for (let x = -2.2; x <= 3.55; x += 0.1) {
      const [sx, sy] = toSvgR(x, 2 * x);
      dRight += (dRight === '' ? 'M' : 'L') + `${sx.toFixed(1)},${sy.toFixed(1)}`;
    }
    document.getElementById('curveRight').setAttribute('d', dRight);

    function positionBadge(tagElem, bgElem, text, anchorX, anchorY, align, baselineY) {
      tagElem.textContent = text;
      tagElem.setAttribute('text-anchor', align);
      tagElem.setAttribute('x', anchorX);
      tagElem.setAttribute('y', anchorY);

      // Calculate bounding box and set background pill
      const bbox = tagElem.getBBox();
      const padX = 4, padY = 2;
      bgElem.setAttribute('x', bbox.x - padX);
      bgElem.setAttribute('y', bbox.y - padY);
      bgElem.setAttribute('width', bbox.width + padX * 2);
      bgElem.setAttribute('height', bbox.height + padY * 2);
    }

    // Dynamic state
    function setPoint(xVal) {
      // Update buttons
      document.querySelectorAll('.btn').forEach(btn => {
        btn.classList.toggle('active', btn.textContent.includes(xVal === 0 ? '0' : (xVal > 0 ? `${xVal}` : `−${Math.abs(xVal)}`)));
      });

      const yVal = xVal * xVal;
      const slope = 2 * xVal;

      // Left point & tangent
      const [pxL, pyL] = toSvgL(xVal, yVal);
      const ptL = document.getElementById('ptLeft');
      ptL.setAttribute('cx', pxL);
      ptL.setAttribute('cy', pyL);

      // Tangent segments: main solid and dashed extension
      const dxSolid = 0.75;
      const dxExt = 1.35;
      const [tx1, ty1] = toSvgL(xVal - dxSolid, yVal - slope * dxSolid);
      const [tx2, ty2] = toSvgL(xVal + dxSolid, yVal + slope * dxSolid);
      const tLine = document.getElementById('tangentLine');
      tLine.setAttribute('x1', tx1);
      tLine.setAttribute('y1', ty1);
      tLine.setAttribute('x2', tx2);
      tLine.setAttribute('y2', ty2);

      const [ex1, ey1] = toSvgL(xVal - dxExt, yVal - slope * dxExt);
      const [ex2, ey2] = toSvgL(xVal + dxExt, yVal + slope * dxExt);
      const tExt = document.getElementById('tangentExt');
      tExt.setAttribute('x1', ex1);
      tExt.setAttribute('y1', ey1);
      tExt.setAttribute('x2', ex2);
      tExt.setAttribute('y2', ey2);

      // Tag Left positioning
      const tagL = document.getElementById('tagLeft');
      const bgL = document.getElementById('tagBgLeft');
      let lx = pxL, ly = pyL, alignL = 'middle';

      if (xVal === -1) {
        lx = pxL - 10;
        ly = pyL - 14;
        alignL = 'end';
      } else if (xVal === 0) {
        lx = pxL;
        ly = pyL + 18;
        alignL = 'middle';
      } else if (xVal === 3) {
        lx = pxL - 12;
        ly = pyL + 6;
        alignL = 'end';
      }
      positionBadge(tagL, bgL, `slope = ${slope}`, lx, ly, alignL);

      // Right point
      const [pxR, pyR] = toSvgR(xVal, slope);
      const ptR = document.getElementById('ptRight');
      ptR.setAttribute('cx', pxR);
      ptR.setAttribute('cy', pyR);

      // Tag Right positioning (Preventing collision with axis ticks, specifically at x=-1)
      const tagR = document.getElementById('tagRight');
      const bgR = document.getElementById('tagBgRight');
      let rx = pxR, ry = pyR, alignR = 'start';

      if (xVal === -1) {
        // Point is at (-1, -2). Place tag to the right or below-right to avoid the tick -1 on x-axis
        rx = pxR + 10;
        ry = pyR + 10;
        alignR = 'start';
      } else if (xVal === 0) {
        // Point is at (0, 0). Place tag in quadrant 2 / upper-left to avoid tick marks
        rx = pxR - 10;
        ry = pyR - 12;
        alignR = 'end';
      } else if (xVal === 3) {
        // Point is at (3, 6). Place tag to the left
        rx = pxR - 10;
        ry = pyR - 6;
        alignR = 'end';
      }
      positionBadge(tagR, bgR, `(${xVal}, ${slope})`, rx, ry, alignR);
    }

    // Default start
    setPoint(-1);
  </script>
</body>
</html>

Limits and the Definition of the Derivative

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secant to Tangent Line Transition</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 12px;
      user-select: none;
    }
    .wrapper {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
    .badge {
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      letter-spacing: 0.2px;
      white-space: nowrap;
    }
    .badge-secant {
      background: #ffedd5;
      color: #9a3412;
      border: 1.5px solid #ea580c;
    }
    .badge-tangent {
      background: #dcfce7;
      color: #14532d;
      border: 1.5px solid #16a34a;
    }
    .slope-val {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      text-align: right;
    }
    .formula-bar {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 12.5px;
      color: #334155;
      font-weight: 600;
    }
    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 11.5px;
      line-height: 1.1;
    }
    .fraction .num {
      border-bottom: 1.5px solid #475569;
      padding-bottom: 1px;
    }
    .fraction .den {
      padding-top: 1px;
    }
    .graph-container {
      width: 100%;
      aspect-ratio: 4/2.6;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #cbd5e1;
      position: relative;
      overflow: hidden;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .controls {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
    }
    input[type=range] {
      flex: 1;
      accent-color: #2563eb;
      cursor: pointer;
      height: 6px;
    }
    .btn-row {
      display: flex;
      gap: 6px;
      justify-content: space-between;
    }
    .btn {
      flex: 1;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 5px 8px;
      border-radius: 6px;
      font-size: 11.5px;
      font-weight: 600;
      color: #1e293b;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease;
      white-space: nowrap;
      text-align: center;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="wrapper">
    <div class="header">
      <div id="badge" class="badge badge-secant">Secant Line</div>
      <div id="slopeDisplay" class="slope-val">Slope = 0.95</div>
    </div>

    
    <div class="formula-bar" id="formulaBar">
      <span id="formulaLabel" style="color: #9a3412; font-weight: 700;">Secant Slope</span>
      <span>=</span>
      <div class="fraction">
        <span class="num">f(a + h) − f(a)</span>
        <span class="den">h</span>
      </div>
      <span id="formulaEval" style="color: #0f172a; margin-left: 4px;"></span>
    </div>

    <div class="graph-container">
      <svg id="svgGraph" viewBox="0 0 400 240">
        <defs>
          <filter id="labelGlow" x="-20%" y="-20%" width="140%" height="140%">
            <feFlood flood-color="#ffffff" flood-opacity="0.9" result="bg" />
            <feComposite in="bg" in2="SourceAlpha" operator="in" result="glow" />
            <feMorphology in="glow" operator="dilate" radius="2" result="dilated" />
            <feMerge>
              <feMergeNode in="dilated" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>

        
        <g stroke="#f1f5f9" stroke-width="1.2">
          <line x1="45" y1="20" x2="45" y2="210" />
          <line x1="125" y1="20" x2="125" y2="210" />
          <line x1="205" y1="20" x2="205" y2="210" />
          <line x1="285" y1="20" x2="285" y2="210" />
          <line x1="365" y1="20" x2="365" y2="210" />
          <line x1="35" y1="210" x2="385" y2="210" />
          <line x1="35" y1="160" x2="385" y2="160" />
          <line x1="35" y1="110" x2="385" y2="110" />
          <line x1="35" y1="60" x2="385" y2="60" />
        </g>

        
        <g stroke="#64748b" stroke-width="1.5">
          <line x1="45" y1="210" x2="385" y2="210" />
          <line x1="45" y1="210" x2="45" y2="15" />
          
          <polygon points="385,207 392,210 385,213" fill="#64748b" />
          <polygon points="42,15 45,8 48,15" fill="#64748b" />
        </g>
        <text x="382" y="225" fill="#64748b" font-size="11" font-weight="600">x</text>
        <text x="32" y="16" fill="#64748b" font-size="11" font-weight="600">y</text>

        
        <path id="deltaTriangle" fill="rgba(234, 88, 12, 0.08)" stroke="#ea580c" stroke-width="1.2" stroke-dasharray="3,3" />

        
        <path id="curve" fill="none" stroke="#2563eb" stroke-width="3" />
        <text x="330" y="42" fill="#2563eb" font-size="13" font-weight="bold" filter="url(#labelGlow)">f(x)</text>

        
        <line id="secantLine" stroke="#ea580c" stroke-width="2.5" stroke-dasharray="6,4" />

        
        <circle id="pointP" r="5" fill="#0f172a" stroke="#ffffff" stroke-width="2" />
        <text id="labelP" fill="#0f172a" font-size="13" font-weight="800" text-anchor="end" filter="url(#labelGlow)">P (a, f(a))</text>

        
        <circle id="pointQ" r="5" fill="#ea580c" stroke="#ffffff" stroke-width="2" />
        <text id="labelQ" fill="#c2410c" font-size="13" font-weight="800" text-anchor="start" filter="url(#labelGlow)">Q (a+h, f(a+h))</text>
      </svg>
    </div>

    <div class="controls">
      <div class="slider-row">
        <label for="hRange">Step (h):</label>
        <input type="range" id="hRange" min="0" max="2" step="0.01" value="1.6">
        <span id="hVal" style="min-width: 34px; text-align: right; color: #2563eb;">1.60</span>
      </div>
      <div class="btn-row">
        <button class="btn" onclick="setH(2.0)">h = 2.0</button>
        <button class="btn" onclick="setH(1.0)">h = 1.0</button>
        <button class="btn" onclick="setH(0.4)">h = 0.4</button>
        <button class="btn" style="color: #14532d; font-weight: 700; border-color: #86efac; background: #f0fdf4;" onclick="setH(0.0)">h → 0 (Tangent)</button>
      </div>
    </div>
  </div>

  <script>
    // Parabola f(x) = 0.22 * x^2 + 0.35
    const f = (x) => 0.22 * x * x + 0.35;
    const df = (x) => 0.44 * x;

    // Coordinate mapping (x: 0 to 3.8 -> 45 to 370 px, y: 0 to 3.5 -> 210 to 25 px)
    const toPx = (x, y) => ({
      px: 45 + (x / 3.8) * 325,
      py: 210 - (y / 3.5) * 185
    });

    const a = 1.0;
    const pPos = toPx(a, f(a));

    // Render Parabola curve
    let curveD = "";
    for (let x = 0; x <= 3.85; x += 0.05) {
      const { px, py } = toPx(x, f(x));
      curveD += (x === 0 ? "M " : " L ") + px.toFixed(1) + " " + py.toFixed(1);
    }
    document.getElementById("curve").setAttribute("d", curveD);

    // Set Point P fixed elements with clear offset to upper-left
    const pointP = document.getElementById("pointP");
    pointP.setAttribute("cx", pPos.px);
    pointP.setAttribute("cy", pPos.py);

    const labelP = document.getElementById("labelP");
    labelP.setAttribute("x", (pPos.px - 10).toFixed(1));
    labelP.setAttribute("y", (pPos.py - 10).toFixed(1));

    const slider = document.getElementById("hRange");
    const hVal = document.getElementById("hVal");
    const badge = document.getElementById("badge");
    const slopeDisplay = document.getElementById("slopeDisplay");
    const formulaLabel = document.getElementById("formulaLabel");
    const formulaEval = document.getElementById("formulaEval");
    const secantLine = document.getElementById("secantLine");
    const pointQ = document.getElementById("pointQ");
    const labelQ = document.getElementById("labelQ");
    const deltaTriangle = document.getElementById("deltaTriangle");

    function update() {
      const h = parseFloat(slider.value);
      hVal.textContent = h.toFixed(2);

      const isTangent = h <= 0.03;
      const qX = a + h;
      const qY = f(qX);
      const qPos = toPx(qX, qY);

      // Slope calculation
      let slope;
      if (h > 0.001) {
        slope = (qY - f(a)) / h;
      } else {
        slope = df(a);
      }

      // Update secant/tangent line (extend past points)
      const xStart = 0.2;
      const yStart = f(a) + slope * (xStart - a);
      const xEnd = 3.65;
      const yEnd = f(a) + slope * (xEnd - a);

      const pStart = toPx(xStart, yStart);
      const pEnd = toPx(xEnd, yEnd);

      secantLine.setAttribute("x1", pStart.px);
      secantLine.setAttribute("y1", pStart.py);
      secantLine.setAttribute("x2", pEnd.px);
      secantLine.setAttribute("y2", pEnd.py);

      // Update point Q and offset label cleanly above and to the right
      pointQ.setAttribute("cx", qPos.px);
      pointQ.setAttribute("cy", qPos.py);
      labelQ.setAttribute("x", (qPos.px + 10).toFixed(1));
      labelQ.setAttribute("y", (qPos.py - 10).toFixed(1));

      // Delta Triangle
      if (h >= 0.2) {
        const corner = toPx(qX, f(a));
        deltaTriangle.setAttribute("d", `M ${pPos.px} ${pPos.py} L ${corner.px} ${corner.py} L ${qPos.px} ${qPos.py} Z`);
        deltaTriangle.style.display = "block";
      } else {
        deltaTriangle.style.display = "none";
      }

      // Visual styling for Secant vs Tangent
      if (isTangent) {
        badge.className = "badge badge-tangent";
        badge.textContent = "Instantaneous Slope: Tangent Line";
        slopeDisplay.textContent = `Tangent Slope = ${slope.toFixed(2)}`;
        formulaLabel.textContent = "Instantaneous Slope (f'(a))";
        formulaLabel.style.color = "#14532d";
        formulaEval.textContent = `≈ ${slope.toFixed(2)}`;

        secantLine.setAttribute("stroke", "#16a34a");
        secantLine.setAttribute("stroke-dasharray", "none");
        secantLine.setAttribute("stroke-width", "3");
        pointQ.style.opacity = "0";
        labelQ.style.opacity = "0";
      } else {
        badge.className = "badge badge-secant";
        badge.textContent = "Secant Line";
        slopeDisplay.textContent = `Secant Slope = ${slope.toFixed(2)}`;
        formulaLabel.textContent = "Secant Slope";
        formulaLabel.style.color = "#9a3412";
        formulaEval.textContent = `≈ ${slope.toFixed(2)}`;

        secantLine.setAttribute("stroke", "#ea580c");
        secantLine.setAttribute("stroke-dasharray", "6,4");
        secantLine.setAttribute("stroke-width", "2.5");
        pointQ.style.opacity = "1";
        labelQ.style.opacity = "1";
      }
    }

    slider.addEventListener("input", update);

    function setH(val) {
      slider.value = val;
      update();
    }

    update();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Derivative of f(x) = x² at x = 3</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #0f172a;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 680px;
      margin: 0 auto;
    }

    /* Header Bar */
    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid #e2e8f0;
    }

    .title-box {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }

    .title-math {
      font-family: "Cambria Math", "Times New Roman", serif;
      font-style: italic;
      color: #1e293b;
      font-size: 15px;
    }
    .title-math .text {
      font-style: normal;
      font-family: system-ui, -apple-system, sans-serif;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ctrl-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #1e293b;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.15s, border-color 0.15s;
    }

    .ctrl-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .ctrl-btn:active {
      background: #e2e8f0;
    }

    /* Steps List */
    .steps-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .step-card {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 7px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .step-card.active {
      background: #ffffff;
      border-color: var(--step-color, #2563eb);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--step-color, #2563eb);
    }

    .step-left {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .step-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #334155;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s, color 0.2s;
    }

    .step-card.active .step-num {
      background: var(--step-color, #2563eb);
      color: #ffffff;
    }

    .step-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      padding: 2px 6px;
      border-radius: 4px;
      background: #e2e8f0;
      color: #334155;
      border: 1px solid #cbd5e1;
      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    }

    .step-card.active .step-tag {
      background: var(--tag-bg, #eff6ff);
      color: var(--tag-text, #1d4ed8);
      border-color: var(--tag-border, #bfdbfe);
    }

    /* Math Rendering with HTML/CSS */
    .step-math {
      font-family: "Cambria Math", "Times New Roman", "DejaVu Serif", serif;
      font-size: 14.5px;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 4px;
      text-align: right;
    }

    .step-card.active .step-math {
      color: #000000;
      font-weight: 600;
    }

    /* Inline Math Elements */
    .math-sym {
      font-style: italic;
      padding: 0 1px;
    }
    .math-op {
      font-style: normal;
      padding: 0 2px;
      color: #334155;
    }
    .step-card.active .math-op {
      color: #0f172a;
    }

    /* Limit Expression */
    .lim-box {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      line-height: 1;
      margin: 0 2px;
    }
    .lim-name {
      font-family: system-ui, -apple-system, sans-serif;
      font-style: normal;
      font-size: 12.5px;
      font-weight: 600;
    }
    .lim-sub {
      font-size: 9.5px;
      font-family: "Cambria Math", "Times New Roman", serif;
      font-style: italic;
      color: #475569;
      transform: translateY(1px);
    }
    .step-card.active .lim-sub {
      color: #1e293b;
    }

    /* Fraction Component */
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 2px;
    }
    .frac-num {
      border-bottom: 1.5px solid #334155;
      padding: 0 2px 1px 2px;
      line-height: 1.1;
    }
    .frac-den {
      padding: 1px 2px 0 2px;
      line-height: 1.1;
    }

    /* Highlights & Cancellations */
    .hl-cancel {
      position: relative;
      display: inline-block;
      color: #dc2626;
      font-weight: 600;
    }
    .hl-cancel::after {
      content: "";
      position: absolute;
      left: -1px;
      right: -1px;
      top: 50%;
      height: 1.5px;
      background: #dc2626;
      transform: rotate(-15deg);
    }

    .hl-h {
      color: #0284c7;
      font-weight: bold;
    }

    .result-badge {
      display: inline-flex;
      align-items: center;
      background: #ecfdf5;
      color: #047857;
      border: 1.5px solid #10b981;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 700;
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 13.5px;
      margin-left: 2px;
    }

    /* Pagination indicator dots */
    .dot-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }

    .nav-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      border: none;
      transition: background-color 0.2s, outline 0.2s;
    }

    .nav-dot:hover {
      background: #94a3b8;
    }

    .nav-dot.active {
      background: #2563eb;
      outline: 2px solid #93c5fd;
      outline-offset: 1px;
    }

    /* Responsive Design for Narrow Viewports */
    @media (max-width: 440px) {
      body {
        padding: 8px;
        gap: 6px;
      }
      .step-card {
        padding: 6px 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
      .step-left {
        width: 100%;
        justify-content: space-between;
      }
      .step-math {
        width: 100%;
        justify-content: flex-start;
        font-size: 13.5px;
        padding-left: 2px;
      }
      .top-bar {
        gap: 6px;
      }
      .title-box {
        font-size: 13px;
      }
      .ctrl-btn {
        padding: 3px 8px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  
  <div class="top-bar">
    <div class="title-box">
      <span>Find slope of</span>
      <span class="title-math"><span class="math-sym">f</span>(<span class="math-sym">x</span>) = <span class="math-sym">x</span>²</span>
      <span>at</span>
      <span class="title-math"><span class="math-sym">x</span> = 3</span>
    </div>
    <div class="controls">
      <button class="ctrl-btn" id="prevBtn" title="Previous Step" aria-label="Previous Step">← Prev</button>
      <button class="ctrl-btn" id="playBtn" title="Auto Play" aria-label="Auto Play">▶ Play</button>
      <button class="ctrl-btn" id="nextBtn" title="Next Step" aria-label="Next Step">Next →</button>
    </div>
  </div>

  
  <div class="steps-container">
    
    
    <div class="step-card active" style="--step-color: #2563eb; --tag-bg: #eff6ff; --tag-text: #1d4ed8; --tag-border: #bfdbfe;" data-step="0">
      <div class="step-left">
        <div class="step-num">1</div>
        <div class="step-tag">Definition</div>
      </div>
      <div class="step-math">
        <span><span class="math-sym">f</span>'(3) = </span>
        <span class="lim-box">
          <span class="lim-name">lim</span>
          <span class="lim-sub"><span class="math-sym">h</span>→0</span>
        </span>
        <span class="frac">
          <span class="frac-num">(3 + <span class="math-sym">h</span>)² <span class="math-op">−</span> 3²</span>
          <span class="frac-den"><span class="math-sym">h</span></span>
        </span>
      </div>
    </div>

    
    <div class="step-card" style="--step-color: #7c3aed; --tag-bg: #f5f3ff; --tag-text: #6d28d9; --tag-border: #ddd6fe;" data-step="1">
      <div class="step-left">
        <div class="step-num">2</div>
        <div class="step-tag">Expand</div>
      </div>
      <div class="step-math">
        <span class="math-op">=</span>
        <span class="lim-box">
          <span class="lim-name">lim</span>
          <span class="lim-sub"><span class="math-sym">h</span>→0</span>
        </span>
        <span class="frac">
          <span class="frac-num">9 + 6<span class="math-sym">h</span> + <span class="math-sym">h</span>² <span class="math-op">−</span> 9</span>
          <span class="frac-den"><span class="math-sym">h</span></span>
        </span>
      </div>
    </div>

    
    <div class="step-card" style="--step-color: #d97706; --tag-bg: #fffbeb; --tag-text: #b45309; --tag-border: #fde68a;" data-step="2">
      <div class="step-left">
        <div class="step-num">3</div>
        <div class="step-tag">Cancel 9 − 9</div>
      </div>
      <div class="step-math">
        <span class="math-op">=</span>
        <span class="lim-box">
          <span class="lim-name">lim</span>
          <span class="lim-sub"><span class="math-sym">h</span>→0</span>
        </span>
        <span class="frac">
          <span class="frac-num">6<span class="math-sym">h</span> + <span class="math-sym">h</span>²</span>
          <span class="frac-den"><span class="math-sym">h</span></span>
        </span>
      </div>
    </div>

    
    <div class="step-card" style="--step-color: #059669; --tag-bg: #ecfdf5; --tag-text: #047857; --tag-border: #a7f3d0;" data-step="3">
      <div class="step-left">
        <div class="step-num">4</div>
        <div class="step-tag">Factor <span class="math-sym" style="text-transform:none">h</span></div>
      </div>
      <div class="step-math">
        <span class="math-op">=</span>
        <span class="lim-box">
          <span class="lim-name">lim</span>
          <span class="lim-sub"><span class="math-sym">h</span>→0</span>
        </span>
        <span class="frac">
          <span class="frac-num"><span class="hl-h">h</span>(6 + <span class="math-sym">h</span>)</span>
          <span class="frac-den"><span class="hl-h">h</span></span>
        </span>
        <span class="math-op">=</span>
        <span class="lim-box">
          <span class="lim-name">lim</span>
          <span class="lim-sub"><span class="math-sym">h</span>→0</span>
        </span>
        <span>(6 + <span class="math-sym">h</span>)</span>
      </div>
    </div>

    
    <div class="step-card" style="--step-color: #e11d48; --tag-bg: #fff1f2; --tag-text: #be123c; --tag-border: #fecdd3;" data-step="4">
      <div class="step-left">
        <div class="step-num">5</div>
        <div class="step-tag">Evaluate (<span class="math-sym" style="text-transform:none">h</span>→0)</div>
      </div>
      <div class="step-math">
        <span class="math-op">=</span>
        <span>6 + 0</span>
        <span class="math-op">=</span>
        <span class="result-badge">Slope = 6</span>
      </div>
    </div>

  </div>

  
  <div class="dot-nav">
    <button class="nav-dot active" data-step="0" aria-label="Step 1"></button>
    <button class="nav-dot" data-step="1" aria-label="Step 2"></button>
    <button class="nav-dot" data-step="2" aria-label="Step 3"></button>
    <button class="nav-dot" data-step="3" aria-label="Step 4"></button>
    <button class="nav-dot" data-step="4" aria-label="Step 5"></button>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 5;
    let timer = null;
    let isPlaying = false;

    const cards = document.querySelectorAll('.step-card');
    const dots = document.querySelectorAll('.nav-dot');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function setStep(index) {
      currentStep = (index + totalSteps) % totalSteps;
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === currentStep);
      });
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === currentStep);
      });
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playBtn.textContent = '⏸ Pause';
        timer = setInterval(() => {
          setStep(currentStep + 1);
        }, 2600);
      } else {
        playBtn.textContent = '▶ Play';
        clearInterval(timer);
      }
    }

    function stopPlay() {
      if (isPlaying) {
        isPlaying = false;
        playBtn.textContent = '▶ Play';
        clearInterval(timer);
      }
    }

    cards.forEach((card, i) => {
      card.addEventListener('click', () => {
        stopPlay();
        setStep(i);
      });
    });

    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => {
        stopPlay();
        setStep(i);
      });
    });

    playBtn.addEventListener('click', togglePlay);

    prevBtn.addEventListener('click', () => {
      stopPlay();
      setStep(currentStep - 1);
    });

    nextBtn.addEventListener('click', () => {
      stopPlay();
      setStep(currentStep + 1);
    });
  </script>
</body>
</html>

OGM.13.CAL.1

Aligned learning resources

Related diagrams