<!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">
  <title>Substitution Flow</title>
  <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: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 14px 12px;
      user-select: none;
    }

    .var-x { color: #2563eb; font-weight: 700; }
    .var-y { color: #16a34a; font-weight: 700; }
    .math-sym { color: #64748b; }

    /* Nav Buttons / Stepper */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 500px;
      margin-bottom: 8px;
    }
    .step-btn {
      flex: 1;
      padding: 6px 2px;
      font-size: 12px;
      font-weight: 700;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      text-align: center;
    }
    .step-btn.active {
      background: #eff6ff;
      border-color: #2563eb;
      color: #2563eb;
      box-shadow: 0 0 0 1px #2563eb;
    }
    .play-btn {
      width: 32px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      color: #1e2945;
    }

    /* Main Showcase Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-card {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .step-card.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #64748b;
    }

    .math-display {
      font-size: 24px;
      text-align: center;
      line-height: 1.4;
      padding: 10px 18px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      min-width: 240px;
    }

    .sub-display {
      display: flex;
      gap: 12px;
      font-size: 18px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .sub-box {
      padding: 8px 14px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .solution-box {
      background: #f0fdf4;
      border-color: #86efac;
      color: #15803d;
      font-weight: 700;
      font-size: 20px;
      padding: 10px 18px;
      border-radius: 12px;
    }

    /* Mini Progress Flow Indicator at bottom */
    .flow-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 100%;
      max-width: 520px;
      padding-top: 4px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .dot.active {
      background: #2563eb;
      transform: scale(1.3);
    }
    .legend {
      display: flex;
      gap: 16px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 4px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .color-pill {
      width: 10px;
      height: 10px;
      border-radius: 3px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" data-step="0">1</button>
    <button class="step-btn" data-step="1">2</button>
    <button class="step-btn" data-step="2">3</button>
    <button class="step-btn" data-step="3">4</button>
    <button class="step-btn" data-step="4">5</button>
    <button class="step-btn" data-step="5">6</button>
    <button id="playBtn" class="play-btn" aria-label="Play/Pause">⏸</button>
  </div>

  
  <div class="stage">

    
    <div class="step-card active" id="card-0">
      <span class="badge">1. System</span>
      <div class="math-display">
        <div><span class="var-y">y</span> = 2<span class="var-x">x</span> − 1</div>
        <div><span class="var-y">y</span> = <span class="var-x">x</span>² − 4</div>
      </div>
    </div>

    
    <div class="step-card" id="card-1">
      <span class="badge">2. Equate</span>
      <div class="math-display">
        <span class="var-x">x</span>² − 4 = 2<span class="var-x">x</span> − 1
      </div>
      <div style="font-size: 13px; color: #64748b; font-weight: 600;">
        <span class="var-y">y</span> = <span class="var-y">y</span>
      </div>
    </div>

    
    <div class="step-card" id="card-2">
      <span class="badge">3. Rearrange</span>
      <div class="math-display">
        <span class="var-x">x</span>² − 2<span class="var-x">x</span> − 3 = 0
      </div>
      <div style="font-size: 13px; color: #64748b; font-weight: 600;">
        − 2<span class="var-x">x</span> + 1
      </div>
    </div>

    
    <div class="step-card" id="card-3">
      <span class="badge">4. Factor</span>
      <div class="math-display">
        (<span class="var-x">x</span> − 3)(<span class="var-x">x</span> + 1) = 0
      </div>
    </div>

    
    <div class="step-card" id="card-4">
      <span class="badge">5. Solve x</span>
      <div class="sub-display">
        <div class="sub-box"><span class="var-x">x</span> = 3</div>
        <div class="sub-box"><span class="var-x">x</span> = −1</div>
      </div>
    </div>

    
    <div class="step-card" id="card-5">
      <span class="badge">6. Solutions</span>
      <div class="sub-display">
        <div class="sub-box solution-box">(<span class="var-x">3</span>, <span class="var-y">5</span>)</div>
        <div class="sub-box solution-box">(<span class="var-x">−1</span>, <span class="var-y">−3</span>)</div>
      </div>
      <div style="font-size: 12px; color: #64748b; font-weight: 600;">
        <span class="var-y">y</span> = 2<span class="var-x">x</span> − 1
      </div>
    </div>

  </div>

  
  <div class="flow-strip">
    <div class="dot active" data-step="0"></div>
    <div class="dot" data-step="1"></div>
    <div class="dot" data-step="2"></div>
    <div class="dot" data-step="3"></div>
    <div class="dot" data-step="4"></div>
    <div class="dot" data-step="5"></div>
  </div>

  <div class="legend">
    <div class="legend-item">
      <div class="color-pill" style="background:#2563eb;"></div>
      <span><span class="var-x">x</span> value</span>
    </div>
    <div class="legend-item">
      <div class="color-pill" style="background:#16a34a;"></div>
      <span><span class="var-y">y</span> value</span>
    </div>
  </div>

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

    const cards = document.querySelectorAll('.step-card');
    const buttons = document.querySelectorAll('.step-btn');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');

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

    function nextStep() {
      setStep(currentStep + 1);
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(nextStep, 3500);
      playBtn.textContent = '⏸';
      isPlaying = true;
    }

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

    function togglePlay() {
      if (isPlaying) {
        stopTimer();
      } else {
        nextStep();
        startTimer();
      }
    }

    buttons.forEach((btn) => {
      btn.addEventListener('click', () => {
        setStep(parseInt(btn.getAttribute('data-step'), 10));
        startTimer();
      });
    });

    dots.forEach((dot) => {
      dot.addEventListener('click', () => {
        setStep(parseInt(dot.getAttribute('data-step'), 10));
        startTimer();
      });
    });

    playBtn.addEventListener('click', togglePlay);

    // Initial Start
    startTimer();
  </script>
</body>
</html>

Solving Linear-Quadratic Systems by Substitution

<!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;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 620px;
    }
    .col-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    }
    .col-card.active {
      background: #f0f7ff;
      border-color: #0284c7;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
    }
    .formula {
      font-size: 16px;
      font-weight: 800;
      font-family: "Cambria Math", "Times New Roman", serif;
      color: #0f172a;
      letter-spacing: 0.5px;
    }
    .badge {
      display: inline-block;
      margin: 4px 0;
      padding: 2px 8px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 20px;
    }
    .badge-2 { background: #dcfce7; color: #15803d; }
    .badge-1 { background: #fef9c3; color: #a16207; }
    .badge-0 { background: #fee2e2; color: #b91c1c; }
    .type-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }
    svg {
      width: 100%;
      max-width: 160px;
      height: auto;
      aspect-ratio: 1 / 1;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="col-card active" onclick="selectCard(0)">
      <div class="formula">&Delta; &gt; 0</div>
      <div class="badge badge-2">2 Points</div>
      <div class="type-label">Secant</div>
      <svg id="svg1" viewBox="0 0 160 160"></svg>
    </div>

    
    <div class="col-card" onclick="selectCard(1)">
      <div class="formula">&Delta; = 0</div>
      <div class="badge badge-1">1 Point</div>
      <div class="type-label">Tangent</div>
      <svg id="svg2" viewBox="0 0 160 160"></svg>
    </div>

    
    <div class="col-card" onclick="selectCard(2)">
      <div class="formula">&Delta; &lt; 0</div>
      <div class="badge badge-0">0 Points</div>
      <div class="type-label">No Touch</div>
      <svg id="svg3" viewBox="0 0 160 160"></svg>
    </div>
  </div>

  <script>
    const ORIGIN_X = 80;
    const ORIGIN_Y = 85;
    const SCALE_X = 26;
    const SCALE_Y = 20;

    function toSvg(x, y) {
      return {
        x: ORIGIN_X + x * SCALE_X,
        y: ORIGIN_Y - y * SCALE_Y
      };
    }

    function createAxes() {
      return `
        <line x1="12" y1="${ORIGIN_Y}" x2="148" y2="${ORIGIN_Y}" stroke="#cbd5e1" stroke-width="1.2" stroke-dasharray="2 2" />
        <line x1="${ORIGIN_X}" y1="12" x2="${ORIGIN_X}" y2="148" stroke="#cbd5e1" stroke-width="1.2" stroke-dasharray="2 2" />
      `;
    }

    function generateParabolaPath() {
      let d = "";
      for (let x = -2.3; x <= 2.301; x += 0.1) {
        const y = x * x - 2;
        const pt = toSvg(x, y);
        d += (d === "" ? "M" : " L") + ` ${pt.x.toFixed(1)} ${pt.y.toFixed(1)}`;
      }
      return `<path d="${d}" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" />`;
    }

    // Graph 1: Line y = x (Intersects at (-1, -1) and (2, 2))
    function drawGraph1() {
      const p1 = toSvg(-2.3, -2.3);
      const p2 = toSvg(2.3, 2.3);
      const int1 = toSvg(-1, -1);
      const int2 = toSvg(2, 2);

      document.getElementById('svg1').innerHTML = `
        ${createAxes()}
        ${generateParabolaPath()}
        <line x1="${p1.x}" y1="${p1.y}" x2="${p2.x}" y2="${p2.y}" stroke="#f43f5e" stroke-width="2.2" stroke-linecap="round" />
        <circle cx="${int1.x}" cy="${int1.y}" r="4.5" fill="#10b981" stroke="#ffffff" stroke-width="1.5" />
        <circle cx="${int2.x}" cy="${int2.y}" r="4.5" fill="#10b981" stroke="#ffffff" stroke-width="1.5" />
      `;
    }

    // Graph 2: Line y = 2x - 3 (Tangent at (1, -1))
    function drawGraph2() {
      const p1 = toSvg(-0.4, 2 * (-0.4) - 3);
      const p2 = toSvg(2.3, 2 * 2.3 - 3);
      const touch = toSvg(1, -1);

      document.getElementById('svg2').innerHTML = `
        ${createAxes()}
        ${generateParabolaPath()}
        <line x1="${p1.x}" y1="${p1.y}" x2="${p2.x}" y2="${p2.y}" stroke="#f43f5e" stroke-width="2.2" stroke-linecap="round" />
        <circle cx="${touch.x}" cy="${touch.y}" r="4.5" fill="#eab308" stroke="#ffffff" stroke-width="1.5" />
      `;
    }

    // Graph 3: Line y = 2x - 4.8 (No intersection)
    function drawGraph3() {
      const p1 = toSvg(0.5, 2 * 0.5 - 4.8);
      const p2 = toSvg(2.3, 2 * 2.3 - 4.8);

      document.getElementById('svg3').innerHTML = `
        ${createAxes()}
        ${generateParabolaPath()}
        <line x1="${p1.x}" y1="${p1.y}" x2="${p2.x}" y2="${p2.y}" stroke="#f43f5e" stroke-width="2.2" stroke-linecap="round" />
      `;
    }

    function selectCard(index) {
      const cards = document.querySelectorAll('.col-card');
      cards.forEach((card, idx) => {
        card.classList.toggle('active', idx === index);
      });
    }

    drawGraph1();
    drawGraph2();
    drawGraph3();
  </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; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    body {
      background: #ffffff;
      color: #1e2945;
      width: 100%;
      padding: 10px;
    }
    .layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      align-items: center;
      max-width: 640px;
      margin: 0 auto;
    }
    @media (max-width: 480px) {
      .layout {
        grid-template-columns: 1fr;
      }
    }
    .panel-math {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .step-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      opacity: 0.4;
      transition: opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
      cursor: pointer;
    }
    .step-card.active {
      opacity: 1;
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.12);
    }
    .step-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 4px;
    }
    .step-card.active .step-header {
      color: #0284c7;
    }
    .math-row {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
    }
    .warn-box {
      color: #ea580c;
      background: #fff7ed;
      border: 1px solid #fed7aa;
      border-radius: 4px;
      padding: 1px 4px;
      display: inline-block;
    }
    .green-box {
      color: #16a34a;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 4px;
      padding: 1px 4px;
      display: inline-block;
    }
    .graph-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .svg-container {
      width: 100%;
      max-width: 250px;
      aspect-ratio: 1/1;
    }
    svg {
      width: 100%;
      height: 100%;
    }
    .controls {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 4px;
      border-top: 1px solid #e2e8f0;
      margin-top: 4px;
    }
    .btn-group {
      display: flex;
      gap: 6px;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    .btn:hover {
      background: #e2e8f0;
    }
    .dots-group {
      display: flex;
      gap: 6px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      border: none;
      padding: 0;
    }
    .dot.active {
      background: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.3);
    }
  </style>
</head>
<body>
  <div class="layout">
    <div class="panel-math">
      <div class="step-card active" id="card0" onclick="goToStep(0)">
        <div class="step-header"><span>Step 1</span><span>Expand</span></div>
        <div class="math-row">
          (5 − x)² = 25 <span class="warn-box">− 10x</span> + x²
        </div>
      </div>

      <div class="step-card" id="card1" onclick="goToStep(1)">
        <div class="step-header"><span>Step 2</span><span>Substitute</span></div>
        <div class="math-row">
          x² + (25 − 10x + x²) = 13
        </div>
      </div>

      <div class="step-card" id="card2" onclick="goToStep(2)">
        <div class="step-header"><span>Step 3</span><span>Simplify</span></div>
        <div class="math-row">
          2x² − 10x + 12 = 0
        </div>
      </div>

      <div class="step-card" id="card3" onclick="goToStep(3)">
        <div class="step-header"><span>Step 4</span><span>Factor</span></div>
        <div class="math-row">
          x² − 5x + 6 = 0 → (x−2)(x−3) = 0
        </div>
      </div>

      <div class="step-card" id="card4" onclick="goToStep(4)">
        <div class="step-header"><span>Step 5</span><span>Solutions</span></div>
        <div class="math-row">
          <span class="green-box">(2, 3)</span> and <span class="green-box">(3, 2)</span>
        </div>
      </div>
    </div>

    <div class="graph-panel">
      <div class="svg-container">
        <svg viewBox="0 0 220 220">
          <defs>
            <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
              <feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="#16a34a" flood-opacity="0.6"/>
            </filter>
          </defs>

          
          <g stroke="#f1f5f9" stroke-width="1">
            <line x1="20" y1="20" x2="20" y2="200"/>
            <line x1="60" y1="20" x2="60" y2="200"/>
            <line x1="140" y1="20" x2="140" y2="200"/>
            <line x1="180" y1="20" x2="180" y2="200"/>
            <line x1="20" y1="40" x2="200" y2="40"/>
            <line x1="20" y1="80" x2="200" y2="80"/>
            <line x1="20" y1="160" x2="200" y2="160"/>
            <line x1="20" y1="200" x2="200" y2="200"/>
          </g>

          
          <line x1="10" y1="120" x2="210" y2="120" stroke="#94a3b8" stroke-width="1.5" />
          <line x1="100" y1="10" x2="100" y2="210" stroke="#94a3b8" stroke-width="1.5" />

          
          <text x="205" y="115" font-size="10" fill="#64748b" font-weight="bold">x</text>
          <text x="105" y="16" font-size="10" fill="#64748b" font-weight="bold">y</text>
          <text x="140" y="132" font-size="9" fill="#94a3b8" text-anchor="middle">2</text>
          <text x="160" y="132" font-size="9" fill="#94a3b8" text-anchor="middle">3</text>
          <text x="92" y="63" font-size="9" fill="#94a3b8" text-anchor="end">3</text>
          <text x="92" y="83" font-size="9" fill="#94a3b8" text-anchor="end">2</text>

          
          <circle cx="100" cy="120" r="72.1" fill="none" stroke="#6366f1" stroke-width="2.5" />
          <text x="32" y="70" font-size="9" fill="#6366f1" font-weight="bold">x²+y²=13</text>

          
          <line x1="80" y1="0" x2="220" y2="140" stroke="#0284c7" stroke-width="2.5" />
          <text x="165" y="42" font-size="9" fill="#0284c7" font-weight="bold">x+y=5</text>

          
          <g id="projLines" opacity="0" transition="opacity 0.3s">
            <line x1="140" y1="120" x2="140" y2="60" stroke="#ea580c" stroke-width="1.2" stroke-dasharray="3,3" />
            <line x1="160" y1="120" x2="160" y2="80" stroke="#ea580c" stroke-width="1.2" stroke-dasharray="3,3" />
          </g>

          
          <g id="solPoints" opacity="0.3" transition="opacity 0.3s">
            <circle cx="140" cy="60" r="5" fill="#16a34a" filter="url(#glow)" />
            <text id="lbl1" x="140" y="50" font-size="10" font-weight="bold" fill="#16a34a" text-anchor="middle" opacity="0">(2, 3)</text>

            <circle cx="160" cy="80" r="5" fill="#16a34a" filter="url(#glow)" />
            <text id="lbl2" x="172" y="94" font-size="10" font-weight="bold" fill="#16a34a" text-anchor="start" opacity="0">(3, 2)</text>
          </g>
        </svg>
      </div>
    </div>

    <div class="controls">
      <div class="btn-group">
        <button class="btn" onclick="prevStep()">◀</button>
        <button class="btn" id="playBtn" onclick="togglePlay()">⏸</button>
        <button class="btn" onclick="nextStep()">▶</button>
      </div>

      <div class="dots-group">
        <button class="dot active" onclick="goToStep(0)" title="Step 1"></button>
        <button class="dot" onclick="goToStep(1)" title="Step 2"></button>
        <button class="dot" onclick="goToStep(2)" title="Step 3"></button>
        <button class="dot" onclick="goToStep(3)" title="Step 4"></button>
        <button class="dot" onclick="goToStep(4)" title="Step 5"></button>
      </div>
    </div>
  </div>

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

    const projLines = document.getElementById('projLines');
    const solPoints = document.getElementById('solPoints');
    const lbl1 = document.getElementById('lbl1');
    const lbl2 = document.getElementById('lbl2');
    const playBtn = document.getElementById('playBtn');

    function updateVisuals(step) {
      for (let i = 0; i < totalSteps; i++) {
        const card = document.getElementById('card' + i);
        const dot = document.querySelectorAll('.dot')[i];
        if (i === step) {
          card.classList.add('active');
          dot.classList.add('active');
        } else {
          card.classList.remove('active');
          dot.classList.remove('active');
        }
      }

      if (step >= 3) {
        projLines.setAttribute('opacity', '1');
      } else {
        projLines.setAttribute('opacity', '0');
      }

      if (step === 4) {
        solPoints.setAttribute('opacity', '1');
        lbl1.setAttribute('opacity', '1');
        lbl2.setAttribute('opacity', '1');
      } else if (step >= 2) {
        solPoints.setAttribute('opacity', '0.7');
        lbl1.setAttribute('opacity', '0');
        lbl2.setAttribute('opacity', '0');
      } else {
        solPoints.setAttribute('opacity', '0.2');
        lbl1.setAttribute('opacity', '0');
        lbl2.setAttribute('opacity', '0');
      }
    }

    function goToStep(step) {
      currentStep = (step + totalSteps) % totalSteps;
      updateVisuals(currentStep);
    }

    function nextStep() {
      goToStep(currentStep + 1);
    }

    function prevStep() {
      goToStep(currentStep - 1);
    }

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

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) {
          nextStep();
        }
      }, 3500);
    }

    updateVisuals(0);
    startTimer();
  </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; font-family: system-ui, -apple-system, sans-serif; }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 14px;
      user-select: none;
    }

    .tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 440px;
    }
    .tab-btn {
      flex: 1;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .tab-btn .sub {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }
    .tab-btn.active {
      background: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }
    .tab-btn.active .sub {
      color: #2563eb;
    }

    .canvas-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      width: 100%;
      max-width: 440px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

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

    .slider-wrap {
      width: 100%;
      max-width: 440px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 4px;
    }
    .slider-label {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      white-space: nowrap;
    }
    input[type="range"] {
      flex: 1;
      accent-color: #ef4444;
      cursor: pointer;
      height: 6px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 20px;
      background: #f1f5f9;
      color: #1e2945;
      margin-top: 4px;
    }
    .badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #f59e0b;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" id="btn2" onclick="setMode(0)">
      <span>2 Solutions</span>
      <span class="sub">Secant</span>
    </button>
    <button class="tab-btn" id="btn1" onclick="setMode(1)">
      <span>1 Solution</span>
      <span class="sub">Tangent</span>
    </button>
    <button class="tab-btn" id="btn0" onclick="setMode(2)">
      <span>0 Solutions</span>
      <span class="sub">Miss</span>
    </button>
  </div>

  <div class="canvas-card">
    <svg viewBox="0 0 360 210" id="graph">
      
      <defs>
        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f1f5f9" stroke-width="1.5" />
        </pattern>
      </defs>
      <rect x="10" y="10" width="340" height="190" fill="url(#grid)" rx="6" />

      
      <line x1="20" y1="140" x2="340" y2="140" stroke="#cbd5e1" stroke-width="1.5" />
      <line x1="180" y1="15" x2="180" y2="195" stroke="#cbd5e1" stroke-width="1.5" />

      
      <path id="parabolaPath" fill="none" stroke="#2563eb" stroke-width="3" stroke-linecap="round" />

      
      <line id="secantLine" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" />

      
      <g id="dotsGroup"></g>
    </svg>

    <div class="badge" id="statusBadge">
      <span class="badge-dot" id="badgeDot"></span>
      <span id="badgeText">2 Intersections</span>
    </div>
  </div>

  <div class="slider-wrap">
    <span class="slider-label">Move Line</span>
    <input type="range" id="cSlider" min="-4.2" max="1.5" step="0.05" value="0" oninput="onSlide(this.value)">
  </div>

  <script>
    // Coordinate conversion: Scale 20px per unit, origin at (180, 140)
    const toX = (x) => 180 + x * 20;
    const toY = (y) => 140 - y * 20;

    // Draw static Parabola
    const parabola = document.getElementById('parabolaPath');
    let pD = '';
    for (let x = -5.4; x <= 5.4; x += 0.1) {
      const y = 0.25 * x * x - 2;
      const px = toX(x);
      const py = toY(y);
      pD += (pD === '' ? 'M ' : ' L ') + px.toFixed(1) + ' ' + py.toFixed(1);
    }
    parabola.setAttribute('d', pD);

    const lineEl = document.getElementById('secantLine');
    const dotsGroup = document.getElementById('dotsGroup');
    const badgeText = document.getElementById('badgeText');
    const badgeDot = document.getElementById('badgeDot');
    const slider = document.getElementById('cSlider');
    const btns = [document.getElementById('btn2'), document.getElementById('btn1'), document.getElementById('btn0')];

    // Presets for the 3 cases (c = 0: 2 sol, c = -2.25: 1 sol, c = -3.8: 0 sol)
    const PRESETS = [0, -2.25, -3.8];

    function updateScene(c) {
      // Line: y = 0.5 x + c
      const x1 = -6.5, y1 = 0.5 * x1 + c;
      const x2 = 6.5, y2 = 0.5 * x2 + c;
      lineEl.setAttribute('x1', toX(x1));
      lineEl.setAttribute('y1', toY(y1));
      lineEl.setAttribute('x2', toX(x2));
      lineEl.setAttribute('y2', toY(y2));

      // Solve 0.25 x^2 - 0.5 x - (2 + c) = 0  =>  x^2 - 2x - 4(2+c) = 0
      const disc = 4 + 16 * (2 + c); // 36 + 16c
      dotsGroup.innerHTML = '';

      let activeIndex = -1;

      if (disc > 0.3) {
        // 2 Intersections
        const r1 = (2 + Math.sqrt(disc)) / 2;
        const r2 = (2 - Math.sqrt(disc)) / 2;
        [r1, r2].forEach(rx => {
          const ry = 0.5 * rx + c;
          addDot(toX(rx), toY(ry));
        });
        badgeText.textContent = '2 Intersections';
        badgeDot.style.background = '#f59e0b';
        badgeDot.style.display = 'inline-block';
        activeIndex = 0;
      } else if (disc >= -0.3) {
        // 1 Intersection (Tangent)
        const rx = 1;
        const ry = 0.5 * rx + c;
        addDot(toX(rx), toY(ry));
        badgeText.textContent = '1 Intersection (Tangent)';
        badgeDot.style.background = '#f59e0b';
        badgeDot.style.display = 'inline-block';
        activeIndex = 1;
      } else {
        // 0 Intersections
        badgeText.textContent = '0 Intersections';
        badgeDot.style.display = 'none';
        activeIndex = 2;
      }

      btns.forEach((b, i) => b.classList.toggle('active', i === activeIndex));
    }

    function addDot(cx, cy) {
      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      g.innerHTML = `
        <circle cx="${cx}" cy="${cy}" r="8" fill="#f59e0b" opacity="0.3" />
        <circle cx="${cx}" cy="${cy}" r="5" fill="#f59e0b" stroke="#ffffff" stroke-width="1.5" />
      `;
      dotsGroup.appendChild(g);
    }

    function setMode(idx) {
      slider.value = PRESETS[idx];
      updateScene(PRESETS[idx]);
    }

    function onSlide(val) {
      updateScene(parseFloat(val));
    }

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

OGM.13.FN.2

Aligned learning resources

Related diagrams