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

If you hold up a crunchy, sweet, red fruit, you call it an **apple**.

A **language** is the system of words and sounds people use to talk to each other. People around the world speak different languages, so they use different words to name that exact same fruit!

<!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;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

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

    .fruit-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 12px;
      background: #ffffff;
      border: 2px solid transparent;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

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

    .display-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
      max-width: 460px;
      margin: auto 0;
    }

    .center-fruit {
      font-size: 64px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08));
      transition: transform 0.3s ease;
    }

    .words-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .word-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 12px;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      transition: background 0.2s ease;
    }

    .lang-tag {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .lang-word {
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
    }

    .tag-en { background: #f1f5f9; padding: 2px 6px; border-radius: 6px; }
    .tag-es { background: #fef3c7; padding: 2px 6px; border-radius: 6px; color: #92400e; }
    .tag-fr { background: #e0f2fe; padding: 2px 6px; border-radius: 6px; color: #075985; }
    .tag-zh { background: #fce7f3; padding: 2px 6px; border-radius: 6px; color: #9d174d; }
  </style>
</head>
<body>

  <div class="picker-row">
    <button class="fruit-btn active" data-index="0">🍎 Apple</button>
    <button class="fruit-btn" data-index="1">🍌 Banana</button>
    <button class="fruit-btn" data-index="2">🍊 Orange</button>
  </div>

  <div class="display-area">
    <div id="fruitIcon" class="center-fruit">🍎</div>

    <div class="words-grid">
      <div class="word-card">
        <span class="lang-tag tag-en">🇺🇸 English</span>
        <span id="wordEn" class="lang-word">Apple</span>
      </div>
      <div class="word-card">
        <span class="lang-tag tag-es">🇲🇽 Spanish</span>
        <span id="wordEs" class="lang-word">Manzana</span>
      </div>
      <div class="word-card">
        <span class="lang-tag tag-fr">🇫🇷 French</span>
        <span id="wordFr" class="lang-word">Pomme</span>
      </div>
      <div class="word-card">
        <span class="lang-tag tag-zh">🇨🇳 Mandarin</span>
        <span id="wordZh" class="lang-word">苹果 (Píngguǒ)</span>
      </div>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const fruits = [
      { emoji: "🍎", en: "Apple", es: "Manzana", fr: "Pomme", zh: "苹果 (Píngguǒ)" },
      { emoji: "🍌", en: "Banana", es: "Plátano", fr: "Banane", zh: "香蕉 (Xiāngjiāo)" },
      { emoji: "🍊", en: "Orange", es: "Naranja", fr: "Orange", zh: "橙子 (Chéngzi)" }
    ];

    const btns = $$('.fruit-btn');
    const icon = $('#fruitIcon');
    const wordEn = $('#wordEn');
    const wordEs = $('#wordEs');
    const wordFr = $('#wordFr');
    const wordZh = $('#wordZh');

    function showFruit(idx) {
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));
      const f = fruits[idx];
      icon.textContent = f.emoji;
      wordEn.textContent = f.en;
      wordEs.textContent = f.es;
      wordFr.textContent = f.fr;
      wordZh.textContent = f.zh;
    }

    btns.forEach((btn, idx) => {
      onTap(btn, () => showFruit(idx));
    });
  </script>
</body>
</html>

Do our favorite furry animals change their names around the world too?

A friendly puppy barks and wags its tail the exact same way anywhere on Earth.

Even though the dog is the same, each language gives it a special name with its own unique sounds.

<!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">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      min-height: 100%;
      user-select: none;
    }

    /* Central Meaning Node */
    .center-stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 8px;
      position: relative;
    }

    .dog-bubble {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #f0f9ff;
      border: 3px solid #38bdf8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 54px;
      box-shadow: 0 4px 16px rgba(56, 189, 248, 0.25);
      transition: transform 0.3s ease;
    }

    .meaning-badge {
      margin-top: 8px;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* Connecting Rays */
    .connector-line {
      width: 2px;
      height: 24px;
      background: #cbd5e1;
      margin: 4px 0;
      transition: background 0.3s ease;
    }

    /* Languages Grid */
    .words-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 420px;
      margin-bottom: 4px;
    }

    .word-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      text-align: left;
    }

    .word-card:active {
      transform: translateY(1px);
    }

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

    .flag-icon {
      font-size: 24px;
      line-height: 1;
    }

    .word-info {
      display: flex;
      flex-direction: column;
    }

    .lang-name {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
      text-transform: uppercase;
    }

    .lang-word {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
    }

    .word-card.active .lang-word {
      color: #0284c7;
    }

    /* Controls bar */
    .stepper-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.25s ease, transform 0.25s ease;
    }

    .dot.active {
      background: #38bdf8;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  
  <div class="center-stage">
    <div class="dog-bubble" id="dogIcon">🐕</div>
    <div class="meaning-badge">1 Same Meaning</div>
  </div>

  <div class="connector-line" id="ray"></div>

  
  <div class="words-grid">
    <button class="word-card active step" id="card-0" type="button">
      <span class="flag-icon">🇺🇸</span>
      <div class="word-info">
        <span class="lang-name">English</span>
        <span class="lang-word">Dog</span>
      </div>
    </button>

    <button class="word-card step" id="card-1" type="button">
      <span class="flag-icon">🇪🇸</span>
      <div class="word-info">
        <span class="lang-name">Spanish</span>
        <span class="lang-word">Perro</span>
      </div>
    </button>

    <button class="word-card step" id="card-2" type="button">
      <span class="flag-icon">🇫🇷</span>
      <div class="word-info">
        <span class="lang-name">French</span>
        <span class="lang-word">Chien</span>
      </div>
    </button>

    <button class="word-card step" id="card-3" type="button">
      <span class="flag-icon">🇩🇪</span>
      <div class="word-info">
        <span class="lang-name">German</span>
        <span class="lang-word">Hund</span>
      </div>
    </button>
  </div>

  
  <div class="stepper-nav">
    <div class="dot active" id="dot-0"></div>
    <div class="dot" id="dot-1"></div>
    <div class="dot" id="dot-2"></div>
    <div class="dot" id="dot-3"></div>
  </div>

  <script>
    const tones = [523.25, 587.33, 659.25, 698.46];

    function playBeep(idx) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.frequency.value = tones[idx % tones.length];
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.setValueAtTime(0.12, ctx.currentTime);
        gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.25);
        osc.start();
        osc.stop(ctx.currentTime + 0.25);
      } catch (e) {}
    }

    const cards = $$('.step');
    const dots = $$('.dot');
    const dog = $('#dogIcon');
    const ray = $('#ray');

    const player = new StepPlayer('.step', {
      interval: 3200,
      onChange: (idx) => {
        cards.forEach((c, i) => {
          c.classList.toggle('active', i === idx);
        });
        dots.forEach((d, i) => {
          d.classList.toggle('active', i === idx);
        });
        ray.style.background = '#38bdf8';
        dog.style.transform = 'scale(1.06)';
        setTimeout(() => {
          dog.style.transform = 'scale(1)';
        }, 250);
      }
    });

    player.start();

    cards.forEach((card, i) => {
      onTap(card, () => {
        playBeep(i);
        player.goTo(i);
      });
    });

    dots.forEach((dot, i) => {
      onTap(dot, () => {
        playBeep(i);
        player.goTo(i);
      });
    });
  </script>
</body>
</html>

Even though the sounds and letters change, the **meaning** stays completely identical.

How did we end up with so many different words for the same thing?

Long ago, groups of people lived far apart across oceans and mountains. Each group created their own words to share ideas and describe the things around them.

Learning words in another language helps you make new friends and discover new ways to talk about our shared world!

languages

Comparing Words Across Languages. Notice that different languages use different words for the same thing

PBS LearningMedia: World Languages & Cross-Cultural Vocabulary Collection

Colorín Colorado: Using Cognates and Comparing Words Across Languages

British Council: Primary Language Awareness and Comparing Languages Activities

When teaching this 2nd grade standard (TEKS 114.32(c)(1)(B)), begin with concrete realia and visual images (e.g., fruit, common animals, classroom objects) before introducing text to decouple the physical object from its linguistic label. Encourage multilingual students to share the words their families use at home for common items, validating all linguistic backgrounds and fostering metalinguistic awareness through partner discussions and sorting games.

Comparing Words Across Languages

One Animal, Many Names

Connecting Our World