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 holding a fluffy feather in one hand and a chunky rock in the other.

Which one feels like it is pulling down on your hand more?

**Hefting** means using your hands like a scale to test how heavy or light two objects feel.

<!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>Hefting Objects by Hand</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .selector-bar {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 440px;
    }

    .pair-btn {
      flex: 1;
      padding: 8px 12px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, box-shadow 0.2s, color 0.2s;
    }

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

    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 250px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      padding: 24px 16px 28px;
      overflow: hidden;
    }

    /* Baseline dashed reference line */
    .balance-line {
      position: absolute;
      top: 52%;
      left: 10%;
      right: 10%;
      height: 2px;
      border-top: 2px dashed #e2e8f0;
      z-index: 1;
    }

    .side {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 130px;
      z-index: 2;
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .side.heavy {
      transform: translateY(32px);
    }

    .side.light {
      transform: translateY(-24px);
    }

    .tag {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 10px;
      border-radius: 12px;
      margin-bottom: 8px;
      transition: background 0.3s, color 0.3s;
    }

    .heavy .tag {
      background: #eff6ff;
      color: #1d4ed8;
      box-shadow: 0 2px 6px rgba(29, 78, 216, 0.15);
    }

    .light .tag {
      background: #f0fdf4;
      color: #15803d;
      box-shadow: 0 2px 6px rgba(21, 128, 61, 0.15);
    }

    .object-container {
      position: relative;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .object-emoji {
      font-size: 48px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    }

    .arrow-indicator {
      position: absolute;
      font-size: 20px;
      font-weight: bold;
      transition: opacity 0.3s;
    }

    .heavy .arrow-indicator {
      bottom: -16px;
      color: #1d4ed8;
    }

    .light .arrow-indicator {
      top: -14px;
      color: #15803d;
    }

    .hand-svg {
      width: 84px;
      height: 56px;
      margin-top: 4px;
    }

    .arm-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 12px;
      background: #e2e8f0;
      border-radius: 6px 6px 0 0;
    }
  </style>
</head>
<body>

  
  <div class="selector-bar">
    <button class="pair-btn active" onclick="setPair(0)">🪨 vs 🪶</button>
    <button class="pair-btn" onclick="setPair(1)">🧱 vs 🎈</button>
    <button class="pair-btn" onclick="setPair(2)">🍎 vs 🍂</button>
  </div>

  
  <div class="stage">
    <div class="balance-line"></div>

    
    <div class="side heavy" id="leftSide">
      <span class="tag" id="leftTag">Heavy</span>
      <div class="object-container">
        <div class="object-emoji" id="leftEmoji">🪨</div>
        <div class="arrow-indicator" id="leftArrow">↓</div>
      </div>
      
      <svg class="hand-svg" viewBox="0 0 100 65" fill="none">
        <path d="M15 45 C15 35, 25 30, 40 30 L65 30 C75 30, 85 38, 85 48 C85 58, 70 60, 50 60 L25 60 C18 60, 15 52, 15 45 Z" fill="#fed7aa"/>
        
        <path d="M30 32 C25 24, 32 14, 40 18 C46 22, 45 30, 42 32 Z" fill="#fdba74"/>
        
        <rect x="42" y="27" width="10" height="12" rx="4" fill="#fed7aa"/>
        <rect x="53" y="27" width="10" height="12" rx="4" fill="#fed7aa"/>
        <rect x="64" y="28" width="10" height="11" rx="4" fill="#fed7aa"/>
        <rect x="74" y="30" width="9" height="9" rx="3.5" fill="#fed7aa"/>
      </svg>
    </div>

    
    <div class="side light" id="rightSide">
      <span class="tag" id="rightTag">Light</span>
      <div class="object-container">
        <div class="object-emoji" id="rightEmoji">🪶</div>
        <div class="arrow-indicator" id="rightArrow">↑</div>
      </div>
      
      <svg class="hand-svg" viewBox="0 0 100 65" fill="none" style="transform: scaleX(-1);">
        <path d="M15 45 C15 35, 25 30, 40 30 L65 30 C75 30, 85 38, 85 48 C85 58, 70 60, 50 60 L25 60 C18 60, 15 52, 15 45 Z" fill="#fed7aa"/>
        
        <path d="M30 32 C25 24, 32 14, 40 18 C46 22, 45 30, 42 32 Z" fill="#fdba74"/>
        
        <rect x="42" y="27" width="10" height="12" rx="4" fill="#fed7aa"/>
        <rect x="53" y="27" width="10" height="12" rx="4" fill="#fed7aa"/>
        <rect x="64" y="28" width="10" height="11" rx="4" fill="#fed7aa"/>
        <rect x="74" y="30" width="9" height="9" rx="3.5" fill="#fed7aa"/>
      </svg>
    </div>

    <div class="arm-bar"></div>
  </div>

  <script>
    const pairs = [
      { left: '🪨', right: '🪶', leftHeavy: true },
      { left: '🧱', right: '🎈', leftHeavy: true },
      { left: '🍂', right: '🍎', leftHeavy: false }
    ];

    let currentIdx = 0;

    function setPair(index) {
      currentIdx = index;
      const data = pairs[index];

      // Update buttons
      document.querySelectorAll('.pair-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      const leftSide = document.getElementById('leftSide');
      const rightSide = document.getElementById('rightSide');
      const leftEmoji = document.getElementById('leftEmoji');
      const rightEmoji = document.getElementById('rightEmoji');
      const leftTag = document.getElementById('leftTag');
      const rightTag = document.getElementById('rightTag');
      const leftArrow = document.getElementById('leftArrow');
      const rightArrow = document.getElementById('rightArrow');

      leftEmoji.textContent = data.left;
      rightEmoji.textContent = data.right;

      if (data.leftHeavy) {
        leftSide.className = 'side heavy';
        rightSide.className = 'side light';
        leftTag.textContent = 'Heavy';
        rightTag.textContent = 'Light';
        leftArrow.textContent = '↓';
        rightArrow.textContent = '↑';
      } else {
        leftSide.className = 'side light';
        rightSide.className = 'side heavy';
        leftTag.textContent = 'Light';
        rightTag.textContent = 'Heavy';
        leftArrow.textContent = '↑';
        rightArrow.textContent = '↓';
      }
    }
  </script>
</body>
</html>

An object that pulls down hard on your hand is **heavy**. An object that is easy to hold up is **light**.

How do you test two objects that are closer in weight?

Hold both hands out flat in front of you with your palms up, like two balancing pans.

Put one object in your left hand and one in your right hand, then gently bounce them to feel the downward pull.

<!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>Hefting Objects by Hand</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: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .stage {
      width: 100%;
      max-width: 480px;
      height: 290px;
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      padding-bottom: 24px;
    }

    /* Baseline reference line */
    .baseline {
      position: absolute;
      left: 10%;
      right: 10%;
      bottom: 120px;
      height: 2px;
      border-top: 2px dashed #d1d5db;
      z-index: 1;
    }

    .hand-column {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 130px;
      position: relative;
      z-index: 2;
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .side-tag {
      font-size: 13px;
      font-weight: 700;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    .item-holder {
      width: 110px;
      height: 110px;
      background: #ffffff;
      border-radius: 18px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      border: 2px solid #e5e7eb;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .item-icon {
      font-size: 46px;
      line-height: 1;
      filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.1));
    }

    .hand-icon {
      font-size: 32px;
      line-height: 1;
      margin-top: -6px;
    }

    /* Force arrows */
    .force-arrow {
      position: absolute;
      bottom: -38px;
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .arrow-shaft {
      width: 6px;
      background: #22b7ff;
      border-radius: 3px;
    }

    .arrow-head {
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 9px solid #22b7ff;
    }

    .force-arrow.heavy .arrow-shaft {
      height: 24px;
      background: #2563eb;
    }
    .force-arrow.heavy .arrow-head {
      border-top-color: #2563eb;
    }

    .force-arrow.light .arrow-shaft {
      height: 10px;
      background: #93c5fd;
    }
    .force-arrow.light .arrow-head {
      border-top-color: #93c5fd;
      border-left-width: 5px;
      border-right-width: 5px;
      border-top-width: 7px;
    }

    /* Result badges */
    .badge {
      margin-top: 42px;
      font-size: 15px;
      font-weight: 800;
      padding: 6px 14px;
      border-radius: 20px;
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .badge-heavy {
      background: #dbeafe;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    .badge-light {
      background: #f3f4f6;
      color: #4b5563;
      border: 1px solid #e5e7eb;
    }

    /* Hefting state positions */
    .hefting #leftCol {
      transform: translateY(40px);
    }
    .hefting #rightCol {
      transform: translateY(-8px);
    }
    .hefting .force-arrow {
      opacity: 1;
      transform: translateY(0);
    }
    .hefting .badge {
      opacity: 1;
      transform: scale(1);
    }
    .hefting #leftCol .item-holder {
      border-color: #3b82f6;
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
    }

    /* Interactive controls */
    .controls {
      display: flex;
      gap: 10px;
      margin-top: 8px;
    }

    .btn {
      padding: 9px 18px;
      border-radius: 22px;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #1e2945;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 3px 8px rgba(34, 183, 255, 0.3);
    }
  </style>
</head>
<body>

  <div class="stage" id="stage">
    <div class="baseline"></div>

    
    <div class="hand-column" id="leftCol">
      <span class="side-tag">Left Hand</span>
      <div class="item-holder">
        <span class="item-icon">📖</span>
        <span class="hand-icon">🫲</span>
        <div class="force-arrow heavy">
          <div class="arrow-shaft"></div>
          <div class="arrow-head"></div>
        </div>
      </div>
      <span class="badge badge-heavy">Heavy ⬇</span>
    </div>

    
    <div class="hand-column" id="rightCol">
      <span class="side-tag">Right Hand</span>
      <div class="item-holder">
        <span class="item-icon">✏️</span>
        <span class="hand-icon">🫱</span>
        <div class="force-arrow light">
          <div class="arrow-shaft"></div>
          <div class="arrow-head"></div>
        </div>
      </div>
      <span class="badge badge-light">Light</span>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="btnRest">Rest</button>
    <button class="btn active" id="btnHeft">Heft (Feel Pull)</button>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const btnRest = document.getElementById('btnRest');
    const btnHeft = document.getElementById('btnHeft');

    function setHefting(isHefting) {
      if (isHefting) {
        stage.classList.add('hefting');
        btnHeft.classList.add('active');
        btnRest.classList.remove('active');
      } else {
        stage.classList.remove('hefting');
        btnRest.classList.add('active');
        btnHeft.classList.remove('active');
      }
    }

    btnRest.addEventListener('click', () => setHefting(false));
    btnHeft.addEventListener('click', () => setHefting(true));

    // Interactive tap on items to toggle hefting
    stage.addEventListener('click', () => {
      setHefting(!stage.classList.contains('hefting'));
    });

    // Start in hefting state to visually teach the core concept immediately
    setHefting(true);
  </script>
</body>
</html>

The thick storybook pulls your left hand down, so the book is **heavier** than the pencil.

Does a bigger object always mean it is heavier?

A giant fluffy sponge is much bigger than a small metal spoon, but the metal spoon is actually **heavier**.

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

  .controls {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 380px;
  }

  .btn {
    flex: 1;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
  }

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

  .stage {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 250px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e9ecef;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    padding: 10px;
  }

  .arm-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 46%;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .hefting .arm-sponge {
    transform: translateY(-24px);
  }

  .hefting .arm-spoon {
    transform: translateY(28px);
  }

  .item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 14px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    width: 100%;
    transition: border-color 0.3s ease, background 0.3s ease;
  }

  .sponge-icon {
    font-size: 54px;
    line-height: 1;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08));
  }

  .spoon-icon {
    font-size: 32px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    margin: 11px 0;
  }

  .hand-icon {
    font-size: 38px;
    line-height: 1;
    margin-top: 4px;
  }

  .badge {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.2px;
    transition: all 0.3s ease;
  }

  .badge-look-sponge { background: #e2e8f0; color: #475569; }
  .badge-look-spoon { background: #e2e8f0; color: #475569; }

  .hefting .badge-sponge {
    background: #e0f2fe;
    color: #0284c7;
  }

  .hefting .badge-spoon {
    background: #fef3c7;
    color: #d97706;
  }

  .force-arrow {
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .arrow-up {
    top: -22px;
    color: #0284c7;
    transform: translateY(6px);
  }

  .arrow-down {
    bottom: -22px;
    color: #d97706;
    transform: translateY(-6px);
  }

  .hefting .arrow-up {
    opacity: 1;
    transform: translateY(0);
  }

  .hefting .arrow-down {
    opacity: 1;
    transform: translateY(0);
  }

  .footer-tip {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    min-height: 20px;
  }

  .footer-tip span {
    color: #0f172a;
  }
</style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btnLook" onclick="setMode('look')">👀 1. Look</button>
    <button class="btn" id="btnHeft" onclick="setMode('heft')">🤲 2. Heft</button>
  </div>

  <div class="stage" id="stage">
    
    <div class="arm-col arm-sponge">
      <div class="force-arrow arrow-up">▲ Light</div>
      <div class="item-card">
        <div class="sponge-icon">🧽</div>
      </div>
      <div class="hand-icon">🫲</div>
      <div class="badge badge-look-sponge badge-sponge" id="spongeLabel">Bigger</div>
    </div>

    
    <div class="arm-col arm-spoon">
      <div class="force-arrow arrow-down">▼ Heavy</div>
      <div class="item-card">
        <div class="spoon-icon">🥄</div>
      </div>
      <div class="hand-icon">🫱</div>
      <div class="badge badge-look-spoon badge-spoon" id="spoonLabel">Smaller</div>
    </div>
  </div>

  <div class="footer-tip" id="statusText">
    Looking: Sponge looks bigger.
  </div>

<script>
  function setMode(mode) {
    const stage = document.getElementById('stage');
    const btnLook = document.getElementById('btnLook');
    const btnHeft = document.getElementById('btnHeft');
    const spongeLabel = document.getElementById('spongeLabel');
    const spoonLabel = document.getElementById('spoonLabel');
    const statusText = document.getElementById('statusText');

    if (mode === 'heft') {
      stage.classList.add('hefting');
      btnHeft.classList.add('active');
      btnLook.classList.remove('active');
      spongeLabel.textContent = 'Lighter 🪶';
      spoonLabel.textContent = 'Heavier ⚖️';
      statusText.innerHTML = 'Hefting: <span>Spoon feels heavier!</span>';
    } else {
      stage.classList.remove('hefting');
      btnLook.classList.add('active');
      btnHeft.classList.remove('active');
      spongeLabel.textContent = 'Bigger';
      spoonLabel.textContent = 'Smaller';
      statusText.innerHTML = 'Looking: <span>Sponge looks bigger.</span>';
    }
  }
</script>
</body>
</html>

You cannot always tell which object is heavier just by looking with your eyes — you need to **heft** them to feel the difference!

math

Hefting Objects by Hand: Heavy and Light. Hold two objects in opposite hands to feel and compare which is heavier or lighter.

Early Level Numeracy and Mathematics: Comparing Weight and Size

Early Years Foundation & P1 Measurement: Exploring Weight and Balance

Kindergarten / P1 Math: Light and Heavy, Comparing Weight

At Early Level (P1), mastering hefting requires direct, embodied kinesthetic experience before abstract representations are introduced. Teachers should encourage students to model a 'human balance scale' by tilting their bodies or arms in response to what their palms feel. Deliberately include counter-intuitive pairings (e.g., small heavy rocks vs. large lightweight pom-poms) to dismantle the persistent misconception that volume equals mass. Pair hefting activities with oral sentence frameworks ('A is heavier than B', 'B is lighter than A') and subsequent verification on equal-arm balance scales to build confidence in estimation and non-standard measurement.

Hefting Objects by Hand: Heavy and Light

What is Hefting?

How to Heft Step-by-Step