<!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;
      user-select: none;
      -webkit-user-select: none;
    }
    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: center;
      min-height: 100%;
      padding: 10px;
    }
    .graph-wrapper {
      position: relative;
      width: 100%;
      max-width: 380px;
      aspect-ratio: 1 / 1;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      display: block;
      cursor: crosshair;
    }
    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }
    .axis {
      stroke: #94a3b8;
      stroke-width: 1.5;
    }
    .tick-label {
      font-size: 10px;
      fill: #64748b;
      font-weight: 500;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    .boundary-line {
      stroke: #2563eb;
      stroke-width: 2.5;
      stroke-dasharray: 6 5;
    }
    .region-fill {
      fill: #3b82f6;
      fill-opacity: 0.25;
    }
    .callout-bg {
      fill: #ffffff;
      stroke: #cbd5e1;
      stroke-width: 1;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
      rx: 6px;
    }
    .callout-text {
      font-size: 11px;
      font-weight: 600;
      dominant-baseline: middle;
    }
    .label-badge {
      font-size: 12px;
      font-weight: 700;
      fill: #1d4ed8;
      letter-spacing: 0.2px;
    }
    .line-equation {
      font-size: 11px;
      font-weight: 600;
      fill: #2563eb;
    }
    .hint-text {
      margin-top: 6px;
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="graph-wrapper">
    <svg id="graph" viewBox="0 0 380 380">
      <defs>
        <clipPath id="grid-clip">
          <rect x="40" y="40" width="300" height="300" rx="4" />
        </clipPath>
      </defs>

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

      
      <polygon class="region-fill" points="280,40 340,40 340,340 130,340" clip-path="url(#grid-clip)" />

      
      <line class="axis" x1="40" y1="190" x2="340" y2="190" />
      <line class="axis" x1="190" y1="40" x2="190" y2="340" />

      
      <g id="tick-labels"></g>

      
      <line class="boundary-line" x1="115" y1="370" x2="295" y2="10" clip-path="url(#grid-clip)" />

      
      <text class="line-equation" x="238" y="100" transform="rotate(-63.4 238 100)">y = 2x - 1 (dashed)</text>

      
      <g transform="translate(240, 240)">
        <rect x="-56" y="-12" width="112" height="24" rx="12" fill="#ffffff" fill-opacity="0.85" stroke="#93c5fd" stroke-width="1"/>
        <text class="label-badge" text-anchor="middle" y="4">Solution Region</text>
      </g>

      
      <g id="point-group">
        
        <rect id="callout-box" class="callout-bg" x="42" y="138" width="138" height="26" />
        <text id="callout-txt" class="callout-text" x="50" y="152">
          <tspan fill="#1e2945">(0,0) → </tspan>
          <tspan fill="#dc2626">0 &lt; -1 (False)</tspan>
        </text>
        
        <g id="marker-icon" transform="translate(190, 190)">
          <line x1="-5" y1="-5" x2="5" y2="5" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round" />
          <line x1="5" y1="-5" x2="-5" y2="5" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round" />
          <circle cx="0" cy="0" r="10" fill="none" stroke="#dc2626" stroke-width="1.5" stroke-opacity="0.3" />
        </g>
      </g>
    </svg>
  </div>

  <div class="hint-text">Tap grid to test any point in y &lt; 2x − 1</div>

  <script>
    const originX = 190;
    const originY = 190;
    const step = 30; // 30px per unit, range [-5, 5]

    // Render Grid & Ticks
    const gridG = document.getElementById('grid-lines');
    const ticksG = document.getElementById('tick-labels');

    for (let i = -5; i <= 5; i++) {
      const pos = originX + i * step;
      // Grid lines
      if (i !== 0) {
        gridG.innerHTML += `<line class="grid-line" x1="${pos}" y1="40" x2="${pos}" y2="340" />`;
        gridG.innerHTML += `<line class="grid-line" x1="40" y1="${pos}" x2="340" y2="${pos}" />`;
      }
      // Axis labels
      if (i !== 0) {
        ticksG.innerHTML += `<text class="tick-label" x="${pos}" y="202">${i}</text>`;
        ticksG.innerHTML += `<text class="tick-label" x="178" y="${originY - i * step}">${i}</text>`;
      }
    }
    ticksG.innerHTML += `<text class="tick-label" x="335" y="202" font-weight="700">x</text>`;
    ticksG.innerHTML += `<text class="tick-label" x="178" y="48" font-weight="700">y</text>`;

    // Interactive Point Tester
    const svg = document.getElementById('graph');
    const pointGroup = document.getElementById('point-group');

    function updatePoint(xVal, yVal) {
      const px = originX + xVal * step;
      const py = originY - yVal * step;
      const isTrue = yVal < (2 * xVal - 1);

      const color = isTrue ? '#16a34a' : '#dc2626';
      const statusText = isTrue ? 'True' : 'False';
      const inequality = `${yVal} < ${2 * xVal - 1}`;
      
      // Determine callout offset so it stays in grid
      let calloutX = px - 145;
      if (calloutX < 45) calloutX = px + 15;
      let calloutY = py - 32;
      if (calloutY < 45) calloutY = py + 12;

      const marker = isTrue
        ? `<polyline points="-5,0 -2,4 6,-4" fill="none" stroke="${color}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
           <circle cx="0" cy="0" r="10" fill="none" stroke="${color}" stroke-width="1.5" stroke-opacity="0.3" />`
        : `<line x1="-5" y1="-5" x2="5" y2="5" stroke="${color}" stroke-width="2.5" stroke-linecap="round" />
           <line x1="5" y1="-5" x2="-5" y2="5" stroke="${color}" stroke-width="2.5" stroke-linecap="round" />
           <circle cx="0" cy="0" r="10" fill="none" stroke="${color}" stroke-width="1.5" stroke-opacity="0.3" />`;

      pointGroup.innerHTML = `
        <rect class="callout-bg" x="${calloutX}" y="${calloutY}" width="140" height="26" />
        <text class="callout-text" x="${calloutX + 8}" y="${calloutY + 14}">
          <tspan fill="#1e2945">(${xVal},${yVal}) → </tspan>
          <tspan fill="${color}">${inequality} (${statusText})</tspan>
        </text>
        <g transform="translate(${px}, ${py})">
          ${marker}
        </g>
      `;
    }

    svg.addEventListener('pointerdown', (e) => {
      const rect = svg.getBoundingClientRect();
      const clientX = e.clientX - rect.left;
      const clientY = e.clientY - rect.top;
      
      const svgX = (clientX / rect.width) * 380;
      const svgY = (clientY / rect.height) * 380;

      let xVal = Math.round((svgX - originX) / step);
      let yVal = Math.round((originY - svgY) / step);

      xVal = Math.max(-5, Math.min(5, xVal));
      yVal = Math.max(-5, Math.min(5, yVal));

      updatePoint(xVal, yVal);
    });
  </script>
</body>
</html>

Graphing a Single Linear Inequality in Two Variables

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

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 440px;
    }
    .step-btn {
      flex: 1;
      padding: 7px 4px;
      font-size: 12px;
      font-weight: 600;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .step-btn:hover {
      background: #f1f5f9;
      color: #0f172a;
    }
    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .play-btn {
      width: 34px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      color: #0f172a;
      transition: background-color 0.2s ease;
    }
    .play-btn:hover {
      background: #f1f5f9;
    }

    /* Transformation Stage */
    .stage {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .step-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
      opacity: 0.82;
      cursor: pointer;
    }
    .step-card.active {
      opacity: 1;
      border-color: #0284c7;
      background-color: #ffffff;
      box-shadow: 0 3px 10px rgba(2, 132, 199, 0.15);
    }

    .step-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #475569;
      min-width: 60px;
    }
    .step-card.active .step-label {
      color: #0284c7;
    }

    .math-content {
      font-family: "SF Mono", "Segoe UI Mono", "Consolas", monospace;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      flex: 1;
    }

    /* Math Fractions */
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 13px;
      line-height: 1.1;
    }
    .num {
      border-bottom: 1.5px solid #0f172a;
      padding: 0 2px 1px;
      color: #0f172a;
    }
    .den {
      padding-top: 1px;
      color: #dc2626;
      font-weight: 800;
    }

    /* Sign Highlight Box */
    .sign-box {
      padding: 2px 6px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-weight: 800;
      border: 1px solid #cbd5e1;
    }
    .sign-box.flip {
      background: #fee2e2;
      color: #b91c1c;
      border: 1.5px dashed #ef4444;
      font-size: 14px;
    }
    .step-card.active .sign-box.flip {
      animation: pulseHighlight 1.4s infinite ease-in-out;
    }
    .sign-box.final {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
    }

    @keyframes pulseHighlight {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.06); }
    }

    .badge-sub {
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 6px;
      border-radius: 5px;
      background: #eff6ff;
      color: #1d4ed8;
      white-space: nowrap;
      border: 1px solid #bfdbfe;
    }

    /* Callout */
    .callout {
      width: 100%;
      max-width: 440px;
      background: #fef2f2;
      border: 1.5px solid #fecaca;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      font-weight: 600;
      color: #991b1b;
    }
    .callout-icon {
      font-size: 16px;
      flex-shrink: 0;
      line-height: 1;
    }

    @media (max-width: 380px) {
      body { padding: 8px; }
      .math-content { font-size: 14px; gap: 3px; }
      .frac { font-size: 11px; }
      .step-label { min-width: 48px; font-size: 10px; }
      .sign-box.flip { font-size: 12px; padding: 2px 4px; }
      .badge-sub { font-size: 9.5px; padding: 2px 4px; }
      .callout { font-size: 11.5px; }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" data-step="0">1. Original</button>
    <button class="step-btn" data-step="1">2. Divide &amp; Flip</button>
    <button class="step-btn" data-step="2">3. Solution</button>
    <button class="play-btn" id="playBtn" title="Play / Pause" aria-label="Toggle auto-play">⏸</button>
  </div>

  
  <div class="stage">
    
    <div class="step-card active" id="card0" data-step="0">
      <div class="step-label">Original</div>
      <div class="math-content">
        <span>-2y</span>
        <span class="sign-box">≤</span>
        <span>6x − 4</span>
      </div>
    </div>

    
    <div class="step-card" id="card1" data-step="1">
      <div class="step-label">÷ −2</div>
      <div class="math-content">
        <span class="frac"><span class="num">-2y</span><span class="den">-2</span></span>
        <span class="sign-box flip">≤ ➔ ≥</span>
        <span class="frac"><span class="num">6x</span><span class="den">-2</span></span>
        <span>−</span>
        <span class="frac"><span class="num">4</span><span class="den">-2</span></span>
      </div>
    </div>

    
    <div class="step-card" id="card2" data-step="2">
      <div class="step-label">Result</div>
      <div class="math-content">
        <span>y</span>
        <span class="sign-box final">≥</span>
        <span>-3x + 2</span>
      </div>
      <span class="badge-sub">Shade Above ▲</span>
    </div>
  </div>

  
  <div class="callout">
    <span class="callout-icon">⚠️</span>
    <span>Do not forget: dividing by negative reverses direction! (≤ becomes ≥)</span>
  </div>

  <script>
    const cards = Array.from(document.querySelectorAll('.step-card'));
    const buttons = Array.from(document.querySelectorAll('.step-btn'));
    const playBtn = document.getElementById('playBtn');

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    function setStep(idx) {
      currentStep = (idx + cards.length) % cards.length;
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === currentStep);
      });
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(() => {
        setStep(currentStep + 1);
      }, 3200);
    }

    function stopTimer() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playBtn.textContent = '⏸';
        startTimer();
      } else {
        playBtn.textContent = '▶';
        stopTimer();
      }
    }

    buttons.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        setStep(idx);
        if (isPlaying) {
          isPlaying = false;
          playBtn.textContent = '▶';
          stopTimer();
        }
      });
    });

    cards.forEach((card, idx) => {
      card.addEventListener('click', () => {
        setStep(idx);
        if (isPlaying) {
          isPlaying = false;
          playBtn.textContent = '▶';
          stopTimer();
        }
      });
    });

    playBtn.addEventListener('click', togglePlay);

    // Initial start
    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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }
    @media (max-width: 480px) {
      .grid-container {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .header {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .header.solid-head { color: #2563eb; }
    .header.dash-head { color: #ea580c; }
    
    .graph-wrap {
      width: 100%;
      aspect-ratio: 1 / 1;
      max-width: 220px;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }
    
    .badge {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 6px;
      text-align: center;
      line-height: 1.3;
    }
    .badge-solid {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    .badge-dash {
      background: #fff7ed;
      color: #c2410c;
      border: 1px solid #fed7aa;
    }
    .point-label {
      font-size: 10px;
      font-weight: 600;
      fill: #475569;
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="panel">
      <div class="header solid-head">y ≤ 2x + 1</div>
      <div class="graph-wrap">
        <svg viewBox="0 0 200 200" aria-label="Graph of y <= 2x + 1">
          <defs>
            <clipPath id="graph-clip-1">
              <rect x="20" y="20" width="160" height="160" rx="4" />
            </clipPath>
          </defs>

          
          <rect x="20" y="20" width="160" height="160" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/>

          <g clip-path="url(#graph-clip-1)">
            
            <path d="
              M 20,40 H 180 M 20,60 H 180 M 20,80 H 180 M 20,120 H 180 M 20,140 H 180 M 20,160 H 180
              M 40,20 V 180 M 60,20 V 180 M 80,20 V 180 M 120,20 V 180 M 140,20 V 180 M 160,20 V 180
            " stroke="#f1f5f9" stroke-width="1" />

            
            <polygon points="50,180 140,0 200,0 200,200 50,200" fill="#3b82f6" fill-opacity="0.15" />

            
            <line x1="20" y1="100" x2="180" y2="100" stroke="#94a3b8" stroke-width="1.5" />
            <line x1="100" y1="20" x2="100" y2="180" stroke="#94a3b8" stroke-width="1.5" />

            
            <line x1="50" y1="180" x2="140" y2="0" stroke="#2563eb" stroke-width="3" stroke-linecap="round" />
            
            
            <circle cx="100" cy="80" r="3.5" fill="#2563eb" />
            <circle cx="120" cy="40" r="3.5" fill="#2563eb" />
            <circle cx="80" cy="120" r="3.5" fill="#2563eb" />
          </g>

          
          <text x="183" y="104" class="point-label">x</text>
          <text x="96" y="14" class="point-label">y</text>
        </svg>
      </div>
      <div class="badge badge-solid">Solid: Includes line (≤, ≥)</div>
    </div>

    
    <div class="panel">
      <div class="header dash-head">y &lt; 2x + 1</div>
      <div class="graph-wrap">
        <svg viewBox="0 0 200 200" aria-label="Graph of y < 2x + 1">
          <defs>
            <clipPath id="graph-clip-2">
              <rect x="20" y="20" width="160" height="160" rx="4" />
            </clipPath>
          </defs>

          
          <rect x="20" y="20" width="160" height="160" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/>

          <g clip-path="url(#graph-clip-2)">
            
            <path d="
              M 20,40 H 180 M 20,60 H 180 M 20,80 H 180 M 20,120 H 180 M 20,140 H 180 M 20,160 H 180
              M 40,20 V 180 M 60,20 V 180 M 80,20 V 180 M 120,20 V 180 M 140,20 V 180 M 160,20 V 180
            " stroke="#f1f5f9" stroke-width="1" />

            
            <polygon points="50,180 140,0 200,0 200,200 50,200" fill="#f97316" fill-opacity="0.15" />

            
            <line x1="20" y1="100" x2="180" y2="100" stroke="#94a3b8" stroke-width="1.5" />
            <line x1="100" y1="20" x2="100" y2="180" stroke="#94a3b8" stroke-width="1.5" />

            
            <line x1="50" y1="180" x2="140" y2="0" stroke="#ea580c" stroke-width="3" stroke-dasharray="6,5" stroke-linecap="round" />
            
            
            <circle cx="100" cy="80" r="3" fill="#ffffff" stroke="#ea580c" stroke-width="2" />
            <circle cx="120" cy="40" r="3" fill="#ffffff" stroke="#ea580c" stroke-width="2" />
            <circle cx="80" cy="120" r="3" fill="#ffffff" stroke="#ea580c" stroke-width="2" />
          </g>

          
          <text x="183" y="104" class="point-label">x</text>
          <text x="96" y="14" class="point-label">y</text>
        </svg>
      </div>
      <div class="badge badge-dash">Dashed: Excludes line (&lt;, &gt;)</div>
    </div>
  </div>

</body>
</html>

HSA.CED.A.3

Aligned learning resources

Related diagrams