<!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="1:1">
  <title>Parabola: Vertex & Axis of Symmetry</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px;
      width: 100%;
      min-height: 100%;
    }

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

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

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }

    .btn:hover {
      background: #e2e8f0;
    }

    .btn.active {
      background: #7c3aed;
      color: #ffffff;
      border-color: #6d28d9;
    }

    svg {
      width: 100%;
      height: auto;
      overflow: visible;
      user-select: none;
    }

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

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

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

    .sym-line {
      stroke: #7c3aed;
      stroke-width: 2;
      stroke-dasharray: 6 5;
    }

    .parabola-curve {
      fill: none;
      stroke: #0284c7;
      stroke-width: 3.5;
      stroke-linecap: round;
    }

    .sym-marker {
      fill: #0284c7;
      stroke: #ffffff;
      stroke-width: 2;
      transition: cx 0.25s ease, cy 0.25s ease;
    }

    .vertex-marker {
      fill: #ea580c;
      stroke: #ffffff;
      stroke-width: 2.5;
    }

    .arrow-line {
      stroke: #059669;
      stroke-width: 1.75;
      transition: all 0.25s ease;
    }

    .measure-text {
      font-size: 12px;
      font-weight: 700;
      fill: #059669;
      text-anchor: middle;
      dominant-baseline: central;
      transition: all 0.25s ease;
    }

    .label-badge {
      font-size: 12px;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <div class="controls">
      <button class="btn active" onclick="setHeight(3, this)">y = 3 (Symmetry)</button>
      <button class="btn" onclick="setHeight(0, this)">y = 0 (Intercepts)</button>
      <button class="btn" onclick="setHeight(-1, this)">Vertex (y = -1)</button>
    </div>

    <svg id="graph" viewBox="0 0 500 450" aria-label="Quadratic graph showing vertex and axis of symmetry">
      <defs>
        <marker id="arrow-left" viewBox="0 0 10 10" refX="2" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 8 1.5 L 2 5 L 8 8.5" fill="none" stroke="#059669" stroke-width="1.75" stroke-linecap="round"/>
        </marker>
        <marker id="arrow-right" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 2 1.5 L 8 5 L 2 8.5" fill="none" stroke="#059669" stroke-width="1.75" stroke-linecap="round"/>
        </marker>
        <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
          <feDropShadow dx="0" dy="1" stdDeviation="2" flood-color="#000" flood-opacity="0.1"/>
        </filter>
      </defs>

      
      <g id="grid"></g>

      
      <line x1="30" y1="330" x2="470" y2="330" class="axis-line" />
      <line x1="145" y1="30" x2="145" y2="420" class="axis-line" />

      
      <polygon points="475,330 467,326 467,334" fill="#94a3b8" />
      <polygon points="145,25 141,33 149,33" fill="#94a3b8" />
      <text x="485" y="330" class="tick-label" font-weight="700">x</text>
      <text x="145" y="15" class="tick-label" font-weight="700">y</text>

      
      <g id="tickLabels"></g>

      
      <line x1="265" y1="40" x2="265" y2="420" class="sym-line" />
      
      
      <path id="parabolaPath" class="parabola-curve" />

      
      <g transform="translate(265, 32)">
        <rect x="-85" y="-14" width="170" height="26" rx="13" fill="#7c3aed" filter="url(#shadow)" />
        <text x="0" y="1" text-anchor="middle" dominant-baseline="central" fill="#ffffff" class="label-badge">Axis of Symmetry: x = 2</text>
      </g>

      
      <g id="symmetryVisuals">
        
        <line id="leftArrow" class="arrow-line" marker-start="url(#arrow-left)" marker-end="url(#arrow-right)" />
        
        <line id="rightArrow" class="arrow-line" marker-start="url(#arrow-left)" marker-end="url(#arrow-right)" />
        
        <g id="leftDistGroup">
          <rect id="leftDistBg" rx="4" fill="#ffffff" stroke="#059669" stroke-width="1" />
          <text id="leftDistText" class="measure-text">2 units</text>
        </g>
        
        <g id="rightDistGroup">
          <rect id="rightDistBg" rx="4" fill="#ffffff" stroke="#059669" stroke-width="1" />
          <text id="rightDistText" class="measure-text">2 units</text>
        </g>
        
        <circle id="ptLeft" class="sym-marker" r="6" />
        <text id="labelLeft" class="label-badge" fill="#1e2945" text-anchor="middle"></text>
        
        <circle id="ptRight" class="sym-marker" r="6" />
        <text id="labelRight" class="label-badge" fill="#1e2945" text-anchor="middle"></text>
      </g>

      
      <g>
        <circle cx="265" cy="385" r="7" class="vertex-marker" />
        <rect x="278" y="380" width="102" height="24" rx="6" fill="#ea580c" filter="url(#shadow)" />
        <text x="329" y="393" text-anchor="middle" dominant-baseline="central" fill="#ffffff" class="label-badge">Vertex (2, -1)</text>
      </g>
    </svg>
  </div>

  <script>
    // Coordinate Mapping:
    // Origin (x=0, y=0) at px=145, py=330
    // Scale: 60px per unit in x, 55px per unit in y
    const ox = 145;
    const oy = 330;
    const sx = 60;
    const sy = 55;

    function toPx(x, y) {
      return { px: ox + x * sx, py: oy - y * sy };
    }

    // Generate grid and ticks
    const gridG = document.getElementById('grid');
    const tickG = document.getElementById('tickLabels');

    for (let x = -1; x <= 5; x++) {
      const p = toPx(x, 0);
      const l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      l.setAttribute('x1', p.px);
      l.setAttribute('y1', 40);
      l.setAttribute('x2', p.px);
      l.setAttribute('y2', 420);
      l.setAttribute('class', 'grid-line');
      gridG.appendChild(l);

      if (x !== 0) {
        const t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        t.setAttribute('x', p.px);
        t.setAttribute('y', 346);
        t.setAttribute('class', 'tick-label');
        t.textContent = x;
        tickG.appendChild(t);
      }
    }

    for (let y = -2; y <= 5; y++) {
      const p = toPx(0, y);
      const l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      l.setAttribute('x1', 30);
      l.setAttribute('y1', p.py);
      l.setAttribute('x2', 470);
      l.setAttribute('y2', p.py);
      l.setAttribute('class', 'grid-line');
      gridG.appendChild(l);

      if (y !== 0) {
        const t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        t.setAttribute('x', 130);
        t.setAttribute('y', p.py);
        t.setAttribute('class', 'tick-label');
        t.textContent = y;
        tickG.appendChild(t);
      }
    }

    // Parabola Equation: y = (x - 2)^2 - 1
    const pathEl = document.getElementById('parabolaPath');
    let d = '';
    for (let x = -0.5; x <= 4.501; x += 0.05) {
      const y = Math.pow(x - 2, 2) - 1;
      const { px, py } = toPx(x, y);
      d += (d === '' ? `M ${px.toFixed(1)} ${py.toFixed(1)}` : ` L ${px.toFixed(1)} ${py.toFixed(1)}`);
    }
    pathEl.setAttribute('d', d);

    // Update symmetric elements based on target y
    function updateSymmetry(yVal) {
      const dist = Math.sqrt(Math.max(0, yVal + 1));
      const x1 = 2 - dist;
      const x2 = 2 + dist;
      
      const p1 = toPx(x1, yVal);
      const p2 = toPx(x2, yVal);
      const pMid = toPx(2, yVal);

      const ptL = document.getElementById('ptLeft');
      const ptR = document.getElementById('ptRight');
      const lblL = document.getElementById('labelLeft');
      const lblR = document.getElementById('labelRight');
      const lArr = document.getElementById('leftArrow');
      const rArr = document.getElementById('rightArrow');
      const lDistG = document.getElementById('leftDistGroup');
      const rDistG = document.getElementById('rightDistGroup');
      const lDistT = document.getElementById('leftDistText');
      const rDistT = document.getElementById('rightDistText');
      const lDistBg = document.getElementById('leftDistBg');
      const rDistBg = document.getElementById('rightDistBg');

      if (dist === 0) {
        // At vertex, hide symmetry split
        ptL.setAttribute('cx', pMid.px);
        ptL.setAttribute('cy', pMid.py);
        ptR.setAttribute('cx', pMid.px);
        ptR.setAttribute('cy', pMid.py);
        ptL.style.opacity = '0';
        ptR.style.opacity = '0';
        lblL.textContent = '';
        lblR.textContent = '';
        lArr.style.opacity = '0';
        rArr.style.opacity = '0';
        lDistG.style.opacity = '0';
        rDistG.style.opacity = '0';
        return;
      }

      ptL.style.opacity = '1';
      ptR.style.opacity = '1';
      lArr.style.opacity = '1';
      rArr.style.opacity = '1';
      lDistG.style.opacity = '1';
      rDistG.style.opacity = '1';

      ptL.setAttribute('cx', p1.px);
      ptL.setAttribute('cy', p1.py);
      ptR.setAttribute('cx', p2.px);
      ptR.setAttribute('cy', p2.py);

      lblL.setAttribute('x', p1.px - 14);
      lblL.setAttribute('y', p1.py - 12);
      lblL.textContent = `(${x1.toFixed(0)}, ${yVal})`;

      lblR.setAttribute('x', p2.px + 14);
      lblR.setAttribute('y', p2.py - 12);
      lblR.textContent = `(${x2.toFixed(0)}, ${yVal})`;

      // Arrows
      const offset = 8;
      lArr.setAttribute('x1', p1.px + offset);
      lArr.setAttribute('y1', p1.py);
      lArr.setAttribute('x2', pMid.px - offset);
      lArr.setAttribute('y2', pMid.py);

      rArr.setAttribute('x1', pMid.px + offset);
      rArr.setAttribute('y1', pMid.py);
      rArr.setAttribute('x2', p2.px - offset);
      rArr.setAttribute('y2', pMid.py);

      // Distance Badges
      const unitText = dist === 1 ? '1 unit' : `${dist.toFixed(0)} units`;
      lDistT.textContent = unitText;
      rDistT.textContent = unitText;

      const midL = (p1.px + pMid.px) / 2;
      const midR = (pMid.px + p2.px) / 2;

      lDistT.setAttribute('x', midL);
      lDistT.setAttribute('y', p1.py - 14);
      rDistT.setAttribute('x', midR);
      rDistT.setAttribute('y', p2.py - 14);

      const bboxL = lDistT.getBBox();
      lDistBg.setAttribute('x', bboxL.x - 4);
      lDistBg.setAttribute('y', bboxL.y - 2);
      lDistBg.setAttribute('width', bboxL.width + 8);
      lDistBg.setAttribute('height', bboxL.height + 4);

      const bboxR = rDistT.getBBox();
      rDistBg.setAttribute('x', bboxR.x - 4);
      rDistBg.setAttribute('y', bboxR.y - 2);
      rDistBg.setAttribute('width', bboxR.width + 8);
      rDistBg.setAttribute('height', bboxR.height + 4);
    }

    function setHeight(y, btn) {
      document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
      if (btn) btn.classList.add('active');
      updateSymmetry(y);
    }

    // Initial render at y = 3
    updateSymmetry(3);
  </script>
</body>
</html>

Features of Quadratic Graphs: Vertex, Axis of Symmetry, Intercepts

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>x-Intercepts of Quadratic Functions</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #0f172a;
      padding: 10px 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100%;
    }
    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: stretch;
      gap: 14px;
      width: 100%;
      max-width: 720px;
      margin: 0 auto;
    }
    .panel {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .panel-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      width: 100%;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      line-height: 1;
    }
    .badge-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      font-size: 10.5px;
      font-weight: 800;
      color: #ffffff;
      flex-shrink: 0;
    }
    .badge-text {
      white-space: nowrap;
    }
    .subtitle {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
      text-align: center;
    }
    .panel-1 .badge {
      background-color: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    .panel-1 .badge-count {
      background-color: #1d4ed8;
    }
    .panel-2 .badge {
      background-color: #f0fdf4;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }
    .panel-2 .badge-count {
      background-color: #15803d;
    }
    .panel-3 .badge {
      background-color: #f8fafc;
      color: #475569;
      border: 1px solid #cbd5e1;
    }
    .panel-3 .badge-count {
      background-color: #475569;
    }
    .svg-wrap {
      width: 100%;
      aspect-ratio: 8 / 7;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #cbd5e1;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      overflow: hidden;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .panel-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
    .caption {
      font-size: 11.5px;
      font-weight: 600;
      color: #334155;
      text-align: center;
      line-height: 1.25;
    }

    /* Mobile responsive layout */
    @media (max-width: 540px) {
      body {
        padding: 6px 4px;
      }
      .container {
        flex-direction: column;
        gap: 10px;
        max-width: 360px;
      }
      .panel {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 4px;
      }
      .svg-wrap {
        width: 115px;
        min-width: 115px;
        flex-shrink: 0;
      }
      .panel-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        flex: 1;
        min-width: 0;
      }
      .panel-header {
        align-items: flex-start;
      }
      .subtitle {
        text-align: left;
      }
      .panel-footer {
        align-items: flex-start;
      }
      .caption {
        text-align: left;
        font-size: 11.5px;
      }
    }
  </style>
</head>
<body>

<div class="container">
  
  <div class="panel panel-1">
    <div class="panel-header desktop-only">
      <div class="badge">
        <span class="badge-count">2</span>
        <span class="badge-text">2 x-intercepts</span>
      </div>
      <div class="subtitle">Crosses twice</div>
    </div>
    
    <div class="svg-wrap">
      <svg viewBox="0 0 160 140" aria-label="Parabola crossing x-axis at two points">
        <defs>
          <marker id="arrow1" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#64748b" />
          </marker>
        </defs>

        
        <g stroke="#f1f5f9" stroke-width="1">
          <line x1="20" y1="0" x2="20" y2="140" />
          <line x1="40" y1="0" x2="40" y2="140" />
          <line x1="60" y1="0" x2="60" y2="140" />
          <line x1="80" y1="0" x2="80" y2="140" />
          <line x1="100" y1="0" x2="100" y2="140" />
          <line x1="120" y1="0" x2="120" y2="140" />
          <line x1="140" y1="0" x2="140" y2="140" />

          <line x1="0" y1="20" x2="160" y2="20" />
          <line x1="0" y1="40" x2="160" y2="40" />
          <line x1="0" y1="70" x2="160" y2="70" />
          <line x1="0" y1="100" x2="160" y2="100" />
          <line x1="0" y1="120" x2="160" y2="120" />
        </g>

        
        <line x1="80" y1="134" x2="80" y2="6" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow1)" />
        <line x1="6" y1="70" x2="154" y2="70" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow1)" />

        
        <text x="154" y="64" font-size="11" fill="#1e293b" font-weight="700" text-anchor="end">x</text>
        <text x="88" y="13" font-size="11" fill="#1e293b" font-weight="700">y</text>

        
        <path d="M 30 10 Q 80 200 130 10" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" />

        
        <circle cx="50" cy="70" r="7.5" fill="#dc2626" opacity="0.2" />
        <circle cx="50" cy="70" r="4.5" fill="#dc2626" />

        
        <circle cx="110" cy="70" r="7.5" fill="#dc2626" opacity="0.2" />
        <circle cx="110" cy="70" r="4.5" fill="#dc2626" />
      </svg>
    </div>

    <div class="panel-info">
      <div class="panel-header mobile-info">
        <div class="badge">
          <span class="badge-count">2</span>
          <span class="badge-text">2 x-intercepts</span>
        </div>
        <div class="subtitle">Crosses twice</div>
      </div>
      <div class="panel-footer">
        <div class="caption">y = 0 has 2 solutions</div>
      </div>
    </div>
  </div>

  
  <div class="panel panel-2">
    <div class="panel-header desktop-only">
      <div class="badge">
        <span class="badge-count">1</span>
        <span class="badge-text">1 x-intercept</span>
      </div>
      <div class="subtitle">Touches at vertex</div>
    </div>

    <div class="svg-wrap">
      <svg viewBox="0 0 160 140" aria-label="Parabola touching x-axis at vertex">
        <defs>
          <marker id="arrow2" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#64748b" />
          </marker>
        </defs>

        
        <g stroke="#f1f5f9" stroke-width="1">
          <line x1="20" y1="0" x2="20" y2="140" />
          <line x1="40" y1="0" x2="40" y2="140" />
          <line x1="60" y1="0" x2="60" y2="140" />
          <line x1="80" y1="0" x2="80" y2="140" />
          <line x1="100" y1="0" x2="100" y2="140" />
          <line x1="120" y1="0" x2="120" y2="140" />
          <line x1="140" y1="0" x2="140" y2="140" />

          <line x1="0" y1="20" x2="160" y2="20" />
          <line x1="0" y1="40" x2="160" y2="40" />
          <line x1="0" y1="70" x2="160" y2="70" />
          <line x1="0" y1="100" x2="160" y2="100" />
          <line x1="0" y1="120" x2="160" y2="120" />
        </g>

        
        <line x1="80" y1="134" x2="80" y2="6" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow2)" />
        <line x1="6" y1="70" x2="154" y2="70" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow2)" />

        
        <text x="154" y="64" font-size="11" fill="#1e293b" font-weight="700" text-anchor="end">x</text>
        <text x="88" y="13" font-size="11" fill="#1e293b" font-weight="700">y</text>

        
        <path d="M 30 10 Q 80 130 130 10" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" />

        
        <circle cx="80" cy="70" r="7.5" fill="#dc2626" opacity="0.2" />
        <circle cx="80" cy="70" r="4.5" fill="#dc2626" />
        <text x="80" y="88" font-size="9" fill="#dc2626" font-weight="600" text-anchor="middle">Vertex on x-axis</text>
      </svg>
    </div>

    <div class="panel-info">
      <div class="panel-header mobile-info">
        <div class="badge">
          <span class="badge-count">1</span>
          <span class="badge-text">1 x-intercept</span>
        </div>
        <div class="subtitle">Touches at vertex</div>
      </div>
      <div class="panel-footer">
        <div class="caption">y = 0 has 1 solution</div>
      </div>
    </div>
  </div>

  
  <div class="panel panel-3">
    <div class="panel-header desktop-only">
      <div class="badge">
        <span class="badge-count">0</span>
        <span class="badge-text">0 x-intercepts</span>
      </div>
      <div class="subtitle">No intersection</div>
    </div>

    <div class="svg-wrap">
      <svg viewBox="0 0 160 140" aria-label="Parabola entirely above x-axis">
        <defs>
          <marker id="arrow3" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#64748b" />
          </marker>
        </defs>

        
        <g stroke="#f1f5f9" stroke-width="1">
          <line x1="20" y1="0" x2="20" y2="140" />
          <line x1="40" y1="0" x2="40" y2="140" />
          <line x1="60" y1="0" x2="60" y2="140" />
          <line x1="80" y1="0" x2="80" y2="140" />
          <line x1="100" y1="0" x2="100" y2="140" />
          <line x1="120" y1="0" x2="120" y2="140" />
          <line x1="140" y1="0" x2="140" y2="140" />

          <line x1="0" y1="20" x2="160" y2="20" />
          <line x1="0" y1="40" x2="160" y2="40" />
          <line x1="0" y1="70" x2="160" y2="70" />
          <line x1="0" y1="100" x2="160" y2="100" />
          <line x1="0" y1="120" x2="160" y2="120" />
        </g>

        
        <line x1="80" y1="134" x2="80" y2="6" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow3)" />
        <line x1="6" y1="70" x2="154" y2="70" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow3)" />

        
        <text x="154" y="64" font-size="11" fill="#1e293b" font-weight="700" text-anchor="end">x</text>
        <text x="88" y="13" font-size="11" fill="#1e293b" font-weight="700">y</text>

        
        <path d="M 30 10 Q 80 80 130 10" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" />

        
        <line x1="80" y1="47" x2="80" y2="68" stroke="#64748b" stroke-width="1.5" stroke-dasharray="2 2" />
        <text x="85" y="60" font-size="9" fill="#64748b" font-weight="600">No contact</text>
      </svg>
    </div>

    <div class="panel-info">
      <div class="panel-header mobile-info">
        <div class="badge">
          <span class="badge-count">0</span>
          <span class="badge-text">0 x-intercepts</span>
        </div>
        <div class="subtitle">No intersection</div>
      </div>
      <div class="panel-footer">
        <div class="caption">y = 0 has no real solutions</div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Toggle visibility between desktop and mobile headers */
  @media (min-width: 541px) {
    .panel-info .mobile-info {
      display: none;
    }
  }
  @media (max-width: 540px) {
    .desktop-only {
      display: none;
    }
  }
</style>

</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="1:1">
  <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: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 100%;
      padding: 8px 12px;
      user-select: none;
    }

    .top-bar {
      width: 100%;
      max-width: 520px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
      flex-wrap: wrap;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1e40af;
      padding: 4px 10px;
      border-radius: 9999px;
      font-size: 13px;
      font-weight: 600;
    }

    .eq-label {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
    }

    .svg-container {
      width: 100%;
      max-width: 480px;
      aspect-ratio: 1 / 1;
      position: relative;
    }

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

    /* Interactive controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 500px;
      margin-top: 6px;
    }

    .btn-tab {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-tab:hover {
      background: #e2e8f0;
      color: #1e293b;
    }

    .btn-tab.active {
      background: #1e293b;
      color: #ffffff;
      border-color: #1e293b;
    }

    /* Layer highlight styling */
    .feature {
      transition: opacity 0.25s ease, filter 0.25s ease;
    }

    .dimmed {
      opacity: 0.15;
    }

    .focused {
      opacity: 1;
      filter: drop-shadow(0 0 3px rgba(0,0,0,0.25));
    }

    .callout-bg {
      rx: 5;
      ry: 5;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
    }
  </style>
</head>
<body>

  <div class="top-bar">
    <div class="eq-label">y = -(x - 1)² + 4</div>
    <div class="badge">
      <span>↓</span> Opens Downward
    </div>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 500 500" id="graph">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="5" 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>

      
      <g stroke="#e2e8f0" stroke-width="1">
        
        <line x1="50" y1="40" x2="50" y2="450" />
        <line x1="100" y1="40" x2="100" y2="450" />
        <line x1="150" y1="40" x2="150" y2="450" />
        <line x1="250" y1="40" x2="250" y2="450" />
        <line x1="300" y1="40" x2="300" y2="450" />
        <line x1="350" y1="40" x2="350" y2="450" />
        <line x1="400" y1="40" x2="400" y2="450" />
        <line x1="450" y1="40" x2="450" y2="450" />
        
        <line x1="40" y1="410" x2="460" y2="410" />
        <line x1="40" y1="310" x2="460" y2="310" />
        <line x1="40" y1="260" x2="460" y2="260" />
        <line x1="40" y1="210" x2="460" y2="210" />
        <line x1="40" y1="160" x2="460" y2="160" />
        <line x1="40" y1="110" x2="460" y2="110" />
        <line x1="40" y1="60" x2="460" y2="60" />
      </g>

      
      
      <line x1="30" y1="360" x2="470" y2="360" stroke="#64748b" stroke-width="2" marker-end="url(#arrow)" />
      
      <line x1="200" y1="470" x2="200" y2="30" stroke="#64748b" stroke-width="2" marker-end="url(#arrow)" />

      
      <text x="475" y="364" font-size="13" font-weight="700" fill="#64748b">x</text>
      <text x="200" y="22" font-size="13" font-weight="700" fill="#64748b" text-anchor="middle">y</text>

      
      <g font-size="11" fill="#94a3b8" text-anchor="middle">
        <text x="100" y="376">-2</text>
        <text x="150" y="376">-1</text>
        <text x="250" y="376">1</text>
        <text x="300" y="376">2</text>
        <text x="350" y="376">3</text>
        <text x="400" y="376">4</text>

        <text x="188" y="414">-1</text>
        <text x="188" y="314">1</text>
        <text x="188" y="264">2</text>
        <text x="188" y="214">3</text>
        <text x="188" y="164">4</text>
        <text x="188" y="114">5</text>
      </g>

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

      
      <g id="feat-axis" class="feature">
        <line x1="250" y1="40" x2="250" y2="455" stroke="#9333ea" stroke-width="2" stroke-dasharray="6,5" />
        <rect x="256" y="65" width="138" height="22" fill="#faf5ff" stroke="#d8b4fe" class="callout-bg" />
        <text x="262" y="80" font-size="11.5" font-weight="700" fill="#7e22ce">Axis of Symmetry: x = 1</text>
      </g>

      
      <g id="feat-x-intercepts" class="feature">
        
        <circle cx="150" cy="360" r="6" fill="#dc2626" stroke="#ffffff" stroke-width="2" />
        <rect x="52" y="382" width="102" height="22" fill="#fef2f2" stroke="#fca5a5" class="callout-bg" />
        <text x="103" y="397" font-size="11.5" font-weight="700" fill="#b91c1c" text-anchor="middle">x-int: (-1, 0)</text>

        
        <circle cx="350" cy="360" r="6" fill="#dc2626" stroke="#ffffff" stroke-width="2" />
        <rect x="345" y="382" width="96" height="22" fill="#fef2f2" stroke="#fca5a5" class="callout-bg" />
        <text x="393" y="397" font-size="11.5" font-weight="700" fill="#b91c1c" text-anchor="middle">x-int: (3, 0)</text>
      </g>

      
      <g id="feat-y-intercept" class="feature">
        <circle cx="200" cy="210" r="6" fill="#16a34a" stroke="#ffffff" stroke-width="2" />
        <rect x="58" y="200" width="134" height="22" fill="#f0fdf4" stroke="#86efac" class="callout-bg" />
        <text x="125" y="215" font-size="11.5" font-weight="700" fill="#15803d" text-anchor="middle">y-intercept: (0, 3)</text>
      </g>

      
      <g id="feat-vertex" class="feature">
        <circle cx="250" cy="160" r="7" fill="#2563eb" stroke="#ffffff" stroke-width="2.5" />
        <rect x="175" y="112" width="150" height="34" fill="#eff6ff" stroke="#93c5fd" class="callout-bg" />
        <text x="250" y="127" font-size="12" font-weight="700" fill="#1d4ed8" text-anchor="middle">Vertex: (1, 4)</text>
        <text x="250" y="140" font-size="10.5" font-weight="600" fill="#3b82f6" text-anchor="middle">[Maximum Point]</text>
      </g>
    </svg>
  </div>

  <div class="controls">
    <button class="btn-tab active" data-target="all" onclick="filterFeature('all')">Show All</button>
    <button class="btn-tab" data-target="feat-vertex" onclick="filterFeature('feat-vertex')">Vertex</button>
    <button class="btn-tab" data-target="feat-axis" onclick="filterFeature('feat-axis')">Axis</button>
    <button class="btn-tab" data-target="feat-x-intercepts" onclick="filterFeature('feat-x-intercepts')">x-Intercepts</button>
    <button class="btn-tab" data-target="feat-y-intercept" onclick="filterFeature('feat-y-intercept')">y-Intercept</button>
  </div>

  <script>
    // Generate precise SVG path for parabola y = -(x-1)^2 + 4
    // Math to Screen mapping:
    // screenX = 200 + 50 * x
    // screenY = 360 - 50 * y
    (function drawParabola() {
      const pathEl = document.getElementById('parabolaPath');
      let points = [];
      const xStart = -1.42; // y ≈ -1.85
      const xEnd = 3.42;    // y ≈ -1.85
      const step = 0.04;

      for (let x = xStart; x <= xEnd + 0.001; x += step) {
        const y = -Math.pow(x - 1, 2) + 4;
        const sx = (200 + 50 * x).toFixed(2);
        const sy = (360 - 50 * y).toFixed(2);
        points.push(`${sx},${sy}`);
      }

      pathEl.setAttribute('d', 'M ' + points.join(' L '));
    })();

    // Feature tab switching
    function filterFeature(targetId) {
      const tabs = document.querySelectorAll('.btn-tab');
      tabs.forEach(tab => {
        if (tab.getAttribute('data-target') === targetId) {
          tab.classList.add('active');
        } else {
          tab.classList.remove('active');
        }
      });

      const features = document.querySelectorAll('.feature');
      features.forEach(feat => {
        if (targetId === 'all' || feat.id === targetId) {
          feat.classList.remove('dimmed');
          feat.classList.add('focused');
        } else {
          feat.classList.remove('focused');
          feat.classList.add('dimmed');
        }
      });
    }
  </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;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }

    .cards-row {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 580px;
      justify-content: center;
    }

    .parabola-card {
      flex: 1;
      min-width: 150px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .parabola-card:active {
      transform: translateY(1px);
    }

    .title-badge {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin-bottom: 8px;
    }

    .badge-up { color: #0284c7; }
    .badge-down { color: #ea580c; }

    .graph-box {
      width: 100%;
      aspect-ratio: 1 / 1;
      max-height: 200px;
      position: relative;
    }

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

    .vertex-label {
      font-size: 12px;
      font-weight: 600;
      text-anchor: middle;
      fill: #1e2945;
    }

    .toggle-bar {
      margin-top: 12px;
      display: flex;
      gap: 8px;
    }

    .btn-sym {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #4b5563;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .btn-sym.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .glow-up {
      filter: drop-shadow(0 0 5px rgba(2, 132, 199, 0.7));
    }

    .glow-down {
      filter: drop-shadow(0 0 5px rgba(234, 88, 12, 0.7));
    }

    .axis-line {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 4 3;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .axis-line.visible {
      opacity: 1;
    }
  </style>
</head>
<body>

  <div class="cards-row">
    
    <div class="parabola-card" id="cardUp">
      <div class="title-badge badge-up">Opens Upward</div>
      <div class="graph-box">
        <svg id="svgUp" viewBox="0 0 160 160"></svg>
      </div>
    </div>

    
    <div class="parabola-card" id="cardDown">
      <div class="title-badge badge-down">Opens Downward</div>
      <div class="graph-box">
        <svg id="svgDown" viewBox="0 0 160 160"></svg>
      </div>
    </div>
  </div>

  <div class="toggle-bar">
    <button class="btn-sym" id="toggleAxis">
      <span>☷</span> Axis of Symmetry
    </button>
  </div>

  <script>
    function renderGraphs() {
      // Grid & math setup
      const size = 160;
      const h = 80; // center X

      // Upward: vertex at (80, 118), opens UP (towards smaller y in SVG)
      const kUp = 118;
      const aUp = -0.019; // SVG coordinates: negative a makes curve go up

      // Downward: vertex at (80, 42), opens DOWN (towards larger y in SVG)
      const kDown = 42;
      const aDown = 0.019;

      function createGridLines() {
        let grid = '<g stroke="#f0f2f5" stroke-width="1">';
        for (let i = 20; i < size; i += 20) {
          grid += `<line x1="${i}" y1="10" x2="${i}" y2="150" />`;
          grid += `<line x1="10" y1="${i}" x2="150" y2="${i}" />`;
        }
        grid += '</g>';
        // Axes
        grid += `<line x1="10" y1="80" x2="150" y2="80" stroke="#e2e8f0" stroke-width="1.5" />`;
        grid += `<line x1="80" y1="10" x2="80" y2="150" stroke="#e2e8f0" stroke-width="1.5" />`;
        return grid;
      }

      function computePath(a, h, k) {
        let d = '';
        for (let x = 20; x <= 140; x += 1) {
          const y = a * Math.pow(x - h, 2) + k;
          d += (x === 20 ? 'M' : 'L') + ` ${x.toFixed(1)} ${y.toFixed(1)}`;
        }
        return d;
      }

      // SVG UP
      const pathUp = computePath(aUp, h, kUp);
      document.getElementById('svgUp').innerHTML = `
        ${createGridLines()}
        <line id="symUp" class="axis-line" x1="80" y1="10" x2="80" y2="150" />
        <path d="${pathUp}" fill="none" stroke="#0284c7" stroke-width="3.5" stroke-linecap="round" />
        <circle cx="80" cy="${kUp}" r="6.5" fill="#0284c7" class="glow-up" stroke="#ffffff" stroke-width="2" />
        <text x="80" y="${kUp + 22}" class="vertex-label">Vertex (Minimum)</text>
      `;

      // SVG DOWN
      const pathDown = computePath(aDown, h, kDown);
      document.getElementById('svgDown').innerHTML = `
        ${createGridLines()}
        <line id="symDown" class="axis-line" x1="80" y1="10" x2="80" y2="150" />
        <path d="${pathDown}" fill="none" stroke="#ea580c" stroke-width="3.5" stroke-linecap="round" />
        <circle cx="80" cy="${kDown}" r="6.5" fill="#ea580c" class="glow-down" stroke="#ffffff" stroke-width="2" />
        <text x="80" y="${kDown - 12}" class="vertex-label">Vertex (Maximum)</text>
      `;
    }

    renderGraphs();

    let showAxis = false;
    const btn = document.getElementById('toggleAxis');
    function toggle() {
      showAxis = !showAxis;
      btn.classList.toggle('active', showAxis);
      document.getElementById('symUp').classList.toggle('visible', showAxis);
      document.getElementById('symDown').classList.toggle('visible', showAxis);
    }

    btn.addEventListener('click', toggle);
    document.getElementById('cardUp').addEventListener('click', toggle);
    document.getElementById('cardDown').addEventListener('click', toggle);
  </script>
</body>
</html>

Finding Vertex and Axis of Symmetry from Standard Form

Graphing Quadratic Functions in Vertex Form

Graphing Quadratic Functions in Factored Form

Converting Between Standard and Vertex Form

Converting Between Standard and Factored Form

Determining Extrema and Optimal Values of Quadratics

Determining a Quadratic Function from Graph Key Points

Writing Quadratic Functions from Data

math

Quadratic Functions, Forms, and Key Attributes

Conceito de Função: Definição e Notação

Domínio e Imagem de uma Função

Representando Funções: Tabelas, Gráficos e Fórmulas

Função do 1º Grau: Definição e Forma Geral

Coeficientes da Função do 1º Grau

Taxa de Variação: O Coeficiente Angular

Interpretando o Coeficiente Angular em Contextos

Coeficiente Linear e Intercepto

Introdução às Funções e Funções do 1º Grau

Construindo o Gráfico da Função do 1º Grau

Crescimento e Decrescimento da Função Linear

Raiz ou Zero da Função do 1º Grau

Resolvendo Equações do 1º Grau

Inequações do 1º Grau

Estudo dos Sinais da Função do 1º Grau

Análise Gráfica e Algébrica das Funções do 1º Grau

Identifying Quadratic Functions from Tables and Equations

Graphing Quadratic Functions from Equations

Key Features of Parabolas: Vertex, Axis of Symmetry and Intercepts

Effect of Coefficients on Parabola Shape and Position

Solving Quadratic Equations Graphically

Graphing Quadratic Functions

Interpretando Gráficos Lineares em Contextos Econômicos

Análise de Taxas de Variação em Situações Reais

Modelagem com Funções do 1º Grau

Comparando Funções do 1º Grau

Modelagem e Aplicações das Funções do 1º Grau

Solving Quadratic Equations by Factorising (Monic, Integer Roots)

Solving Quadratic Equations with Rational Roots

Solving Quadratic Equations with Irrational Roots

Solving Quadratic Equations with No Real Solutions

Solving Quadratic Equations Numerically

Using Digital Tools to Graph and Solve Quadratics

Applications of Quadratic Functions

Solving Quadratic Equations Algebraically and Numerically

Recognising and Writing Quadratic Equations in Standard Form

Algebraic Identity (a+b)² = a² + 2ab + b² Using Area Models

Algebraic Identity (a-b)² = a² - 2ab + b² Using Area Models

Algebraic Identity (a+b+c)² Using Models

Graph of a Quadratic Polynomial: Parabola and Its Zeroes

Identifying Parts of a Quadratic Function

Finding the Axis of Symmetry from Standard Form

Finding the Vertex from Standard Form

Quadratic Functions in Standard Form

Graphs as Complete Solution Sets in the Coordinate Plane

Solving Equations Graphically Using Intersections

Approximating Solutions to Equations Graphically

Identifying Linear Growth from Graphs

Identifying Exponential Growth from Graphs

Identifying Growth Type from Equations

Observing That Exponential Growth Eventually Exceeds Linear Growth from Graphs

Observing That Exponential Growth Eventually Exceeds Quadratic Growth from Graphs

OGM.10.FNC.3

Aligned learning resources

Related diagrams