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

When you are in your pajamas at breakfast, you might say, "More juice, please!" But what would you say if you were thirsty at your school desk?

We change the way we speak depending on where we are and who we are talking to.

At home, we use **informal** words, which means relaxed and cozy talking with our family.

You might use nicknames like "Nana" or "Buddy," and talk about your favorite toys anytime you want.

<!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>Talking at Home vs School</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

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

    .container {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .tabs {
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      max-width: 160px;
      padding: 10px 14px;
      font-size: 16px;
      font-weight: 700;
      border: 2px solid transparent;
      border-radius: 12px;
      cursor: pointer;
      background: #ffffff;
      color: #6b7280;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .tab-btn.active-home {
      background: #fef3c7;
      color: #d97706;
      border-color: #f59e0b;
    }

    .tab-btn.active-school {
      background: #d1fae5;
      color: #059669;
      border-color: #10b981;
    }

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

    @media (max-width: 440px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
    }

    .scene-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 2px solid #f1f5f9;
      transition: transform 0.2s ease, border-color 0.2s ease;
      cursor: pointer;
      position: relative;
    }

    .scene-card.highlight-home {
      border-color: #f59e0b;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
    }

    .scene-card.highlight-school {
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

    .header-badge {
      font-size: 16px;
      font-weight: 800;
      padding: 4px 14px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .badge-home {
      background: #fef3c7;
      color: #b45309;
    }

    .badge-school {
      background: #d1fae5;
      color: #047857;
    }

    .illustration {
      font-size: 44px;
      line-height: 1;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .speech-bubble {
      background: #f8fafc;
      border-radius: 12px;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      width: 100%;
      border: 1.5px solid #e2e8f0;
      position: relative;
    }

    .bubble-home {
      background: #fffbeb;
      border-color: #fde68a;
      color: #92400e;
    }

    .bubble-school {
      background: #ecfdf5;
      border-color: #a7f3d0;
      color: #065f46;
    }

    .rule-tag {
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f3f4f6;
      padding: 6px 12px;
      border-radius: 8px;
      width: 100%;
      justify-content: center;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="tabs">
      <button class="tab-btn active-home" id="btnHome" onclick="selectMode('home')">
        🏡 Home
      </button>
      <button class="tab-btn" id="btnSchool" onclick="selectMode('school')">
        🏫 School
      </button>
    </div>

    <div class="comparison-grid">
      
      <div class="scene-card highlight-home" id="cardHome" onclick="selectMode('home')">
        <div class="header-badge badge-home">🏡 Home</div>
        <div class="illustration">🛋️ 🧸</div>
        <div class="speech-bubble bubble-home">
          💬 "Hey Nana!"
        </div>
        <div class="rule-tag">
          🗣️ Talk anytime
        </div>
      </div>

      
      <div class="scene-card" id="cardSchool" onclick="selectMode('school')">
        <div class="header-badge badge-school">🏫 School</div>
        <div class="illustration">🙋 📚</div>
        <div class="speech-bubble bubble-school">
          💬 "Excuse me, Mr. Lee"
        </div>
        <div class="rule-tag">
          ✋ Raise hand
        </div>
      </div>
    </div>
  </div>

  <script>
    function selectMode(mode) {
      const btnHome = document.getElementById('btnHome');
      const btnSchool = document.getElementById('btnSchool');
      const cardHome = document.getElementById('cardHome');
      const cardSchool = document.getElementById('cardSchool');

      if (mode === 'home') {
        btnHome.className = 'tab-btn active-home';
        btnSchool.className = 'tab-btn';
        cardHome.className = 'scene-card highlight-home';
        cardSchool.className = 'scene-card';
      } else {
        btnHome.className = 'tab-btn';
        btnSchool.className = 'tab-btn active-school';
        cardHome.className = 'scene-card';
        cardSchool.className = 'scene-card highlight-school';
      }
    }
  </script>
</body>
</html>

What happens when you walk through the school doors with twenty classmates and a teacher?

At school, we use **formal** and polite words so everyone can learn together and hear clearly.

We say full sentences like, "May I please use the restroom?" instead of just "Bathroom!"

<!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>Talking at Home vs School</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      user-select: none;
    }

    body {
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 580px;
    }

    @media (max-width: 440px) {
      .main-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }

    .scene-card {
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 16px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
      cursor: pointer;
      position: relative;
    }

    .scene-card.active {
      border-color: #3b82f6;
      box-shadow: 0 4px 14px rgba(59, 130, 246, 0.15);
    }

    .place-badge {
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .character-stage {
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 54px;
      position: relative;
    }

    .speech-bubble {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 12px;
      padding: 10px 14px;
      margin-top: 10px;
      font-size: 15px;
      font-weight: 600;
      color: #0f172a;
      width: 100%;
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: background-color 0.25s ease, border-color 0.25s ease;
    }

    .scene-card.active .speech-bubble {
      background: #eff6ff;
      border-color: #93c5fd;
      color: #1d4ed8;
    }

    .rule-tag {
      margin-top: 10px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      background: #f1f5f9;
      padding: 4px 10px;
      border-radius: 20px;
    }

    .scene-card.active .rule-tag {
      background: #dbeafe;
      color: #1e40af;
    }

    .action-cue {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-top: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="scene-card" id="cardHome" onclick="selectScene('home')">
      <div class="place-badge">🏠 Home</div>
      <div class="character-stage">
        <span>🛋️ 🗣️</span>
      </div>
      <div class="speech-bubble">
        "Snack time!"
      </div>
      <div class="rule-tag">Casual</div>
    </div>

    
    <div class="scene-card active" id="cardSchool" onclick="selectScene('school')">
      <div class="place-badge">🏫 School</div>
      <div class="character-stage">
        <span>🙋‍♂️ 💬</span>
      </div>
      <div class="speech-bubble">
        "May I please have a snack?"
      </div>
      <div class="rule-tag">Full Sentence</div>
    </div>
  </div>

  <div class="action-cue" id="cueText">
    <span>✦ Tap to compare</span>
  </div>

  <script>
    function selectScene(type) {
      const homeCard = document.getElementById('cardHome');
      const schoolCard = document.getElementById('cardSchool');

      if (type === 'home') {
        homeCard.classList.add('active');
        schoolCard.classList.remove('active');
      } else {
        schoolCard.classList.add('active');
        homeCard.classList.remove('active');
      }
    }
  </script>
</body>
</html>

Why do we raise our hand before speaking in the classroom?

At home, you can often talk straight to your brother or dad while playing.

At school, we wait for our **turn** and use our quiet **inside voice** so all our friends have time to share.

<!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>Talking at Home vs School</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: center;
    min-height: 100%;
    padding: 12px;
  }
  .app-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .toggle-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .tab-btn {
    border: 2px solid transparent;
    background: #ffffff;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.25s ease;
  }
  .tab-btn.active-school {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #16a34a;
  }
  .tab-btn.active-home {
    background: #f5f3ff;
    color: #8b5cf6;
    border-color: #8b5cf6;
  }

  .scene-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid #e5e7eb;
  }

  .visual-stage {
    position: relative;
    background: #f8fafc;
    border-radius: 12px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    overflow: hidden;
  }

  .person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
  }
  .avatar {
    font-size: 38px;
    line-height: 1;
    position: relative;
  }
  .hand-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    font-size: 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .speech-bubble {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
    background: #e2e8f0;
    color: #64748b;
    white-space: nowrap;
    transition: all 0.3s ease;
  }
  .speaking .speech-bubble {
    background: #22c55e;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
  }
  .speaking-home .speech-bubble {
    background: #8b5cf6;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
  }

  .rules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .rule-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .rule-icon { font-size: 20px; }
  .rule-text { font-size: 13px; font-weight: 700; color: #1e2945; }
  .rule-sub { font-size: 11px; color: #6b7280; }

  .volume-meter {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .meter-label {
    font-size: 12px;
    font-weight: 700;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
  }
  .bar {
    width: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    transition: background 0.3s ease;
  }
  .b1 { height: 6px; }
  .b2 { height: 10px; }
  .b3 { height: 14px; }
  .b4 { height: 18px; }

  .school-mode .meter-quiet .b1,
  .school-mode .meter-quiet .b2 {
    background: #16a34a;
  }

  .home-mode .meter-quiet .b1,
  .home-mode .meter-quiet .b2,
  .home-mode .meter-quiet .b3,
  .home-mode .meter-quiet .b4 {
    background: #8b5cf6;
  }
</style>
</head>
<body>

<div class="app-container" id="app">
  <div class="toggle-row">
    <button class="tab-btn active-school" id="btnSchool" onclick="setMode('school')">
      🏫 At School
    </button>
    <button class="tab-btn" id="btnHome" onclick="setMode('home')">
      🏡 At Home
    </button>
  </div>

  <div class="scene-card" id="sceneCard">
    
    <div class="visual-stage" id="visualStage">
      <div class="person" id="p1">
        <span class="speech-bubble" id="b1">Wait turn</span>
        <div class="avatar">
          👧
          <span class="hand-badge" id="hand1">✋</span>
        </div>
      </div>

      <div class="person speaking" id="p2">
        <span class="speech-bubble" id="b2">My Turn ✦</span>
        <div class="avatar">
          👦
          <span class="hand-badge" id="hand2" style="opacity:0">✋</span>
        </div>
      </div>

      <div class="person" id="p3">
        <span class="speech-bubble" id="b3">Listening</span>
        <div class="avatar">
          🧒
          <span class="hand-badge" id="hand3" style="opacity:0">✋</span>
        </div>
      </div>
    </div>

    
    <div class="rules-grid">
      <div class="rule-pill">
        <span class="rule-icon" id="ruleIcon1">✋</span>
        <span class="rule-text" id="ruleTitle1">Raise Hand</span>
        <span class="rule-sub" id="ruleDesc1">Take turns</span>
      </div>
      <div class="rule-pill">
        <span class="rule-icon" id="ruleIcon2">🤫</span>
        <span class="rule-text" id="ruleTitle2">Inside Voice</span>
        <span class="rule-sub" id="ruleDesc2">Quiet & calm</span>
      </div>
    </div>

    
    <div class="volume-meter school-mode" id="volumeBox">
      <span class="meter-label" id="meterLabel">🤫 Quiet Inside Voice</span>
      <div class="bars meter-quiet">
        <div class="bar b1"></div>
        <div class="bar b2"></div>
        <div class="bar b3"></div>
        <div class="bar b4"></div>
      </div>
    </div>
  </div>
</div>

<script>
  let currentMode = 'school';
  let turnTimer = null;
  let turnIndex = 1;

  function setMode(mode) {
    currentMode = mode;
    const btnSchool = document.getElementById('btnSchool');
    const btnHome = document.getElementById('btnHome');
    const volumeBox = document.getElementById('volumeBox');
    
    if (mode === 'school') {
      btnSchool.className = 'tab-btn active-school';
      btnHome.className = 'tab-btn';
      volumeBox.className = 'volume-meter school-mode';

      document.getElementById('ruleIcon1').textContent = '✋';
      document.getElementById('ruleTitle1').textContent = 'Raise Hand';
      document.getElementById('ruleDesc1').textContent = 'Take turns';

      document.getElementById('ruleIcon2').textContent = '🤫';
      document.getElementById('ruleTitle2').textContent = 'Inside Voice';
      document.getElementById('ruleDesc2').textContent = 'Quiet & clear';

      document.getElementById('meterLabel').textContent = '🤫 Quiet Inside Voice';
      renderSchoolTurn();
    } else {
      btnHome.className = 'tab-btn active-home';
      btnSchool.className = 'tab-btn';
      volumeBox.className = 'volume-meter home-mode';

      document.getElementById('ruleIcon1').textContent = '💬';
      document.getElementById('ruleTitle1').textContent = 'Chat Freely';
      document.getElementById('ruleDesc1').textContent = 'Family time';

      document.getElementById('ruleIcon2').textContent = '🗣️';
      document.getElementById('ruleTitle2').textContent = 'Normal Voice';
      document.getElementById('ruleDesc2').textContent = 'Relaxed volume';

      document.getElementById('meterLabel').textContent = '🗣️ Louder Voice OK';
      renderHomeScene();
    }
  }

  function renderSchoolTurn() {
    const p1 = document.getElementById('p1');
    const p2 = document.getElementById('p2');
    const p3 = document.getElementById('p3');
    const b1 = document.getElementById('b1');
    const b2 = document.getElementById('b2');
    const b3 = document.getElementById('b3');
    const h1 = document.getElementById('hand1');
    const h2 = document.getElementById('hand2');
    const h3 = document.getElementById('hand3');

    [p1, p2, p3].forEach(p => p.className = 'person');
    [h1, h2, h3].forEach(h => { h.style.opacity = '0'; h.textContent = '✋'; });

    if (turnIndex === 0) {
      p1.className = 'person speaking';
      b1.textContent = 'My Turn ✦';
      b2.textContent = 'Listening';
      b3.textContent = 'Wait turn';
      h3.style.opacity = '1';
    } else if (turnIndex === 1) {
      p2.className = 'person speaking';
      b1.textContent = 'Wait turn';
      b2.textContent = 'My Turn ✦';
      b3.textContent = 'Listening';
      h1.style.opacity = '1';
    } else {
      p3.className = 'person speaking';
      b1.textContent = 'Listening';
      b2.textContent = 'Wait turn';
      b3.textContent = 'My Turn ✦';
      h2.style.opacity = '1';
    }
  }

  function renderHomeScene() {
    const p1 = document.getElementById('p1');
    const p2 = document.getElementById('p2');
    const p3 = document.getElementById('p3');
    const b1 = document.getElementById('b1');
    const b2 = document.getElementById('b2');
    const b3 = document.getElementById('b3');
    const h1 = document.getElementById('hand1');
    const h2 = document.getElementById('hand2');
    const h3 = document.getElementById('hand3');

    p1.className = 'person speaking-home';
    p2.className = 'person speaking-home';
    p3.className = 'person speaking-home';

    b1.textContent = 'Tell me!';
    b2.textContent = 'Look here!';
    b3.textContent = 'Haha! 😊';

    [h1, h2, h3].forEach(h => h.style.opacity = '0');
  }

  // Turn cycling in school mode
  setInterval(() => {
    if (currentMode === 'school') {
      turnIndex = (turnIndex + 1) % 3;
      renderSchoolTurn();
    }
  }, 3200);

  // Initial render
  setMode('school');
</script>

</body>
</html>

Next time you want a marker at school, try asking: "May I borrow that blue marker when you are done?"

Talking at Home and Talking at School. Explore how language is used differently at home and at school.

Speaking and Listening in Different Places: Home and School Contexts

Language for Interacting with Others: Foundation English (AC9EFLA01)

EYFS / KS1 English: Talking to Different People and in Different Situations

Effective early childhood instruction for AC9EFLA01 relies heavily on role-playing, puppet sociodramatic play, and explicit contrastive demonstrations. Teachers should validate diverse home languages and family communication styles through an asset-based lens while explicitly teaching the pragmatic codes, turn-taking cues, and courteous routines necessary for successful collective school participation.

Talking at Home and Talking at School

Cozy Home Words

Clear School Words

Taking Turns to Speak