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

Have you ever looked at a train track and wondered why the two rails never bump into each other?

They stay the exact same distance apart all the way down the track.

**Parallel lines** are straight lines that go in the exact same direction and never touch, no matter how long you draw them.

In math drawings, we draw matching **arrow marks** right on the lines to show that they are parallel.

<!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>Parallel Lines and Transversals</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }
    .toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 480px;
    }
    .btn {
      appearance: none;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #1e2945;
      padding: 8px 14px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 4px rgba(37,99,235,0.25);
    }
    .canvas-container {
      width: 100%;
      max-width: 500px;
      height: 300px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .slider-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 360px;
      font-size: 14px;
      color: #4b5563;
      font-weight: 500;
    }
    input[type="range"] {
      flex: 1;
      accent-color: #2563eb;
      cursor: pointer;
    }
    .legend {
      display: flex;
      gap: 16px;
      font-size: 13px;
      font-weight: 600;
      justify-content: center;
      flex-wrap: wrap;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }
  </style>
</head>
<body>

  
  <div class="toolbar">
    <button id="btn-parallel" class="btn active">
      <span>⇄</span> Parallel Lines
    </button>
    <button id="btn-transversal" class="btn">
      <span>⤢</span> Add Transversal
    </button>
    <button id="btn-angles" class="btn">
      <span>∠</span> Equal Angles
    </button>
  </div>

  
  <div class="canvas-container">
    <svg id="geo-svg" viewBox="0 0 500 300">
      <defs>
        
        <marker id="arrow-end" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#1e2945"/>
        </marker>
        <marker id="trans-arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#dc2626"/>
        </marker>
      </defs>

      
      <line x1="0" y1="90" x2="500" y2="90" stroke="#f1f5f9" stroke-width="1"/>
      <line x1="0" y1="210" x2="500" y2="210" stroke="#f1f5f9" stroke-width="1"/>

      
      <g id="dist-group" opacity="0" style="transition: opacity 0.3s ease;">
        <line x1="100" y1="90" x2="100" y2="210" stroke="#94a3b8" stroke-dasharray="4 4" stroke-width="2"/>
        <line x1="400" y1="90" x2="400" y2="210" stroke="#94a3b8" stroke-dasharray="4 4" stroke-width="2"/>
        <text x="108" y="155" fill="#64748b" font-size="13" font-weight="600">Equal distance</text>
        <text x="408" y="155" fill="#64748b" font-size="13" font-weight="600">Equal distance</text>
      </g>

      
      <g id="angles-group" opacity="0" style="transition: opacity 0.3s ease;"></g>

      
      <line x1="30" y1="90" x2="470" y2="90" stroke="#1e2945" stroke-width="3" marker-start="url(#arrow-end)" marker-end="url(#arrow-end)" />
      
      <path d="M 235 83 L 250 90 L 235 97" fill="none" stroke="#2563eb" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
      <text x="460" y="80" fill="#1e2945" font-size="14" font-weight="700">Line a</text>

      
      <line x1="30" y1="210" x2="470" y2="210" stroke="#1e2945" stroke-width="3" marker-start="url(#arrow-end)" marker-end="url(#arrow-end)" />
      
      <path d="M 235 203 L 250 210 L 235 217" fill="none" stroke="#2563eb" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
      <text x="460" y="235" fill="#1e2945" font-size="14" font-weight="700">Line b</text>

      
      <g id="transversal-group" opacity="0" style="transition: opacity 0.3s ease;">
        <line id="transversal-line" x1="160" y1="20" x2="340" y2="280" stroke="#dc2626" stroke-width="3.5" marker-start="url(#trans-arrow)" marker-end="url(#trans-arrow)"/>
        
        <circle id="dot1" cx="208.5" cy="90" r="5" fill="#dc2626"/>
        <circle id="dot2" cx="291.5" cy="210" r="5" fill="#dc2626"/>
        <text id="trans-label" x="145" y="35" fill="#dc2626" font-size="14" font-weight="700">Transversal t</text>
      </g>
    </svg>
  </div>

  
  <div class="slider-row" id="slider-box" style="opacity: 0.3; pointer-events: none; transition: opacity 0.2s ease;">
    <span>Tilt Line:</span>
    <input type="range" id="angle-slider" min="40" max="80" value="55">
  </div>

  
  <div class="legend">
    <div class="legend-item">
      <span style="color:#2563eb; font-size:16px;">▶</span>
      <span>Matching Arrows ($a \parallel b$)</span>
    </div>
    <div class="legend-item" id="leg-trans" style="opacity: 0.3; transition: opacity 0.3s;">
      <span style="color:#dc2626; font-size:16px;">━</span>
      <span>Transversal ($t$)</span>
    </div>
  </div>

  <script>
    const btnParallel = document.getElementById('btn-parallel');
    const btnTransversal = document.getElementById('btn-transversal');
    const btnAngles = document.getElementById('btn-angles');

    const distGroup = document.getElementById('dist-group');
    const transGroup = document.getElementById('transversal-group');
    const anglesGroup = document.getElementById('angles-group');
    const sliderBox = document.getElementById('slider-box');
    const angleSlider = document.getElementById('angle-slider');
    const legTrans = document.getElementById('leg-trans');

    const transLine = document.getElementById('transversal-line');
    const dot1 = document.getElementById('dot1');
    const dot2 = document.getElementById('dot2');
    const transLabel = document.getElementById('trans-label');

    let currentMode = 'parallel'; // 'parallel' | 'transversal' | 'angles'

    const y1 = 90;
    const y2 = 210;
    const centerY = (y1 + y2) / 2; // 150
    const centerX = 250;

    function renderTransversal() {
      const deg = parseFloat(angleSlider.value);
      const rad = (deg * Math.PI) / 180;
      
      // Slope dy/dx where dy = 120
      const dx = (y2 - y1) / Math.tan(rad);
      const ix1 = centerX - dx / 2; // upper intersection
      const ix2 = centerX + dx / 2; // lower intersection

      // Extended ends
      const totalH = 260;
      const xTop = centerX - (totalH / 2) / Math.tan(rad);
      const xBot = centerX + (totalH / 2) / Math.tan(rad);

      transLine.setAttribute('x1', xTop);
      transLine.setAttribute('y1', 20);
      transLine.setAttribute('x2', xBot);
      transLine.setAttribute('y2', 280);

      dot1.setAttribute('cx', ix1);
      dot1.setAttribute('cy', y1);
      dot2.setAttribute('cx', ix2);
      dot2.setAttribute('cy', y2);

      transLabel.setAttribute('x', Math.max(10, xTop - 40));
      transLabel.setAttribute('y', 35);

      // Render 8 angles
      renderAngles(ix1, y1, ix2, y2, rad);
    }

    function createArcPath(cx, cy, r, startAngle, endAngle) {
      const x1 = cx + r * Math.cos(startAngle);
      const y1 = cy + r * Math.sin(startAngle);
      const x2 = cx + r * Math.cos(endAngle);
      const y2 = cy + r * Math.sin(endAngle);
      return `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 0 1 ${x2} ${y2} Z`;
    }

    function renderAngles(cx1, cy1, cx2, cy2, rad) {
      anglesGroup.innerHTML = '';
      const r = 24;
      const angleDeg = rad; // acute angle with rightward horizontal

      [ { cx: cx1, cy: cy1 }, { cx: cx2, cy: cy2 } ].forEach(pt => {
        // Acute angle 1: Bottom-Right [0 to rad]
        const p1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        p1.setAttribute('d', createArcPath(pt.cx, pt.cy, r, 0, rad));
        p1.setAttribute('fill', 'rgba(37, 99, 235, 0.3)');
        p1.setAttribute('stroke', '#2563eb');
        p1.setAttribute('stroke-width', '1.5');
        anglesGroup.appendChild(p1);

        // Acute angle 2: Top-Left [Math.PI to Math.PI + rad]
        const p2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        p2.setAttribute('d', createArcPath(pt.cx, pt.cy, r, Math.PI, Math.PI + rad));
        p2.setAttribute('fill', 'rgba(37, 99, 235, 0.3)');
        p2.setAttribute('stroke', '#2563eb');
        p2.setAttribute('stroke-width', '1.5');
        anglesGroup.appendChild(p2);

        // Obtuse angle 1: Bottom-Left [rad to Math.PI]
        const p3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        p3.setAttribute('d', createArcPath(pt.cx, pt.cy, r, rad, Math.PI));
        p3.setAttribute('fill', 'rgba(234, 88, 12, 0.25)');
        p3.setAttribute('stroke', '#ea580c');
        p3.setAttribute('stroke-width', '1.5');
        anglesGroup.appendChild(p3);

        // Obtuse angle 2: Top-Right [Math.PI + rad to 2*Math.PI]
        const p4 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        p4.setAttribute('d', createArcPath(pt.cx, pt.cy, r, Math.PI + rad, 2 * Math.PI));
        p4.setAttribute('fill', 'rgba(234, 88, 12, 0.25)');
        p4.setAttribute('stroke', '#ea580c');
        p4.setAttribute('stroke-width', '1.5');
        anglesGroup.appendChild(p4);
      });
    }

    function setMode(mode) {
      currentMode = mode;
      btnParallel.classList.toggle('active', mode === 'parallel');
      btnTransversal.classList.toggle('active', mode === 'transversal');
      btnAngles.classList.toggle('active', mode === 'angles');

      if (mode === 'parallel') {
        distGroup.style.opacity = '1';
        transGroup.style.opacity = '0';
        anglesGroup.style.opacity = '0';
        sliderBox.style.opacity = '0.3';
        sliderBox.style.pointerEvents = 'none';
        legTrans.style.opacity = '0.3';
      } else if (mode === 'transversal') {
        distGroup.style.opacity = '0';
        transGroup.style.opacity = '1';
        anglesGroup.style.opacity = '0';
        sliderBox.style.opacity = '1';
        sliderBox.style.pointerEvents = 'auto';
        legTrans.style.opacity = '1';
      } else if (mode === 'angles') {
        distGroup.style.opacity = '0';
        transGroup.style.opacity = '1';
        anglesGroup.style.opacity = '1';
        sliderBox.style.opacity = '1';
        sliderBox.style.pointerEvents = 'auto';
        legTrans.style.opacity = '1';
      }
    }

    btnParallel.addEventListener('click', () => setMode('parallel'));
    btnTransversal.addEventListener('click', () => setMode('transversal'));
    btnAngles.addEventListener('click', () => setMode('angles'));
    angleSlider.addEventListener('input', renderTransversal);

    // Initial setup
    renderTransversal();
    setMode('parallel');
  </script>
</body>
</html>

What happens if a new road comes along and cuts right across both train tracks?

A **transversal** is a straight line that crosses over two or more other lines.

It cuts right through them, making intersection points where the lines meet.

<!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>Identifying Parallel Lines and Transversals</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 10px;
    }

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

    /* Interactive button selector */
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
    }

    .btn-tab {
      background: #f1f5f9;
      border: 2px solid transparent;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

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

    .btn-tab.active-all {
      background: #1e2945;
      color: #ffffff;
    }

    .btn-tab.active-parallel {
      background: #dbeafe;
      border-color: #2563eb;
      color: #1d4ed8;
    }

    .btn-tab.active-transversal {
      background: #ffedd5;
      border-color: #f97316;
      color: #c2410c;
    }

    .btn-tab.active-intersections {
      background: #fef9c3;
      border-color: #eab308;
      color: #854d0e;
    }

    /* SVG viewport */
    .svg-container {
      width: 100%;
      aspect-ratio: 4 / 3;
      max-height: 320px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      overflow: hidden;
      touch-action: manipulation;
    }

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

    /* Visual transition styles */
    .line-parallel {
      stroke: #2563eb;
      stroke-width: 4;
      stroke-linecap: round;
      transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
      cursor: pointer;
    }

    .line-transversal {
      stroke: #f97316;
      stroke-width: 4;
      stroke-linecap: round;
      transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
      cursor: pointer;
    }

    .arrow-marker {
      fill: #2563eb;
      transition: fill 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    }

    .intersection-node {
      fill: #facc15;
      stroke: #ca8a04;
      stroke-width: 2.5;
      cursor: pointer;
      transition: transform 0.3s ease, opacity 0.3s ease, r 0.3s ease;
      transform-origin: center;
    }

    .node-pulse {
      fill: none;
      stroke: #facc15;
      stroke-width: 2;
      opacity: 0;
      pointer-events: none;
      transform-origin: center;
    }

    .active-pulse {
      animation: pulseRing 1.8s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    @keyframes pulseRing {
      0% {
        r: 7px;
        opacity: 0.8;
        stroke-width: 3;
      }
      100% {
        r: 22px;
        opacity: 0;
        stroke-width: 0.5;
      }
    }

    .label-text {
      font-size: 13px;
      font-weight: 700;
      fill: #1e2945;
      transition: opacity 0.3s ease, fill 0.3s ease;
      pointer-events: none;
    }

    .label-parallel {
      fill: #1d4ed8;
    }

    .label-transversal {
      fill: #c2410c;
    }

    .dimmed {
      opacity: 0.18 !important;
    }

    .highlight-line {
      stroke-width: 6.5 !important;
    }

    .highlight-node {
      transform: scale(1.35);
    }
  </style>
</head>
<body>

  <div class="diagram-wrap">
    
    <div class="controls">
      <button class="btn-tab active-all" onclick="setMode('all')">✦ All</button>
      <button class="btn-tab" onclick="setMode('parallel')">Parallel Lines</button>
      <button class="btn-tab" onclick="setMode('transversal')">Transversal</button>
      <button class="btn-tab" onclick="setMode('intersections')">Intersections</button>
    </div>

    
    <div class="svg-container">
      <svg viewBox="0 0 400 280">
        
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f1f5f9" stroke-width="1" />
          </pattern>
        </defs>
        <rect width="400" height="280" fill="url(#grid)" />

        
        <g id="group-p1" onclick="setMode('parallel')">
          <line x1="30" y1="80" x2="370" y2="80" class="line-parallel" />
          
          <polygon points="195,74 207,80 195,86" class="arrow-marker" />
          <text x="35" y="68" class="label-text label-parallel">Line a</text>
        </g>

        
        <g id="group-p2" onclick="setMode('parallel')">
          <line x1="30" y1="200" x2="370" y2="200" class="line-parallel" />
          
          <polygon points="195,194 207,200 195,206" class="arrow-marker" />
          <text x="35" y="224" class="label-text label-parallel">Line b</text>
        </g>

        
        <g id="group-transversal" onclick="setMode('transversal')">
          <line x1="105" y1="20" x2="295" y2="260" class="line-transversal" />
          <text x="290" y="248" class="label-text label-transversal">Transversal t</text>
        </g>

        
        <g id="group-int1" onclick="setMode('intersections')">
          <circle cx="152.5" cy="80" r="14" class="node-pulse" />
          <circle cx="152.5" cy="80" r="6.5" class="intersection-node" />
        </g>

        
        <g id="group-int2" onclick="setMode('intersections')">
          <circle cx="247.5" cy="200" r="14" class="node-pulse" />
          <circle cx="247.5" cy="200" r="6.5" class="intersection-node" />
        </g>
      </svg>
    </div>
  </div>

  <script>
    const modes = ['all', 'parallel', 'transversal', 'intersections'];
    let currentMode = 'all';

    const pLines = document.querySelectorAll('.line-parallel, .arrow-marker, .label-parallel');
    const tLines = document.querySelectorAll('.line-transversal, .label-transversal');
    const nodes = document.querySelectorAll('.intersection-node');
    const pulses = document.querySelectorAll('.node-pulse');
    const tabs = document.querySelectorAll('.btn-tab');

    function setMode(mode) {
      currentMode = mode;

      // Update tab active classes
      tabs.forEach((tab, i) => {
        tab.className = 'btn-tab';
        if (modes[i] === mode) {
          tab.classList.add(`active-${mode}`);
        }
      });

      // Reset all styling flags
      pLines.forEach(el => {
        el.classList.remove('dimmed', 'highlight-line');
      });
      tLines.forEach(el => {
        el.classList.remove('dimmed', 'highlight-line');
      });
      nodes.forEach(el => {
        el.classList.remove('dimmed', 'highlight-node');
      });
      pulses.forEach(el => {
        el.classList.remove('active-pulse');
      });

      // Apply mode-specific highlight/dim
      if (mode === 'parallel') {
        tLines.forEach(el => el.classList.add('dimmed'));
        nodes.forEach(el => el.classList.add('dimmed'));
        document.querySelectorAll('.line-parallel').forEach(el => el.classList.add('highlight-line'));
      } else if (mode === 'transversal') {
        pLines.forEach(el => el.classList.add('dimmed'));
        nodes.forEach(el => el.classList.add('dimmed'));
        document.querySelectorAll('.line-transversal').forEach(el => el.classList.add('highlight-line'));
      } else if (mode === 'intersections') {
        pLines.forEach(el => el.classList.add('dimmed'));
        tLines.forEach(el => el.classList.add('dimmed'));
        nodes.forEach(el => el.classList.add('highlight-node'));
        pulses.forEach(el => el.classList.add('active-pulse'));
      }
    }
  </script>
</body>
</html>

Under the **Standard Scottish Curriculum for Excellence**, we represent parallel lines symbolically using the symbol $\parallel$ (for example, $L_1 \parallel L_2$).

Intersecting **transversals** are identified by their lettered line names, such as line $T$ crossing over lines $L_1$ and $L_2$.

How can you tell which line is which when looking at a puzzle?

Look for the matching arrow marks first to find the **parallel lines**.

In the **Standard Scottish Curriculum**, we represent parallel lines symbolically using the **parallel symbol** $\parallel$, such as $L_1 \parallel L_2$.

Intersecting **transversals** are identified by their lettered line names, such as line $T$ cutting across $L_1$ and $L_2$.

Then, find the single line that slices across them — that line is your **transversal**.

<!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>Parallel Lines and Transversals</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: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }

    /* Interactive button group */
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }

    .btn {
      appearance: none;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      font-size: 14px;
      font-weight: 700;
      padding: 8px 14px;
      border-radius: 9999px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

    .btn:hover {
      border-color: #cbd5e1;
      color: #1e2945;
    }

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

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

    .btn.active-transversal {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
    }

    /* Diagram area */
    .svg-container {
      width: 100%;
      max-width: 440px;
      aspect-ratio: 4 / 3;
      background: #ffffff;
      border-radius: 12px;
      position: relative;
    }

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

    /* Animated and highlighted elements */
    .line-group {
      transition: opacity 0.3s ease;
    }

    .line-parallel {
      stroke: #2563eb;
      stroke-width: 5;
      stroke-linecap: round;
    }

    .arrow-marker {
      fill: #2563eb;
      transition: transform 0.3s ease;
    }

    .line-transversal {
      stroke: #10b981;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-dasharray: 8 0;
    }

    .intersection-dot {
      fill: #10b981;
      stroke: #ffffff;
      stroke-width: 3;
      transition: r 0.3s ease, opacity 0.3s ease;
    }

    /* Text Labels */
    .badge-label {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
      transition: opacity 0.3s ease;
    }

    .badge-parallel {
      fill: #2563eb;
    }

    .badge-transversal {
      fill: #10b981;
    }

    /* Dimming classes */
    .dimmed {
      opacity: 0.15 !important;
    }

    .highlighted {
      opacity: 1 !important;
    }
  </style>
</head>
<body>

  
  <div class="controls" role="group" aria-label="Diagram highlight options">
    <button class="btn active-all" id="btnAll">
      Show All
    </button>
    <button class="btn" id="btnParallel">
      ✦ Parallel Lines
    </button>
    <button class="btn" id="btnTransversal">
      ✦ Transversal
    </button>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 400 300">
      <defs>
        
        <g id="parallelChevron">
          <path d="M -6,-7 L 4,0 L -6,7" fill="none" stroke="#2563eb" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
        </g>
      </defs>

      
      <line x1="30" y1="85" x2="370" y2="85" stroke="#f1f5f9" stroke-width="2" />
      <line x1="30" y1="215" x2="370" y2="215" stroke="#f1f5f9" stroke-width="2" />

      
      <g id="parallelGroup" class="line-group">
        
        <line class="line-parallel" x1="40" y1="85" x2="360" y2="85" />
        <use href="#parallelChevron" x="180" y="85" />
        <text class="badge-label badge-parallel" x="40" y="65">Parallel Line</text>

        
        <line class="line-parallel" x1="40" y1="215" x2="360" y2="215" />
        <use href="#parallelChevron" x="180" y="215" />
        <text class="badge-label badge-parallel" x="40" y="245">Parallel Line</text>
      </g>

      
      <g id="transversalGroup" class="line-group">
        
        <line class="line-transversal" x1="100" y1="270" x2="300" y2="30" />
        
        
        
        <circle id="dotBottom" class="intersection-dot" cx="146" cy="215" r="7" />
        
        
        <circle id="dotTop" class="intersection-dot" cx="254" cy="85" r="7" />
        
        <text class="badge-label badge-transversal" x="245" y="45">Transversal</text>
      </g>
    </svg>
  </div>

  <script>
    const btnAll = document.getElementById('btnAll');
    const btnParallel = document.getElementById('btnParallel');
    const btnTransversal = document.getElementById('btnTransversal');

    const parallelGroup = document.getElementById('parallelGroup');
    const transversalGroup = document.getElementById('transversalGroup');

    function setState(state) {
      // Reset button classes
      btnAll.className = 'btn';
      btnParallel.className = 'btn';
      btnTransversal.className = 'btn';

      // Reset group classes
      parallelGroup.classList.remove('dimmed', 'highlighted');
      transversalGroup.classList.remove('dimmed', 'highlighted');

      if (state === 'parallel') {
        btnParallel.className = 'btn active-parallel';
        parallelGroup.classList.add('highlighted');
        transversalGroup.classList.add('dimmed');
      } else if (state === 'transversal') {
        btnTransversal.className = 'btn active-transversal';
        transversalGroup.classList.add('highlighted');
        parallelGroup.classList.add('dimmed');
      } else {
        btnAll.className = 'btn active-all';
        parallelGroup.classList.add('highlighted');
        transversalGroup.classList.add('highlighted');
      }
    }

    btnAll.addEventListener('click', () => setState('all'));
    btnParallel.addEventListener('click', () => setState('parallel'));
    btnTransversal.addEventListener('click', () => setState('transversal'));
  </script>
</body>
</html>

Remember: lines are only parallel if they have matching arrow marks and never get closer together.

Next time you see a ladder or a window frame, see if you can point out the parallel lines and the transversals crossing them!

math

Identifying Parallel Lines and Transversals. Recognize parallel lines using arrow notation and identify transversal lines crossing them.

Angles in Parallel Lines - Scottish Curriculum for Excellence Third Level (MTH 3-17a)

Angles Formed Between Transversals and Parallel Lines

Transversals of Parallel Lines: Identify Lines and Angle Pairs

Although the prompt references Early Level (P1), the curriculum code MTH 3-17a and the objective 'Identifying Parallel Lines and Transversals' correspond to CfE Third Level (Secondary S1-S3, ages 11-14). Instruction should focus on rigorous geometric conventions: decoding arrow symbols on complex figures, recognizing that transversals do not have to be vertical or perpendicular, and establishing foundational spatial recognition prior to calculating angle sizes (alternate, corresponding, and interior).

Identifying Parallel Lines and Transversals

Lines That Never Touch

The Crossing Line

Math Notation