<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line-Parabola Intersections</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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }

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

    /* Mode Selector Buttons */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }
    .btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      border: 1.5px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .btn .delta {
      font-size: 11px;
      font-weight: 700;
      opacity: 0.9;
    }
    .btn:hover {
      background: #f1f5f9;
    }
    .btn.active {
      background: #eff6ff;
      color: #0284c7;
      border-color: #0284c7;
    }
    .btn.active.tangent {
      background: #fffbeb;
      color: #d97706;
      border-color: #d97706;
    }
    .btn.active.none {
      background: #fef2f2;
      color: #dc2626;
      border-color: #dc2626;
    }

    /* Graphic stage */
    .stage {
      position: relative;
      width: 100%;
      background: #fafcff;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
    }

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

    /* Dynamic info tag */
    .status-panel {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 14px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      font-size: 13px;
      font-weight: 600;
    }
    .status-title {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #334155;
    }
    .status-badge {
      padding: 3px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
    }

    @media (max-width: 400px) {
      .btn {
        padding: 6px 4px;
        font-size: 11px;
      }
      .btn .delta {
        font-size: 10px;
      }
      .status-panel {
        font-size: 12px;
        padding: 6px 10px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    
    <div class="controls">
      <button class="btn active" id="btn-secant" onclick="setMode('secant')">
        <span>Secant Line</span>
        <span class="delta">Δ > 0 (k = 5)</span>
      </button>
      <button class="btn tangent" id="btn-tangent" onclick="setMode('tangent')">
        <span>Tangent Line</span>
        <span class="delta">Δ = 0 (k = 3)</span>
      </button>
      <button class="btn none" id="btn-none" onclick="setMode('none')">
        <span>No Contact</span>
        <span class="delta">Δ &lt; 0 (k = 0)</span>
      </button>
    </div>

    
    <div class="stage">
      <svg id="plot" viewBox="0 0 500 360">
        <defs>
          <filter id="glow-amber" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>

        
        <g id="grid" stroke="#f1f5f9" stroke-width="1"></g>

        
        <g id="axes">
          
          <line x1="20" y1="310" x2="480" y2="310" stroke="#94a3b8" stroke-width="1.5" />
          <polyline points="475,306 482,310 475,314" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linejoin="round" />
          
          <line x1="250" y1="345" x2="250" y2="20" stroke="#94a3b8" stroke-width="1.5" />
          <polyline points="246,25 250,18 254,25" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linejoin="round" />
        </g>

        
        <g id="ticks" font-size="11" fill="#64748b" text-anchor="middle" font-family="system-ui, sans-serif">
          
          <line x1="88" y1="307" x2="88" y2="313" stroke="#94a3b8" stroke-width="1" />
          <text x="88" y="325">-2</text>
          <line x1="169" y1="307" x2="169" y2="313" stroke="#94a3b8" stroke-width="1" />
          <text x="169" y="325">-1</text>
          <line x1="331" y1="307" x2="331" y2="313" stroke="#94a3b8" stroke-width="1" />
          <text x="331" y="325">1</text>
          <line x1="412" y1="307" x2="412" y2="313" stroke="#94a3b8" stroke-width="1" />
          <text x="412" y="325">2</text>
          <text x="480" y="326" font-weight="bold" fill="#334155">x</text>

          
          <line x1="247" y1="262" x2="253" y2="262" stroke="#94a3b8" stroke-width="1" />
          <text x="238" y="266" text-anchor="end">2</text>
          <line x1="247" y1="214" x2="253" y2="214" stroke="#94a3b8" stroke-width="1" />
          <text x="238" y="218" text-anchor="end">4</text>
          <line x1="247" y1="166" x2="253" y2="166" stroke="#94a3b8" stroke-width="1" />
          <text x="238" y="170" text-anchor="end">6</text>
          <line x1="247" y1="118" x2="253" y2="118" stroke="#94a3b8" stroke-width="1" />
          <text x="238" y="122" text-anchor="end">8</text>
          <line x1="247" y1="70" x2="253" y2="70" stroke="#94a3b8" stroke-width="1" />
          <text x="238" y="74" text-anchor="end">10</text>
          <text x="262" y="25" font-weight="bold" fill="#334155" text-anchor="start">y</text>
          <text x="240" y="324" text-anchor="end" fill="#94a3b8">0</text>
        </g>

        
        <path id="parabola" fill="none" stroke="#1e293b" stroke-width="2.5" stroke-linejoin="round" />
        <text x="70" y="52" fill="#1e293b" font-size="13" font-weight="700">y = x² + 4</text>

        
        <line id="activeLine" stroke-width="2.5" stroke-linecap="round" />
        <text id="lineEquation" font-size="13" font-weight="700"></text>

        
        <g id="pointsGroup"></g>
        <g id="pointLabels"></g>
      </svg>
    </div>

    
    <div class="status-panel">
      <div class="status-title" id="statusTitle">
        <span>Intersection:</span>
        <span id="rootsCount" style="font-weight: 700; color: #0284c7;">2 Real Roots</span>
      </div>
      <div class="status-badge" id="statusBadge">Δ = 8 &gt; 0</div>
    </div>
  </div>

  <script>
    // Coordinate mapping configuration
    // Origin (0,0) at (250, 310)
    // 1 unit in X = 81 px (covers x in [-2.8, 2.8])
    // 1 unit in Y = 24 px (covers y in [0, 12])
    const originX = 250;
    const originY = 310;
    const scaleX = 81.0;
    const scaleY = 24.0;

    function toSvgX(x) { return originX + x * scaleX; }
    function toSvgY(y) { return originY - y * scaleY; }

    // Generate grid lines
    const gridEl = document.getElementById('grid');
    let gridHtml = '';
    for (let x = -3; x <= 3; x += 0.5) {
      const sx = toSvgX(x);
      gridHtml += `<line x1="${sx}" y1="20" x2="${sx}" y2="340" />`;
    }
    for (let y = 1; y <= 12; y += 1) {
      const sy = toSvgY(y);
      gridHtml += `<line x1="20" y1="${sy}" x2="480" y2="${sy}" />`;
    }
    gridEl.innerHTML = gridHtml;

    // Draw smooth parabola y = x^2 + 4
    const parabolaPath = document.getElementById('parabola');
    let pD = "";
    for (let x = -2.6; x <= 2.605; x += 0.05) {
      const y = x * x + 4;
      const sx = toSvgX(x).toFixed(1);
      const sy = toSvgY(y).toFixed(1);
      pD += (pD === "" ? `M ${sx} ${sy}` : ` L ${sx} ${sy}`);
    }
    parabolaPath.setAttribute('d', pD);

    const modes = {
      secant: {
        k: 5,
        title: "2 Intersecting Points",
        color: "#0284c7",
        badgeBg: "#e0f2fe",
        badgeColor: "#0369a1",
        deltaText: "Δ = 4(k − 3) = 8 > 0",
        btnId: "btn-secant",
        roots: [
          { x: 1 - Math.sqrt(2), y: 2 * (1 - Math.sqrt(2)) + 5, label: "(-0.41, 4.17)", offset: [-95, -8] },
          { x: 1 + Math.sqrt(2), y: 2 * (1 + Math.sqrt(2)) + 5, label: "(2.41, 9.83)", offset: [-96, 16] }
        ]
      },
      tangent: {
        k: 3,
        title: "1 Tangent Touch (Repeated)",
        color: "#d97706",
        badgeBg: "#fef3c7",
        badgeColor: "#b45309",
        deltaText: "Δ = 4(k − 3) = 0",
        btnId: "btn-tangent",
        roots: [
          { x: 1.0, y: 5.0, label: "(1.0, 5.0)", glow: true, offset: [12, 5] }
        ]
      },
      none: {
        k: 0,
        title: "0 Intersections (No Contact)",
        color: "#dc2626",
        badgeBg: "#fee2e2",
        badgeColor: "#b91c1c",
        deltaText: "Δ = 4(k − 3) = -12 < 0",
        btnId: "btn-none",
        roots: []
      }
    };

    function setMode(modeKey) {
      const data = modes[modeKey];

      // Update Buttons
      document.querySelectorAll('.btn').forEach(b => {
        b.classList.remove('active');
      });
      document.getElementById(data.btnId).classList.add('active');

      // Update Line: y = 2x + k
      const x1 = -2.6;
      const y1 = 2 * x1 + data.k;
      const x2 = 2.7;
      const y2 = 2 * x2 + data.k;

      const lineEl = document.getElementById('activeLine');
      lineEl.setAttribute('x1', toSvgX(x1));
      lineEl.setAttribute('y1', toSvgY(y1));
      lineEl.setAttribute('x2', toSvgX(x2));
      lineEl.setAttribute('y2', toSvgY(y2));
      lineEl.setAttribute('stroke', data.color);

      // Position Line Equation
      const lineLabel = document.getElementById('lineEquation');
      const labelK = data.k > 0 ? `+ ${data.k}` : (data.k === 0 ? '' : `- ${Math.abs(data.k)}`);
      lineLabel.textContent = `y = 2x ${labelK}`.trim();
      lineLabel.setAttribute('fill', data.color);

      const eqX = 2.45;
      const eqY = 2 * eqX + data.k;
      lineLabel.setAttribute('x', Math.min(toSvgX(eqX) - 65, 410));
      lineLabel.setAttribute('y', Math.max(toSvgY(eqY) - 10, 45));

      // Update Status Panel
      const countEl = document.getElementById('rootsCount');
      countEl.textContent = data.title;
      countEl.style.color = data.color;

      const badge = document.getElementById('statusBadge');
      badge.textContent = data.deltaText;
      badge.style.backgroundColor = data.badgeBg;
      badge.style.color = data.badgeColor;

      // Update Intersection Points
      const pointsGroup = document.getElementById('pointsGroup');
      const pointLabels = document.getElementById('pointLabels');
      pointsGroup.innerHTML = '';
      pointLabels.innerHTML = '';

      data.roots.forEach(pt => {
        const sx = toSvgX(pt.x);
        const sy = toSvgY(pt.y);

        // Glow ring for tangent
        if (pt.glow) {
          const glowCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
          glowCircle.setAttribute('cx', sx);
          glowCircle.setAttribute('cy', sy);
          glowCircle.setAttribute('r', '9');
          glowCircle.setAttribute('fill', '#f59e0b');
          glowCircle.setAttribute('opacity', '0.4');
          glowCircle.setAttribute('filter', 'url(#glow-amber)');
          pointsGroup.appendChild(glowCircle);
        }

        // Point circle
        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute('cx', sx);
        circle.setAttribute('cy', sy);
        circle.setAttribute('r', '5.5');
        circle.setAttribute('fill', data.color);
        circle.setAttribute('stroke', '#ffffff');
        circle.setAttribute('stroke-width', '2');
        pointsGroup.appendChild(circle);

        // Point text label badge background
        const offset = pt.offset || [10, -5];
        const tx = sx + offset[0];
        const ty = sy + offset[1];

        const textBg = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        textBg.setAttribute('x', tx - 4);
        textBg.setAttribute('y', ty - 13);
        textBg.setAttribute('width', pt.label.length * 7.5 + 8);
        textBg.setAttribute('height', '18');
        textBg.setAttribute('rx', '4');
        textBg.setAttribute('fill', '#ffffff');
        textBg.setAttribute('stroke', data.color);
        textBg.setAttribute('stroke-width', '1');
        textBg.setAttribute('opacity', '0.95');
        pointLabels.appendChild(textBg);

        const txt = document.createElementNS("http://www.w3.org/2000/svg", "text");
        txt.setAttribute('x', tx);
        txt.setAttribute('y', ty);
        txt.setAttribute('fill', data.color);
        txt.setAttribute('font-size', '11');
        txt.setAttribute('font-weight', '700');
        txt.textContent = pt.label;
        pointLabels.appendChild(txt);
      });
    }

    // Initialize with Secant mode
    setMode('secant');
  </script>
</body>
</html>

Using the Discriminant to Determine the Nature of Roots

<!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>Discriminant & Nature of Roots</title>
  <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;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    .panels-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
    }

    @media (max-width: 480px) {
      .panels-grid {
        grid-template-columns: 1fr;
      }
    }

    .panel-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: box-shadow 0.25s ease, border-color 0.25s ease;
      cursor: pointer;
    }

    .panel-card:hover {
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
    }

    .panel-card.active {
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    .badge {
      font-size: 15px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 999px;
      margin-bottom: 6px;
      letter-spacing: -0.2px;
    }

    .badge-pos {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    .badge-zero {
      background: #fffbeb;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .badge-neg {
      background: #f8fafc;
      color: #475569;
      border: 1px solid #cbd5e1;
    }

    .graph-wrap {
      width: 100%;
      aspect-ratio: 16 / 13;
      max-height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 4px 0;
    }

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

    .info-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      margin-top: 4px;
      line-height: 1.2;
    }

    .info-sub {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
    }

    /* Live Interactive Slider Bar */
    .interactive-bar {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 12px;
      font-weight: 600;
    }

    .slider-container {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }

    input[type="range"] {
      flex: 1;
      accent-color: #2563eb;
      cursor: pointer;
      height: 4px;
    }

    .btn-step {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
    }

    .btn-step:hover {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  
  <div class="panels-grid">
    
    <div class="panel-card" id="card-pos" onclick="setMode(0)">
      <div class="badge badge-pos">Δ &gt; 0</div>
      <div class="graph-wrap">
        <svg viewBox="0 0 160 130">
          
          <line x1="10" y1="75" x2="150" y2="75" stroke="#94a3b8" stroke-width="1.5" />
          <polyline points="146,71 152,75 146,79" fill="none" stroke="#94a3b8" stroke-width="1.5" />
          <text x="152" y="88" font-size="10" fill="#64748b" font-weight="600">x</text>

          <line x1="80" y1="120" x2="80" y2="10" stroke="#cbd5e1" stroke-width="1.2" stroke-dasharray="3,3" />
          <polyline points="76,14 80,8 84,14" fill="none" stroke="#cbd5e1" stroke-width="1.2" />

          
          
          <path d="M 20 0 Q 80 200 140 0" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" />

          
          <circle cx="50" cy="75" r="4.5" fill="#ef4444" stroke="#ffffff" stroke-width="1.5" />
          <circle cx="110" cy="75" r="4.5" fill="#ef4444" stroke="#ffffff" stroke-width="1.5" />
        </svg>
      </div>
      <div class="info-title">2 Real Roots</div>
      <div class="info-sub">Crosses x-axis twice</div>
    </div>

    
    <div class="panel-card" id="card-zero" onclick="setMode(1)">
      <div class="badge badge-zero">Δ = 0</div>
      <div class="graph-wrap">
        <svg viewBox="0 0 160 130">
          
          <line x1="10" y1="75" x2="150" y2="75" stroke="#94a3b8" stroke-width="1.5" />
          <polyline points="146,71 152,75 146,79" fill="none" stroke="#94a3b8" stroke-width="1.5" />
          <text x="152" y="88" font-size="10" fill="#64748b" font-weight="600">x</text>

          <line x1="80" y1="120" x2="80" y2="10" stroke="#cbd5e1" stroke-width="1.2" stroke-dasharray="3,3" />
          <polyline points="76,14 80,8 84,14" fill="none" stroke="#cbd5e1" stroke-width="1.2" />

          
          <path d="M 20 5 Q 80 145 140 5" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" />

          
          <circle cx="80" cy="75" r="5" fill="#f59e0b" stroke="#ffffff" stroke-width="1.5" />
        </svg>
      </div>
      <div class="info-title">1 Real Root</div>
      <div class="info-sub">Tangent at vertex</div>
    </div>

    
    <div class="panel-card" id="card-neg" onclick="setMode(2)">
      <div class="badge badge-neg">Δ &lt; 0</div>
      <div class="graph-wrap">
        <svg viewBox="0 0 160 130">
          
          <line x1="10" y1="75" x2="150" y2="75" stroke="#94a3b8" stroke-width="1.5" />
          <polyline points="146,71 152,75 146,79" fill="none" stroke="#94a3b8" stroke-width="1.5" />
          <text x="152" y="88" font-size="10" fill="#64748b" font-weight="600">x</text>

          <line x1="80" y1="120" x2="80" y2="10" stroke="#cbd5e1" stroke-width="1.2" stroke-dasharray="3,3" />
          <polyline points="76,14 80,8 84,14" fill="none" stroke="#cbd5e1" stroke-width="1.2" />

          
          <path d="M 25 5 Q 80 91 135 5" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" />

          
          <line x1="80" y1="52" x2="80" y2="71" stroke="#94a3b8" stroke-width="1" stroke-dasharray="2,2" />
          <text x="86" y="64" font-size="9" fill="#64748b" font-weight="600">Gap</text>
        </svg>
      </div>
      <div class="info-title">2 Complex Roots</div>
      <div class="info-sub">0 real x-intercepts</div>
    </div>
  </div>

  
  <div class="interactive-bar">
    <span>Shift Parabola Height:</span>
    <div class="slider-container">
      <button class="btn-step" onclick="stepSlider(-1)">▼ Down</button>
      <input type="range" id="heightSlider" min="0" max="2" step="1" value="0" oninput="onSliderChange(this.value)">
      <button class="btn-step" onclick="stepSlider(1)">▲ Up</button>
    </div>
  </div>

  <script>
    const cards = [
      document.getElementById('card-pos'),
      document.getElementById('card-zero'),
      document.getElementById('card-neg')
    ];
    const slider = document.getElementById('heightSlider');

    function setMode(index) {
      cards.forEach((c, i) => {
        if (i === index) {
          c.classList.add('active');
        } else {
          c.classList.remove('active');
        }
      });
      slider.value = index;
    }

    function onSliderChange(val) {
      setMode(parseInt(val, 10));
    }

    function stepSlider(delta) {
      let next = parseInt(slider.value, 10) + delta;
      if (next >= 0 && next <= 2) {
        setMode(next);
      }
    }

    // Default select first case
    setMode(0);
  </script>
</body>
</html>

OGM.12.ALG.3

Aligned learning resources

Related diagrams