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 riding your bike down three different hills: a gentle slope, a steep cliff-like drop, and a flat sidewalk. In math, a single number controls that exact steepness.

That number is the parameter $m$ in the linear equation $y = mx + c$.

In the linear equation $y = mx + c$, the value $m$ is the **gradient** (also called slope). It measures how many units $y$ changes for every $1$ unit step along $x$, calculated as $\text{rise} / \text{run}$.

<!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>Effect of Changing Gradient</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      gap: 10px;
      min-height: 100%;
    }
    .graph-card {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      gap: 10px;
    }
    .header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0 4px;
    }
    .eq-display {
      font-size: 18px;
      font-weight: 700;
      color: #0284c7;
      letter-spacing: -0.2px;
    }
    .badge {
      font-size: 13px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      background: #f0f9ff;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 250px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #f1f5f9;
      display: block;
      touch-action: none;
    }
    .controls {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }
    .slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
    }
    .slider-label {
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      min-width: 50px;
    }
    input[type=range] {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #cbd5e1;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #0284c7;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3);
      border: 2px solid #ffffff;
      transition: transform 0.1s ease;
    }
    input[type=range]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #0284c7;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3);
      border: 2px solid #ffffff;
    }
    .preset-row {
      display: flex;
      justify-content: space-between;
      gap: 6px;
      width: 100%;
    }
    .preset-btn {
      flex: 1;
      padding: 6px 0;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }
    .preset-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="graph-card">
    <div class="header-row">
      <div class="eq-display" id="eqText">y = 1x</div>
      <div class="badge" id="steepnessLabel">m = 1</div>
    </div>

    <svg id="plotSvg" viewBox="-150 -150 300 300">
      
      <g id="grid" stroke="#e2e8f0" stroke-width="1"></g>

      
      <line x1="-140" y1="0" x2="140" y2="0" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arrow)" />
      <line x1="0" y1="140" x2="0" y2="-140" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arrow)" />

      
      <text x="135" y="-6" font-size="12" fill="#64748b" font-weight="bold" text-anchor="end">x</text>
      <text x="6" y="-132" font-size="12" fill="#64748b" font-weight="bold">y</text>

      
      <polygon id="triangleBg" fill="#0284c7" fill-opacity="0.08" />
      <line id="runLine" stroke="#059669" stroke-width="2.5" stroke-dasharray="3,3" />
      <line id="riseLine" stroke="#d97706" stroke-width="2.5" stroke-dasharray="3,3" />

      <text id="runLabel" fill="#059669" font-size="11" font-weight="700" text-anchor="middle"></text>
      <text id="riseLabel" fill="#d97706" font-size="11" font-weight="700" text-anchor="start"></text>

      
      <line id="mathLine" stroke="#0284c7" stroke-width="3" stroke-linecap="round" />

      
      <circle id="originDot" cx="0" cy="0" r="4.5" fill="#0284c7" stroke="#ffffff" stroke-width="1.5" />
      <circle id="stepDot" cx="30" cy="-30" r="4.5" fill="#0284c7" stroke="#ffffff" stroke-width="1.5" />
    </svg>

    <div class="controls">
      <div class="slider-row">
        <span class="slider-label" id="valLabel">m = 1</span>
        <input type="range" id="mSlider" min="-3" max="3" step="0.5" value="1">
      </div>

      <div class="preset-row">
        <button class="preset-btn" data-val="-2">-2</button>
        <button class="preset-btn" data-val="-1">-1</button>
        <button class="preset-btn" data-val="0">0</button>
        <button class="preset-btn active" data-val="1">1</button>
        <button class="preset-btn" data-val="2">2</button>
        <button class="preset-btn" data-val="3">3</button>
      </div>
    </div>
  </div>

  <script>
    const scale = 30; // 30px = 1 math unit
    const gridGroup = document.getElementById('grid');
    const mathLine = document.getElementById('mathLine');
    const runLine = document.getElementById('runLine');
    const riseLine = document.getElementById('riseLine');
    const triangleBg = document.getElementById('triangleBg');
    const runLabel = document.getElementById('runLabel');
    const riseLabel = document.getElementById('riseLabel');
    const stepDot = document.getElementById('stepDot');
    const eqText = document.getElementById('eqText');
    const steepnessLabel = document.getElementById('steepnessLabel');
    const valLabel = document.getElementById('valLabel');
    const mSlider = document.getElementById('mSlider');
    const presetBtns = document.querySelectorAll('.preset-btn');

    // Build Grid lines
    for (let i = -4; i <= 4; i++) {
      if (i === 0) continue;
      const pos = i * scale;
      // vertical
      const vLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
      vLine.setAttribute("x1", pos);
      vLine.setAttribute("y1", -135);
      vLine.setAttribute("x2", pos);
      vLine.setAttribute("y2", 135);
      gridGroup.appendChild(vLine);

      // horizontal
      const hLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
      hLine.setAttribute("x1", -135);
      hLine.setAttribute("y1", pos);
      hLine.setAttribute("x2", 135);
      hLine.setAttribute("y2", pos);
      gridGroup.appendChild(hLine);
    }

    function updatePlot(m) {
      // Calculate Line end-points across box [-135, 135]
      let x1 = -4.5, y1 = -4.5 * m;
      let x2 = 4.5, y2 = 4.5 * m;

      // Bound within view
      const maxCoord = 4.4;
      if (Math.abs(y1) > maxCoord) {
        y1 = Math.sign(y1) * maxCoord;
        x1 = y1 / m;
      }
      if (Math.abs(y2) > maxCoord) {
        y2 = Math.sign(y2) * maxCoord;
        x2 = y2 / m;
      }

      // Convert to SVG coords (SVG y is inverted)
      mathLine.setAttribute("x1", x1 * scale);
      mathLine.setAttribute("y1", -y1 * scale);
      mathLine.setAttribute("x2", x2 * scale);
      mathLine.setAttribute("y2", -y2 * scale);

      // Reference step triangle from x = 0 to x = 1 (or run = 1)
      const runUnits = 1;
      const riseUnits = m;

      const p0 = { x: 0, y: 0 };
      const pRun = { x: runUnits * scale, y: 0 };
      const pRise = { x: runUnits * scale, y: -riseUnits * scale };

      // Update Rise / Run triangle
      triangleBg.setAttribute("points", `${p0.x},${p0.y} ${pRun.x},${pRun.y} ${pRise.x},${pRise.y}`);
      
      runLine.setAttribute("x1", p0.x);
      runLine.setAttribute("y1", p0.y);
      runLine.setAttribute("x2", pRun.x);
      runLine.setAttribute("y2", pRun.y);

      riseLine.setAttribute("x1", pRun.x);
      riseLine.setAttribute("y1", pRun.y);
      riseLine.setAttribute("x2", pRise.x);
      riseLine.setAttribute("y2", pRise.y);

      // Labels
      runLabel.setAttribute("x", pRun.x / 2);
      runLabel.setAttribute("y", riseUnits >= 0 ? 14 : -6);
      runLabel.textContent = "run 1";

      riseLabel.setAttribute("x", pRun.x + 6);
      riseLabel.setAttribute("y", - (riseUnits * scale) / 2 + 4);
      riseLabel.textContent = `rise ${m >= 0 ? '+' : ''}${m}`;

      // Step Dot
      stepDot.setAttribute("cx", pRise.x);
      stepDot.setAttribute("cy", pRise.y);

      // Text updates
      const mFormat = m === 0 ? '0' : m === 1 ? '' : m === -1 ? '-' : `${m}`;
      eqText.innerHTML = m === 0 ? 'y = 0' : `y = <b>${mFormat}</b>x`;
      steepnessLabel.textContent = `m = ${m}`;
      valLabel.textContent = `m = ${m}`;

      // Active preset highlight
      presetBtns.forEach(btn => {
        btn.classList.toggle('active', parseFloat(btn.dataset.val) === m);
      });
    }

    // Slider input listener
    mSlider.addEventListener('input', (e) => {
      const val = parseFloat(e.target.value);
      updatePlot(val);
    });

    // Preset buttons listener
    presetBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const val = parseFloat(btn.dataset.val);
        mSlider.value = val;
        updatePlot(val);
      });
    });

    // Initialize
    updatePlot(1);
  </script>
</body>
</html>

How does changing this value of $m$ change how the line looks? Let's start by looking at positive values.

When $m > 0$, the line always slants **upward** from left to right.

As $m$ gets larger, the line becomes **steeper** because each step to the right forces a much larger climb upward.

<!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: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

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

    .header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 4px;
    }

    .eq-badge {
      font-size: 19px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
    }

    .m-highlight {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 6px;
      border-radius: 6px;
    }

    .metric-pills {
      display: flex;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
    }

    .pill {
      padding: 3px 8px;
      border-radius: 12px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
    }

    .pill-run { color: #2563eb; }
    .pill-rise { color: #059669; }

    .graph-card {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      width: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

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

    .controls {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0 2px;
    }

    .slider-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    input[type="range"] {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #e2e8f0;
      outline: none;
      -webkit-appearance: none;
      cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #0284c7;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #0284c7;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }

    .presets {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }

    .btn-preset {
      padding: 6px 0;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }

    .btn-preset.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
  </style>
</head>
<body>
  <div class="app">
    <div class="header-row">
      <div class="eq-badge">y = <span id="mVal" class="m-highlight">2</span>x</div>
      <div class="metric-pills">
        <div class="pill pill-run">Run: 1</div>
        <div class="pill pill-rise" id="riseText">Rise: 2</div>
      </div>
    </div>

    <div class="graph-card">
      <svg id="gridSvg" viewBox="0 0 320 280">
        <defs>
          <clipPath id="graphClip">
            <rect x="35" y="15" width="270" height="235" />
          </clipPath>
        </defs>

        
        <g id="gridLines" stroke="#f1f5f9" stroke-width="1.2"></g>

        
        <g stroke="#94a3b8" stroke-width="1.5">
          
          <line x1="35" y1="230" x2="305" y2="230" />
          
          <line x1="50" y1="15" x2="50" y2="245" />
        </g>

        
        <g font-size="11" fill="#64748b" font-weight="500" text-anchor="middle">
          
          <text x="50" y="245">0</text>
          <text x="100" y="245">1</text>
          <text x="150" y="245">2</text>
          <text x="200" y="245">3</text>
          <text x="250" y="245">4</text>
          <text x="300" y="245">5</text>
          
          <text x="40" y="184" text-anchor="end">1</text>
          <text x="40" y="134" text-anchor="end">2</text>
          <text x="40" y="84" text-anchor="end">3</text>
          <text x="40" y="34" text-anchor="end">4</text>
        </g>

        
        <g clip-path="url(#graphClip)">
          
          <polygon id="triPoly" fill="#0284c7" fill-opacity="0.08" />

          
          
          <line id="runLine" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="4,3" />
          
          <line id="riseLine" stroke="#059669" stroke-width="2.5" stroke-dasharray="4,3" />

          
          <line id="mathLine" stroke="#0f172a" stroke-width="3" stroke-linecap="round" />

          
          <circle id="p0" r="4.5" fill="#2563eb" />
          <circle id="p1" r="4.5" fill="#059669" />
        </g>
      </svg>
    </div>

    <div class="controls">
      <div class="slider-row">
        <input type="range" id="mSlider" min="0.25" max="3.5" step="0.25" value="2">
      </div>
      <div class="presets">
        <button class="btn-preset" data-m="0.5">m = 0.5</button>
        <button class="btn-preset" data-m="1">m = 1</button>
        <button class="btn-preset active" data-m="2">m = 2</button>
        <button class="btn-preset" data-m="3">m = 3</button>
      </div>
    </div>
  </div>

  <script>
    // Coordinate mapping: origin (0,0) is at SVG (50, 230). Unit size = 50px.
    const OX = 50;
    const OY = 230;
    const UNIT = 50;

    function toSvgX(x) { return OX + x * UNIT; }
    function toSvgY(y) { return OY - y * UNIT; }

    // Generate grid lines
    const gridG = document.getElementById('gridLines');
    for (let x = 1; x <= 5; x++) {
      const sx = toSvgX(x);
      gridG.innerHTML += `<line x1="${sx}" y1="15" x2="${sx}" y2="230"/>`;
    }
    for (let y = 1; y <= 4; y++) {
      const sy = toSvgY(y);
      gridG.innerHTML += `<line x1="50" y1="${sy}" x2="305" y2="${sy}"/>`;
    }

    const slider = document.getElementById('mSlider');
    const mVal = document.getElementById('mVal');
    const riseText = document.getElementById('riseText');
    const mathLine = document.getElementById('mathLine');
    const runLine = document.getElementById('runLine');
    const riseLine = document.getElementById('riseLine');
    const triPoly = document.getElementById('triPoly');
    const p0 = document.getElementById('p0');
    const p1 = document.getElementById('p1');
    const presetBtns = document.querySelectorAll('.btn-preset');

    function update(m) {
      m = parseFloat(m);
      mVal.textContent = m % 1 === 0 ? m : m.toFixed(2).replace(/\.?0+$/, '');
      riseText.textContent = `Rise: ${mVal.textContent}`;

      // Line endpoints across plot range (x from 0 to 5)
      const xEnd = 5;
      const yEnd = m * xEnd;
      mathLine.setAttribute('x1', toSvgX(0));
      mathLine.setAttribute('y1', toSvgY(0));
      mathLine.setAttribute('x2', toSvgX(xEnd));
      mathLine.setAttribute('y2', toSvgY(yEnd));

      // Slope triangle from x=1 to x=2
      const x1 = 1, y1 = m * 1;
      const x2 = 2, y2 = m * 2;

      const sx1 = toSvgX(x1), sy1 = toSvgY(y1);
      const sx2 = toSvgX(x2), sy2 = toSvgY(y2);
      const cornerX = sx2, cornerY = sy1;

      // Run line: (1, y1) -> (2, y1)
      runLine.setAttribute('x1', sx1);
      runLine.setAttribute('y1', sy1);
      runLine.setAttribute('x2', cornerX);
      runLine.setAttribute('y2', cornerY);

      // Rise line: (2, y1) -> (2, y2)
      riseLine.setAttribute('x1', cornerX);
      riseLine.setAttribute('y1', cornerY);
      riseLine.setAttribute('x2', sx2);
      riseLine.setAttribute('y2', sy2);

      // Triangle fill
      triPoly.setAttribute('points', `${sx1},${sy1} ${cornerX},${cornerY} ${sx2},${sy2}`);

      // Points
      p0.setAttribute('cx', sx1);
      p0.setAttribute('cy', sy1);
      p1.setAttribute('cx', sx2);
      p1.setAttribute('cy', sy2);

      // Update preset buttons state
      presetBtns.forEach(btn => {
        if (parseFloat(btn.dataset.m) === m) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    slider.addEventListener('input', (e) => {
      update(e.target.value);
    });

    presetBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const val = btn.dataset.m;
        slider.value = val;
        update(val);
      });
    });

    // Initialize
    update(2);
  </script>
</body>
</html>

What happens if we decrease $m$ all the way down to zero?

When $m = 0$, the $x$-term disappears because $0 \times x = 0$, simplifying the equation to $y = c$.

Because there is zero rise as you move across, the graph is a completely flat **horizontal line**.

What happens when $m$ drops below zero into negative numbers?

When $m < 0$, the line slants **downward** from left to right as $x$ increases.

The negative sign tells you the **direction** (downhill), while the number's magnitude tells you how steep that descent is.

<!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>Effect of Changing Gradient</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .metrics-bar {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }
    .metric-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 6px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 48px;
    }
    .metric-label {
      font-size: 11px;
      color: #6b7280;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 0.5px;
    }
    .metric-val {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }
    .eq-val {
      color: #0284c7;
    }
    .graph-container {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 240px;
      overflow: visible;
    }
    .controls {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    input[type=range] {
      flex: 1;
      accent-color: #0284c7;
      cursor: pointer;
      height: 6px;
    }
    .presets {
      display: flex;
      justify-content: space-between;
      gap: 4px;
    }
    .preset-btn {
      flex: 1;
      padding: 5px 0;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #e6e6e6;
      border-radius: 6px;
      background: #f8f9fa;
      color: #1e2945;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      text-align: center;
    }
    .preset-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>

<div class="diagram-wrap">
  <div class="metrics-bar">
    <div class="metric-card">
      <span class="metric-label">Equation</span>
      <span class="metric-val eq-val" id="eqText">y = 1x</span>
    </div>
    <div class="metric-card">
      <span class="metric-label">Direction</span>
      <span class="metric-val" id="dirText">Uphill ↗</span>
    </div>
    <div class="metric-card">
      <span class="metric-label">Steepness |m|</span>
      <span class="metric-val" id="steepText">1</span>
    </div>
  </div>

  <div class="graph-container">
    <svg id="graph" viewBox="-160 -120 320 240">
      <defs>
        <marker id="arrow-axis" 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="#9ca3af"/>
        </marker>
        <marker id="arrow-line-pos" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 2 L 7 5 L 0 8 z" fill="#0284c7"/>
        </marker>
        <marker id="arrow-line-neg" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 2 L 7 5 L 0 8 z" fill="#d97706"/>
        </marker>
      </defs>

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

      
      <line x1="-150" y1="0" x2="150" y2="0" stroke="#9ca3af" stroke-width="1.5" marker-end="url(#arrow-axis)"/>
      <line x1="0" y1="110" x2="0" y2="-110" stroke="#9ca3af" stroke-width="1.5" marker-end="url(#arrow-axis)"/>
      
      
      <text x="142" y="14" font-size="11" fill="#9ca3af" font-weight="bold">x</text>
      <text x="8" y="-100" font-size="11" fill="#9ca3af" font-weight="bold">y</text>

      
      <path id="slopeTriangle" d="" fill="rgba(2, 132, 199, 0.08)" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3"/>
      <text id="runLabel" font-size="10" fill="#64748b" text-anchor="middle"></text>
      <text id="riseLabel" font-size="10" fill="#64748b" text-anchor="middle"></text>

      
      <line id="graphLine" x1="0" y1="0" x2="0" y2="0" stroke="#0284c7" stroke-width="3" stroke-linecap="round"/>

      
      <circle cx="0" cy="0" r="3.5" fill="#1e2945"/>
    </svg>
  </div>

  <div class="controls">
    <div class="slider-row">
      <input type="range" id="mSlider" min="-3" max="3" step="0.5" value="1">
    </div>
    <div class="presets">
      <button class="preset-btn" data-val="-3">-3</button>
      <button class="preset-btn" data-val="-1">-1</button>
      <button class="preset-btn" data-val="-0.5">-0.5</button>
      <button class="preset-btn" data-val="0">0</button>
      <button class="preset-btn" data-val="0.5">+0.5</button>
      <button class="preset-btn active" data-val="1">+1</button>
      <button class="preset-btn" data-val="3">+3</button>
    </div>
  </div>
</div>

<script>
  const SCALE = 26; // pixels per unit
  const gridGroup = document.getElementById('grid');
  const graphLine = document.getElementById('graphLine');
  const slopeTriangle = document.getElementById('slopeTriangle');
  const runLabel = document.getElementById('runLabel');
  const riseLabel = document.getElementById('riseLabel');
  const eqText = document.getElementById('eqText');
  const dirText = document.getElementById('dirText');
  const steepText = document.getElementById('steepText');
  const slider = document.getElementById('mSlider');
  const buttons = document.querySelectorAll('.preset-btn');

  // Build grid
  for (let i = -5; i <= 5; i++) {
    if (i === 0) continue;
    const p = i * SCALE;
    // vertical
    const v = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    v.setAttribute('x1', p); v.setAttribute('y1', -110);
    v.setAttribute('x2', p); v.setAttribute('y2', 110);
    gridGroup.appendChild(v);
    // horizontal
    const h = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    h.setAttribute('x1', -140); h.setAttribute('y1', p);
    h.setAttribute('x2', 140); h.setAttribute('y2', p);
    gridGroup.appendChild(h);
  }

  function updateGraph(m) {
    // Endpoints within bounding box
    const xMax = 5.2;
    const yMax = 4.0;
    
    let x1 = -xMax, x2 = xMax;
    let y1 = m * x1, y2 = m * x2;

    if (Math.abs(y1) > yMax) {
      y1 = Math.sign(y1) * yMax;
      x1 = y1 / m;
    }
    if (Math.abs(y2) > yMax) {
      y2 = Math.sign(y2) * yMax;
      x2 = y2 / m;
    }

    // Convert to SVG coords (SVG y is inverted)
    const sx1 = x1 * SCALE;
    const sy1 = -y1 * SCALE;
    const sx2 = x2 * SCALE;
    const sy2 = -y2 * SCALE;

    graphLine.setAttribute('x1', sx1);
    graphLine.setAttribute('y1', sy1);
    graphLine.setAttribute('x2', sx2);
    graphLine.setAttribute('y2', sy2);

    const color = m > 0 ? '#0284c7' : (m < 0 ? '#d97706' : '#64748b');
    graphLine.setAttribute('stroke', color);

    // Slope Triangle for run = 1
    if (m === 0) {
      slopeTriangle.setAttribute('d', '');
      runLabel.textContent = '';
      riseLabel.textContent = '';
    } else {
      const runUnits = 1.5;
      const tX0 = 0, tY0 = 0;
      const tX1 = runUnits * SCALE, tY1 = 0;
      const tX2 = runUnits * SCALE, tY2 = -(m * runUnits) * SCALE;
      
      slopeTriangle.setAttribute('d', `M ${tX0} ${tY0} L ${tX1} ${tY1} L ${tX2} ${tY2} Z`);
      slopeTriangle.setAttribute('fill', m > 0 ? 'rgba(2, 132, 199, 0.08)' : 'rgba(217, 119, 6, 0.08)');
      
      runLabel.setAttribute('x', tX1 / 2);
      runLabel.setAttribute('y', m > 0 ? 13 : -6);
      runLabel.textContent = 'run';

      riseLabel.setAttribute('x', tX1 + (m > 0 ? 12 : 12));
      riseLabel.setAttribute('y', tY2 / 2 + 4);
      riseLabel.textContent = m > 0 ? '+rise' : '-fall';
    }

    // Update text readouts
    let mStr = m === 1 ? '' : (m === -1 ? '-' : `${m}`);
    if (m === 0) {
      eqText.textContent = 'y = 0';
      dirText.textContent = 'Flat ➔';
      dirText.style.color = '#64748b';
    } else if (m > 0) {
      eqText.textContent = `y = ${mStr}x`;
      dirText.textContent = 'Uphill ↗';
      dirText.style.color = '#0284c7';
    } else {
      eqText.textContent = `y = ${mStr}x`;
      dirText.textContent = 'Downhill ↘';
      dirText.style.color = '#d97706';
    }
    eqText.style.color = color;
    steepText.textContent = Math.abs(m);

    // Update preset buttons
    buttons.forEach(btn => {
      btn.classList.toggle('active', parseFloat(btn.dataset.val) === m);
    });
  }

  slider.addEventListener('input', (e) => {
    updateGraph(parseFloat(e.target.value));
  });

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      const val = parseFloat(btn.dataset.val);
      slider.value = val;
      updateGraph(val);
    });
  });

  updateGraph(1);
</script>
</body>
</html>

Why do negative numbers often trick students when comparing steepness?

A common mistake is thinking that $m = -4$ is "flatter" than $m = -1$ because $-4$ is smaller than $-1$ on a number line.

In reality, $y = -4x$ is much **steeper** than $y = -1x$ because steepness depends strictly on the absolute value $|m|$, regardless of the plus or minus sign.

Whenever you look at a linear equation, check the sign of $m$ first for direction (uphill, flat, or downhill), then check the size of $|m|$ for steepness.

math

Effect of Changing the Gradient in y = mx + c. Describe how changing the value of m affects the steepness and direction of a linear graph.

Straight Line Equation: Exploring $y = mx + c$ with Parameter Sliders

Intro to Slope-Intercept Form ($y = mx + b$)

Gradients and Straight Line Graphs ($y = mx + c$)

In alignment with AC9M9A06, teaching parameter variation is most effective when students actively manipulate digital sliders (in Desmos or GeoGebra) to discover patterns before formalising algebra rules. Emphasise the separation between sign (which dictates whether the graph goes 'uphill' or 'downhill' from left to right) and absolute value magnitude (which dictates how steep or shallow the incline is). Having students observe the graph pivoting about $(0, c)$ reinforces the structural roles of $m$ and $c$ in the linear model.

Effect of Changing the Gradient in y = mx + c

The Role of m

Positive Gradients: Going Uphill

Zero Gradient: Perfectly Flat