Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine an arcade charges a $5 entry fee plus $2 for every game you play. How could you draw a single picture that shows the total cost for *any* number of games?

In algebra, we describe this relationship with a **linear equation** like $y = 2x + 5$, where $x$ is the input (games) and $y$ is the output (total cost).

How do we turn an algebraic formula into a visible picture? Let's start by generating sample points.

A **table of values** is a chart where you choose test values for $x$, substitute them into your equation, and compute the matching $y$ value to create **ordered pairs** written as $(x, y)$.

<!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: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      gap: 12px;
      min-height: 100%;
    }
    .equation-badge {
      background: #eff6ff;
      color: #2563eb;
      font-weight: 700;
      font-size: 16px;
      padding: 4px 14px;
      border-radius: 20px;
      border: 1px solid #bfdbfe;
    }
    .workspace {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 600px;
    }
    .table-card {
      background: #f8f9fa;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 140px;
    }
    .row-item {
      display: grid;
      grid-template-columns: 28px 28px 54px;
      align-items: center;
      text-align: center;
      font-size: 13px;
      padding: 4px 6px;
      border-radius: 6px;
      cursor: pointer;
      user-select: none;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .row-head {
      font-weight: 700;
      color: #6b7280;
      cursor: default;
      border-bottom: 1px solid #e5e7eb;
      padding-bottom: 4px;
    }
    .row-item:not(.row-head):hover {
      background: #e5e7eb;
    }
    .row-item.active {
      background: #dbeafe;
      color: #1d4ed8;
      font-weight: 700;
      box-shadow: 0 0 0 1.5px #2563eb;
    }
    .graph-container {
      width: 240px;
      height: 240px;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .grid-line { stroke: #e5e7eb; stroke-width: 1; }
    .axis { stroke: #94a3b8; stroke-width: 1.5; }
    .axis-label { fill: #64748b; font-size: 11px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
    .plot-dot {
      fill: #2563eb;
      transition: r 0.3s ease, fill 0.3s ease, opacity 0.3s ease;
      cursor: pointer;
    }
    .plot-dot.dimmed { opacity: 0.3; }
    .plot-dot.highlight { fill: #1d4ed8; r: 6; }
    .plot-label {
      font-size: 10px;
      font-weight: 700;
      fill: #1e2945;
      transition: opacity 0.3s ease;
    }
    .trace-x { stroke: #2563eb; stroke-width: 1.5; stroke-dasharray: 3 3; }
    .trace-y { stroke: #16a34a; stroke-width: 1.5; stroke-dasharray: 3 3; }
    .linear-line {
      stroke: #2563eb;
      stroke-width: 2.5;
      stroke-linecap: round;
      transition: stroke-dashoffset 0.8s ease, opacity 0.3s ease;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
      transition: background 0.2s, color 0.2s;
    }
    .btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="equation-badge">y = 2x − 1</div>

  <div class="workspace">
    <div class="table-card">
      <div class="row-item row-head">
        <span>x</span><span>y</span><span>(x, y)</span>
      </div>
      <div class="row-item" data-step="0" onclick="goToStep(0)">
        <span>-1</span><span>-3</span><span>(-1,-3)</span>
      </div>
      <div class="row-item" data-step="1" onclick="goToStep(1)">
        <span>0</span><span>-1</span><span>(0,-1)</span>
      </div>
      <div class="row-item" data-step="2" onclick="goToStep(2)">
        <span>1</span><span>1</span><span>(1, 1)</span>
      </div>
      <div class="row-item" data-step="3" onclick="goToStep(3)">
        <span>2</span><span>3</span><span>(2, 3)</span>
      </div>
    </div>

    <div class="graph-container">
      <svg viewBox="0 0 240 240">
        
        <g>
          <line class="grid-line" x1="15" y1="45" x2="225" y2="45" />
          <line class="grid-line" x1="15" y1="75" x2="225" y2="75" />
          <line class="grid-line" x1="15" y1="105" x2="225" y2="105" />
          <line class="grid-line" x1="15" y1="135" x2="225" y2="135" />
          <line class="grid-line" x1="15" y1="165" x2="225" y2="165" />
          <line class="grid-line" x1="15" y1="195" x2="225" y2="195" />
          <line class="grid-line" x1="45" y1="15" x2="45" y2="225" />
          <line class="grid-line" x1="75" y1="15" x2="75" y2="225" />
          <line class="grid-line" x1="105" y1="15" x2="105" y2="225" />
          <line class="grid-line" x1="135" y1="15" x2="135" y2="225" />
          <line class="grid-line" x1="165" y1="15" x2="165" y2="225" />
          <line class="grid-line" x1="195" y1="15" x2="195" y2="225" />
        </g>

        
        <line class="axis" x1="15" y1="120" x2="225" y2="120" />
        <line class="axis" x1="120" y1="15" x2="120" y2="225" />
        <text class="axis-label" x="232" y="120">x</text>
        <text class="axis-label" x="120" y="8">y</text>

        
        <circle cx="120" cy="120" r="2.5" fill="#94a3b8" />

        
        <line id="traceX" class="trace-x" x1="120" y1="120" x2="120" y2="120" opacity="0" />
        <line id="traceY" class="trace-y" x1="120" y1="120" x2="120" y2="120" opacity="0" />

        
        
        <line id="linearLine" class="linear-line" x1="75" y1="210" x2="195" y2="30" stroke-dasharray="240" stroke-dashoffset="240" opacity="0" />

        
        
        <circle id="dot0" class="plot-dot" cx="90" cy="210" r="4.5" opacity="0" onclick="goToStep(0)" />
        <text id="lbl0" class="plot-label" x="98" y="214" opacity="0">(-1,-3)</text>

        
        <circle id="dot1" class="plot-dot" cx="120" cy="150" r="4.5" opacity="0" onclick="goToStep(1)" />
        <text id="lbl1" class="plot-label" x="128" y="154" opacity="0">(0,-1)</text>

        
        <circle id="dot2" class="plot-dot" cx="150" cy="90" r="4.5" opacity="0" onclick="goToStep(2)" />
        <text id="lbl2" class="plot-label" x="158" y="94" opacity="0">(1,1)</text>

        
        <circle id="dot3" class="plot-dot" cx="180" cy="30" r="4.5" opacity="0" onclick="goToStep(3)" />
        <text id="lbl3" class="plot-label" x="135" y="34" opacity="0">(2,3)</text>
      </svg>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="btn0" onclick="goToStep(0)">1</button>
    <button class="btn" id="btn1" onclick="goToStep(1)">2</button>
    <button class="btn" id="btn2" onclick="goToStep(2)">3</button>
    <button class="btn" id="btn3" onclick="goToStep(3)">4</button>
    <button class="btn" id="btn4" onclick="goToStep(4)">Line →</button>
    <button class="btn" id="playBtn" onclick="togglePlay()" style="margin-left: 6px;">⏸</button>
  </div>

  <script>
    const pts = [
      { x: -1, y: -3, cx: 90, cy: 210 },
      { x: 0,  y: -1, cx: 120, cy: 150 },
      { x: 1,  y: 1,  cx: 150, cy: 90 },
      { x: 2,  y: 3,  cx: 180, cy: 30 }
    ];

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

    function renderStep(s) {
      currentStep = s;

      // Update table & buttons
      document.querySelectorAll('.row-item[data-step]').forEach((row, i) => {
        row.classList.toggle('active', i === s);
      });
      document.querySelectorAll('.controls .btn[id^="btn"]').forEach((btn, i) => {
        btn.classList.toggle('active', i === s);
      });

      const traceX = document.getElementById('traceX');
      const traceY = document.getElementById('traceY');
      const line = document.getElementById('linearLine');

      if (s < 4) {
        line.style.opacity = '0';
        line.style.strokeDashoffset = '240';

        const p = pts[s];
        // Trace paths: origin (120,120) -> (cx, 120) -> (cx, cy)
        traceX.setAttribute('x1', '120');
        traceX.setAttribute('y1', '120');
        traceX.setAttribute('x2', p.cx);
        traceX.setAttribute('y2', '120');
        traceX.style.opacity = p.cx === 120 ? '0' : '1';

        traceY.setAttribute('x1', p.cx);
        traceY.setAttribute('y1', '120');
        traceY.setAttribute('x2', p.cx);
        traceY.setAttribute('y2', p.cy);
        traceY.style.opacity = '1';

        pts.forEach((_, i) => {
          const d = document.getElementById('dot' + i);
          const l = document.getElementById('lbl' + i);
          if (i <= s) {
            d.style.opacity = '1';
            l.style.opacity = '1';
            d.classList.toggle('highlight', i === s);
            d.classList.toggle('dimmed', i !== s);
          } else {
            d.style.opacity = '0';
            l.style.opacity = '0';
            d.classList.remove('highlight', 'dimmed');
          }
        });
      } else {
        // Line view
        traceX.style.opacity = '0';
        traceY.style.opacity = '0';

        pts.forEach((_, i) => {
          const d = document.getElementById('dot' + i);
          const l = document.getElementById('lbl' + i);
          d.style.opacity = '1';
          l.style.opacity = '1';
          d.classList.remove('highlight', 'dimmed');
        });

        line.style.opacity = '1';
        line.style.strokeDashoffset = '0';
      }
    }

    function goToStep(s) {
      renderStep(s);
    }

    function togglePlay() {
      playing = !playing;
      document.getElementById('playBtn').textContent = playing ? '⏸' : '▶';
    }

    renderStep(0);

    timer = setInterval(() => {
      if (playing) {
        renderStep((currentStep + 1) % 5);
      }
    }, 3200);
  </script>
</body>
</html>

In 1637, mathematician René Descartes connected algebra and geometry by showing that pairs of numbers could represent exact locations on a flat surface.

Now that we have our list of pairs, where do they actually go on a grid?

On a coordinate grid, the horizontal number line is the $x$-axis (move left or right) and the vertical line is the $y$-axis (move down or up). The point $(0,0)$ where they cross is the **origin**.

<!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>Plotting Points and Graphing a Line</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .controls {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 10px;
      width: 100%;
      max-width: 360px;
    }

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

    .step-btn:hover {
      background: #e2e8f0;
      color: #1e2945;
    }

    .step-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

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

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

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

    .axis {
      stroke: #64748b;
      stroke-width: 1.5;
    }

    .axis-label {
      font-size: 12px;
      fill: #64748b;
      font-weight: bold;
    }

    .tick-label {
      font-size: 9px;
      fill: #94a3b8;
      text-anchor: middle;
      dominant-baseline: middle;
    }

    .guide-line {
      stroke: #f59e0b;
      stroke-width: 2;
      stroke-dasharray: 4 4;
      transition: opacity 0.3s;
    }

    .pt {
      fill: #2563eb;
      stroke: #ffffff;
      stroke-width: 2;
      transition: transform 0.3s ease, opacity 0.3s ease;
      cursor: pointer;
    }

    .pt-label {
      font-size: 11px;
      font-weight: bold;
      fill: #1e2945;
      paint-order: stroke;
      stroke: #ffffff;
      stroke-width: 3px;
      transition: opacity 0.3s ease;
    }

    .line-plot {
      stroke: #2563eb;
      stroke-width: 3;
      stroke-linecap: round;
      transition: stroke-dashoffset 0.6s ease, opacity 0.4s ease;
    }

    .eq-badge {
      font-size: 12px;
      font-weight: 700;
      fill: #2563eb;
      paint-order: stroke;
      stroke: #ffffff;
      stroke-width: 4px;
      transition: opacity 0.4s ease;
    }
  </style>
</head>
<body>

  <div class="controls" id="btnGroup">
    <button class="step-btn active" data-step="0">(0, -1)</button>
    <button class="step-btn" data-step="1">(1, 1)</button>
    <button class="step-btn" data-step="2">(2, 3)</button>
    <button class="step-btn" data-step="3">Line</button>
  </div>

  <div class="graph-container">
    <svg viewBox="0 0 320 320" id="graphSvg">
      <defs>
        
        <marker id="arrow-x" viewBox="0 0 10 10" refX="6" 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="#64748b"/>
        </marker>
        <marker id="arrow-y" viewBox="0 0 10 10" refX="6" 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="#64748b"/>
        </marker>
      </defs>

      
      
      
      <line class="grid-line" x1="40" y1="20" x2="40" y2="300" />
      <line class="grid-line" x1="70" y1="20" x2="70" y2="300" />
      <line class="grid-line" x1="100" y1="20" x2="100" y2="300" />
      <line class="grid-line" x1="130" y1="20" x2="130" y2="300" />
      <line class="grid-line" x1="190" y1="20" x2="190" y2="300" />
      <line class="grid-line" x1="220" y1="20" x2="220" y2="300" />
      <line class="grid-line" x1="250" y1="20" x2="250" y2="300" />
      <line class="grid-line" x1="280" y1="20" x2="280" y2="300" />

      
      <line class="grid-line" x1="20" y1="40" x2="300" y2="40" />
      <line class="grid-line" x1="20" y1="70" x2="300" y2="70" />
      <line class="grid-line" x1="20" y1="100" x2="300" y2="100" />
      <line class="grid-line" x1="20" y1="130" x2="300" y2="130" />
      <line class="grid-line" x1="20" y1="190" x2="300" y2="190" />
      <line class="grid-line" x1="20" y1="220" x2="300" y2="220" />
      <line class="grid-line" x1="20" y1="250" x2="300" y2="250" />
      <line class="grid-line" x1="20" y1="280" x2="300" y2="280" />

      
      <line class="axis" x1="20" y1="160" x2="300" y2="160" marker-end="url(#arrow-x)" />
      <line class="axis" x1="160" y1="300" x2="160" y2="20" marker-end="url(#arrow-y)" />

      
      <text class="axis-label" x="306" y="164">x</text>
      <text class="axis-label" x="160" y="12" text-anchor="middle">y</text>

      
      <text class="tick-label" x="100" y="172">-2</text>
      <text class="tick-label" x="220" y="172">2</text>
      <text class="tick-label" x="148" y="220">-2</text>
      <text class="tick-label" x="148" y="100">2</text>
      <text class="tick-label" x="150" y="172">0</text>

      
      
      <g id="guide0" opacity="1">
        <line class="guide-line" x1="160" y1="160" x2="160" y2="190" />
      </g>

      
      <g id="guide1" opacity="0">
        <line class="guide-line" x1="160" y1="160" x2="190" y2="160" />
        <line class="guide-line" x1="190" y1="160" x2="190" y2="130" />
      </g>

      
      <g id="guide2" opacity="0">
        <line class="guide-line" x1="160" y1="160" x2="220" y2="160" />
        <line class="guide-line" x1="220" y1="160" x2="220" y2="70" />
      </g>

      
      <line id="graphLine" class="line-plot" x1="115" y1="280" x2="235" y2="40" opacity="0" />
      <text id="eqText" class="eq-badge" x="238" y="44" opacity="0">y = 2x - 1</text>

      
      <g id="ptGroup0" opacity="1">
        <circle class="pt" cx="160" cy="190" r="5.5" />
        <text class="pt-label" x="172" y="194">(0, -1)</text>
      </g>

      
      <g id="ptGroup1" opacity="0">
        <circle class="pt" cx="190" cy="130" r="5.5" />
        <text class="pt-label" x="202" y="134">(1, 1)</text>
      </g>

      
      <g id="ptGroup2" opacity="0">
        <circle class="pt" cx="220" cy="70" r="5.5" />
        <text class="pt-label" x="232" y="74">(2, 3)</text>
      </g>
    </svg>
  </div>

  <script>
    const buttons = document.querySelectorAll('.step-btn');
    const pt0 = document.getElementById('ptGroup0');
    const pt1 = document.getElementById('ptGroup1');
    const pt2 = document.getElementById('ptGroup2');
    const g0 = document.getElementById('guide0');
    const g1 = document.getElementById('guide1');
    const g2 = document.getElementById('guide2');
    const line = document.getElementById('graphLine');
    const eq = document.getElementById('eqText');

    let currentStep = 0;
    let timer = null;

    function renderStep(step) {
      currentStep = step;
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      // Guides
      g0.setAttribute('opacity', step === 0 ? '1' : '0');
      g1.setAttribute('opacity', step === 1 ? '1' : '0');
      g2.setAttribute('opacity', step === 2 ? '1' : '0');

      // Points visibility
      pt0.setAttribute('opacity', step >= 0 ? '1' : '0');
      pt1.setAttribute('opacity', step >= 1 ? '1' : '0');
      pt2.setAttribute('opacity', step >= 2 ? '1' : '0');

      // Line visibility
      line.setAttribute('opacity', step === 3 ? '1' : '0');
      eq.setAttribute('opacity', step === 3 ? '1' : '0');
    }

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

    // Gentle auto-advance preview, stops immediately upon interaction
    timer = setInterval(() => {
      const next = (currentStep + 1) % 4;
      renderStep(next);
    }, 3200);
  </script>
</body>
</html>

We draw a solid line through the points because every single point on that line—including decimals like $(0.5, 0)$—is a true solution to the equation.

A common mistake is reversing the order of coordinates: always count horizontally along the $x$-axis first, then vertically along the $y$-axis.

What should you do when an equation contains fractions? Let's look at how choosing the right inputs can save you from messy calculations.

## Choosing Smart x-Values with Fractions

When graphing an equation like $y = -\frac{1}{3}x + 2$, pick $x$-values that are multiples of the denominator (such as $-3, 0, 3, 6$) so your outputs simplify to whole numbers.

<!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>Plotting a Linear Equation</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 8px;
      user-select: none;
    }

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
      gap: 8px;
    }

    .equation-badge {
      display: inline-flex;
      align-items: center;
      background: #ffffff;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      border: 1px solid #cbd5e1;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: -0.35em;
      font-size: 0.85em;
      line-height: 1;
      padding: 0 2px;
      text-align: center;
    }
    .frac-top { border-bottom: 1.5px solid #1e2945; padding-bottom: 1px; }
    .frac-bot { padding-top: 1px; }

    .btn-row {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .step-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #64748b;
      padding: 4px 8px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #16a34a;
      color: #ffffff;
      border-color: #16a34a;
      box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
    }

    .content-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .calc-banner {
      width: 100%;
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: #334155;
      background: #f8fafc;
      border-radius: 6px;
      margin-bottom: 6px;
      padding: 2px 8px;
    }

    .calc-banner .highlight {
      color: #16a34a;
      font-weight: 700;
    }

    .checkpoint-tag {
      background: #dcfce7;
      color: #16a34a;
      border: 1px solid #86efac;
      padding: 1px 6px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 700;
    }

    .svg-container {
      width: 100%;
      max-width: 440px;
      aspect-ratio: 320 / 220;
    }

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

    .grid-line { stroke: #f1f5f9; stroke-width: 1; }
    .axis { stroke: #94a3b8; stroke-width: 1.5; stroke-linecap: round; }
    .tick-label { font-size: 9px; fill: #64748b; font-family: inherit; }
    .axis-label { font-size: 11px; font-weight: 700; fill: #334155; font-family: inherit; }

    .line-plot {
      stroke: #16a34a;
      stroke-width: 2.5;
      stroke-linecap: round;
      transition: stroke-dashoffset 0.6s ease;
    }

    .guide-line {
      stroke: #94a3b8;
      stroke-width: 1.2;
      stroke-dasharray: 3 3;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .guide-line.show { opacity: 0.85; }

    .point-dot {
      cursor: pointer;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .point-dot circle.outer {
      fill: #ffffff;
      stroke: #16a34a;
      stroke-width: 2.5;
    }
    .point-dot circle.inner {
      fill: #16a34a;
    }
    .point-dot.active circle.outer {
      stroke: #0f172a;
      stroke-width: 3;
    }
    .point-dot.active circle.inner {
      fill: #22c55e;
    }
    .point-label {
      font-size: 10px;
      font-weight: 700;
      fill: #0f172a;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

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

    .play-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s;
    }
    .play-btn:hover { background: #e2e8f0; }

    .stepper-nav {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="equation-badge">
      y = −<span class="frac"><span class="frac-top">1</span><span class="frac-bot">3</span></span>x + 2
    </div>
    <div class="btn-row" id="pointBtns">
      <button class="step-btn" data-step="0">x = −3</button>
      <button class="step-btn" data-step="1">x = 0</button>
      <button class="step-btn" data-step="2">x = 3</button>
      <button class="step-btn" data-step="3">x = 6</button>
      <button class="step-btn" data-step="4">Line</button>
    </div>
  </div>

  <div class="content-area">
    <div class="calc-banner" id="calcBanner"></div>
    
    <div class="svg-container">
      <svg viewBox="0 0 320 220" id="graphSvg">
        <defs>
          <marker id="arrow" 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="#94a3b8" />
          </marker>
        </defs>

        
        <g id="gridGroup"></g>
        <g id="axisGroup"></g>

        
        <line id="guideX" class="guide-line" x1="0" y1="0" x2="0" y2="0" />
        <line id="guideY" class="guide-line" x1="0" y1="0" x2="0" y2="0" />

        
        <line id="linePlot" class="line-plot" x1="12" y1="56" x2="308" y2="155" style="stroke-dasharray: 320; stroke-dashoffset: 320;" />

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

    <div class="controls">
      <button class="stepper-nav" id="prevBtn">← Prev</button>
      <button class="play-btn" id="playBtn" title="Auto play">▶</button>
      <button class="stepper-nav" id="nextBtn">Next →</button>
    </div>
  </div>

  <script>
    // Coordinate Mapping:
    // x: -4 to 7 (11 steps), y: -2 to 5 (7 steps)
    // Scale: 26px per unit
    const ORIGIN_X = 120; // x = 0
    const ORIGIN_Y = 135; // y = 0
    const SCALE = 26;

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

    const pointsData = [
      { x: -3, y: 3, calc: "y = −⅓(−3) + 2 = 1 + 2 = 3", label: "(−3, 3)", note: "Multiple of 3" },
      { x: 0,  y: 2, calc: "y = −⅓(0) + 2 = 0 + 2 = 2", label: "(0, 2)", note: "y-intercept" },
      { x: 3,  y: 1, calc: "y = −⅓(3) + 2 = −1 + 2 = 1", label: "(3, 1)", note: "Checkpoint ✓" },
      { x: 6,  y: 0, calc: "y = −⅓(6) + 2 = −2 + 2 = 0", label: "(6, 0)", note: "x-intercept" }
    ];

    // Build Grid & Axes
    const gridGroup = document.getElementById('gridGroup');
    const axisGroup = document.getElementById('axisGroup');

    for (let gx = -4; gx <= 7; gx++) {
      const pos = toSvg(gx, 0);
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('class', 'grid-line');
      line.setAttribute('x1', pos.x);
      line.setAttribute('y1', 10);
      line.setAttribute('x2', pos.x);
      line.setAttribute('y2', 205);
      gridGroup.appendChild(line);

      if (gx !== 0 && gx % 2 === 0) {
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('class', 'tick-label');
        text.setAttribute('text-anchor', 'middle');
        text.setAttribute('x', pos.x);
        text.setAttribute('y', ORIGIN_Y + 12);
        text.textContent = gx;
        axisGroup.appendChild(text);
      }
    }

    for (let gy = -2; gy <= 5; gy++) {
      const pos = toSvg(0, gy);
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('class', 'grid-line');
      line.setAttribute('x1', 15);
      line.setAttribute('y1', pos.y);
      line.setAttribute('x2', 305);
      line.setAttribute('y2', pos.y);
      gridGroup.appendChild(line);

      if (gy !== 0 && gy % 2 === 0) {
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('class', 'tick-label');
        text.setAttribute('text-anchor', 'end');
        text.setAttribute('x', ORIGIN_X - 4);
        text.setAttribute('y', pos.y + 3);
        text.textContent = gy;
        axisGroup.appendChild(text);
      }
    }

    // Main Axes
    const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    xAxis.setAttribute('class', 'axis');
    xAxis.setAttribute('x1', 12);
    xAxis.setAttribute('y1', ORIGIN_Y);
    xAxis.setAttribute('x2', 308);
    xAxis.setAttribute('y2', ORIGIN_Y);
    xAxis.setAttribute('marker-end', 'url(#arrow)');
    xAxis.setAttribute('marker-start', 'url(#arrow)');
    axisGroup.appendChild(xAxis);

    const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    yAxis.setAttribute('class', 'axis');
    yAxis.setAttribute('x1', ORIGIN_X);
    yAxis.setAttribute('y1', 208);
    yAxis.setAttribute('x2', ORIGIN_X);
    yAxis.setAttribute('y2', 12);
    yAxis.setAttribute('marker-end', 'url(#arrow)');
    yAxis.setAttribute('marker-start', 'url(#arrow)');
    axisGroup.appendChild(yAxis);

    // Axis Labels
    const xLab = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    xLab.setAttribute('class', 'axis-label');
    xLab.setAttribute('x', 312);
    xLab.setAttribute('y', ORIGIN_Y + 4);
    xLab.textContent = 'x';
    axisGroup.appendChild(xLab);

    const yLab = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    yLab.setAttribute('class', 'axis-label');
    yLab.setAttribute('x', ORIGIN_X - 4);
    yLab.setAttribute('y', 8);
    yLab.textContent = 'y';
    axisGroup.appendChild(yLab);

    // Build Points
    const pointsGroup = document.getElementById('pointsGroup');
    const pointElements = [];

    pointsData.forEach((pt, i) => {
      const pos = toSvg(pt.x, pt.y);
      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      g.setAttribute('class', 'point-dot');
      g.style.opacity = '0';
      g.onclick = () => setStep(i);

      const cOuter = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      cOuter.setAttribute('class', 'outer');
      cOuter.setAttribute('cx', pos.x);
      cOuter.setAttribute('cy', pos.y);
      cOuter.setAttribute('r', 6);

      const cInner = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      cInner.setAttribute('class', 'inner');
      cInner.setAttribute('cx', pos.x);
      cInner.setAttribute('cy', pos.y);
      cInner.setAttribute('r', 2.5);

      const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      txt.setAttribute('class', 'point-label');
      txt.setAttribute('x', pos.x + 8);
      txt.setAttribute('y', pos.y - 8);
      txt.textContent = pt.label;

      g.appendChild(cOuter);
      g.appendChild(cInner);
      g.appendChild(txt);
      pointsGroup.appendChild(g);

      pointElements.push(g);
    });

    let currentStep = 0;
    let timer = null;

    const stepBtns = document.querySelectorAll('.step-btn');
    const calcBanner = document.getElementById('calcBanner');
    const guideX = document.getElementById('guideX');
    const guideY = document.getElementById('guideY');
    const linePlot = document.getElementById('linePlot');
    const playBtn = document.getElementById('playBtn');

    function setStep(step) {
      currentStep = step;

      // Update button highlights
      stepBtns.forEach((b, i) => b.classList.toggle('active', i === step));

      // Show points up to currentStep (or all if step is 4 'Line')
      const maxPoint = (step === 4) ? 3 : step;
      pointElements.forEach((el, i) => {
        if (i <= maxPoint) {
          el.style.opacity = '1';
          el.classList.toggle('active', i === step);
        } else {
          el.style.opacity = '0';
          el.classList.remove('active');
        }
      });

      // Line visibility
      if (step === 4) {
        linePlot.style.strokeDashoffset = '0';
        guideX.classList.remove('show');
        guideY.classList.remove('show');
        calcBanner.innerHTML = `<span class="highlight">Line Drawn:</span> Connects all coordinates seamlessly`;
      } else {
        linePlot.style.strokeDashoffset = '320';
        const curPt = pointsData[step];
        const pos = toSvg(curPt.x, curPt.y);

        // Guides
        guideX.setAttribute('x1', pos.x);
        guideX.setAttribute('y1', ORIGIN_Y);
        guideX.setAttribute('x2', pos.x);
        guideX.setAttribute('y2', pos.y);

        guideY.setAttribute('x1', ORIGIN_X);
        guideY.setAttribute('y1', pos.y);
        guideY.setAttribute('x2', pos.x);
        guideY.setAttribute('y2', pos.y);

        guideX.classList.add('show');
        guideY.classList.add('show');

        // Banner content
        let noteBadge = curPt.note === 'Checkpoint ✓' 
          ? `<span class="checkpoint-tag">${curPt.note}</span>` 
          : `<span style="color:#64748b; font-size:11px;">(${curPt.note})</span>`;

        calcBanner.innerHTML = `<span>${curPt.calc}</span> → <span class="highlight">${curPt.label}</span> ${noteBadge}`;
      }
    }

    stepBtns.forEach((btn, idx) => {
      btn.onclick = () => {
        stopAutoPlay();
        setStep(idx);
      };
    });

    document.getElementById('prevBtn').onclick = () => {
      stopAutoPlay();
      setStep((currentStep - 1 + 5) % 5);
    };

    document.getElementById('nextBtn').onclick = () => {
      stopAutoPlay();
      setStep((currentStep + 1) % 5);
    };

    function startAutoPlay() {
      playBtn.textContent = '⏸';
      timer = setInterval(() => {
        setStep((currentStep + 1) % 5);
      }, 3200);
    }

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

    playBtn.onclick = () => {
      if (timer) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    };

    // Initialize step 0
    setStep(0);
  </script>
</body>
</html>

Always calculate at least three points when graphing: two establish the line, and the third acts as a checkpoint to catch any arithmetic mistakes.

math

Graphing a Linear Equation: Plotting Points on Axes. Graph a linear equation by creating a table of values and plotting the points on coordinate axes.

Linear Equations & Graphs: Tables, Intercepts, and Plotting Lines

Complete a Table and Graph a Linear Function (Algebra 1, HSA-CED.A.2)

Drawing Straight-Line Graphs Using a Table of Values

Teaching linear graphing through tables of values grounds abstract algebraic expressions into concrete numerical input-output pairs before introducing shortcuts like the slope-intercept shortcut ($y = mx + b$). Emphasize calculating at least three points to cultivate self-monitoring habits: non-collinear points immediately signal substitution or plotting errors. When connecting to standard HSA.CED.A.2, prioritize transitioning from pure mathematical equations to contextual models where students must choose custom scales and label axes with correct units.

Graphing a Linear Equation: Plotting Points on Axes

Building a Table of Values

Plotting Points and Drawing the Line