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 land on a colorful alien planet, and everyone is chatting in a brand-new language! How would you share your ideas and make new friends?

Whenever humans share thoughts and feelings in any language, we call that **communication**.

We use **four superpowers** to communicate: **listening**, **speaking**, **reading**, and **writing**.

<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      gap: 14px;
      user-select: none;
    }
    .filters {
      display: flex;
      gap: 8px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 999px;
    }
    .filter-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .filter-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 480px;
    }
    .power-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 2px solid transparent;
      cursor: pointer;
      transition: opacity 0.25s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      position: relative;
    }
    .power-card.dimmed {
      opacity: 0.28;
    }
    .power-card.active {
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.22);
    }
    .icon {
      font-size: 38px;
      line-height: 1;
    }
    .label {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 8px;
      letter-spacing: 0.5px;
    }
    .badge-in {
      background: #e0f2fe;
      color: #0284c7;
    }
    .badge-out {
      background: #fef3c7;
      color: #d97706;
    }
    .power-card[data-type="in"].active {
      border-color: #38bdf8;
    }
    .power-card[data-type="out"].active {
      border-color: #fbbf24;
    }
  </style>
</head>
<body>

  <div class="filters">
    <button class="filter-btn active" data-filter="all">All 4</button>
    <button class="filter-btn" data-filter="in">📥 In</button>
    <button class="filter-btn" data-filter="out">📤 Out</button>
  </div>

  <div class="grid">
    <div class="power-card active" data-type="in">
      <span class="icon">👂</span>
      <span class="label">Listening</span>
      <span class="badge badge-in">📥 IN</span>
    </div>

    <div class="power-card active" data-type="out">
      <span class="icon">🗣️</span>
      <span class="label">Speaking</span>
      <span class="badge badge-out">📤 OUT</span>
    </div>

    <div class="power-card active" data-type="in">
      <span class="icon">👀</span>
      <span class="label">Reading</span>
      <span class="badge badge-in">📥 IN</span>
    </div>

    <div class="power-card active" data-type="out">
      <span class="icon">✍️</span>
      <span class="label">Writing</span>
      <span class="badge badge-out">📤 OUT</span>
    </div>
  </div>

  <script>
    const filterBtns = document.querySelectorAll('.filter-btn');
    const cards = document.querySelectorAll('.power-card');

    function setFilter(filter) {
      filterBtns.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.filter === filter);
      });

      cards.forEach(card => {
        const matches = filter === 'all' || card.dataset.type === filter;
        card.classList.toggle('dimmed', !matches);
        card.classList.toggle('active', matches);
      });
    }

    filterBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        setFilter(btn.dataset.filter);
      });
    });

    cards.forEach(card => {
      card.addEventListener('click', () => {
        const type = card.dataset.type;
        const currentActiveFilter = document.querySelector('.filter-btn.active').dataset.filter;
        if (currentActiveFilter === type) {
          setFilter('all');
        } else {
          setFilter(type);
        }
      });
    });
  </script>
</body>
</html>

Did you know that two of these powers take words in, while two of them send words out?

When you catch clues from the world, you are taking words **in**.

Your ears take words in by **listening**, and your eyes take words in by **reading**.

When you share your own ideas, you send words **out**.

Your mouth sends words out by **speaking**, and your hands send words out by **writing**.

<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
      width: 100%;
      max-width: 440px;
    }

    .filter-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      font-size: 14px;
      font-weight: 700;
      padding: 8px 6px;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
      user-select: none;
    }

    .filter-btn.active-all {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
    .filter-btn.active-out {
      background: #f97316;
      color: #ffffff;
      border-color: #f97316;
    }
    .filter-btn.active-in {
      background: #22c55e;
      color: #ffffff;
      border-color: #22c55e;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 440px;
    }

    .tile {
      background: #ffffff;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 2px solid transparent;
      transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease;
      cursor: pointer;
      user-select: none;
    }

    .tile.dimmed {
      opacity: 0.3;
    }

    .tile-out.active {
      border-color: #f97316;
      background: #fff7ed;
    }

    .tile-in.active {
      border-color: #22c55e;
      background: #f0fdf4;
    }

    .icon-wrap {
      font-size: 38px;
      line-height: 1;
      margin-bottom: 6px;
      position: relative;
    }

    .badge {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 999px;
      margin-bottom: 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .badge-out {
      background: #ffedd5;
      color: #c2410c;
    }

    .badge-in {
      background: #dcfce7;
      color: #15803d;
    }

    .label {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
    }

    .flow-arrow {
      font-size: 13px;
      font-weight: 900;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="filter-btn active-all" id="btnAll" onclick="setMode('all')">
      All 4
    </button>
    <button class="filter-btn" id="btnOut" onclick="setMode('out')">
      <span class="flow-arrow">↗</span> Send OUT
    </button>
    <button class="filter-btn" id="btnIn" onclick="setMode('in')">
      <span class="flow-arrow">↙</span> Take IN
    </button>
  </div>

  <div class="grid">
    
    <div class="tile tile-out active" id="tileSpeak" onclick="setMode('out')">
      <div class="icon-wrap">🗣️</div>
      <div class="badge badge-out">↗ OUT</div>
      <div class="label">Speaking</div>
    </div>

    
    <div class="tile tile-out active" id="tileWrite" onclick="setMode('out')">
      <div class="icon-wrap">✍️</div>
      <div class="badge badge-out">↗ OUT</div>
      <div class="label">Writing</div>
    </div>

    
    <div class="tile tile-in active" id="tileListen" onclick="setMode('in')">
      <div class="icon-wrap">👂</div>
      <div class="badge badge-in">↙ IN</div>
      <div class="label">Listening</div>
    </div>

    
    <div class="tile tile-in active" id="tileRead" onclick="setMode('in')">
      <div class="icon-wrap">👀</div>
      <div class="badge badge-in">↙ IN</div>
      <div class="label">Reading</div>
    </div>
  </div>

  <script>
    let currentMode = 'all';

    function setMode(mode) {
      currentMode = mode;

      const btnAll = document.getElementById('btnAll');
      const btnOut = document.getElementById('btnOut');
      const btnIn = document.getElementById('btnIn');

      btnAll.className = 'filter-btn' + (mode === 'all' ? ' active-all' : '');
      btnOut.className = 'filter-btn' + (mode === 'out' ? ' active-out' : '');
      btnIn.className = 'filter-btn' + (mode === 'in' ? ' active-in' : '');

      const outTiles = [document.getElementById('tileSpeak'), document.getElementById('tileWrite')];
      const inTiles = [document.getElementById('tileListen'), document.getElementById('tileRead')];

      if (mode === 'all') {
        outTiles.forEach(t => { t.classList.remove('dimmed'); t.classList.add('active'); });
        inTiles.forEach(t => { t.classList.remove('dimmed'); t.classList.add('active'); });
      } else if (mode === 'out') {
        outTiles.forEach(t => { t.classList.remove('dimmed'); t.classList.add('active'); });
        inTiles.forEach(t => { t.classList.add('dimmed'); t.classList.remove('active'); });
      } else if (mode === 'in') {
        outTiles.forEach(t => { t.classList.add('dimmed'); t.classList.remove('active'); });
        inTiles.forEach(t => { t.classList.remove('dimmed'); t.classList.add('active'); });
      }
    }
  </script>
</body>
</html>

What does this look like when you meet a friend who speaks a new language?

Let's watch how Maya uses all four powers at the playground with her new friend, Mateo.

<!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>4 Communication Powers</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    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;
      user-select: none;
    }

    /* Stage Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 230px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 10px 20px;
    }

    /* Characters */
    .char {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      z-index: 2;
    }
    .char-avatar {
      font-size: 52px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    }
    .char-name {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* Action Center */
    .action-zone {
      position: relative;
      width: 140px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
    }

    /* Scene-specific visual states */
    .scene-view {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.85);
      transition: opacity 0.35s ease, transform 0.35s ease;
      pointer-events: none;
    }
    .scene-view.active {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }

    .main-icon {
      font-size: 48px;
      line-height: 1;
      margin-bottom: 6px;
    }

    .flow-arrow {
      font-size: 24px;
      color: #22b7ff;
      font-weight: bold;
      animation: pulse 1.5s infinite ease-in-out;
    }

    .badge-tag {
      background: #e0f2fe;
      color: #0284c7;
      font-size: 14px;
      font-weight: 800;
      padding: 4px 12px;
      border-radius: 20px;
      letter-spacing: 0.3px;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 0.7; }
      50% { transform: scale(1.15); opacity: 1; }
    }

    /* Controls Bar */
    .controls {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 480px;
      margin-top: 12px;
    }

    .power-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;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
      transition: border-color 0.2s ease, background 0.2s ease, transform 0.1s ease;
    }

    .power-btn .btn-icon {
      font-size: 22px;
      line-height: 1;
    }
    .power-btn .btn-label {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
    }

    .power-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px #22b7ff33;
    }
    .power-btn.active .btn-label {
      color: #0284c7;
    }

    /* Bottom Playbar */
    .bottom-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 10px;
      width: 100%;
      max-width: 480px;
    }

    .play-toggle {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .play-toggle:hover {
      background: #f1f5f9;
    }

    .dots-nav {
      display: flex;
      gap: 6px;
    }
    .dot-item {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }
    .dot-item.active {
      background: #22b7ff;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  
  <div class="stage">
    
    <div class="char">
      <div class="char-avatar">👦🏽</div>
      <div class="char-name">Mateo</div>
    </div>

    
    <div class="action-zone">
      
      <div class="scene-view active" id="view-0">
        <div class="main-icon">👂</div>
        <div class="flow-arrow">◂ 〰️ 🎵</div>
        <div class="badge-tag">Listen</div>
      </div>

      
      <div class="scene-view" id="view-1">
        <div class="main-icon">🗣️</div>
        <div class="flow-arrow">💬 ▸</div>
        <div class="badge-tag">Speak</div>
      </div>

      
      <div class="scene-view" id="view-2">
        <div class="main-icon">📖</div>
        <div class="flow-arrow">👀 🪧</div>
        <div class="badge-tag">Read</div>
      </div>

      
      <div class="scene-view" id="view-3">
        <div class="main-icon">✏️</div>
        <div class="flow-arrow">📝 ✦</div>
        <div class="badge-tag">Write</div>
      </div>
    </div>

    
    <div class="char">
      <div class="char-avatar">👧🏾</div>
      <div class="char-name">Maya</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="power-btn active" id="btn-0" onclick="setStep(0)">
      <span class="btn-icon">👂</span>
      <span class="btn-label">Listen</span>
    </button>
    <button class="power-btn" id="btn-1" onclick="setStep(1)">
      <span class="btn-icon">🗣️</span>
      <span class="btn-label">Speak</span>
    </button>
    <button class="power-btn" id="btn-2" onclick="setStep(2)">
      <span class="btn-icon">📖</span>
      <span class="btn-label">Read</span>
    </button>
    <button class="power-btn" id="btn-3" onclick="setStep(3)">
      <span class="btn-icon">✏️</span>
      <span class="btn-label">Write</span>
    </button>
  </div>

  
  <div class="bottom-bar">
    <button class="play-toggle" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span>
      <span id="playText">Pause</span>
    </button>
    <div class="dots-nav">
      <div class="dot-item active" onclick="setStep(0)"></div>
      <div class="dot-item" onclick="setStep(1)"></div>
      <div class="dot-item" onclick="setStep(2)"></div>
      <div class="dot-item" onclick="setStep(3)"></div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;
    const totalSteps = 4;

    function setStep(idx) {
      currentStep = idx;
      for (let i = 0; i < totalSteps; i++) {
        document.getElementById('view-' + i).classList.toggle('active', i === idx);
        document.getElementById('btn-' + i).classList.toggle('active', i === idx);
        document.querySelectorAll('.dot-item')[i].classList.toggle('active', i === idx);
      }
    }

    function nextStep() {
      setStep((currentStep + 1) % totalSteps);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playIcon').textContent = isPlaying ? '⏸' : '▶';
      document.getElementById('playText').textContent = isPlaying ? 'Pause' : 'Play';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    // Auto-start pacing
    startTimer();
  </script>
</body>
</html>

First, Maya tuned her ears to Mateo's voice to **listen** to the new sound.

Then she used her mouth to **speak** the word back, checked the sign with her eyes to **read**, and used chalk to **write**!

The next time you hear a new word on a show or on the playground, which superpower will you try first?

languages

The Communication Goal: Speaking, Listening, Reading, and Writing. Understand the four ways we communicate in any language

BBC Bitesize Primary: Speaking, Listening, Reading, and Writing Skills

IXL Grade 2 Language Arts: Communication, Active Listening, and Expressive Skills

TEKS Chapter 114.32: Languages Other Than English (LOTE) Communication Skills Framework

When teaching this lesson to 2nd graders within a LOTE/ESL listening track, use multimodal anchors (Total Physical Response gestures for each domain: cupping the ear for listening, pointing to the mouth for speaking, opening hands like a book for reading, and mimicking writing with fingers). Reinforce that whether someone communicates in English, Spanish, ASL, or any world language, these four pillars remain the universal pathways of human interaction.

The Communication Goal: Speaking, Listening, Reading, and Writing

Taking In vs. Sharing Out

A Day at the Park