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

    .nav-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 600px;
    }
    .pill-btn {
      appearance: none;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .pill-btn:hover {
      border-color: #94a3b8;
      background: #f8fafc;
    }
    .pill-btn[aria-pressed="true"] {
      background: #1d4ed8;
      border-color: #1d4ed8;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
    }
    .pill-btn.combined[aria-pressed="true"] {
      background: #0f172a;
      border-color: #0f172a;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
    }

    .svg-container {
      width: 100%;
      max-width: 600px;
      aspect-ratio: 600 / 295;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .strip-poly {
      cursor: pointer;
      fill: #38bdf8;
      fill-opacity: 0.14;
      transition: fill-opacity 0.2s ease, fill 0.2s ease;
    }
    .strip-poly:hover {
      fill-opacity: 0.32;
    }
    .strip-poly.active {
      fill: #0284c7;
      fill-opacity: 0.38;
    }
    .strip-poly.sum-active {
      fill: #38bdf8;
      fill-opacity: 0.25;
    }

    .secant-line {
      stroke: #0284c7;
      stroke-width: 2.5;
      stroke-dasharray: 4 2.5;
    }
    .curve-line {
      stroke: #64748b;
      stroke-width: 2.2;
      fill: none;
    }

    .ordinate-outer {
      stroke: #1d4ed8;
      stroke-width: 2.5;
      transition: stroke-width 0.2s ease, filter 0.2s ease;
    }
    .ordinate-inner {
      stroke: #9333ea;
      stroke-width: 2.5;
      transition: stroke-width 0.2s ease, filter 0.2s ease;
    }
    .ordinate-highlight {
      stroke-width: 4.5;
      filter: drop-shadow(0 0 3px rgba(0,0,0,0.35));
    }

    .formula-panel {
      width: 100%;
      max-width: 600px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      box-sizing: border-box;
    }
    .formula-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
    .badge {
      display: inline-block;
      font-size: 11px;
      padding: 2px 7px;
      border-radius: 4px;
      font-weight: 600;
    }
    .badge-outer {
      background: #dbeafe;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    .badge-inner {
      background: #f3e8ff;
      color: #9333ea;
      border: 1px solid #e9d5ff;
    }

    .math-display {
      font-family: "Cambria Math", "Times New Roman", Times, serif;
      font-size: 18px;
      color: #0f172a;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 2px 6px;
      min-height: 38px;
      line-height: 1.2;
    }
    .math-display sub {
      font-size: 0.72em;
      vertical-align: -0.3em;
    }
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 2px;
      font-style: italic;
      line-height: 1;
      font-size: 0.95em;
    }
    .frac > .num {
      border-bottom: 1.5px solid currentColor;
      padding-bottom: 2px;
    }
    .frac > .den {
      padding-top: 2px;
    }
    .blue-term {
      color: #1d4ed8;
      font-weight: 700;
    }
    .purple-term {
      color: #9333ea;
      font-weight: 700;
    }
    .math-note {
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 11.5px;
      color: #64748b;
      margin-top: 1px;
    }

    @media (max-width: 420px) {
      .pill-btn {
        font-size: 11px;
        padding: 4px 8px;
      }
      .math-display {
        font-size: 15.5px;
      }
    }
  </style>
</head>
<body>

  
  <div class="nav-bar" role="toolbar" aria-label="Trapezium strip selection">
    <button class="pill-btn" id="btn-0" onclick="selectMode(0)" aria-pressed="false">Strip 1 (<i>T</i><sub>1</sub>)</button>
    <button class="pill-btn" id="btn-1" onclick="selectMode(1)" aria-pressed="false">Strip 2 (<i>T</i><sub>2</sub>)</button>
    <button class="pill-btn" id="btn-2" onclick="selectMode(2)" aria-pressed="false">Strip 3 (<i>T</i><sub>3</sub>)</button>
    <button class="pill-btn" id="btn-3" onclick="selectMode(3)" aria-pressed="false">Strip 4 (<i>T</i><sub>4</sub>)</button>
    <button class="pill-btn combined" id="btn-4" onclick="selectMode(4)" aria-pressed="true">Sum All (Combined)</button>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 600 295">
      <defs>
        
        <marker id="axis-arr" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#64748b"/>
        </marker>
        <marker id="arrow-l" markerWidth="5" markerHeight="5" refX="1" refY="2.5" orient="auto">
          <polygon points="4 0, 0 2.5, 4 5" fill="#475569"/>
        </marker>
        <marker id="arrow-r" markerWidth="5" markerHeight="5" refX="4" refY="2.5" orient="auto">
          <polygon points="0 0, 4 2.5, 0 5" fill="#475569"/>
        </marker>
      </defs>

      
      <line x1="45" y1="230" x2="575" y2="230" stroke="#94a3b8" stroke-width="1.8" marker-end="url(#axis-arr)" />
      <line x1="55" y1="240" x2="55" y2="18" stroke="#94a3b8" stroke-width="1.8" marker-end="url(#axis-arr)" />
      <text x="582" y="235" font-size="14" fill="#475569" font-weight="700" font-style="italic">x</text>
      <text x="55" y="13" font-size="14" fill="#475569" font-weight="700" font-style="italic" text-anchor="middle">y</text>

      
      <polygon id="strip-0" class="strip-poly sum-active" points="80,230 80,140 190,65 190,230" onclick="selectMode(0)"/>
      <polygon id="strip-1" class="strip-poly sum-active" points="190,230 190,65 300,45 300,230" onclick="selectMode(1)"/>
      <polygon id="strip-2" class="strip-poly sum-active" points="300,230 300,45 410,80 410,230" onclick="selectMode(2)"/>
      <polygon id="strip-3" class="strip-poly sum-active" points="410,230 410,80 520,155 520,230" onclick="selectMode(3)"/>

      
      <path class="curve-line" d="M 60,158 C 120,95 160,55 240,46 C 320,38 380,60 460,110 C 500,138 530,165 545,178" />

      
      <line x1="80" y1="140" x2="190" y2="65" class="secant-line" />
      <line x1="190" y1="65" x2="300" y2="45" class="secant-line" />
      <line x1="300" y1="45" x2="410" y2="80" class="secant-line" />
      <line x1="410" y1="80" x2="520" y2="155" class="secant-line" />

      
      <text x="548" y="182" font-size="13" fill="#64748b" font-style="italic" font-weight="600">y = f(x)</text>

      
      <line id="ord-0" x1="80" y1="230" x2="80" y2="140" class="ordinate-outer" />
      <line id="ord-1" x1="190" y1="230" x2="190" y2="65" class="ordinate-inner" />
      <line id="ord-2" x1="300" y1="230" x2="300" y2="45" class="ordinate-inner" />
      <line id="ord-3" x1="410" y1="230" x2="410" y2="80" class="ordinate-inner" />
      <line id="ord-4" x1="520" y1="230" x2="520" y2="155" class="ordinate-outer" />

      
      <circle cx="80" cy="140" r="4.5" fill="#1d4ed8" />
      <circle cx="190" cy="65" r="4.5" fill="#9333ea" />
      <circle cx="300" cy="45" r="4.5" fill="#9333ea" />
      <circle cx="410" cy="80" r="4.5" fill="#9333ea" />
      <circle cx="520" cy="155" r="4.5" fill="#1d4ed8" />

      
      <text x="80" y="132" font-size="14" font-weight="700" fill="#1d4ed8" text-anchor="middle">y₀</text>
      <text x="190" y="57" font-size="14" font-weight="700" fill="#9333ea" text-anchor="middle">y₁</text>
      <text x="300" y="37" font-size="14" font-weight="700" fill="#9333ea" text-anchor="middle">y₂</text>
      <text x="410" y="72" font-size="14" font-weight="700" fill="#9333ea" text-anchor="middle">y₃</text>
      <text x="520" y="147" font-size="14" font-weight="700" fill="#1d4ed8" text-anchor="middle">y₄</text>

      
      <g transform="translate(80, 108)">
        <rect x="-24" y="-9" width="48" height="18" rx="4" fill="#dbeafe" stroke="#93c5fd" stroke-width="1.2" />
        <text x="0" y="4" font-size="12" font-weight="700" fill="#1d4ed8" text-anchor="middle">1×</text>
      </g>
      <g transform="translate(190, 33)">
        <rect x="-35" y="-9" width="70" height="18" rx="4" fill="#f3e8ff" stroke="#d8b4fe" stroke-width="1.2" />
        <text x="0" y="4" font-size="11.5" font-weight="700" fill="#9333ea" text-anchor="middle">Shared 2×</text>
      </g>
      <g transform="translate(300, 14)">
        <rect x="-35" y="-9" width="70" height="18" rx="4" fill="#f3e8ff" stroke="#d8b4fe" stroke-width="1.2" />
        <text x="0" y="4" font-size="11.5" font-weight="700" fill="#9333ea" text-anchor="middle">Shared 2×</text>
      </g>
      <g transform="translate(410, 48)">
        <rect x="-35" y="-9" width="70" height="18" rx="4" fill="#f3e8ff" stroke="#d8b4fe" stroke-width="1.2" />
        <text x="0" y="4" font-size="11.5" font-weight="700" fill="#9333ea" text-anchor="middle">Shared 2×</text>
      </g>
      <g transform="translate(520, 123)">
        <rect x="-24" y="-9" width="48" height="18" rx="4" fill="#dbeafe" stroke="#93c5fd" stroke-width="1.2" />
        <text x="0" y="4" font-size="12" font-weight="700" fill="#1d4ed8" text-anchor="middle">1×</text>
      </g>

      
      <line x1="80" y1="230" x2="80" y2="235" stroke="#64748b" stroke-width="1.5" />
      <line x1="190" y1="230" x2="190" y2="235" stroke="#64748b" stroke-width="1.5" />
      <line x1="300" y1="230" x2="300" y2="235" stroke="#64748b" stroke-width="1.5" />
      <line x1="410" y1="230" x2="410" y2="235" stroke="#64748b" stroke-width="1.5" />
      <line x1="520" y1="230" x2="520" y2="235" stroke="#64748b" stroke-width="1.5" />

      <text x="80" y="249" font-size="13" font-weight="700" fill="#334155" text-anchor="middle">x₀ = a</text>
      <text x="190" y="249" font-size="13" font-weight="700" fill="#334155" text-anchor="middle">x₁</text>
      <text x="300" y="249" font-size="13" font-weight="700" fill="#334155" text-anchor="middle">x₂</text>
      <text x="410" y="249" font-size="13" font-weight="700" fill="#334155" text-anchor="middle">x₃</text>
      <text x="520" y="249" font-size="13" font-weight="700" fill="#334155" text-anchor="middle">x₄ = b</text>

      
      <line x1="84" y1="267" x2="186" y2="267" stroke="#475569" stroke-width="1.4" marker-start="url(#arrow-l)" marker-end="url(#arrow-r)" />
      <text x="135" y="283" font-size="13" font-weight="700" font-style="italic" fill="#334155" text-anchor="middle">h</text>

      <line x1="194" y1="267" x2="296" y2="267" stroke="#475569" stroke-width="1.4" marker-start="url(#arrow-l)" marker-end="url(#arrow-r)" />
      <text x="245" y="283" font-size="13" font-weight="700" font-style="italic" fill="#334155" text-anchor="middle">h</text>

      <line x1="304" y1="267" x2="406" y2="267" stroke="#475569" stroke-width="1.4" marker-start="url(#arrow-l)" marker-end="url(#arrow-r)" />
      <text x="355" y="283" font-size="13" font-weight="700" font-style="italic" fill="#334155" text-anchor="middle">h</text>

      <line x1="414" y1="267" x2="516" y2="267" stroke="#475569" stroke-width="1.4" marker-start="url(#arrow-l)" marker-end="url(#arrow-r)" />
      <text x="465" y="283" font-size="13" font-weight="700" font-style="italic" fill="#334155" text-anchor="middle">h</text>
    </svg>
  </div>

  
  <div class="formula-panel">
    <div class="formula-header">
      <span id="formula-title">Combined Area (Trapezium Rule)</span>
      <span id="formula-tag" class="badge badge-outer">Factored Sum</span>
    </div>
    <div id="formula-math" class="math-display"></div>
    <div id="formula-note" class="math-note"></div>
  </div>

  <script>
    const formulaData = [
      {
        title: "Strip 1 Area (T₁)",
        tag: "Individual Strip",
        tagClass: "badge-inner",
        mathHtml: `<i>T</i><sub>1</sub> = <span class="frac"><span class="num"><i>h</i></span><span class="den">2</span></span> (<span class="blue-term"><i>y</i><sub>0</sub></span> + <span class="purple-term"><i>y</i><sub>1</sub></span>)`,
        note: "Bounded by outer ordinate <b>y₀</b> (used 1×) and shared ordinate <b>y₁</b>.",
        ords: [0, 1]
      },
      {
        title: "Strip 2 Area (T₂)",
        tag: "Individual Strip",
        tagClass: "badge-inner",
        mathHtml: `<i>T</i><sub>2</sub> = <span class="frac"><span class="num"><i>h</i></span><span class="den">2</span></span> (<span class="purple-term"><i>y</i><sub>1</sub></span> + <span class="purple-term"><i>y</i><sub>2</sub></span>)`,
        note: "Bounded by two shared middle ordinates <b>y₁</b> and <b>y₂</b>.",
        ords: [1, 2]
      },
      {
        title: "Strip 3 Area (T₃)",
        tag: "Individual Strip",
        tagClass: "badge-inner",
        mathHtml: `<i>T</i><sub>3</sub> = <span class="frac"><span class="num"><i>h</i></span><span class="den">2</span></span> (<span class="purple-term"><i>y</i><sub>2</sub></span> + <span class="purple-term"><i>y</i><sub>3</sub></span>)`,
        note: "Bounded by two shared middle ordinates <b>y₂</b> and <b>y₃</b>.",
        ords: [2, 3]
      },
      {
        title: "Strip 4 Area (T₄)",
        tag: "Individual Strip",
        tagClass: "badge-inner",
        mathHtml: `<i>T</i><sub>4</sub> = <span class="frac"><span class="num"><i>h</i></span><span class="den">2</span></span> (<span class="purple-term"><i>y</i><sub>3</sub></span> + <span class="blue-term"><i>y</i><sub>4</sub></span>)`,
        note: "Bounded by shared ordinate <b>y₃</b> and outer ordinate <b>y₄</b> (used 1×).",
        ords: [3, 4]
      },
      {
        title: "Combined Area (Trapezium Rule Formula)",
        tag: "Factored Sum",
        tagClass: "badge-outer",
        mathHtml: `Total Area &approx; <span class="frac"><span class="num"><i>h</i></span><span class="den">2</span></span> [ <span class="blue-term"><i>y</i><sub>0</sub></span> + 2(<span class="purple-term"><i>y</i><sub>1</sub> + <i>y</i><sub>2</sub> + <i>y</i><sub>3</sub></span>) + <span class="blue-term"><i>y</i><sub>4</sub></span> ]`,
        note: "Outer ordinates are counted once (1×); interior ordinates are shared by adjacent strips (2×).",
        ords: [0, 1, 2, 3, 4]
      }
    ];

    function selectMode(index) {
      // Update Buttons
      for (let i = 0; i < 5; i++) {
        const btn = document.getElementById('btn-' + i);
        btn.setAttribute('aria-pressed', i === index ? 'true' : 'false');
      }

      // Update Strips
      for (let i = 0; i < 4; i++) {
        const poly = document.getElementById('strip-' + i);
        poly.classList.remove('active', 'sum-active');
        if (index === 4) {
          poly.classList.add('sum-active');
        } else if (i === index) {
          poly.classList.add('active');
        }
      }

      // Update Ordinates Highlights
      const targetOrds = formulaData[index].ords;
      for (let i = 0; i < 5; i++) {
        const ord = document.getElementById('ord-' + i);
        if (index !== 4 && targetOrds.includes(i)) {
          ord.classList.add('ordinate-highlight');
        } else {
          ord.classList.remove('ordinate-highlight');
        }
      }

      // Update Formula Text
      const d = formulaData[index];
      document.getElementById('formula-title').textContent = d.title;
      const tagEl = document.getElementById('formula-tag');
      tagEl.textContent = d.tag;
      tagEl.className = 'badge ' + d.tagClass;
      document.getElementById('formula-math').innerHTML = d.mathHtml;
      document.getElementById('formula-note').innerHTML = d.note;
    }

    // Initialize with Combined Sum view
    selectMode(4);
  </script>
</body>
</html>

Numerical Integration Using the Trapezium Rule

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trapezium Rule Computation</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body {
      background: #ffffff;
      color: #0f172a;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 640px;
      margin: 0 auto;
    }

    /* Math typography helpers */
    .math {
      font-family: "Cambria Math", "Latin Modern Math", "STIX Two Math", "Times New Roman", Georgia, serif;
      font-style: italic;
    }
    .math sub, .math sup {
      font-style: normal;
      font-family: inherit;
    }
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: -0.45em;
      text-align: center;
      padding: 0 2px;
      line-height: 1.05;
      font-size: 0.9em;
    }
    .frac > .num {
      border-bottom: 1px solid currentColor;
      padding-bottom: 1px;
    }
    .frac > .den {
      padding-top: 1px;
    }

    /* Step Controller */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .step-tabs {
      display: flex;
      gap: 6px;
      flex: 1;
    }
    .step-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 12.5px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .step-btn:hover {
      background: #f1f5f9;
      color: #0f172a;
    }
    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .play-btn {
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      border-radius: 6px;
      cursor: pointer;
      color: #0f172a;
      transition: background 0.2s ease;
    }
    .play-btn:hover {
      background: #f8fafc;
    }

    /* Main Grid Layout */
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      align-items: start;
    }
    @media (max-width: 530px) {
      .grid-container {
        grid-template-columns: 1fr;
      }
    }

    /* Table Styling */
    .table-card {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px;
    }
    th {
      text-align: left;
      padding: 5px 4px;
      color: #334155;
      font-weight: 600;
      border-bottom: 1px solid #cbd5e1;
    }
    td {
      padding: 5px 4px;
      border-bottom: 1px solid #e2e8f0;
      transition: background 0.25s ease, color 0.25s ease;
      color: #1e293b;
    }
    tr:last-child td { border-bottom: none; }
    
    .tag {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 10.5px;
      font-weight: 700;
    }

    /* Highlighting classes */
    .highlight-end td {
      background: #ede9fe;
      color: #5b21b6;
      font-weight: 600;
    }
    .highlight-mid td {
      background: #e0f2fe;
      color: #0369a1;
      font-weight: 600;
    }
    .tag-end {
      background: #ddd6fe;
      color: #5b21b6;
    }
    .tag-mid {
      background: #bae6fd;
      color: #0284c7;
    }

    /* Calculation Cards Area */
    .calc-area {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .calc-card {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12.5px;
      color: #334155;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }
    .calc-card.active {
      background: #ffffff;
      color: #0f172a;
      border-color: #94a3b8;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .calc-card.focus-end {
      border-color: #7c3aed;
      background: #faf5ff;
      color: #1e1b4b;
      box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
    }
    .calc-card.focus-mid {
      border-color: #0284c7;
      background: #f0f9ff;
      color: #082f49;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12);
    }
    .calc-card.focus-total {
      border-color: #059669;
      background: #f0fdf4;
      color: #064e3b;
      box-shadow: 0 2px 8px rgba(5, 150, 105, 0.12);
    }

    .card-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .title-end { color: #6d28d9; }
    .title-mid { color: #0284c7; }
    .title-total { color: #059669; }

    .formula-line {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 3px;
      margin: 3px 0;
      font-size: 12.5px;
      line-height: 1.4;
    }
    .result-val {
      font-weight: 700;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <div class="step-tabs">
      <button class="step-btn active" onclick="setStep(0)">1. Values</button>
      <button class="step-btn" onclick="setStep(1)">2. Ends (<span class="math">E</span>)</button>
      <button class="step-btn" onclick="setStep(2)">3. Middles (<span class="math">M</span>)</button>
      <button class="step-btn" onclick="setStep(3)">4. Area (<span class="math">A</span>)</button>
    </div>
    <button id="playBtn" class="play-btn" onclick="togglePlay()" title="Toggle auto-play">⏸</button>
  </div>

  <div class="grid-container">
    
    <div class="table-card">
      <table>
        <thead>
          <tr>
            <th><span class="math">i</span></th>
            <th><span class="math">x<sub>i</sub></span></th>
            <th><span class="math">y<sub>i</sub> = <span class="frac"><span class="num">1</span><span class="den">x<sub>i</sub><sup>2</sup> + 1</span></span></span></th>
            <th>Type</th>
          </tr>
        </thead>
        <tbody>
          <tr id="row-0">
            <td>0</td>
            <td>1.0</td>
            <td><sup>1</sup>&frasl;<sub>2</sub> = 0.50000</td>
            <td><span class="tag tag-end">End</span></td>
          </tr>
          <tr id="row-1">
            <td>1</td>
            <td>1.5</td>
            <td><sup>1</sup>&frasl;<sub>3.25</sub> = 0.30769</td>
            <td><span class="tag tag-mid">Middle</span></td>
          </tr>
          <tr id="row-2">
            <td>2</td>
            <td>2.0</td>
            <td><sup>1</sup>&frasl;<sub>5</sub> = 0.20000</td>
            <td><span class="tag tag-mid">Middle</span></td>
          </tr>
          <tr id="row-3">
            <td>3</td>
            <td>2.5</td>
            <td><sup>1</sup>&frasl;<sub>7.25</sub> = 0.13793</td>
            <td><span class="tag tag-mid">Middle</span></td>
          </tr>
          <tr id="row-4">
            <td>4</td>
            <td>3.0</td>
            <td><sup>1</sup>&frasl;<sub>10</sub> = 0.10000</td>
            <td><span class="tag tag-end">End</span></td>
          </tr>
        </tbody>
      </table>
    </div>

    
    <div class="calc-area">
      
      <div id="card-end" class="calc-card">
        <div class="card-title title-end">
          <span>Ends Sum (<span class="math">E</span>)</span>
          <span style="text-transform: none; font-size: 11.5px;"><span class="math">y<sub>0</sub> + y<sub>4</sub></span></span>
        </div>
        <div class="formula-line">
          <span><span class="math">E</span> = 0.50000 + 0.10000 = </span>
          <span class="result-val" style="color:#6d28d9;">0.60000</span>
        </div>
      </div>

      
      <div id="card-mid" class="calc-card">
        <div class="card-title title-mid">
          <span>Middle Sum (<span class="math">M</span>)</span>
          <span style="text-transform: none; font-size: 11.5px;">2 × (<span class="math">y<sub>1</sub> + y<sub>2</sub> + y<sub>3</sub></span>)</span>
        </div>
        <div class="formula-line">
          <span>∑ <span class="math">y</span><sub>mid</sub> = 0.30769 + 0.20000 + 0.13793 = 0.64562</span>
        </div>
        <div class="formula-line">
          <span><span class="math">M</span> = 2 × 0.64562 = </span>
          <span class="result-val" style="color:#0284c7;">1.29124</span>
        </div>
      </div>

      
      <div id="card-total" class="calc-card">
        <div class="card-title title-total">
          <span>Total Area (<span class="math">A</span>)</span>
          <span style="text-transform: none; font-size: 11.5px;">
            <span class="frac"><span class="num"><span class="math">h</span></span><span class="den">2</span></span>(<span class="math">E + M</span>), <span class="math">h</span> = 0.5
          </span>
        </div>
        <div class="formula-line">
          <span><span class="math">A</span> = <span class="frac"><span class="num">0.5</span><span class="den">2</span></span> × (0.60000 + 1.29124)</span>
        </div>
        <div class="formula-line">
          <span><span class="math">A</span> = 0.25 × 1.89124 = </span>
          <span class="result-val" style="color:#059669; font-size: 13.5px;">0.47281</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

    function applyStep(step) {
      currentStep = step;
      
      // Update Buttons
      document.querySelectorAll('.step-btn').forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      // Row highlighting
      const rows = [0, 1, 2, 3, 4].map(i => document.getElementById(`row-${i}`));
      rows.forEach(r => r.className = '');

      const cardEnd = document.getElementById('card-end');
      const cardMid = document.getElementById('card-mid');
      const cardTotal = document.getElementById('card-total');

      cardEnd.className = 'calc-card';
      cardMid.className = 'calc-card';
      cardTotal.className = 'calc-card';

      if (step === 0) {
        // Just the full table overview
      } else if (step === 1) {
        // Ends
        rows[0].className = 'highlight-end';
        rows[4].className = 'highlight-end';
        cardEnd.className = 'calc-card focus-end';
      } else if (step === 2) {
        // Middles
        rows[1].className = 'highlight-mid';
        rows[2].className = 'highlight-mid';
        rows[3].className = 'highlight-mid';
        cardEnd.className = 'calc-card active';
        cardMid.className = 'calc-card focus-mid';
      } else if (step === 3) {
        // Total
        rows[0].className = 'highlight-end';
        rows[4].className = 'highlight-end';
        rows[1].className = 'highlight-mid';
        rows[2].className = 'highlight-mid';
        rows[3].className = 'highlight-mid';
        cardEnd.className = 'calc-card active';
        cardMid.className = 'calc-card active';
        cardTotal.className = 'calc-card focus-total';
      }
    }

    function setStep(step) {
      applyStep(step);
      resetTimer();
    }

    function nextStep() {
      applyStep((currentStep + 1) % 4);
    }

    function resetTimer() {
      if (timer) clearInterval(timer);
      if (isPlaying) {
        timer = setInterval(nextStep, 3800);
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        resetTimer();
      } else if (timer) {
        clearInterval(timer);
      }
    }

    window.addEventListener('DOMContentLoaded', () => {
      applyStep(0);
      resetTimer();
    });
  </script>
</body>
</html>

<!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;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 10px 14px;
      user-select: none;
    }

    .container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .toggle-bar {
      display: flex;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      gap: 4px;
    }

    .toggle-btn {
      border: none;
      background: transparent;
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .toggle-btn:hover {
      color: #1e2945;
    }

    .toggle-btn.active {
      background: #ffffff;
      color: #2563eb;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .svg-container {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .formula-bar {
      min-height: 44px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 14px;
      color: #1e2945;
      text-align: center;
    }

    /* Math typesetting via standard CSS */
    .math-expr {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-family: 'Cambria Math', 'STIX Two Math', 'Times New Roman', serif;
      font-size: 1.12rem;
      letter-spacing: 0.02em;
    }

    .math-txt {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-weight: 600;
      font-style: normal;
    }

    .math-var {
      font-style: italic;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 3px;
      font-size: 0.9em;
      line-height: 1;
    }

    .frac .num {
      border-bottom: 1.5px solid currentColor;
      padding-bottom: 2px;
    }

    .frac .denom {
      padding-top: 2px;
    }

    sub {
      font-size: 0.72em;
      vertical-align: -0.3em;
      line-height: 0;
      font-style: normal;
    }

    .formula-desc {
      font-size: 0.8rem;
      font-family: system-ui, -apple-system, sans-serif;
      color: #ef4444;
      font-weight: 600;
      margin-left: 6px;
    }

    @media (max-width: 360px) {
      .math-expr {
        font-size: 1rem;
      }
      .toggle-btn {
        padding: 5px 12px;
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="toggle-bar" role="tablist" aria-label="Approximation method">
      <button class="toggle-btn active" id="btnTrap" onclick="setMode('trap')">Trapezium</button>
      <button class="toggle-btn" id="btnRect" onclick="setMode('rect')">Rectangle</button>
    </div>

    <div class="svg-container">
      <svg viewBox="0 0 380 215" aria-label="Diagram of numerical integration">
        <defs>
          
          <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#94a3b8"/>
          </marker>
        </defs>

        
        <line x1="40" y1="175" x2="360" y2="175" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arrow)"/>
        <line x1="55" y1="185" x2="55" y2="20" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arrow)"/>
        <text x="365" y="179" font-size="12" fill="#64748b" font-style="italic">x</text>
        <text x="50" y="15" font-size="12" fill="#64748b" font-style="italic">y</text>

        
        <path id="errorArea" d="" fill="rgba(239, 68, 68, 0.2)" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="3,3" style="transition: opacity 0.25s ease; opacity: 0;"/>

        
        <polygon id="approxShape" points="" fill="rgba(37,99,235,0.18)" stroke="#2563eb" stroke-width="2" style="transition: all 0.3s ease;"/>

        
        <path id="curvePath" d="" fill="none" stroke="#1e2945" stroke-width="2.5"/>
        <text x="290" y="48" font-size="12" font-weight="600" fill="#1e2945" font-style="italic">y = f(x)</text>

        
        <line id="lineA" x1="100" y1="175" x2="100" y2="60" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="3,3"/>
        <line id="lineB" x1="260" y1="175" x2="260" y2="140" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="3,3"/>

        
        <circle id="pointA" cx="100" cy="60" r="4" fill="#2563eb"/>
        <circle id="pointB" cx="260" cy="140" r="4" fill="#2563eb"/>

        
        <text x="100" y="193" font-size="12" font-weight="600" text-anchor="middle" fill="#1e2945">a</text>
        <text x="260" y="193" font-size="12" font-weight="600" text-anchor="middle" fill="#1e2945">b</text>

        
        <line x1="100" y1="175" x2="100" y2="202" stroke="#cbd5e1" stroke-width="1"/>
        <line x1="260" y1="175" x2="260" y2="202" stroke="#cbd5e1" stroke-width="1"/>
        <line x1="104" y1="200" x2="256" y2="200" stroke="#64748b" stroke-width="1" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
        <text x="180" y="213" font-size="11" font-weight="700" text-anchor="middle" fill="#2563eb">h = b − a</text>

        
        <text id="lblY0" x="88" y="120" font-size="13" font-weight="600" text-anchor="end" fill="#2563eb">y₀</text>
        <text id="lblY1" x="272" y="160" font-size="13" font-weight="600" text-anchor="start" fill="#2563eb">y₁</text>

        
        <text id="lblError" x="185" y="85" font-size="11" font-weight="700" text-anchor="middle" fill="#ef4444" style="opacity: 0; transition: opacity 0.25s ease;">Error Gap</text>
      </svg>
    </div>

    <div class="formula-bar" id="formulaBox" aria-live="polite"></div>
  </div>

  <script>
    // Geometry coordinates
    const ax = 100, bx = 260, base = 175;

    // Mathematical curve: y(x) in SVG pixels (concave curve)
    function f(x) {
      const t = (x - 70) / 120;
      return 175 - 120 * Math.exp(-0.45 * t * t);
    }

    const ay = f(ax); // ~58.3
    const by = f(bx); // ~136.2

    // Update coordinate point circles and line endpoints to exact values
    document.getElementById('pointA').setAttribute('cy', ay.toFixed(1));
    document.getElementById('pointB').setAttribute('cy', by.toFixed(1));
    document.getElementById('lineA').setAttribute('y2', ay.toFixed(1));
    document.getElementById('lineB').setAttribute('y2', by.toFixed(1));

    // Generate accurate smooth path for y = f(x)
    let curveD = `M 60 ${f(60).toFixed(2)}`;
    for (let x = 65; x <= 330; x += 5) {
      curveD += ` L ${x} ${f(x).toFixed(2)}`;
    }
    document.getElementById('curvePath').setAttribute('d', curveD);

    // Generate error area path between flat top of rectangle and actual curve
    let errorD = `M ${ax} ${ay.toFixed(2)}`;
    for (let x = ax; x <= bx; x += 5) {
      errorD += ` L ${x} ${f(x).toFixed(2)}`;
    }
    errorD += ` L ${bx} ${ay.toFixed(2)} Z`;
    document.getElementById('errorArea').setAttribute('d', errorD);

    function setMode(mode) {
      const isTrap = mode === 'trap';
      document.getElementById('btnTrap').classList.toggle('active', isTrap);
      document.getElementById('btnRect').classList.toggle('active', !isTrap);

      const approx = document.getElementById('approxShape');
      const errorArea = document.getElementById('errorArea');
      const lblError = document.getElementById('lblError');
      const lblY1 = document.getElementById('lblY1');
      const formulaBox = document.getElementById('formulaBox');

      if (isTrap) {
        approx.setAttribute('points', `${ax},${base} ${bx},${base} ${bx},${by.toFixed(1)} ${ax},${ay.toFixed(1)}`);
        errorArea.style.opacity = '0';
        lblError.style.opacity = '0';
        lblY1.style.opacity = '1';
        formulaBox.innerHTML = `
          <div class="math-expr">
            <span class="math-txt">Area</span>
            <span>=</span>
            <span class="frac">
              <span class="num"><span class="math-var">h</span></span>
              <span class="denom">2</span>
            </span>
            <span>(<span class="math-var">y</span><sub>0</sub> + <span class="math-var">y</span><sub>1</sub>)</span>
          </div>
        `;
      } else {
        approx.setAttribute('points', `${ax},${base} ${bx},${base} ${bx},${ay.toFixed(1)} ${ax},${ay.toFixed(1)}`);
        errorArea.style.opacity = '1';
        lblError.style.opacity = '1';
        lblY1.style.opacity = '0.35';
        formulaBox.innerHTML = `
          <div class="math-expr">
            <span class="math-txt">Area</span>
            <span>≈</span>
            <span class="math-var">h</span>
            <span>·</span>
            <span class="math-var">y</span><sub>0</sub>
            <span class="formula-desc">(Large Error Gap)</span>
          </div>
        `;
      }
    }

    // Initial render
    setMode('trap');
  </script>
</body>
</html>

Over- and Under-Estimation in the Trapezium Rule

Establishing Upper and Lower Bounds for Definite Integrals

Approximating Integrals from Discrete and Experimental Data

Solving Real-World Engineering and Environmental Problems with Numerical Methods

math

Numerical Integration and Approximation Bounds

Distancia entre dos puntos y punto medio en el plano

Pendiente e inclinación de una recta

Ecuaciones de la recta: punto-pendiente, general y simétrica

Rectas paralelas, perpendiculares y ángulo entre rectas

Distancia de un punto a una recta y entre rectas paralelas

Concepto de lugar geométrico y traducción algebraica

La mediatriz y la bisectriz como lugares geométricos

Transformaciones en el plano: traslación y rotación de ejes

Lugares geométricos en mecanismos y trayectorias físicas

Geometría analítica y lugares geométricos

Binomial Expansion for Positive Integer Powers

General Binomial Expansion for Rational Powers

Validity Range of Binomial Series Expansions

Approximating Roots and Constants Using Binomial Expansions

Combining Partial Fractions and Binomial Expansions

Binomial Series and Algebraic Expansions

Razones trigonométricas en triángulos rectángulos

Ángulos notables de 30, 45 y 60 grados

Ángulos de elevación y depresión en topografía

Ley del seno y casos de aplicación

El caso ambiguo de la ley del seno (LLA)

Ley del coseno: deducción y casos LAL y LLL

Fórmula de Herón y área de triángulos oblicuángulos

Aplicaciones en navegación marítima y aérea: rumbos y vectores

Trigonometría del triángulo y leyes del seno y coseno

Cifras significativas y redondeo en cálculos métricos

Error absoluto, error relativo y error porcentual

Propagación de incertidumbres en mediciones indirectas

Tolerancia y especificaciones en diseño e ingeniería

Velocidad media como razón de cambio en cinemática

Aceleración media y variación de velocidad

Densidad media y presión en sistemas materiales

Caudal, flujo y otras razones de transferencia de materia

Procesos de aproximación sucesiva y método de exhaución

Rangos de variación y límites en mediciones continuas

Precisión de la medición, tolerancia y magnitudes derivadas

Locating Roots by Sign Change Tests and Continuity

Limitations and Failure Modes of Sign Change Methods

Fixed-Point Iteration: Rearranging to x = g(x)

Staircase and Cobweb Diagrams for Iteration

Convergence Criteria for Fixed-Point Iteration

Deriving the Newton-Raphson Formula Geometrically

Applying Newton-Raphson to Find Roots to a Required Accuracy

Failure Cases of the Newton-Raphson Method

Evaluating Accuracy and Error Bounds in Numerical Methods

Numerical Methods and Error Analysis

Bivariate Data: Scatter Diagrams and Linear Correlation

Least Squares Linear Regression and Interpolation

Solving Probability Problems Using Venn Diagrams

Solving Probability Problems Using Tree Diagrams

Conditional Probability and the Multiplication Law

Bivariate Data Analysis and Probability

Discrete Random Variables and Probability Distributions

The Binomial Distribution: Model and Assumptions

Calculating Binomial Probabilities Using Cumulative Distribution Functions

The Normal Distribution: Properties and the Standard Normal Z

Calculating Normal Probabilities and the Inverse Normal Function

Finding Unknown Mean and Standard Deviation in Normal Models

Normal Approximation to the Binomial Distribution

Discrete and Continuous Probability Distributions

Numerical Integration: The Trapezium Rule

Comparing Efficiency and Accuracy of Numerical Methods

Numerical Integration and Applied Methods

Interpretación de datos en medios de comunicación

Detección de sesgos en gráficas, escalas y encuestas

Métodos de muestreo probabilístico: aleatorio, estratificado y por conglomerados

OGM.13.NUMA.2

Aligned learning resources

Related diagrams