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

If you open a folding fan until it lies completely flat on a table, the two arms form a straight line.

An **angle** measures the amount of turn between two lines, and we measure it in **degrees** ($^\circ$).

<!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>Angles on a Straight Line</title>
  <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: space-between;
      min-height: 100%;
      padding: 12px 16px;
      overflow: hidden;
    }

    .equation-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 22px;
      font-weight: 700;
      padding: 6px 16px;
      background: #f8f9fa;
      border-radius: 20px;
      border: 1px solid #e5e7eb;
      margin-top: 4px;
    }

    .angle-a-text { color: #0284c7; }
    .angle-b-text { color: #7c3aed; }
    .total-text { color: #059669; }

    .svg-container {
      width: 100%;
      max-width: 440px;
      aspect-ratio: 2 / 1.15;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      touch-action: none;
    }

    .handle {
      cursor: grab;
      transition: r 0.15s ease;
    }

    .handle:active {
      cursor: grabbing;
      r: 16;
    }

    .controls-panel {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-bottom: 4px;
    }

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

    input[type="range"] {
      flex: 1;
      accent-color: #0284c7;
      height: 6px;
      cursor: pointer;
    }

    .presets-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 5px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .btn:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
    }

    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>

  
  <div class="equation-bar">
    <span class="angle-a-text" id="eqA">60°</span>
    <span>+</span>
    <span class="angle-b-text" id="eqB">120°</span>
    <span>=</span>
    <span class="total-text">180°</span>
  </div>

  
  <div class="svg-container">
    <svg viewBox="-180 -140 360 170" id="diagram">
      
      <path d="M 140 0 A 140 140 0 0 0 -140 0" fill="none" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="4 4" />
      
      
      <path id="sectorA" fill="#0284c7" fill-opacity="0.15" stroke="#0284c7" stroke-width="2.5" />
      
      
      <path id="sectorB" fill="#7c3aed" fill-opacity="0.15" stroke="#7c3aed" stroke-width="2.5" />

      
      <line x1="-155" y1="0" x2="155" y2="0" stroke="#1e2945" stroke-width="4" stroke-linecap="round" />

      
      <line id="rayLine" x1="0" y1="0" x2="0" y2="-130" stroke="#1e2945" stroke-width="3.5" stroke-linecap="round" />

      
      <circle cx="0" cy="0" r="5.5" fill="#1e2945" />

      
      <circle id="handleHalo" cx="0" cy="-130" r="18" fill="#0284c7" fill-opacity="0.2" style="pointer-events: none;" />
      <circle id="handlePin" class="handle" cx="0" cy="-130" r="12" fill="#0284c7" stroke="#ffffff" stroke-width="2.5" />

      
      <text id="labelA" fill="#0369a1" font-size="16" font-weight="700" text-anchor="middle" dominant-baseline="central">60°</text>
      <text id="labelB" fill="#6d28d9" font-size="16" font-weight="700" text-anchor="middle" dominant-baseline="central">120°</text>
    </svg>
  </div>

  
  <div class="controls-panel">
    <div class="slider-row">
      <input type="range" id="angleSlider" min="15" max="165" value="60" aria-label="Angle divider">
    </div>
    <div class="presets-row">
      <button class="btn" data-angle="90">90° + 90°</button>
      <button class="btn active" data-angle="60">60° + 120°</button>
      <button class="btn" data-angle="45">45° + 135°</button>
      <button class="btn" data-angle="130">130° + 50°</button>
    </div>
  </div>

  <script>
    const RAY_LEN = 130;
    const ARC_A_R = 65;
    const ARC_B_R = 85;

    let currentAngle = 60;
    let isDragging = false;

    const svg = document.getElementById('diagram');
    const rayLine = document.getElementById('rayLine');
    const handlePin = document.getElementById('handlePin');
    const handleHalo = document.getElementById('handleHalo');
    const sectorA = document.getElementById('sectorA');
    const sectorB = document.getElementById('sectorB');
    const labelA = document.getElementById('labelA');
    const labelB = document.getElementById('labelB');
    const eqA = document.getElementById('eqA');
    const eqB = document.getElementById('eqB');
    const slider = document.getElementById('angleSlider');
    const presetBtns = document.querySelectorAll('.presets-row .btn');

    function polarToCartesian(radius, angleDeg) {
      const rad = (angleDeg * Math.PI) / 180;
      return {
        x: radius * Math.cos(rad),
        y: -radius * Math.sin(rad)
      };
    }

    function updateDiagram(deg) {
      currentAngle = Math.max(10, Math.min(170, Math.round(deg)));
      const degB = 180 - currentAngle;

      // Update Ray & Handle position
      const rayPos = polarToCartesian(RAY_LEN, currentAngle);
      rayLine.setAttribute('x2', rayPos.x);
      rayLine.setAttribute('y2', rayPos.y);
      handlePin.setAttribute('cx', rayPos.x);
      handlePin.setAttribute('cy', rayPos.y);
      handleHalo.setAttribute('cx', rayPos.x);
      handleHalo.setAttribute('cy', rayPos.y);

      // Arc A (0 to currentAngle)
      const aEnd = polarToCartesian(ARC_A_R, currentAngle);
      const largeArcA = currentAngle > 180 ? 1 : 0;
      const pathA = `M 0 0 L ${ARC_A_R} 0 A ${ARC_A_R} ${ARC_A_R} 0 ${largeArcA} 0 ${aEnd.x} ${aEnd.y} Z`;
      sectorA.setAttribute('d', pathA);

      // Arc B (currentAngle to 180)
      const bStart = polarToCartesian(ARC_B_R, currentAngle);
      const largeArcB = degB > 180 ? 1 : 0;
      const pathB = `M 0 0 L ${bStart.x} ${bStart.y} A ${ARC_B_R} ${ARC_B_R} 0 ${largeArcB} 0 ${-ARC_B_R} 0 Z`;
      sectorB.setAttribute('d', pathB);

      // Labels positioning
      const posA = polarToCartesian(ARC_A_R * 0.58, currentAngle / 2);
      labelA.setAttribute('x', posA.x);
      labelA.setAttribute('y', posA.y);
      labelA.textContent = `${currentAngle}°`;

      const posB = polarToCartesian(ARC_B_R * 0.62, currentAngle + degB / 2);
      labelB.setAttribute('x', posB.x);
      labelB.setAttribute('y', posB.y);
      labelB.textContent = `${degB}°`;

      // Update Equation Text
      eqA.textContent = `${currentAngle}°`;
      eqB.textContent = `${degB}°`;

      // Update Slider value
      slider.value = currentAngle;

      // Highlight active preset button if matching
      presetBtns.forEach(btn => {
        const btnAngle = parseInt(btn.dataset.angle, 10);
        btn.classList.toggle('active', btnAngle === currentAngle);
      });
    }

    function getAngleFromEvent(e) {
      const rect = svg.getBoundingClientRect();
      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
      
      const svgX = ((clientX - rect.left) / rect.width) * 360 - 180;
      const svgY = ((clientY - rect.top) / rect.height) * 170 - 140;

      let rad = Math.atan2(-svgY, svgX);
      let deg = (rad * 180) / Math.PI;
      if (deg < 0) {
        deg = svgX < 0 ? 180 : 0;
      }
      return deg;
    }

    function onPointerDown(e) {
      isDragging = true;
      const deg = getAngleFromEvent(e);
      updateDiagram(deg);
    }

    function onPointerMove(e) {
      if (!isDragging) return;
      e.preventDefault();
      const deg = getAngleFromEvent(e);
      updateDiagram(deg);
    }

    function onPointerUp() {
      isDragging = false;
    }

    // Pointer event listeners on SVG
    svg.addEventListener('pointerdown', onPointerDown);
    window.addEventListener('pointermove', onPointerMove, { passive: false });
    window.addEventListener('pointerup', onPointerUp);

    // Slider listener
    slider.addEventListener('input', (e) => {
      updateDiagram(parseFloat(e.target.value));
    });

    // Preset buttons listener
    presetBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        updateDiagram(parseInt(btn.dataset.angle, 10));
      });
    });

    // Initial render
    updateDiagram(60);
  </script>
</body>
</html>

A full spin all the way around is $360^\circ$, so a half-turn makes a straight line that equals **180 degrees** ($180^\circ$).

Over 2,300 years ago, the Greek mathematician Euclid proved that whenever a straight line is cut by another line, the angles created always add up to two right angles, or $180^\circ$.

How can we use this rule when one of the angles is missing?

Angles that sit right next to each other sharing a common side are called **adjacent angles**.

Imagine a straight line split into two angles: one angle is $120^\circ$, and the other angle is mystery angle $a$.

<!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>Angles on a Straight Line</title>
<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: space-between;
    min-height: 100%;
    padding: 12px 16px;
    user-select: none;
    -webkit-user-select: none;
  }
  .equation-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .tag-known {
    background: #e0f2fe;
    color: #0369a1;
    padding: 4px 10px;
    border-radius: 8px;
  }
  .tag-unknown {
    background: #fef3c7;
    color: #b45309;
    padding: 4px 10px;
    border-radius: 8px;
    transition: background 0.3s, color 0.3s;
  }
  .tag-total {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 8px;
  }
  .svg-wrap {
    width: 100%;
    max-width: 440px;
    height: auto;
    display: flex;
    justify-content: center;
  }
  svg {
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 400px;
    margin-top: 4px;
  }
  .slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  input[type="range"] {
    flex: 1;
    height: 6px;
    accent-color: #0284c7;
    cursor: pointer;
  }
  .btn-row {
    display: flex;
    gap: 8px;
  }
  .btn {
    border: none;
    background: #f1f5f9;
    color: #334155;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: background 0.2s, color 0.2s;
  }
  .btn.active {
    background: #0284c7;
    color: #ffffff;
  }
  .btn-toggle {
    background: #fef3c7;
    color: #b45309;
  }
</style>
</head>
<body>

  <div class="equation-bar">
    <span class="tag-known" id="eqKnown">120°</span>
    <span>+</span>
    <span class="tag-unknown" id="eqUnknown">a</span>
    <span>=</span>
    <span class="tag-total">180°</span>
  </div>

  <div class="svg-wrap">
    <svg viewBox="0 0 400 210" aria-hidden="true">
      <defs>
        <marker id="arr" 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="arr-blue" 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="#0284c7" />
        </marker>
      </defs>

      
      <path d="M 350 170 A 150 150 0 0 0 50 170" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4,4" />
      <text x="200" y="14" text-anchor="middle" font-size="14" font-weight="700" fill="#64748b">180°</text>

      
      <path id="wedgeKnown" fill="rgba(2, 132, 199, 0.15)" stroke="#0284c7" stroke-width="2" />
      <path id="wedgeUnknown" fill="rgba(245, 158, 11, 0.18)" stroke="#d97706" stroke-width="2" />

      
      <line x1="30" y1="170" x2="370" y2="170" stroke="#334155" stroke-width="3" marker-start="url(#arr)" marker-end="url(#arr)" />

      
      <line id="rayLine" x1="200" y1="170" x2="135" y2="57" stroke="#0284c7" stroke-width="3.5" marker-end="url(#arr-blue)" />

      
      <circle cx="200" cy="170" r="5" fill="#1e2945" />

      
      <text id="lblKnown" text-anchor="middle" font-size="16" font-weight="700" fill="#0369a1">120°</text>
      <text id="lblUnknown" text-anchor="middle" font-size="16" font-weight="700" fill="#b45309">a</text>
    </svg>
  </div>

  <div class="controls">
    <div class="slider-row">
      <input type="range" id="angleSlider" min="20" max="160" value="120" step="5" aria-label="Adjust angle">
    </div>
    <div class="btn-row">
      <button class="btn active" data-val="120">120°</button>
      <button class="btn" data-val="135">135°</button>
      <button class="btn" data-val="90">90°</button>
      <button class="btn" data-val="50">50°</button>
      <button class="btn btn-toggle" id="revealBtn">Show a</button>
    </div>
  </div>

<script>
  const slider = document.getElementById('angleSlider');
  const eqKnown = document.getElementById('eqKnown');
  const eqUnknown = document.getElementById('eqUnknown');
  const lblKnown = document.getElementById('lblKnown');
  const lblUnknown = document.getElementById('lblUnknown');
  const wedgeKnown = document.getElementById('wedgeKnown');
  const wedgeUnknown = document.getElementById('wedgeUnknown');
  const rayLine = document.getElementById('rayLine');
  const revealBtn = document.getElementById('revealBtn');
  const presetBtns = document.querySelectorAll('.btn[data-val]');

  const cx = 200, cy = 170, rayLen = 135, arcR = 68, lblR = 42;
  let revealed = false;

  function toRad(deg) {
    return (deg * Math.PI) / 180;
  }

  function update(angle) {
    const unknown = 180 - angle;

    // Ray endpoint
    const rayRad = toRad(angle);
    const rx = cx + rayLen * Math.cos(rayRad);
    const ry = cy - rayLen * Math.sin(rayRad);
    rayLine.setAttribute('x2', rx);
    rayLine.setAttribute('y2', ry);

    // Known Wedge Arc (0 to angle)
    const kx = cx + arcR * Math.cos(rayRad);
    const ky = cy - arcR * Math.sin(rayRad);
    const largeK = angle > 180 ? 1 : 0;
    wedgeKnown.setAttribute('d', `M ${cx} ${cy} L ${cx + arcR} ${cy} A ${arcR} ${arcR} 0 ${largeK} 0 ${kx} ${ky} Z`);

    // Unknown Wedge Arc (angle to 180)
    wedgeUnknown.setAttribute('d', `M ${cx} ${cy} L ${kx} ${ky} A ${arcR} ${arcR} 0 0 0 ${cx - arcR} ${cy} Z`);

    // Label positions at half-angles
    const kMid = toRad(angle / 2);
    lblKnown.setAttribute('x', cx + lblR * Math.cos(kMid));
    lblKnown.setAttribute('y', cy - lblR * Math.sin(kMid) + 5);

    const uMid = toRad(angle + unknown / 2);
    lblUnknown.setAttribute('x', cx + lblR * Math.cos(uMid));
    lblUnknown.setAttribute('y', cy - lblR * Math.sin(uMid) + 5);

    // Content update
    eqKnown.textContent = `${angle}°`;
    lblKnown.textContent = `${angle}°`;

    const unknownText = revealed ? `${unknown}°` : 'a';
    eqUnknown.textContent = unknownText;
    lblUnknown.textContent = unknownText;

    // Preset buttons highlight
    presetBtns.forEach(btn => {
      btn.classList.toggle('active', parseInt(btn.dataset.val) === angle);
    });
  }

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

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

  revealBtn.addEventListener('click', () => {
    revealed = !revealed;
    revealBtn.textContent = revealed ? 'Hide a' : 'Show a';
    revealBtn.style.background = revealed ? '#0284c7' : '#fef3c7';
    revealBtn.style.color = revealed ? '#ffffff' : '#b45309';
    update(parseInt(slider.value));
  });

  update(120);
</script>
</body>
</html>

Since both angles must combine to make $180^\circ$, we subtract the known angle from $180^\circ$: $$180^\circ - 120^\circ = 60^\circ$$

So the missing angle $a$ is exactly $60^\circ$.

What happens if a straight line gets sliced into three pieces instead of two?

The rule never changes: no matter how many slices you make, all angles on a straight line still add up to $180^\circ$.

Suppose a straight line is divided into three angles: $45^\circ$, $85^\circ$, and a mystery angle $b$.

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

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

    /* SVG Canvas */
    .svg-container {
      width: 100%;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    svg {
      width: 100%;
      height: auto;
      max-height: 220px;
      overflow: visible;
    }

    /* Math Expression Bar */
    .math-bar {
      width: 100%;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #e6e6e6;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      min-height: 48px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 700;
      transition: all 0.3s ease;
    }

    .pill-a { background: #e0f2fe; color: #0369a1; }
    .pill-b { background: #fef3c7; color: #b45309; }
    .pill-c { background: #f3e8ff; color: #7e22ce; }
    .pill-total { background: #dcfce7; color: #15803d; }

    /* Interactive Stepper Navigation */
    .controls {
      width: 100%;
      max-width: 440px;
      display: flex;
      gap: 6px;
      justify-content: center;
    }

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

    .step-btn:hover {
      background: #f3f4f6;
    }

    .step-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
    }

    /* Angle Arc Styles */
    .angle-sector {
      transition: fill-opacity 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease;
      cursor: pointer;
    }

    .angle-label {
      font-size: 14px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
      transition: fill 0.3s ease, font-size 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="main-area">
    
    <div class="svg-container">
      <svg viewBox="0 0 400 210">
        
        <path id="outerArc" d="M 60 170 A 140 140 0 0 1 340 170" fill="none" stroke="#e2e8f0" stroke-width="20" stroke-linecap="round" />
        <path id="outerArcProgress" d="M 60 170 A 140 140 0 0 1 340 170" fill="none" stroke="#22c55e" stroke-width="4" stroke-dasharray="440" stroke-dashoffset="440" style="transition: stroke-dashoffset 0.6s ease;" />

        
        
        
        <path id="sec1" class="angle-sector" d="M 200 170 L 320 170 A 120 120 0 0 0 284.85 85.15 Z" fill="#38bdf8" fill-opacity="0.35" stroke="#0284c7" stroke-width="2" />
        
        
        
        <path id="sec2" class="angle-sector" d="M 200 170 L 284.85 85.15 A 120 120 0 0 0 122.87 78.07 Z" fill="#fbbf24" fill-opacity="0.35" stroke="#d97706" stroke-width="2" />
        
        
        <path id="sec3" class="angle-sector" d="M 200 170 L 122.87 78.07 A 120 120 0 0 0 80 170 Z" fill="#c084fc" fill-opacity="0.35" stroke="#9333ea" stroke-width="2" />

        
        <line x1="30" y1="170" x2="370" y2="170" stroke="#1e2945" stroke-width="3.5" stroke-linecap="round" />
        
        
        <line x1="200" y1="170" x2="299" y2="71" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
        <line x1="200" y1="170" x2="110" y2="63" stroke="#9333ea" stroke-width="2.5" stroke-linecap="round" />
        
        
        <circle cx="200" cy="170" r="5" fill="#1e2945" />

        
        
        <text id="lbl1" class="angle-label" x="270" y="138" fill="#0369a1">45°</text>

        
        <text id="lbl2" class="angle-label" x="203" y="96" fill="#b45309">85°</text>

        
        <text id="lbl3" class="angle-label" x="132" y="138" fill="#7e22ce">b</text>

        
        <text id="totalLabel" x="200" y="22" font-size="13" font-weight="700" fill="#15803d" text-anchor="middle" opacity="0" style="transition: opacity 0.3s ease;">Total = 180°</text>
      </svg>
    </div>

    
    <div class="math-bar" id="mathDisplay">
      <span class="pill pill-c" id="m3">b</span>
      <span>+</span>
      <span class="pill pill-b" id="m2">85°</span>
      <span>+</span>
      <span class="pill pill-a" id="m1">45°</span>
      <span>=</span>
      <span class="pill pill-total">180°</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" id="btn1" onclick="setStep(1)">1. The Angles</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">2. Add Known</button>
    <button class="step-btn" id="btn3" onclick="setStep(3)">3. Find b</button>
  </div>

  <script>
    const sec1 = document.getElementById('sec1');
    const sec2 = document.getElementById('sec2');
    const sec3 = document.getElementById('sec3');
    const lbl3 = document.getElementById('lbl3');
    const totalLabel = document.getElementById('totalLabel');
    const outerArcProgress = document.getElementById('outerArcProgress');
    const mathDisplay = document.getElementById('mathDisplay');

    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const btn3 = document.getElementById('btn3');

    function setStep(step) {
      // Button states
      btn1.classList.toggle('active', step === 1);
      btn2.classList.toggle('active', step === 2);
      btn3.classList.toggle('active', step === 3);

      if (step === 1) {
        // Step 1: Base presentation
        sec1.setAttribute('fill-opacity', '0.35');
        sec2.setAttribute('fill-opacity', '0.35');
        sec3.setAttribute('fill-opacity', '0.35');
        sec3.setAttribute('fill', '#c084fc');
        sec3.setAttribute('stroke', '#9333ea');
        lbl3.textContent = 'b';
        lbl3.setAttribute('fill', '#7e22ce');
        totalLabel.style.opacity = '1';
        outerArcProgress.style.strokeDashoffset = '0';

        mathDisplay.innerHTML = `
          <span class="pill pill-c">b</span>
          <span>+</span>
          <span class="pill pill-b">85°</span>
          <span>+</span>
          <span class="pill pill-a">45°</span>
          <span>=</span>
          <span class="pill pill-total">180°</span>
        `;
      } else if (step === 2) {
        // Step 2: Combine known angles (45° + 85° = 130°)
        sec1.setAttribute('fill-opacity', '0.6');
        sec2.setAttribute('fill-opacity', '0.6');
        sec3.setAttribute('fill-opacity', '0.15');
        lbl3.textContent = 'b';
        lbl3.setAttribute('fill', '#9ca3af');
        totalLabel.style.opacity = '0.5';
        outerArcProgress.style.strokeDashoffset = '122';

        mathDisplay.innerHTML = `
          <span class="pill pill-a">45°</span>
          <span>+</span>
          <span class="pill pill-b">85°</span>
          <span>=</span>
          <span class="pill" style="background:#fed7aa; color:#c2410c;">130°</span>
        `;
      } else if (step === 3) {
        // Step 3: Solve for mystery angle (180° - 130° = 50°)
        sec1.setAttribute('fill-opacity', '0.2');
        sec2.setAttribute('fill-opacity', '0.2');
        sec3.setAttribute('fill-opacity', '0.7');
        sec3.setAttribute('fill', '#a855f7');
        sec3.setAttribute('stroke', '#7e22ce');
        lbl3.textContent = '50°';
        lbl3.setAttribute('fill', '#6b21a8');
        totalLabel.style.opacity = '1';
        outerArcProgress.style.strokeDashoffset = '0';

        mathDisplay.innerHTML = `
          <span class="pill pill-c">b</span>
          <span>=</span>
          <span class="pill pill-total">180°</span>
          <span>−</span>
          <span class="pill" style="background:#fed7aa; color:#c2410c;">130°</span>
          <span>=</span>
          <span class="pill pill-c" style="font-size:16px;">50°</span>
        `;
      }
    }

    // Initialize at Step 1
    setStep(1);

    // Allow tapping sectors directly to explore
    sec1.addEventListener('click', () => setStep(2));
    sec2.addEventListener('click', () => setStep(2));
    sec3.addEventListener('click', () => setStep(3));
  </script>
</body>
</html>

First, add up the angles you already know: $$45^\circ + 85^\circ = 130^\circ$$

Next, subtract that sum from $180^\circ$ to find $b$: $$180^\circ - 130^\circ = 50^\circ$$

Be careful not to subtract from $90^\circ$ by accident — $90^\circ$ is only for an L-shaped right angle, while a flat line is always $180^\circ$.

Whenever you spot a straight line with a slice through it, start with $180^\circ$ and subtract the pieces you know.

math

Angles on a Straight Line Add Up to 180 Degrees. Apply the rule that angles on a straight line sum to 180° to calculate missing adjacent angles.

Angles on a Straight Line and Around a Point

Know that Angles on a Straight Line Sum to 180 Degrees and Use This to Solve Problems

Angle Relationships: Straight Angles and Supplementary Angles

Pedagogical progression should start from physical manipulation and movement (e.g., half-turns, clock arms, protractor baselines) before moving to visual bar models, and finally abstract algebraic calculations. Emphasize geometric reasoning by requiring pupils to write out their justification rule ('angles on a straight line add up to 180 degrees') alongside their numerical working.

Angles on a Straight Line Add Up to 180 Degrees

The Straight Line Rule

Finding a Missing Angle