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 at the playground and meet a new friend who speaks Spanish. What is the very first word you can say with a friendly smile to start a conversation?

In Spanish, the word for hello is **hola**. It sounds like *OH-lah* because the letter **h** is always silent in Spanish.

<!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%;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      gap: 16px;
    }

    .tiles-row {
      display: flex;
      gap: 10px;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 380px;
    }

    .tile-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      flex: 1;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .letter-card {
      width: 100%;
      aspect-ratio: 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34px;
      font-weight: 800;
      color: #1e2945;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
      position: relative;
    }

    .tile-col.silent .letter-card {
      color: #94a3b8;
      border-style: dashed;
      background: #f8fafc;
    }

    .tile-col.active .letter-card {
      border-color: #22b7ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.25);
      background: #f0f9ff;
    }

    .sound-badge {
      font-size: 14px;
      font-weight: 700;
      padding: 4px 6px;
      border-radius: 8px;
      background: #f1f5f9;
      color: #475569;
      text-align: center;
      width: 100%;
      white-space: nowrap;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .tile-col.active .sound-badge {
      background: #22b7ff;
      color: #ffffff;
    }

    .tile-col.silent.active .sound-badge {
      background: #64748b;
      color: #ffffff;
    }

    .display-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px 20px;
      width: 100%;
      max-width: 380px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    }

    .display-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .phonetic {
      font-size: 22px;
      font-weight: 800;
      color: #0284c7;
    }

    .meaning {
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
    }

    .btn-sound {
      background: #22b7ff;
      color: #ffffff;
      border: none;
      border-radius: 12px;
      padding: 10px 16px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
      transition: opacity 0.2s ease, box-shadow 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .btn-sound:active {
      opacity: 0.85;
      box-shadow: 0 1px 3px rgba(34, 183, 255, 0.25);
    }
  </style>
</head>
<body>

  <div class="tiles-row">
    <div class="tile-col silent" data-index="0">
      <div class="letter-card">H</div>
      <div class="sound-badge">🤫 Silent</div>
    </div>
    <div class="tile-col" data-index="1">
      <div class="letter-card">O</div>
      <div class="sound-badge">OH</div>
    </div>
    <div class="tile-col" data-index="2">
      <div class="letter-card">L</div>
      <div class="sound-badge">l</div>
    </div>
    <div class="tile-col" data-index="3">
      <div class="letter-card">A</div>
      <div class="sound-badge">ah</div>
    </div>
  </div>

  <div class="display-card">
    <div class="display-text">
      <div class="phonetic">OH-lah</div>
      <div class="meaning">Hello 👋</div>
    </div>
    <button class="btn-sound" id="playBtn">
      <span>Say</span> 🔊
    </button>
  </div>

  <script>
    const tiles = document.querySelectorAll('.tile-col');
    const playBtn = document.getElementById('playBtn');

    function highlightTile(index) {
      tiles.forEach((t, i) => {
        if (i === index) {
          t.classList.add('active');
        } else {
          t.classList.remove('active');
        }
      });
    }

    function speakWord() {
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const utterance = new SpeechSynthesisUtterance('¡Hola!');
        utterance.lang = 'es-ES';
        utterance.rate = 0.85;
        window.speechSynthesis.speak(utterance);
      }

      // Animate syllable sequence
      highlightTile(0);
      setTimeout(() => highlightTile(1), 350);
      setTimeout(() => {
        tiles.forEach((t, i) => {
          if (i >= 2) t.classList.add('active');
          else t.classList.remove('active');
        });
      }, 750);
      setTimeout(() => {
        tiles.forEach(t => t.classList.remove('active'));
      }, 1400);
    }

    tiles.forEach((tile, index) => {
      tile.addEventListener('click', () => {
        highlightTile(index);
        if ('speechSynthesis' in window) {
          window.speechSynthesis.cancel();
          const sounds = ['', 'o', 'la', 'a'];
          if (sounds[index]) {
            const utt = new SpeechSynthesisUtterance(sounds[index]);
            utt.lang = 'es-ES';
            utt.rate = 0.8;
            window.speechSynthesis.speak(utt);
          }
        }
      });
    });

    playBtn.addEventListener('click', speakWord);
  </script>
</body>
</html>

You can say **hola** to anyone at any time of day — whether you are arriving at school or greeting a neighbor on the sidewalk.

What if you want to be extra polite and greet someone specifically in the morning?

When you wake up and see your family, you can say **buenos días**, which means good morning.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Saludos del Día</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

    .main-wrapper {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Scene Sky Display */
    .sky-display {
      position: relative;
      width: 100%;
      height: 180px;
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: background 0.6s ease;
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
    }

    .sky-morning {
      background: linear-gradient(180deg, #fdba74 0%, #fed7aa 60%, #fef08a 100%);
    }

    .sky-afternoon {
      background: linear-gradient(180deg, #38bdf8 0%, #7dd3fc 60%, #bae6fd 100%);
    }

    .sky-night {
      background: linear-gradient(180deg, #1e1b4b 0%, #312e81 60%, #4338ca 100%);
    }

    .celestial-icon {
      font-size: 54px;
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
      user-select: none;
    }

    .time-badge {
      margin-top: 6px;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.85);
      color: #1e2945;
      backdrop-filter: blur(4px);
    }

    /* Greeting Banner */
    .greeting-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .greeting-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .spanish-word {
      font-size: 22px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.3px;
    }

    .english-translation {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
    }

    .audio-btn {
      background: #22b7ff;
      color: white;
      border: none;
      border-radius: 12px;
      width: 44px;
      height: 44px;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
      transition: opacity 0.2s, transform 0.1s;
      flex-shrink: 0;
    }

    .audio-btn:active {
      transform: scale(0.94);
      opacity: 0.9;
    }

    /* Timeline Stepper Buttons */
    .timeline-nav {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      width: 100%;
    }

    .time-step-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: border-color 0.2s, background-color 0.2s;
    }

    .time-step-btn .step-emoji {
      font-size: 20px;
    }

    .time-step-btn .step-label {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
    }

    .time-step-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
    }

    .time-step-btn.active .step-label {
      color: #0284c7;
    }
  </style>
</head>
<body>
  <div class="main-wrapper">
    
    <div id="sky" class="sky-display sky-morning">
      <div id="celestial" class="celestial-icon">🌅</div>
      <div id="timeBadge" class="time-badge">Morning • Mañana</div>
    </div>

    
    <div class="greeting-card">
      <div class="greeting-text">
        <span id="spanishGreeting" class="spanish-word">¡Buenos días!</span>
        <span id="englishMeaning" class="english-translation">Good morning</span>
      </div>
      <button id="listenBtn" class="audio-btn" title="Escuchar pronunciación" aria-label="Play greeting sound">
        🔊
      </button>
    </div>

    
    <div class="timeline-nav">
      <button class="time-step-btn active" data-idx="0">
        <span class="step-emoji">🌅</span>
        <span class="step-label">Morning</span>
      </button>
      <button class="time-step-btn" data-idx="1">
        <span class="step-emoji">☀️</span>
        <span class="step-label">Afternoon</span>
      </button>
      <button class="time-step-btn" data-idx="2">
        <span class="step-emoji">🌙</span>
        <span class="step-label">Night</span>
      </button>
    </div>
  </div>

  <script>
    const steps = [
      {
        skyClass: 'sky-morning',
        icon: '🌅',
        badge: 'Morning • Mañana',
        spanish: '¡Buenos días!',
        english: 'Good morning',
        speech: 'Buenos días'
      },
      {
        skyClass: 'sky-afternoon',
        icon: '☀️',
        badge: 'Afternoon • Tarde',
        spanish: '¡Buenas tardes!',
        english: 'Good afternoon',
        speech: 'Buenas tardes'
      },
      {
        skyClass: 'sky-night',
        icon: '🌙',
        badge: 'Night • Noche',
        spanish: '¡Buenas noches!',
        english: 'Good night',
        speech: 'Buenas noches'
      }
    ];

    let currentIdx = 0;

    const skyEl = document.getElementById('sky');
    const celestialEl = document.getElementById('celestial');
    const timeBadgeEl = document.getElementById('timeBadge');
    const spanishEl = document.getElementById('spanishGreeting');
    const englishEl = document.getElementById('englishMeaning');
    const buttons = document.querySelectorAll('.time-step-btn');
    const listenBtn = document.getElementById('listenBtn');

    function playTone(freq, dur = 0.25) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.start();
        osc.stop(ctx.currentTime + dur);
      } catch (e) {}
    }

    function speakGreeting(text) {
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const utterance = new SpeechSynthesisUtterance(text);
        utterance.lang = 'es-ES';
        utterance.rate = 0.85;
        window.speechSynthesis.speak(utterance);
      } else {
        playTone(523.25);
      }
    }

    function updateState(idx) {
      currentIdx = idx;
      const data = steps[idx];

      // Update Sky
      skyEl.className = `sky-display ${data.skyClass}`;
      celestialEl.textContent = data.icon;
      celestialEl.style.transform = 'scale(0.85)';
      setTimeout(() => {
        celestialEl.style.transform = 'scale(1)';
      }, 50);

      timeBadgeEl.textContent = data.badge;

      // Update Text
      spanishEl.textContent = data.spanish;
      englishEl.textContent = data.english;

      // Update Active Button
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
    }

    buttons.forEach((btn) => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.dataset.idx, 10);
        updateState(idx);
        playTone(440 + idx * 80, 0.15);
      });
    });

    listenBtn.addEventListener('click', () => {
      speakGreeting(steps[currentIdx].speech);
      listenBtn.style.transform = 'scale(0.9)';
      setTimeout(() => {
        listenBtn.style.transform = '';
      }, 150);
    });

    // Initialize
    updateState(0);
  </script>
</body>
</html>

As the day moves forward, the greeting changes to **buenas tardes** after lunchtime, and **buenas noches** when the stars come out at bedtime.

Playtime is over and your new friend is heading home — how do you say farewell until next time?

The most common way to say goodbye is **adiós**, which sounds like *ah-dee-OHS*.

<!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 {
      width: 100%;
      height: 100%;
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      user-select: none;
    }
    .grid {
      display: flex;
      gap: 16px;
      width: 100%;
      max-width: 520px;
      justify-content: center;
    }
    .scene-card {
      flex: 1;
      background: #ffffff;
      border-radius: 16px;
      padding: 18px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      outline: 2px solid transparent;
      transition: outline 0.2s ease, box-shadow 0.2s ease;
    }
    .scene-card:active {
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    .scene-card.active {
      outline: 2px solid #10b981;
    }
    .icon-stage {
      font-size: 52px;
      line-height: 1;
      margin-bottom: 12px;
      position: relative;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .wave-hand {
      display: inline-block;
      transform-origin: 70% 70%;
    }
    .active .waving {
      animation: wave 0.6s ease-in-out infinite alternate;
    }
    @keyframes wave {
      0% { transform: rotate(-10deg); }
      100% { transform: rotate(18deg); }
    }
    .bubble {
      background: #f0fdf4;
      border: 2px solid #10b981;
      border-radius: 12px;
      padding: 6px 14px;
      margin-bottom: 8px;
      font-size: 22px;
      font-weight: 800;
      color: #065f46;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .meaning {
      font-size: 15px;
      font-weight: 600;
      color: #6b7280;
      margin-bottom: 10px;
    }
    .tag {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #374151;
    }
    .active .tag-meet {
      background: #dcfce7;
      color: #15803d;
    }
    .active .tag-bye {
      background: #fee2e2;
      color: #b91c1c;
    }
    .speaker-btn {
      margin-top: 8px;
      font-size: 14px;
      background: #f3f4f6;
      border: none;
      border-radius: 20px;
      padding: 4px 10px;
      color: #4b5563;
      display: flex;
      align-items: center;
      gap: 4px;
      pointer-events: none;
    }
    .active .speaker-btn {
      background: #10b981;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="scene-card active" id="cardHola" onclick="selectCard('hola')">
      <div class="tag tag-meet">Meet ☀️</div>
      <div class="icon-stage">
        <span>🧑</span><span class="wave-hand waving">👋</span>
      </div>
      <div class="bubble">¡Hola!</div>
      <div class="meaning">Hello</div>
      <div class="speaker-btn"><span>🔊</span> Listen</div>
    </div>

    
    <div class="scene-card" id="cardAdios" onclick="selectCard('adios')">
      <div class="tag tag-bye">Leave 👋</div>
      <div class="icon-stage">
        <span>🚶</span><span class="wave-hand">👋</span>
      </div>
      <div class="bubble">¡Adiós!</div>
      <div class="meaning">Goodbye</div>
      <div class="speaker-btn"><span>🔊</span> Listen</div>
    </div>
  </div>

  <script>
    function playTone(freq, dur = 0.3) {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + dur);
      } catch (e) {}
    }

    function speakWord(text, pitch = 1.1) {
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const utter = new SpeechSynthesisUtterance(text);
        utter.lang = 'es-ES';
        utter.rate = 0.9;
        utter.pitch = pitch;
        window.speechSynthesis.speak(utter);
      }
    }

    function selectCard(type) {
      const cardHola = document.getElementById('cardHola');
      const cardAdios = document.getElementById('cardAdios');
      const handHola = cardHola.querySelector('.wave-hand');
      const handAdios = cardAdios.querySelector('.wave-hand');

      if (type === 'hola') {
        cardHola.classList.add('active');
        cardAdios.classList.remove('active');
        handHola.classList.add('waving');
        handAdios.classList.remove('waving');
        playTone(523.25, 0.25); // C5 cheerful
        speakWord('¡Hola!', 1.2);
      } else {
        cardAdios.classList.add('active');
        cardHola.classList.remove('active');
        handAdios.classList.add('waving');
        handHola.classList.remove('waving');
        playTone(392.00, 0.3); // G4 gentle
        speakWord('¡Adiós!', 1.0);
      }
    }
  </script>
</body>
</html>

If you know you will play together again soon, you can also say **hasta luego**, which means see you later.

Try practicing right now: wave one hand and say "¡Hola!", then give a goodbye wave and say "¡Adiós!" out loud.

languages

Saying Hello and Goodbye. Say basic greetings and farewells in another language

¡Arte y más! Lesson 1: Greetings & Goodbyes

Primary Modern Foreign Languages: Introductions, Greetings, and Farewells

Supplemental Spanish: Greetings, Salutations, and Daily Expressions

For 2nd-grade novice language learners, teaching must be anchored in Comprehensible Input (CI) and Total Physical Response (TPR). Pair each greeting and farewell with physical gestures (e.g., waving for 'Hola', checking a pretend wrist-watch for 'Buenos días', sleeping hands for 'Buenas noches'). Structure partner role-plays using visual dialogue mats and call-and-response songs to foster speaking confidence and accurate interpersonal communication.

Saying Hello and Goodbye

Saying Hello

Greetings by Time of Day

Saying Goodbye