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 finding a secret clubhouse where all the kids talk using a cool new code! A **language** is a system of words and sounds that people use to share ideas and feelings.

When you learn a new language, you are not just memorizing words. You are exploring the **Four Pillars of Language**: **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, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
    }

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

    .btn-item {
      flex: 1;
      padding: 8px 6px;
      border-radius: 12px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .btn-item.active {
      border-color: #22b7ff;
      background: #eaf8ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.25);
    }

    /* Main Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 230px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
    }

    /* Character Cards */
    .person {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 90px;
      position: relative;
      z-index: 2;
    }

    .thought-bubble {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #22b7ff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.06);
      margin-bottom: 8px;
      transition: opacity 0.3s ease;
    }

    .avatar {
      font-size: 48px;
      line-height: 1;
    }

    .label {
      font-size: 13px;
      font-weight: 700;
      color: #6b7280;
      margin-top: 4px;
    }

    /* Center Message Track */
    .track {
      position: absolute;
      left: 100px;
      right: 100px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .path-line {
      position: absolute;
      width: 100%;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }

    .word-badge {
      position: relative;
      z-index: 2;
      background: #ffffff;
      border: 2px solid #22b7ff;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 800;
      color: #0284c7;
      box-shadow: 0 3px 8px rgba(34, 183, 255, 0.2);
      transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
    }

    .lang-label {
      margin-top: 16px;
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Language Switcher */
    .lang-bar {
      display: flex;
      gap: 6px;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 20px;
    }

    .lang-btn {
      padding: 4px 12px;
      border-radius: 16px;
      border: none;
      background: transparent;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }

    .lang-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-item active" onclick="setIdea(0)">
      <span>🐱</span> Cat
    </button>
    <button class="btn-item" onclick="setIdea(1)">
      <span>🍎</span> Apple
    </button>
    <button class="btn-item" onclick="setIdea(2)">
      <span>☀️</span> Sun
    </button>
  </div>

  
  <div class="stage">
    
    <div class="person">
      <div class="thought-bubble" id="speakerIdea">🐱</div>
      <div class="avatar">👧</div>
      <div class="label">Idea</div>
    </div>

    
    <div class="track">
      <div class="path-line"></div>
      <div class="word-badge" id="wordBadge">"Cat" 💬</div>
      <div class="lang-label" id="langName">English</div>
    </div>

    
    <div class="person">
      <div class="thought-bubble" id="listenerIdea">🐱</div>
      <div class="avatar">👦</div>
      <div class="label">Idea</div>
    </div>
  </div>

  
  <div class="lang-bar">
    <button class="lang-btn active" onclick="setLang('en')">English</button>
    <button class="lang-btn" onclick="setLang('es')">Español</button>
    <button class="lang-btn" onclick="setLang('asl')">Sign 🤟</button>
  </div>

  <script>
    const data = [
      { emoji: '🐱', en: '"Cat"', es: '"Gato"', asl: '🐱 (Sign)' },
      { emoji: '🍎', en: '"Apple"', es: '"Manzana"', asl: '🍎 (Sign)' },
      { emoji: '☀️', en: '"Sun"', es: '"Sol"', asl: '☀️ (Sign)' }
    ];

    let currentIdea = 0;
    let currentLang = 'en';

    function playTone(f = 520, d = 0.15) {
      try {
        const c = new (window.AudioContext || window.webkitAudioContext)();
        const o = c.createOscillator();
        const g = c.createGain();
        o.frequency.value = f;
        o.connect(g);
        g.connect(c.destination);
        g.gain.setValueAtTime(0.15, c.currentTime);
        g.gain.exponentialRampToValueAtTime(0.001, c.currentTime + d);
        o.start();
        o.stop(c.currentTime + d);
      } catch (e) {}
    }

    function update() {
      const item = data[currentIdea];
      const sIdea = document.getElementById('speakerIdea');
      const lIdea = document.getElementById('listenerIdea');
      const badge = document.getElementById('wordBadge');
      const langLabel = document.getElementById('langName');

      // Update speaker idea
      sIdea.textContent = item.emoji;

      // Pulse traveling word animation
      badge.style.opacity = '0';
      badge.style.transform = 'translateX(-30px)';
      lIdea.style.opacity = '0.3';

      setTimeout(() => {
        badge.textContent = item[currentLang] + (currentLang === 'asl' ? '' : ' 💬');
        badge.style.opacity = '1';
        badge.style.transform = 'translateX(0px)';
        langLabel.textContent = currentLang === 'en' ? 'English' : currentLang === 'es' ? 'Español' : 'Sign Language';

        setTimeout(() => {
          lIdea.textContent = item.emoji;
          lIdea.style.opacity = '1';
        }, 300);
      }, 150);
    }

    function setIdea(idx) {
      currentIdea = idx;
      document.querySelectorAll('.btn-item').forEach((b, i) => {
        b.classList.toggle('active', i === idx);
      });
      playTone(587.33);
      update();
    }

    function setLang(lang) {
      currentLang = lang;
      const langs = ['en', 'es', 'asl'];
      document.querySelectorAll('.lang-btn').forEach((b, i) => {
        b.classList.toggle('active', langs[i] === lang);
      });
      playTone(659.25);
      update();
    }

    // Initialize state
    update();
  </script>
</body>
</html>

How do these four skills help you talk with a new friend? Let's check out the sound skills first.

Listening means using your ears to catch new words and figure out what they mean.

Speaking means using your voice and mouth to say those words so others can understand you.

<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    /* Language selection tabs */
    .lang-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
    }

    .tab-btn {
      background: #f1f5f9;
      border: 2px solid transparent;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .tab-btn.active {
      background: #e0f2fe;
      border-color: #22b7ff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.25);
    }

    /* Main visual stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
    }

    /* Character pillars */
    .person-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 90px;
      z-index: 2;
    }

    .avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: #f8fafc;
      border: 3px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    }

    .thought-bubble {
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 12px;
      padding: 6px 10px;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Central transmission zone */
    .bridge-area {
      flex: 1;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 8px;
    }

    .wave-line {
      position: absolute;
      width: 80%;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      z-index: 1;
    }

    .travel-bubble {
      position: absolute;
      z-index: 3;
      background: #22b7ff;
      color: #ffffff;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 16px;
      font-weight: 800;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.4);
      display: flex;
      align-items: center;
      gap: 6px;
      transform: translateX(-50%);
      left: 50%;
      transition: all 0.35s ease;
    }

    .sound-pulse {
      position: absolute;
      font-size: 20px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* Bottom label / concept indicator */
    .indicator-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 24px;
      padding: 8px 20px;
      font-size: 14px;
      font-weight: 700;
      color: #475569;
    }

    .flow-tag {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .flow-arrow {
      color: #94a3b8;
      font-weight: 900;
    }
  </style>
</head>
<body>

  
  <div class="lang-tabs" role="tablist">
    <button class="tab-btn active" onclick="selectLang(0)" id="btn0" role="tab">🇺🇸 English</button>
    <button class="tab-btn" onclick="selectLang(1)" id="btn1" role="tab">🇲🇽 Español</button>
    <button class="tab-btn" onclick="selectLang(2)" id="btn2" role="tab">🇫🇷 Français</button>
    <button class="tab-btn" onclick="selectLang(3)" id="btn3" role="tab">🤟 Sign</button>
  </div>

  
  <div class="stage">
    
    <div class="person-card">
      <div class="thought-bubble" id="leftThought">
        <span>💡</span> Idea
      </div>
      <div class="avatar">👧</div>
    </div>

    
    <div class="bridge-area">
      <div class="wave-line"></div>
      <div class="travel-bubble" id="wordBubble">
        <span id="speechText">"Hello!"</span>
      </div>
    </div>

    
    <div class="person-card">
      <div class="thought-bubble" id="rightThought">
        <span>💡</span> Idea
      </div>
      <div class="avatar">👦</div>
    </div>
  </div>

  
  <div class="indicator-bar">
    <div class="flow-tag"><span>💭</span> Idea</div>
    <span class="flow-arrow">➔</span>
    <div class="flow-tag"><span style="color:#0284c7;">💬</span> Code</div>
    <span class="flow-arrow">➔</span>
    <div class="flow-tag"><span>🤝</span> Shared</div>
  </div>

  <script>
    const languages = [
      { text: '"Hello!"', emoji: '👋' },
      { text: '"¡Hola!"', emoji: '👋' },
      { text: '"Bonjour!"', emoji: '👋' },
      { text: '👋 Wave', emoji: '✨' }
    ];

    let currentIdx = 0;
    let timer = null;

    function renderState(idx) {
      currentIdx = idx;

      // Update button styles
      for (let i = 0; i < languages.length; i++) {
        const btn = document.getElementById('btn' + i);
        if (btn) {
          if (i === idx) {
            btn.classList.add('active');
          } else {
            btn.classList.remove('active');
          }
        }
      }

      // Animate word bubble
      const bubble = document.getElementById('wordBubble');
      const text = document.getElementById('speechText');
      const rightThought = document.getElementById('rightThought');

      // Pulse animation sequence
      bubble.style.transform = 'translateX(-50%) scale(0.9)';
      rightThought.style.opacity = '0.5';

      setTimeout(() => {
        text.textContent = languages[idx].text;
        bubble.style.transform = 'translateX(-50%) scale(1.05)';
        rightThought.style.opacity = '1';
      }, 150);

      setTimeout(() => {
        bubble.style.transform = 'translateX(-50%) scale(1)';
      }, 350);
    }

    function selectLang(idx) {
      if (timer) clearInterval(timer);
      renderState(idx);
      startAutoCycle();
    }

    function startAutoCycle() {
      timer = setInterval(() => {
        const next = (currentIdx + 1) % languages.length;
        renderState(next);
      }, 3500);
    }

    // Initialize on load
    renderState(0);
    startAutoCycle();
  </script>
</body>
</html>

Sound lets you chat in person, but what if your friend is far away or you want to read a story?

Reading happens when your eyes see written letters and turn them into meaning in your mind.

Writing happens when you use a pencil or a keyboard to put your thoughts into words for someone else to see.

<!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; font-family: system-ui, -apple-system, sans-serif; }
    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .nav-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      width: 100%;
      max-width: 480px;
    }

    .pillar-btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    }

    .pillar-btn .icon { font-size: 20px; }
    .pillar-btn.active {
      border-color: #22b7ff;
      background: #eaf7ff;
      box-shadow: 0 0 0 2px #22b7ff33;
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 220px;
      background: #ffffff;
      border-radius: 14px;
      border: 1px solid #e6e6e6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin: 10px 0;
    }

    .badge {
      position: absolute;
      top: 12px;
      font-size: 14px;
      font-weight: 800;
      padding: 4px 12px;
      border-radius: 20px;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .badge.in { background: #dcfce7; color: #15803d; }
    .badge.out { background: #ffedd5; color: #c2410c; }

    .flow-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      padding: 0 20px;
      margin-top: 18px;
    }

    .node {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      background: #f8f9fa;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      font-size: 34px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      z-index: 2;
    }

    .arrow-track {
      flex: 1;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .arrow-line {
      width: 100%;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      position: relative;
      overflow: visible;
    }

    .arrow-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: #22b7ff;
      border-radius: 3px;
    }

    .moving-particle {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
      transition: left 0.8s ease-in-out;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 480px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>

  <div class="nav-row">
    <button class="pillar-btn active" id="btn-0">
      <span class="icon">👂</span>
      <span>Listen</span>
    </button>
    <button class="pillar-btn" id="btn-1">
      <span class="icon">🗣️</span>
      <span>Speak</span>
    </button>
    <button class="pillar-btn" id="btn-2">
      <span class="icon">📖</span>
      <span>Read</span>
    </button>
    <button class="pillar-btn" id="btn-3">
      <span class="icon">✍️</span>
      <span>Write</span>
    </button>
  </div>

  <div class="stage">
    <div id="typeBadge" class="badge in">IN 📥</div>

    <div class="flow-container">
      <div class="node" id="leftNode">🎵</div>
      <div class="arrow-track">
        <div class="arrow-line">
          <div class="arrow-fill" id="arrowFill"></div>
        </div>
        <div class="moving-particle" id="particle">✨</div>
      </div>
      <div class="node" id="rightNode">🧠</div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="playBtn">
      <span id="playIcon">⏸</span>
      <span id="playText">Auto</span>
    </button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const data = [
      { name: "Listen", type: "IN 📥", inClass: true, left: "🎵", right: "🧠", particle: "💬", dir: "right" },
      { name: "Speak",  type: "OUT 📤", inClass: false, left: "🧠", right: "🗣️", particle: "💬", dir: "right" },
      { name: "Read",   type: "IN 📥", inClass: true, left: "📖", right: "🧠", particle: "🔤", dir: "right" },
      { name: "Write",  type: "OUT 📤", inClass: false, left: "🧠", right: "✍️", particle: "📝", dir: "right" }
    ];

    let current = 0;
    let timer = null;
    let isPlaying = true;

    function render(idx) {
      current = idx;
      $$('.pillar-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      const d = data[idx];
      const badge = $('#typeBadge');
      badge.textContent = d.type;
      badge.className = 'badge ' + (d.inClass ? 'in' : 'out');

      $('#leftNode').textContent = d.left;
      $('#rightNode').textContent = d.right;
      $('#arrowFill').style.background = d.inClass ? '#22c55e' : '#f97316';

      const p = $('#particle');
      p.textContent = d.particle;
      p.style.transition = 'none';
      p.style.left = '0%';

      setTimeout(() => {
        p.style.transition = 'left 1.4s ease-in-out';
        p.style.left = 'calc(100% - 20px)';
      }, 50);
    }

    function next() {
      render((current + 1) % data.length);
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(next, 3200);
      isPlaying = true;
      $('#playIcon').textContent = '⏸';
    }

    function stopTimer() {
      clearInterval(timer);
      isPlaying = false;
      $('#playIcon').textContent = '▶';
    }

    data.forEach((_, i) => {
      onTap($('#btn-' + i), () => {
        render(i);
        if (isPlaying) startTimer();
      });
    });

    onTap($('#playBtn'), () => {
      if (isPlaying) {
        stopTimer();
      } else {
        next();
        startTimer();
      }
    });

    render(0);
    startTimer();
  </script>
</body>
</html>

Every time you sing a song, read a picture book, or say hello in a new way, you connect these **Four Pillars** to build your language power.

languages

What Does It Mean to Learn a Language?. Understand that learning a language means listening, speaking, reading, and writing in a new way

PBS LearningMedia: World Languages & Early Language Explorations

BBC Bitesize Primary: Learning Languages (Listening, Speaking, Reading & Writing)

TEKS Elementary Languages Other Than English (LOTE) & Integrated Strands Framework

For 2nd grade learners, introduce the four language domains using the 'Body Parts Anchor Chart' (Ears for Listening, Mouth for Speaking, Eyes for Reading, Hands for Writing). Use multi-sensory Total Physical Response (TPR) where students point to their ears, mouth, eyes, or hands whenever an activity changes modalities. Emphasize that learning any world language is a dynamic, multi-modal adventure rather than rote memorization.

What Does It Mean to Learn a Language?

Sound Skills: Listening and Speaking

Print Skills: Reading and Writing