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

Look at a spinning bicycle wheel or a yummy round cookie.

They both share the exact same flat, round shape!

A **circle** is a flat shape made of one continuous **curved boundary** that goes all the way around.

It has **no straight sides** and zero sharp corners to poke your finger on.

<!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>Recognizing Circles</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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }
    .shape-nav {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 380px;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 15px;
      font-weight: 600;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 10px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #e0f2fe;
      border-color: #22b7ff;
      color: #0369a1;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }
    .stage {
      width: 100%;
      max-width: 380px;
      height: 220px;
      background: #f8fafc;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .shape-path {
      fill: #f0f9ff;
      stroke: #22b7ff;
      stroke-width: 4;
      transition: d 0.35s ease;
    }
    .shape-path.polygon {
      fill: #f8fafc;
      stroke: #94a3b8;
    }
    .corner-marker {
      fill: #f43f5e;
      transition: opacity 0.3s ease;
    }
    .tracer-dot {
      fill: #0284c7;
      stroke: #ffffff;
      stroke-width: 2.5;
    }
    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 380px;
      margin-top: 12px;
    }
    .info-badge {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 10px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .badge-highlight {
      color: #0284c7;
    }
    .badge-warn {
      color: #e11d48;
    }
  </style>
</head>
<body>

  <div class="shape-nav">
    <button class="tab-btn active" onclick="selectShape('circle')">⚪ Circle</button>
    <button class="tab-btn" onclick="selectShape('square')">⬜ Square</button>
    <button class="tab-btn" onclick="selectShape('triangle')">🔺 Triangle</button>
  </div>

  <div class="stage">
    <svg id="stageSvg" viewBox="0 0 300 220">
      
      <path id="mainPath" class="shape-path" d="" />
      
      
      <g id="cornersGroup"></g>
      
      
      <circle id="tracer" class="tracer-dot" r="6" cx="0" cy="0" />
    </svg>
  </div>

  <div class="info-grid">
    <div class="info-badge" id="sidesBadge">0 Straight Sides</div>
    <div class="info-badge" id="cornersBadge">0 Corners</div>
  </div>

  <script>
    const shapes = {
      circle: {
        d: "M 150 30 A 75 75 0 1 1 149.9 30 Z",
        corners: [],
        sidesText: "0 Straight Sides",
        cornersText: "0 Corners",
        isCircle: true
      },
      square: {
        d: "M 75 35 L 225 35 L 225 185 L 75 185 Z",
        corners: [[75, 35], [225, 35], [225, 185], [75, 185]],
        sidesText: "4 Straight Sides",
        cornersText: "4 Sharp Corners",
        isCircle: false
      },
      triangle: {
        d: "M 150 30 L 235 180 L 65 180 Z",
        corners: [[150, 30], [235, 180], [65, 180]],
        sidesText: "3 Straight Sides",
        cornersText: "3 Sharp Corners",
        isCircle: false
      }
    };

    let currentShape = 'circle';
    let progress = 0;
    const pathEl = document.getElementById('mainPath');
    const cornersGroup = document.getElementById('cornersGroup');
    const tracerEl = document.getElementById('tracer');
    const sidesBadge = document.getElementById('sidesBadge');
    const cornersBadge = document.getElementById('cornersBadge');
    const buttons = document.querySelectorAll('.tab-btn');

    function updateView() {
      const data = shapes[currentShape];
      pathEl.setAttribute('d', data.d);
      pathEl.className.baseVal = data.isCircle ? 'shape-path' : 'shape-path polygon';

      // Update corners
      cornersGroup.innerHTML = '';
      data.corners.forEach(([cx, cy]) => {
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', cx);
        circle.setAttribute('cy', cy);
        circle.setAttribute('r', '7');
        circle.setAttribute('class', 'corner-marker');
        cornersGroup.appendChild(circle);
      });

      // Update text badges
      sidesBadge.textContent = data.sidesText;
      cornersBadge.textContent = data.cornersText;

      sidesBadge.className = 'info-badge ' + (data.isCircle ? 'badge-highlight' : 'badge-warn');
      cornersBadge.className = 'info-badge ' + (data.isCircle ? 'badge-highlight' : 'badge-warn');

      // Update buttons
      buttons.forEach((btn, idx) => {
        const shapeKeys = ['circle', 'square', 'triangle'];
        btn.classList.toggle('active', shapeKeys[idx] === currentShape);
      });
    }

    function selectShape(shapeKey) {
      currentShape = shapeKey;
      progress = 0;
      updateView();
    }

    // Smooth animation loop for perimeter tracer
    let lastTime = performance.now();
    function animate(time) {
      const delta = (time - lastTime) / 1000;
      lastTime = time;

      const totalLen = pathEl.getTotalLength();
      if (totalLen > 0) {
        progress = (progress + delta * (totalLen / 3.5)) % totalLen;
        const point = pathEl.getPointAtLength(progress);
        tracerEl.setAttribute('cx', point.x);
        tracerEl.setAttribute('cy', point.y);
      }
      requestAnimationFrame(animate);
    }

    updateView();
    requestAnimationFrame(animate);
  </script>
</body>
</html>

Where can we find circles hiding in the room around you?

Many real-life objects have a round, circular face.

<!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; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
  }
  .stage {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
  }
  .object-display {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    transition: opacity 0.3s ease;
  }
  .ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    pointer-events: none;
    transform: rotate(-90deg);
  }
  .ring-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 6;
  }
  .ring-active {
    fill: none;
    stroke: #22b7ff;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 597;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.6s ease;
  }
  .badges {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .badge {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #1e2945;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  }
  .badge-icon {
    color: #22b7ff;
    font-size: 15px;
  }
  .selector-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 380px;
  }
  .item-btn {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .item-btn.active {
    border-color: #22b7ff;
    box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.2);
  }
  .item-emoji {
    font-size: 26px;
    line-height: 1;
  }
  .item-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
  }
  .item-btn.active .item-label {
    color: #1e2945;
  }
</style>
</head>
<body>

  <div class="stage">
    <div id="display" class="object-display">🕒</div>
    <svg class="ring-svg" viewBox="0 0 200 200">
      <circle class="ring-bg" cx="100" cy="100" r="95"></circle>
      <circle id="ring" class="ring-active" cx="100" cy="100" r="95"></circle>
    </svg>
  </div>

  <div class="badges">
    <div class="badge"><span class="badge-icon">⟳</span> 1 Curved Edge</div>
    <div class="badge"><span class="badge-icon">✦</span> 0 Corners</div>
  </div>

  <div class="selector-grid">
    <button class="item-btn active" data-emoji="🕒" data-label="Clock">
      <span class="item-emoji">🕒</span>
      <span class="item-label">Clock</span>
    </button>
    <button class="item-btn" data-emoji="🪙" data-label="Coin">
      <span class="item-emoji">🪙</span>
      <span class="item-label">Coin</span>
    </button>
    <button class="item-btn" data-emoji="🛞" data-label="Wheel">
      <span class="item-emoji">🛞</span>
      <span class="item-label">Wheel</span>
    </button>
    <button class="item-btn" data-emoji="🔘" data-label="Button">
      <span class="item-emoji">🔘</span>
      <span class="item-label">Button</span>
    </button>
  </div>

<script>
  const btns = document.querySelectorAll('.item-btn');
  const display = document.getElementById('display');
  const ring = document.getElementById('ring');
  let currentIndex = 0;
  let timer;

  function selectItem(index) {
    currentIndex = index;
    btns.forEach((btn, i) => btn.classList.toggle('active', i === index));
    
    display.style.opacity = '0';
    ring.style.strokeDashoffset = '597';
    
    setTimeout(() => {
      display.textContent = btns[index].dataset.emoji;
      display.style.opacity = '1';
      ring.style.strokeDashoffset = '0';
    }, 150);
  }

  function startAutoPlay() {
    timer = setInterval(() => {
      selectItem((currentIndex + 1) % btns.length);
    }, 3500);
  }

  btns.forEach((btn, index) => {
    btn.addEventListener('click', () => {
      clearInterval(timer);
      selectItem(index);
      startAutoPlay();
    });
  });

  startAutoPlay();
</script>
</body>
</html>

Can you test whether any shape is a circle or an impostor?

To check any shape, trace its outside edge with your finger.

If your finger glides smoothly in a round curve without turning sharp corners or hitting straight lines, it is a **circle**!

<!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>Recognizing and Naming Circles</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;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
    }

    /* Tab Controls */
    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 380px;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 600;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      border-color: #22b7ff;
      background: #e0f2fe;
      color: #0369a1;
    }

    .tab-btn.active.circle-btn {
      border-color: #10b981;
      background: #ecfdf5;
      color: #047857;
    }

    /* Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 320px;
      height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .shape-path {
      fill: none;
      stroke-width: 6;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.3s ease;
    }

    .path-circle {
      stroke: #10b981;
      fill: rgba(16, 185, 129, 0.08);
    }

    .path-other {
      stroke: #94a3b8;
      fill: rgba(148, 163, 184, 0.08);
    }

    .corner-mark {
      fill: #ef4444;
      transition: opacity 0.3s ease;
    }

    .tracer {
      fill: #22b7ff;
      filter: drop-shadow(0 2px 4px rgba(34, 183, 255, 0.4));
    }

    .finger-icon {
      font-size: 24px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
      pointer-events: none;
      transform: translate(-6px, -4px);
    }

    /* Info Badges */
    .info-row {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 380px;
    }

    .badge {
      flex: 1;
      text-align: center;
      padding: 8px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #334155;
    }

    .badge.highlight-good {
      background: #ecfdf5;
      border-color: #a7f3d0;
      color: #065f46;
    }

    .badge.highlight-warn {
      background: #fef2f2;
      border-color: #fecaca;
      color: #991b1b;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active circle-btn" data-shape="circle">⚪ Circle</button>
    <button class="tab-btn" data-shape="triangle">🔺 Triangle</button>
    <button class="tab-btn" data-shape="square">🟦 Square</button>
  </div>

  <div class="stage">
    <svg viewBox="0 0 260 220">
      
      <path id="shapePath" class="shape-path path-circle" d="" />

      
      <g id="cornersGroup"></g>

      
      <g id="tracerGroup" transform="translate(130, 25)">
        <circle class="tracer" cx="0" cy="0" r="7" />
        <text class="finger-icon" x="0" y="0">👆</text>
      </g>
    </svg>
  </div>

  <div class="info-row">
    <div id="badgeCurve" class="badge highlight-good">Smooth Curve</div>
    <div id="badgeCorners" class="badge highlight-good">0 Corners</div>
  </div>

  <script>
    const shapes = {
      circle: {
        d: 'M 130 25 A 85 85 0 1 1 129.9 25 Z',
        corners: [],
        badge1: 'Smooth Curve',
        badge2: '0 Corners',
        isCircle: true
      },
      triangle: {
        d: 'M 130 30 L 225 190 L 35 190 Z',
        corners: [{x: 130, y: 30}, {x: 225, y: 190}, {x: 35, y: 190}],
        badge1: '3 Straight Sides',
        badge2: '3 Sharp Corners',
        isCircle: false
      },
      square: {
        d: 'M 45 25 L 215 25 L 215 195 L 45 195 Z',
        corners: [{x: 45, y: 25}, {x: 215, y: 25}, {x: 215, y: 195}, {x: 45, y: 195}],
        badge1: '4 Straight Sides',
        badge2: '4 Sharp Corners',
        isCircle: false
      }
    };

    let currentShapeKey = 'circle';
    let animProgress = 0;
    let lastTime = null;

    const pathEl = document.getElementById('shapePath');
    const cornersGroup = document.getElementById('cornersGroup');
    const tracerGroup = document.getElementById('tracerGroup');
    const badgeCurve = document.getElementById('badgeCurve');
    const badgeCorners = document.getElementById('badgeCorners');
    const tabBtns = document.querySelectorAll('.tab-btn');

    function setShape(key) {
      currentShapeKey = key;
      const shape = shapes[key];

      tabBtns.forEach(btn => {
        const isActive = btn.dataset.shape === key;
        btn.classList.toggle('active', isActive);
        btn.classList.toggle('circle-btn', isActive && shape.isCircle);
      });

      pathEl.setAttribute('d', shape.d);
      pathEl.className.baseVal = `shape-path ${shape.isCircle ? 'path-circle' : 'path-other'}`;

      // Update corners
      cornersGroup.innerHTML = '';
      shape.corners.forEach(c => {
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', c.x);
        circle.setAttribute('cy', c.y);
        circle.setAttribute('r', '8');
        circle.setAttribute('class', 'corner-mark');
        cornersGroup.appendChild(circle);
      });

      // Badges
      badgeCurve.textContent = shape.badge1;
      badgeCorners.textContent = shape.badge2;

      badgeCurve.className = `badge ${shape.isCircle ? 'highlight-good' : 'highlight-warn'}`;
      badgeCorners.className = `badge ${shape.isCircle ? 'highlight-good' : 'highlight-warn'}`;

      animProgress = 0;
    }

    tabBtns.forEach(btn => {
      btn.addEventListener('click', () => setShape(btn.dataset.shape));
    });

    // Animation Loop
    function animate(time) {
      if (!lastTime) lastTime = time;
      const delta = (time - lastTime) / 1000;
      lastTime = time;

      const totalLength = pathEl.getTotalLength();
      if (totalLength > 0) {
        // Speed: 1 cycle per 4 seconds
        animProgress = (animProgress + delta * (totalLength / 4)) % totalLength;
        const pt = pathEl.getPointAtLength(animProgress);
        tracerGroup.setAttribute('transform', `translate(${pt.x}, ${pt.y})`);
      }

      requestAnimationFrame(animate);
    }

    setShape('circle');
    requestAnimationFrame(animate);
  </script>
</body>
</html>

math

Recognizing and Naming Circles. Identify circles in drawings and everyday objects by their curved boundary with no straight sides.

2D Shapes - Foundation & Early Level Maths

Identify Circles (Early Level / Kindergarten Geometry)

Exploring 2D Shapes - Early Years Activity

At Early Level (P1, Scottish CfE), instruction should prioritise concrete, multi-sensory experiences: tactile tracing of circular objects with fingers, forming circles using loops of string or playdough, and conducting classroom 'shape hunts'. Explicitly contrasting circles with near-examples (such as ovals) and polygons with straight sides (squares, triangles) solidifies the defining rule of '$1$ continuous curved boundary with $0$ straight sides and $0$ corners'.

Recognizing and Naming Circles

What Makes a Circle?

Circles Around Us

Spotting the Circle