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 you are standing inside a giant, clear soap bubble that moves everywhere you go.

This invisible circle around your body is your **personal space**, and it helps you feel safe and comfortable.

<!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>Personal Space and Consent</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: 16px 12px;
      gap: 12px;
    }

    /* Step Selector Tabs */
    .stepper {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
    }

    .step-btn.active {
      background: #38bdf8;
      color: #ffffff;
      border-color: #38bdf8;
      box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
    }

    /* Main Visual Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 250px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Arm's Length Ruler / Floor line */
    .floor-line {
      position: absolute;
      bottom: 48px;
      left: 10%;
      width: 80%;
      height: 2px;
      background: #f1f5f9;
    }

    /* Personal Space Bubble */
    .bubble {
      position: absolute;
      top: 50%;
      left: 32%;
      transform: translate(-50%, -50%);
      width: 160px;
      height: 160px;
      border-radius: 50%;
      border: 2px dashed #38bdf8;
      background: rgba(56, 189, 248, 0.08);
      transition: all 0.5s ease;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 10px;
    }

    .bubble-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #0284c7;
      background: rgba(255, 255, 255, 0.9);
      padding: 2px 8px;
      border-radius: 10px;
      border: 1px solid rgba(56, 189, 248, 0.3);
    }

    /* Character: You */
    .char-you {
      position: absolute;
      top: 50%;
      left: 32%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 2;
    }

    /* Character: Friend */
    .char-friend {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 3;
    }

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

    .label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 4px;
    }

    /* Interaction Speech Bubbles */
    .speech-bubble {
      position: absolute;
      bottom: 54px;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      opacity: 0;
      transform: translateY(6px);
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .speech-ask {
      background: #ffffff;
      color: #0284c7;
      border: 1.5px solid #38bdf8;
    }

    .speech-consent {
      background: #22c55e;
      color: #ffffff;
      border: 1.5px solid #22c55e;
    }

    /* State-based positions & styles */
    /* State 0: Safe Distance */
    .state-0 .char-friend { left: 82%; }
    .state-0 .bubble { border-color: #38bdf8; background: rgba(56, 189, 248, 0.08); }

    /* State 1: Ask First */
    .state-1 .char-friend { left: 58%; }
    .state-1 .bubble { border-color: #38bdf8; background: rgba(56, 189, 248, 0.14); }
    .state-1 .speech-ask { opacity: 1; transform: translateY(0); }

    /* State 2: Consent Given */
    .state-2 .char-friend { left: 44%; }
    .state-2 .bubble { border-color: #22c55e; background: rgba(34, 197, 94, 0.12); }
    .state-2 .bubble-label { color: #15803d; border-color: rgba(34, 197, 94, 0.3); }
    .state-2 .speech-consent { opacity: 1; transform: translateY(0); }

    /* Distance Indicator Tag */
    .distance-tag {
      position: absolute;
      bottom: 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      background: #f1f5f9;
      padding: 4px 12px;
      border-radius: 12px;
    }
  </style>
</head>
<body>

  
  <div class="stepper">
    <button class="step-btn active" onclick="setStep(0)">
      <span>1</span> Space
    </button>
    <button class="step-btn" onclick="setStep(1)">
      <span>2</span> Ask 💬
    </button>
    <button class="step-btn" onclick="setStep(2)">
      <span>3</span> Consent ✓
    </button>
  </div>

  
  <div class="stage state-0" id="stage">
    <div class="floor-line"></div>

    
    <div class="bubble">
      <span class="bubble-label">Personal Space</span>
    </div>

    
    <div class="char-you">
      <div class="speech-bubble speech-consent" id="consentMsg">Yes! 😊</div>
      <div class="avatar" id="youAvatar">🧒</div>
      <span class="label">You</span>
    </div>

    
    <div class="char-friend">
      <div class="speech-bubble speech-ask" id="askMsg">May I? 💬</div>
      <div class="avatar" id="friendAvatar">👧</div>
      <span class="label">Friend</span>
    </div>

    
    <div class="distance-tag" id="statusTag">Safe Distance</div>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const buttons = document.querySelectorAll('.step-btn');
    const statusTag = document.getElementById('statusTag');
    const youAvatar = document.getElementById('youAvatar');
    const friendAvatar = document.getElementById('friendAvatar');

    const statuses = [
      "Safe Distance",
      "Ask First 💬",
      "Consent Given ✓"
    ];

    let currentStep = 0;
    let autoTimer = null;

    function setStep(index) {
      currentStep = index;

      // Update button styles
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      // Update stage state
      stage.className = `stage state-${index}`;
      statusTag.textContent = statuses[index];

      // Update character expressions
      if (index === 0) {
        youAvatar.textContent = "🧒";
        friendAvatar.textContent = "👧";
      } else if (index === 1) {
        youAvatar.textContent = "🧒";
        friendAvatar.textContent = "🙋‍♀️";
      } else if (index === 2) {
        youAvatar.textContent = "🤗";
        friendAvatar.textContent = "😊";
      }

      // Reset auto loop timer on click
      startAutoCycle();
    }

    function startAutoCycle() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        const next = (currentStep + 1) % 3;
        setStep(next);
      }, 3600);
    }

    // Initialize
    startAutoCycle();
  </script>
</body>
</html>

What should we do before we step close to give a friend a hug or touch their things?

A **personal boundary** is your rule about who can touch your body and how close they can get.

Before you touch someone or step into their space, you always ask first to make sure they are okay with it.

<!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>Personal Boundaries and Asking First</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
  body {
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 16px;
  }
  .stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .person-zone {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .bubble {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed #22c55e;
    background: rgba(34, 197, 94, 0.08);
    transition: all 0.3s ease;
    pointer-events: none;
  }
  .bubble.shake {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
  }
  .avatar {
    font-size: 54px;
    line-height: 1;
    z-index: 1;
    user-select: none;
    transition: transform 0.3s ease;
  }
  .bubble-label {
    position: absolute;
    bottom: -22px;
    font-size: 13px;
    font-weight: 600;
    color: #22c55e;
    letter-spacing: 0.2px;
    white-space: nowrap;
  }
  .speech-box {
    position: absolute;
    top: -30px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
  }
  .speech-box.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .speech-b {
    border-color: #22b7ff;
    color: #0284c7;
  }
  .speech-a {
    border-color: #22c55e;
    color: #16a34a;
  }
  .speech-a.alt {
    border-color: #f59e0b;
    color: #d97706;
  }
  .controls {
    width: 100%;
    max-width: 420px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
  }
  .btn {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1e2945;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover {
    background: #f8fafc;
  }
  .btn.active {
    border-color: #22c55e;
    background: #f0fdf4;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  }
  .btn-icon {
    font-size: 20px;
    line-height: 1;
  }
</style>
</head>
<body>

<div class="stage">
  
  <div class="person-zone" id="zoneB">
    <div class="speech-box speech-b" id="bubbleB">
      <span id="textB">Ask: 🤗 Hug?</span>
    </div>
    <div class="avatar" id="avatarB">🙋‍♂️</div>
  </div>

  
  <div class="person-zone" id="zoneA">
    <div class="bubble" id="spaceBubble"></div>
    <div class="speech-box speech-a" id="bubbleA">
      <span id="textA">Yes! 🤗</span>
    </div>
    <div class="avatar" id="avatarA">🙋‍♀️</div>
    <div class="bubble-label">Personal Space</div>
  </div>
</div>

<div class="controls">
  <button class="btn active" id="btnHug" onclick="setOption('hug')">
    <span class="btn-icon">🤗</span>
    <span>Hug?</span>
  </button>
  <button class="btn" id="btnHighFive" onclick="setOption('highFive')">
    <span class="btn-icon">✋</span>
    <span>High-Five?</span>
  </button>
  <button class="btn" id="btnWave" onclick="setOption('wave')">
    <span class="btn-icon">👋</span>
    <span>Wave?</span>
  </button>
</div>

<script>
  const data = {
    hug: {
      ask: 'Ask: 🤗 Hug?',
      reply: 'Wave instead! 👋',
      bubbleClass: 'speech-box speech-a alt',
      bubbleZoneClass: 'bubble shake',
      bMove: 'translateX(20px)',
      aMove: 'scale(1)'
    },
    highFive: {
      ask: 'Ask: ✋ High-Five?',
      reply: 'Yes! ✋',
      bubbleClass: 'speech-box speech-a',
      bubbleZoneClass: 'bubble',
      bMove: 'translateX(28px)',
      aMove: 'scale(1.05)'
    },
    wave: {
      ask: 'Ask: 👋 Wave?',
      reply: 'Yes! 👋',
      bubbleClass: 'speech-box speech-a',
      bubbleZoneClass: 'bubble',
      bMove: 'translateX(0px)',
      aMove: 'scale(1)'
    }
  };

  function setOption(type) {
    document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
    if (type === 'hug') document.getElementById('btnHug').classList.add('active');
    if (type === 'highFive') document.getElementById('btnHighFive').classList.add('active');
    if (type === 'wave') document.getElementById('btnWave').classList.add('active');

    const opt = data[type];
    const bB = document.getElementById('bubbleB');
    const bA = document.getElementById('bubbleA');
    const tB = document.getElementById('textB');
    const tA = document.getElementById('textA');
    const avB = document.getElementById('avatarB');
    const avA = document.getElementById('avatarA');
    const bubble = document.getElementById('spaceBubble');

    // 1. Show Ask
    bA.classList.remove('visible');
    bB.classList.remove('visible');
    tB.textContent = opt.ask;
    tA.textContent = opt.reply;

    setTimeout(() => {
      bB.classList.add('visible');
      avB.style.transform = opt.bMove;
    }, 100);

    // 2. Show Response & Space Status
    setTimeout(() => {
      bA.className = opt.bubbleClass;
      bubble.className = opt.bubbleZoneClass;
      bA.classList.add('visible');
      avA.style.transform = opt.aMove;
    }, 600);
  }

  // Initial trigger
  setOption('hug');
</script>

</body>
</html>

Does everyone want the exact same greeting every day?

Some days a friend might want a hug, and other days they might just want a wave.

If someone says 'no' or 'stop,' we listen right away because your body belongs to you, and their body belongs to them.

health

Understanding Personal Boundaries and Consent. Learners will identify what personal boundaries are and why everyone deserves to have their boundaries respected.

Boundaries | Growing Up Together

How to Teach Consent to Elementary Students: Building Foundations of Space and Autonomy

Bodies, Boundaries, and Personal Space: Health & SEL Activities for Early Elementary

Teaching personal boundaries and consent in 1st grade should focus on concrete physical metaphors (e.g., the 'Space Bubble' and 'Hula Hoop Activity') and everyday non-sexual peer scenarios such as sharing toys, hugging, carpet spacing, and line etiquette. Role-playing with predictable scripts ('Can I...?' / 'Yes, you can' or 'No thank you, please stop') empowers children with actionable language. Always ground instruction in body autonomy ('Your body belongs to you') and identify classroom trusted adults to ensure students know how to seek safety when a boundary is breached.

Understanding Personal Boundaries and Consent

Asking for Permission

Every Bubble Is Different

Key takeaways