<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <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: #1e293b;
      padding: 12px 8px;
    }
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
    }
    .panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px 4px;
    }
    .panel-header {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 4px;
      text-align: center;
    }
    .math-formula {
      font-size: 15px;
      min-height: 28px;
      color: #1e293b;
      margin-bottom: 8px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      max-width: 280px;
      height: auto;
      overflow: visible;
    }
    .axis { stroke: #94a3b8; stroke-width: 1.5; }
    .axis-arrow { fill: #94a3b8; }
    .curve { fill: none; stroke: #2563eb; stroke-width: 2.5; stroke-linecap: round; }
    .area-pos { fill: #22c55e; fill-opacity: 0.28; }
    .area-neg { fill: #ef4444; fill-opacity: 0.28; }
    .area-label {
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .pos-text { fill: #15803d; }
    .neg-text { fill: #b91c1c; }
    .axis-label {
      font-size: 11px;
      fill: #64748b;
      font-family: system-ui, -apple-system, sans-serif;
    }
    .result-badge {
      margin-top: 10px;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .badge-signed { background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; }
    .badge-total { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
  </style>
</head>
<body>
  <div class="grid-container">
    
    <div class="panel">
      <div class="panel-header">Net Signed Area</div>
      <div id="math-signed" class="math-formula">
        <span>∫ <i>f</i>(<i>x</i>) d<i>x</i> = <i>A</i>₁ − <i>A</i>₂</span>
      </div>
      <svg viewBox="0 0 240 150" aria-label="Net signed area under f(x)">
        <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 L 8 5 L 0 9 z" class="axis-arrow" />
          </marker>
        </defs>

        
        <line x1="18" y1="75" x2="230" y2="75" class="axis" marker-end="url(#arrow)" />
        <line x1="30" y1="140" x2="30" y2="12" class="axis" marker-end="url(#arrow)" />
        
        
        <text x="232" y="79" class="axis-label">x</text>
        <text x="30" y="8" class="axis-label" text-anchor="middle">y</text>
        <text x="30" y="89" class="axis-label" text-anchor="middle">0</text>
        <text x="120" y="89" class="axis-label" text-anchor="middle">π</text>
        <text x="210" y="89" class="axis-label" text-anchor="middle">2π</text>

        
        <path id="path-left-pos" class="area-pos" />
        
        <path id="path-left-neg" class="area-neg" />

        
        <path id="curve-left" class="curve" />

        
        <text x="75" y="48" class="area-label pos-text">+A₁</text>
        <text x="165" y="102" class="area-label neg-text">−A₂</text>
      </svg>
      <div class="result-badge badge-signed" id="badge-signed">
        ∫ f(x) dx = A₁ − A₂ = 0
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-header">Total Geometric Area</div>
      <div id="math-total" class="math-formula">
        <span>∫ |<i>f</i>(<i>x</i>)| d<i>x</i> = |<i>A</i>₁| + |<i>A</i>₂|</span>
      </div>
      <svg viewBox="0 0 240 150" aria-label="Total geometric area under |f(x)|">
        
        <line x1="18" y1="120" x2="230" y2="120" class="axis" marker-end="url(#arrow)" />
        <line x1="30" y1="140" x2="30" y2="12" class="axis" marker-end="url(#arrow)" />

        
        <text x="232" y="124" class="axis-label">x</text>
        <text x="30" y="8" class="axis-label" text-anchor="middle">y</text>
        <text x="30" y="134" class="axis-label" text-anchor="middle">0</text>
        <text x="120" y="134" class="axis-label" text-anchor="middle">π</text>
        <text x="210" y="134" class="axis-label" text-anchor="middle">2π</text>

        
        <path id="path-right-pos1" class="area-pos" />
        
        <path id="path-right-pos2" class="area-pos" />

        
        <path id="curve-right" class="curve" />

        
        <text x="75" y="78" class="area-label pos-text">|A₁|</text>
        <text x="165" y="78" class="area-label pos-text">|A₂|</text>
      </svg>
      <div class="result-badge badge-total" id="badge-total">
        ∫ |f(x)| dx = |A₁| + |A₂| &gt; 0
      </div>
    </div>
  </div>

  <script>
    // Mathematical curve plotting
    function generateSinePath(xStart, xEnd, yZero, amplitude, steps, isAbsolute) {
      let dCurve = "";
      for (let i = 0; i <= steps; i++) {
        const t = i / steps;
        const x = xStart + t * (xEnd - xStart);
        const theta = t * 2 * Math.PI;
        let yVal = Math.sin(theta);
        if (isAbsolute) yVal = Math.abs(yVal);
        const y = yZero - yVal * amplitude;
        dCurve += (i === 0 ? `M ${x.toFixed(2)} ${y.toFixed(2)}` : ` L ${x.toFixed(2)} ${y.toFixed(2)}`);
      }
      return dCurve;
    }

    function generateHalfSineArea(xStart, xEnd, yZero, amplitude, isPositive, baselineY) {
      let d = `M ${xStart.toFixed(2)} ${baselineY.toFixed(2)}`;
      const steps = 30;
      for (let i = 0; i <= steps; i++) {
        const t = i / steps;
        const x = xStart + t * (xEnd - xStart);
        const theta = t * Math.PI;
        const yVal = Math.sin(theta) * (isPositive ? 1 : -1);
        const y = yZero - yVal * amplitude;
        d += ` L ${x.toFixed(2)} ${y.toFixed(2)}`;
      }
      d += ` L ${xEnd.toFixed(2)} ${baselineY.toFixed(2)} Z`;
      return d;
    }

    // Left SVG paths: f(x)
    document.getElementById('curve-left').setAttribute('d', generateSinePath(30, 210, 75, 45, 60, false));
    document.getElementById('path-left-pos').setAttribute('d', generateHalfSineArea(30, 120, 75, 45, true, 75));
    document.getElementById('path-left-neg').setAttribute('d', generateHalfSineArea(120, 210, 75, 45, false, 75));

    // Right SVG paths: |f(x)|
    document.getElementById('curve-right').setAttribute('d', generateSinePath(30, 210, 120, 70, 60, true));
    document.getElementById('path-right-pos1').setAttribute('d', generateHalfSineArea(30, 120, 120, 70, true, 120));
    document.getElementById('path-right-pos2').setAttribute('d', generateHalfSineArea(120, 210, 120, 70, true, 120));

    // Render KaTeX expressions if available
    window.addEventListener('DOMContentLoaded', () => {
      if (typeof katex !== 'undefined') {
        katex.render("\\int_{0}^{2\\pi} f(x)\\,dx = A_1 - A_2", document.getElementById('math-signed'), { throwOnError: false });
        katex.render("\\int_{0}^{2\\pi} |f(x)|\\,dx = |A_1| + |A_2|", document.getElementById('math-total'), { throwOnError: false });
        katex.render("\\int_{0}^{2\\pi} f(x)\\,dx = 0", document.getElementById('badge-signed'), { throwOnError: false });
        katex.render("\\int_{0}^{2\\pi} |f(x)|\\,dx = 2A_1 > 0", document.getElementById('badge-total'), { throwOnError: false });
      }
    });
  </script>
</body>
</html>

Net Signed Area vs. Total Geometric Area Under a Curve

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .tabs {
      display: flex;
      gap: 6px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 8px;
    }
    .tab-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .graph-container {
      width: 100%;
      max-width: 440px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .axis { stroke: #94a3b8; stroke-width: 1.5; stroke-linecap: round; }
    .grid { stroke: #f1f5f9; stroke-width: 1; }
    .curve { fill: none; stroke: #2563eb; stroke-width: 2.5; }
    .curve-flipped { fill: none; stroke: #d97706; stroke-width: 2; stroke-dasharray: 4,4; transition: opacity 0.3s ease; }
    
    .region { transition: fill-opacity 0.3s ease, fill 0.3s ease; }
    .region-r1 { fill: #ef4444; fill-opacity: 0.22; }
    .region-r2 { fill: #10b981; fill-opacity: 0.22; }
    
    .summary-card {
      width: 100%;
      max-width: 440px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 13px;
    }
    .sum-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }
    .sum-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .sum-val {
      font-weight: 700;
      font-size: 14px;
    }
    .c-net { color: #2563eb; }
    .c-tot { color: #d97706; }
    .c-r1 { color: #dc2626; }
    .c-r2 { color: #059669; }
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 0.9em;
      line-height: 1;
      margin: 0 1px;
    }
    .frac > span:first-child { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
    .frac > span:last-child { padding-top: 1px; }
    .active-highlight {
      outline: 2px solid #2563eb;
      outline-offset: 2px;
      border-radius: 4px;
      background: #eff6ff;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" id="btnBoth" onclick="setView('both')">Compare Both</button>
    <button class="tab-btn" id="btnNet" onclick="setView('net')">Net Area</button>
    <button class="tab-btn" id="btnTot" onclick="setView('total')">Total Area</button>
  </div>

  <div class="graph-container">
    <svg viewBox="0 0 380 230" id="graphSvg">
      
      <line x1="45" y1="30" x2="355" y2="30" class="grid" />
      <line x1="45" y1="80" x2="355" y2="80" class="grid" />
      <line x1="45" y1="130" x2="355" y2="130" class="grid" />
      <line x1="45" y1="180" x2="355" y2="180" class="grid" />
      
      <line x1="138" y1="20" x2="138" y2="215" class="grid" />
      <line x1="231" y1="20" x2="231" y2="215" class="grid" />
      <line x1="324" y1="20" x2="324" y2="215" class="grid" />

      
      <path id="pathR1" class="region region-r1" />
      <path id="pathR2" class="region region-r2" />

      
      
      <line x1="35" y1="130" x2="365" y2="130" class="axis" />
      
      <line x1="45" y1="15" x2="45" y2="215" class="axis" />

      
      
      <text x="45" y="145" font-size="11" fill="#64748b" text-anchor="middle">0</text>
      <text x="138" y="145" font-size="11" fill="#64748b" text-anchor="middle">1</text>
      <text x="231" y="145" font-size="11" fill="#64748b" text-anchor="middle" font-weight="700">2</text>
      <text x="324" y="145" font-size="11" fill="#64748b" text-anchor="middle">3</text>

      
      <text x="38" y="34" font-size="11" fill="#64748b" text-anchor="end">+5</text>
      <text x="38" y="134" font-size="11" fill="#64748b" text-anchor="end">0</text>
      <text x="38" y="213" font-size="11" fill="#64748b" text-anchor="end">-4</text>

      
      <path id="flippedCurve" class="curve-flipped" opacity="0" />

      
      <path id="mainCurve" class="curve" />

      
      <circle cx="231" cy="130" r="4.5" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
      <rect x="206" y="105" width="50" height="18" rx="4" fill="#1e2945" />
      <text x="231" y="117.5" font-size="10" font-weight="600" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">Root (2,0)</text>

      
      <text x="300" y="42" font-size="12" font-weight="700" fill="#2563eb">f(x) = x² − 4</text>

      
      <g id="labelR1" transform="translate(135, 175)">
        <rect x="-35" y="-12" width="70" height="24" rx="5" fill="#fee2e2" stroke="#fca5a5" stroke-width="1"/>
        <text x="0" y="4" font-size="11" font-weight="700" fill="#b91c1c" text-anchor="middle" id="txtR1">R₁ = −16/3</text>
      </g>

      
      <g id="labelR2" transform="translate(285, 95)">
        <rect x="-35" y="-12" width="70" height="24" rx="5" fill="#d1fae5" stroke="#6ee7b7" stroke-width="1"/>
        <text x="0" y="4" font-size="11" font-weight="700" fill="#047857" text-anchor="middle" id="txtR2">R₂ = +7/3</text>
      </g>
    </svg>
  </div>

  <div class="summary-card">
    <div class="sum-item" id="cardNet">
      <span class="sum-label c-net">Net Signed Area</span>
      <span class="sum-val c-net">
        <span class="c-r1">−<span class="frac"><span>16</span><span>3</span></span></span>
        + 
        <span class="c-r2"><span class="frac"><span>7</span><span>3</span></span></span>
        = <strong>−3</strong>
      </span>
    </div>

    <div style="width: 1px; height: 32px; background: #e2e8f0;"></div>

    <div class="sum-item" id="cardTot">
      <span class="sum-label c-tot">Total Geometric Area</span>
      <span class="sum-val c-tot">
        <span class="c-r1">|<span class="frac"><span>16</span><span>3</span></span>|</span>
        + 
        <span class="c-r2"><span class="frac"><span>7</span><span>3</span></span></span>
        = <strong><span class="frac"><span>23</span><span>3</span></span></strong>
      </span>
    </div>
  </div>

  <script>
    // Coordinate mapping
    // x: [0, 3.2] -> px: [45, 342.6] => px = 45 + x * 93
    // y: [-4.2, 5.2] -> px: [214, 26] => y=0 is at 210 - 4*20 = 130
    function toSvg(x, y) {
      const px = 45 + x * 93;
      const py = 130 - y * 20;
      return [px, py];
    }

    function f(x) { return x * x - 4; }

    // Generate exact curve path
    let curvePath = "";
    let r1Path = `M ${toSvg(0, 0)[0]} ${toSvg(0, 0)[1]} `;
    let r2Path = `M ${toSvg(2, 0)[0]} ${toSvg(2, 0)[1]} `;
    let flippedPath = `M ${toSvg(0, 0)[0]} ${toSvg(0, 4)[1]} `;

    const step = 0.05;
    for (let x = 0; x <= 3.1; x += step) {
      const y = f(x);
      const [px, py] = toSvg(x, y);
      curvePath += (x === 0 ? "M " : "L ") + `${px.toFixed(1)} ${py.toFixed(1)} `;
    }

    // Region 1: 0 to 2
    for (let x = 0; x <= 2.001; x += step) {
      const y = f(x);
      const [px, py] = toSvg(x, y);
      r1Path += `L ${px.toFixed(1)} ${py.toFixed(1)} `;
      
      const [fpx, fpy] = toSvg(x, -y);
      flippedPath += `L ${fpx.toFixed(1)} ${fpy.toFixed(1)} `;
    }
    r1Path += `L ${toSvg(2, 0)[0]} ${toSvg(2, 0)[1]} Z`;

    // Region 2: 2 to 3
    for (let x = 2; x <= 3.001; x += step) {
      const y = f(x);
      const [px, py] = toSvg(x, y);
      r2Path += `L ${px.toFixed(1)} ${py.toFixed(1)} `;
    }
    r2Path += `L ${toSvg(3, 0)[0]} ${toSvg(3, 0)[1]} Z`;

    document.getElementById("mainCurve").setAttribute("d", curvePath);
    document.getElementById("pathR1").setAttribute("d", r1Path);
    document.getElementById("pathR2").setAttribute("d", r2Path);
    document.getElementById("flippedCurve").setAttribute("d", flippedPath);

    function setView(mode) {
      const btnBoth = document.getElementById("btnBoth");
      const btnNet = document.getElementById("btnNet");
      const btnTot = document.getElementById("btnTot");
      const cardNet = document.getElementById("cardNet");
      const cardTot = document.getElementById("cardTot");
      const pathR1 = document.getElementById("pathR1");
      const pathR2 = document.getElementById("pathR2");
      const flipped = document.getElementById("flippedCurve");
      const txtR1 = document.getElementById("txtR1");

      btnBoth.classList.remove("active");
      btnNet.classList.remove("active");
      btnTot.classList.remove("active");
      cardNet.style.opacity = "1";
      cardTot.style.opacity = "1";

      if (mode === "net") {
        btnNet.classList.add("active");
        cardTot.style.opacity = "0.35";
        flipped.setAttribute("opacity", "0");
        pathR1.setAttribute("class", "region region-r1");
        txtR1.textContent = "R₁ = −16/3";
      } else if (mode === "total") {
        btnTot.classList.add("active");
        cardNet.style.opacity = "0.35";
        flipped.setAttribute("opacity", "1");
        pathR1.setAttribute("class", "region");
        pathR1.style.fill = "#f59e0b";
        pathR1.style.fillOpacity = "0.22";
        txtR1.textContent = "|R₁| = +16/3";
      } else {
        btnBoth.classList.add("active");
        flipped.setAttribute("opacity", "0");
        pathR1.setAttribute("class", "region region-r1");
        pathR1.style.fill = "";
        pathR1.style.fillOpacity = "";
        txtR1.textContent = "R₁ = −16/3";
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <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: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 16px;
      user-select: none;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      width: 100%;
      max-width: 520px;
      justify-content: center;
    }

    .toggle-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .toggle-btn.active {
      color: #0f172a;
      background: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
    }

    .graph-container {
      width: 100%;
      max-width: 560px;
      position: relative;
    }

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

    .axis-line {
      stroke: #94a3b8;
      stroke-width: 1.5;
    }

    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
      stroke-dasharray: 3 3;
    }

    .axis-label {
      font-size: 13px;
      fill: #64748b;
      font-weight: 500;
      text-anchor: middle;
      dominant-baseline: middle;
    }

    .area-pos {
      fill: rgba(16, 185, 129, 0.22);
      stroke: #059669;
      stroke-width: 1.5;
      transition: all 0.3s ease;
    }

    .area-neg {
      fill: rgba(244, 63, 94, 0.22);
      stroke: #e11d48;
      stroke-width: 1.5;
      transition: all 0.3s ease;
    }

    .curve {
      fill: none;
      stroke: #1e2945;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .region-badge {
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: middle;
      transition: all 0.3s ease;
    }

    .badge-pos {
      fill: #065f46;
    }

    .badge-neg {
      fill: #9f1239;
    }

    .equation-card {
      margin-top: 6px;
      padding: 10px 16px;
      border-radius: 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 700;
      width: 100%;
      max-width: 520px;
      min-height: 48px;
      box-sizing: border-box;
      transition: background 0.3s ease;
    }

    .val-pos {
      color: #059669;
      background: rgba(16, 185, 129, 0.12);
      padding: 2px 6px;
      border-radius: 4px;
    }

    .val-neg {
      color: #e11d48;
      background: rgba(244, 63, 94, 0.12);
      padding: 2px 6px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    .val-res {
      color: #1e2945;
      padding: 2px 8px;
      border-radius: 6px;
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button id="btnSigned" class="toggle-btn active">Net Signed Area</button>
    <button id="btnTotal" class="toggle-btn">Total Geometric Area</button>
  </div>

  <div class="graph-container">
    <svg viewBox="0 0 540 230" id="mathSvg">
      
      <line x1="40" y1="40" x2="500" y2="40" class="grid-line" />
      <line x1="40" y1="200" x2="500" y2="200" class="grid-line" />
      <line x1="155" y1="30" x2="155" y2="210" class="grid-line" />
      <line x1="385" y1="30" x2="385" y2="210" class="grid-line" />

      
      <line x1="40" y1="120" x2="515" y2="120" class="axis-line" />
      <polyline points="510,116 518,120 510,124" fill="none" stroke="#94a3b8" stroke-width="1.5" />
      <line x1="40" y1="210" x2="40" y2="25" class="axis-line" />
      <polyline points="36,32 40,24 44,32" fill="none" stroke="#94a3b8" stroke-width="1.5" />

      
      <path id="posArea" class="area-pos" d="" />
      <path id="negArea" class="area-neg" d="" />
      <path id="curvePath" class="curve" d="" />

      
      <text x="30" y="40" class="axis-label">+1</text>
      <text x="30" y="120" class="axis-label">0</text>
      <text x="30" y="200" class="axis-label">-1</text>

      <text x="155" y="136" class="axis-label">π/2</text>
      <text x="270" y="136" class="axis-label">π</text>
      <text x="385" y="136" class="axis-label">3π/2</text>
      <text x="500" y="136" class="axis-label">2π</text>

      <text x="522" y="120" class="axis-label" style="font-style: italic; font-weight: 600;">x</text>
      <text x="40" y="14" class="axis-label" style="font-style: italic; font-weight: 600;">y = sin(x)</text>

      
      <g id="badgeGroup1">
        <rect x="100" y="60" width="110" height="26" rx="6" fill="#ffffff" stroke="#10b981" stroke-width="1.5" />
        <text x="155" y="74" class="region-badge badge-pos">+ Area (+2)</text>
      </g>

      <g id="badgeGroup2">
        <rect id="badge2Rect" x="330" y="154" width="110" height="26" rx="6" fill="#ffffff" stroke="#f43f5e" stroke-width="1.5" />
        <text id="badge2Text" x="385" y="168" class="region-badge badge-neg">- Area (-2)</text>
      </g>
    </svg>
  </div>

  <div class="equation-card" id="eqCard">
    <span id="eqTitle">Net Signed Area =</span>
    <span class="val-pos">(+2)</span>
    <span id="eqOp">+</span>
    <span class="val-neg" id="eqNegVal">(-2)</span>
    <span>=</span>
    <span class="val-res" id="eqRes">0</span>
  </div>

  <script>
    const x0 = 40, xPi = 270, x2Pi = 500;
    const yMid = 120, amp = 80;

    function buildPaths(mode) {
      let dCurve = `M ${x0} ${yMid}`;
      let dPos = `M ${x0} ${yMid}`;
      let dNeg = `M ${xPi} ${yMid}`;

      const steps = 100;
      for (let i = 0; i <= steps; i++) {
        const xVal = (i / steps) * (2 * Math.PI);
        const px = x0 + (i / steps) * (x2Pi - x0);
        let py = yMid - Math.sin(xVal) * amp;

        if (mode === 'total' && xVal >= Math.PI) {
          py = yMid - Math.abs(Math.sin(xVal)) * amp;
        }

        dCurve += ` L ${px.toFixed(2)} ${py.toFixed(2)}`;

        if (xVal <= Math.PI) {
          dPos += ` L ${px.toFixed(2)} ${py.toFixed(2)}`;
        } else {
          dNeg += ` L ${px.toFixed(2)} ${py.toFixed(2)}`;
        }
      }

      dPos += ` L ${xPi} ${yMid} Z`;
      dNeg += ` L ${x2Pi} ${yMid} Z`;

      document.getElementById('curvePath').setAttribute('d', dCurve);
      document.getElementById('posArea').setAttribute('d', dPos);
      document.getElementById('negArea').setAttribute('d', dNeg);
    }

    function setMode(mode) {
      const btnSigned = document.getElementById('btnSigned');
      const btnTotal = document.getElementById('btnTotal');
      const badge2Rect = document.getElementById('badge2Rect');
      const badge2Text = document.getElementById('badge2Text');
      const eqTitle = document.getElementById('eqTitle');
      const eqOp = document.getElementById('eqOp');
      const eqNegVal = document.getElementById('eqNegVal');
      const eqRes = document.getElementById('eqRes');
      const negArea = document.getElementById('negArea');

      if (mode === 'signed') {
        btnSigned.classList.add('active');
        btnTotal.classList.remove('active');

        buildPaths('signed');

        negArea.setAttribute('class', 'area-neg');
        badge2Rect.setAttribute('y', '154');
        badge2Rect.setAttribute('stroke', '#f43f5e');
        badge2Text.setAttribute('y', '168');
        badge2Text.setAttribute('class', 'region-badge badge-neg');
        badge2Text.textContent = '- Area (-2)';

        eqTitle.textContent = 'Net Signed Area =';
        eqOp.textContent = '+';
        eqNegVal.textContent = '(-2)';
        eqNegVal.style.color = '#e11d48';
        eqNegVal.style.background = 'rgba(244, 63, 94, 0.12)';
        eqRes.textContent = '0';
      } else {
        btnTotal.classList.add('active');
        btnSigned.classList.remove('active');

        buildPaths('total');

        negArea.setAttribute('class', 'area-pos');
        badge2Rect.setAttribute('y', '60');
        badge2Rect.setAttribute('stroke', '#10b981');
        badge2Text.setAttribute('y', '74');
        badge2Text.setAttribute('class', 'region-badge badge-pos');
        badge2Text.textContent = '+ Area (+2)';

        eqTitle.textContent = 'Total Geometric Area =';
        eqOp.textContent = '+';
        eqNegVal.textContent = '|+2|';
        eqNegVal.style.color = '#059669';
        eqNegVal.style.background = 'rgba(16, 185, 129, 0.12)';
        eqRes.textContent = '4';
      }
    }

    document.getElementById('btnSigned').addEventListener('click', () => setMode('signed'));
    document.getElementById('btnTotal').addEventListener('click', () => setMode('total'));

    // Initial render
    buildPaths('signed');
  </script>
</body>
</html>

Calculating Area for Curves Crossing the Horizontal Axis

Area Enclosed Between Two Intersecting Algebraic Curves

Area Between Curves Intersecting at Multiple Points

Area Enclosed Between Transcendental and Trigonometric Curves

Calculating Enclosed Area by Integrating with Respect to y

math

Area Under Curves and Between Intersecting Functions

The Three Fires Confederacy: Ojibwe, Odawa, and Bodéwadmi

Traditional Anishinaabe Seasonal Migration and Economy

Indigenous Governance and Doodem (Clan) Systems in Michigan

French Exploration of the Upper Great Lakes

Establishment of Sault Ste. Marie and St. Ignace Missions

Founding of Fort Pontchartrain du Détroit in 1701

The Fur Trade Network: Voyageurs and Coureurs des Bois

The Middle Ground: Cultural Adaptation and Diplomacy

Intermarriage and the Emergence of Métis Communities

social-studies

Indigenous Michigan and the French Fur Trade

French and Indian War in the Great Lakes Region

Pontiac's War and the Siege of Fort Detroit

The Royal Proclamation of 1763 and the Quebec Act of 1774

Michigan During the American Revolutionary War

British Delayed Evacuation and Jay's Treaty in Michigan

Colonial Conflict and British Rule in Michigan (1754–1796)

The Fundamental Theorem of Calculus and Definite Integrals

Area Under Simple Curves

Calculating Areas Below the Horizontal Axis

Area Under a Curve and Between Curves

Understanding Integration as the Limit of a Riemann Sum

Evaluating Limits of Finite Sums Using Definite Integrals

Finding Areas Bounded by Curves and the y-Axis

Finding Distance Travelled Using Definite Integrals

Definite Integrals and Applications of Area

The Articles of Confederation: Structure and Weaknesses

The Northwest Ordinance of 1787 and Governance of Territories

Shays' Rebellion and the Call for Constitutional Reform

The Constitutional Convention: Debates and Compromises

Constitutional Compromises on Slavery: Three-Fifths Clause

Separation of Powers, Checks and Balances, and Federalism

Federalists, Anti-Federalists, and the Ratification Debates

The Bill of Rights: Protecting Fundamental Liberties

The Living Constitution: Amendment Process and Interpretation

Creating the U.S. Constitution: Confederation to Ratification

Hamilton's Financial Plan and the First Party System

Washington's Farewell Address and Early Foreign Policy

The Alien and Sedition Acts and the Virginia-Kentucky Resolutions

The Louisiana Purchase and the Lewis and Clark Expedition

Marbury v. Madison and the Doctrine of Judicial Review

Causes and Outcomes of the War of 1812

The Monroe Doctrine and Western Hemisphere Diplomacy

The Missouri Compromise of 1820 and the 36°30' Line

The Early Republic: Institutions, Foreign Policy, and Early Expansion

The Creation of Michigan Territory in 1805

Governor Lewis Cass and Territorial Expansion

Treaties of Saginaw and Chicago: Indigenous Land Cessions

The 1836 Treaty of Washington and Treaty Rights

The Erie Canal and the "Michigan Fever" Settlement Boom

Pioneer Life, Land Clearing, and Early Agriculture in Michigan

Michigan Territory: Treaties, Migration, and Frontier Settlement

The Toledo War: Boundary Dispute With Ohio

The Frostbitten Convention and the Upper Peninsula Compromise

Stevens T. Mason and Michigan's First Constitution (1835)

Michigan Admission as the 26th State in 1837

Early Public Education and Founding of the University of Michigan

The Copper Rush of the Keweenaw Peninsula

Iron Ore Discovery and the Founding of Marquette

Becoming Michigan: Statehood, Governance, and Resource Expansion

The Compromise of 1850 and the Fugitive Slave Act

The Underground Railroad and Michigan's Cross-Border Role

The Kansas-Nebraska Act and Bleeding Kansas

Birth of the Republican Party Under the Oaks in Jackson, Michigan

The Dred Scott Decision and Constitutional Crisis

John Brown's Raid on Harpers Ferry

The Election of 1860 and Southern Secession

The Sectional Crisis and the Road to the Civil War

Mobilization, Resources, and Military Strategies of Union and Confederacy

Antietam and the Emancipation Proclamation

Turning Points: Gettysburg and Vicksburg

Michigan Troops in the Civil War and the Iron Brigade

Total War and the Surrender at Appomattox

Presidential Versus Radical Congressional Reconstruction

The Reconstruction Amendments: 13th, 14th, and 15th

The Rise of Jim Crow, Sharecropping, and the Compromise of 1877

The Civil War, Emancipation, and Reconstruction

The Second Industrial Revolution and Technological Innovations

Corporations, Monopolies, and Captains of Industry

Michigan's White Pine Lumber Boom and Timber Barons

The Soo Locks and Great Lakes Shipping Networks

Copper Mining Strikes and the Italian Hall Disaster of 1913

Henry Ford, the Moving Assembly Line, and the $5 Day

Detroit as the Motor City and Industrial Hub

The Rise of the United Auto Workers and the Flint Sit-Down Strike

Industrialization, Mass Production, and Michigan's Industrial Rise

The Great Migration and Urbanization in Michigan

Waves of Immigration and Ethnic Enclaves in Industrial America

Nativism, the Chinese Exclusion Act, and Immigration Quotas

The Gilded Age Labor Movement: Knights of Labor and AFL

Progressive Era Reforms: Muckrakers and Trust-Busting

Settlement Houses and the Social Gospel Movement

The Women's Suffrage Movement and the 19th Amendment

Progressive Constitutional Amendments: 16th, 17th, and 18th

Urbanization, Immigration, and Progressive Era Reforms

Foundations of American Constitutional Republicanism

The Legislative Branch: Congressional Powers and Lawmaking

The Executive Branch: Presidential Roles and the Bureaucracy

The Judicial Branch: Federal Courts and Judicial Decision-Making

Checks and Balances in Action: Inter-Branch Oversight

Federalism: Division of Powers Between States and Nation

Michigan State Government Structure and Constitution

Local Government in Michigan: Counties, Townships, and Cities

Constitutional Foundations and Government Institutions

Measuring the Macroeconomy: GDP and Economic Growth

Unemployment: Types, Measurement, and the Natural Rate

Inflation, Consumer Price Index, and Purchasing Power

The Business Cycle and Economic Fluctuations

Fiscal Policy: Taxation, Government Spending, and Deficits

Monetary Policy: The Federal Reserve and Interest Rates

International Trade: Comparative Advantage and Tariffs

Globalization, Supply Chains, and Michigan's Global Economy

Macroeconomics: Public Policy and the Global Economy

OGM.13.CAL.7

OGM.13.CAL.7

Aligned learning resources

Related diagrams