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

Have you ever wondered what a tiny kitten, a swimming tadpole, and you all have in common?

You are all the young of living creatures, and scientists use one special word to describe all of you.

An **offspring** is the baby or young produced by a parent animal, including humans.

Living things produce offspring so that their kind can continue living on Earth for generations to come.

<!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;
      user-select: none;
    }
    body {
      padding: 16px;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 18px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .tab-btn {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      padding: 8px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .tab-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.3);
    }
    .stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 520px;
      padding: 24px 16px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    }
    .entity-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 12px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #edf2f7;
    }
    .role-badge {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 8px;
      border-radius: 6px;
      margin-bottom: 12px;
    }
    .role-parent {
      background: #e0f2fe;
      color: #0369a1;
    }
    .role-offspring {
      background: #dcfce7;
      color: #15803d;
    }
    .emoji-box {
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      transition: transform 0.3s ease;
    }
    .emoji-parent {
      font-size: 54px;
    }
    .emoji-offspring {
      font-size: 36px;
    }
    .label {
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
    }
    .arrow-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
    }
    .arrow-icon {
      font-size: 24px;
      color: #94a3b8;
      transition: transform 0.3s ease, color 0.3s ease;
    }
    @media (max-width: 400px) {
      .emoji-parent { font-size: 44px; }
      .emoji-offspring { font-size: 30px; }
      .role-badge { font-size: 11px; }
      .label { font-size: 14px; }
      .tab-btn { font-size: 13px; padding: 6px 10px; }
      .stage { gap: 8px; padding: 16px 10px; }
    }
  </style>
</head>
<body>
  <div class="tabs">
    <button class="tab-btn active" onclick="setExample(0)">🐕 Dog</button>
    <button class="tab-btn" onclick="setExample(1)">🐔 Hen</button>
    <button class="tab-btn" onclick="setExample(2)">🌳 Tree</button>
    <button class="tab-btn" onclick="setExample(3)">🧑 Human</button>
  </div>

  <div class="stage">
    <div class="entity-card">
      <div class="role-badge role-parent">Parent</div>
      <div class="emoji-box emoji-parent" id="parentEmoji">🐕</div>
      <div class="label" id="parentLabel">Dog</div>
    </div>

    <div class="arrow-container">
      <span class="arrow-icon">➔</span>
    </div>

    <div class="entity-card">
      <div class="role-badge role-offspring">Offspring</div>
      <div class="emoji-box emoji-offspring" id="offspringEmoji">🐶</div>
      <div class="label" id="offspringLabel">Puppy</div>
    </div>
  </div>

  <script>
    const examples = [
      { pEmoji: '🐕', pName: 'Dog', oEmoji: '🐶', oName: 'Puppy' },
      { pEmoji: '🐔', pName: 'Hen', oEmoji: '🐥', oName: 'Chick' },
      { pEmoji: '🌳', pName: 'Tree', oEmoji: '🌱', oName: 'Sapling' },
      { pEmoji: '🧑', pName: 'Adult', oEmoji: '👶', oName: 'Baby' }
    ];

    let currentIndex = 0;
    let autoPlayInterval = null;

    function setExample(index) {
      currentIndex = index;
      const data = examples[index];

      document.getElementById('parentEmoji').textContent = data.pEmoji;
      document.getElementById('parentLabel').textContent = data.pName;
      document.getElementById('offspringEmoji').textContent = data.oEmoji;
      document.getElementById('offspringLabel').textContent = data.oName;

      const buttons = document.querySelectorAll('.tab-btn');
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === index);
      });
    }

    function autoStep() {
      currentIndex = (currentIndex + 1) % examples.length;
      setExample(currentIndex);
    }

    autoPlayInterval = setInterval(autoStep, 3500);

    document.querySelectorAll('.tab-btn').forEach((btn) => {
      btn.addEventListener('click', () => {
        clearInterval(autoPlayInterval);
      });
    });
  </script>
</body>
</html>

Do all animal offspring look like tiny copies of their parents right from the start?

Some offspring, like kittens and puppies, look very similar to their parents as soon as they are born.

Other offspring look completely different at first — a frog's offspring hatches into the water as a swimming **tadpole** before growing legs!

<!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>Frog Offspring Development</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: 16px;
      user-select: none;
    }
    .nav-tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #ffffff;
      color: #6b7280;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .tab-btn.active {
      background: #3b82f6;
      color: #ffffff;
      border-color: #3b82f6;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
    }
    .stage-card {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 220px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      position: relative;
    }
    .badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .badge-offspring {
      background: #e0f2fe;
      color: #0284c7;
    }
    .badge-parent {
      background: #dcfce7;
      color: #16a34a;
    }
    .visual-display {
      font-size: 68px;
      line-height: 1;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
    }
    .stage-title {
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .btn-ctrl {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 16px;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }
    .btn-ctrl:active {
      background: #f3f4f6;
    }
    .indicator-bar {
      display: flex;
      gap: 6px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 4px;
      background: #e5e7eb;
      cursor: pointer;
      transition: background 0.3s ease, width 0.3s ease;
    }
    .dot.active {
      background: #3b82f6;
      width: 20px;
    }
  </style>
</head>
<body>

  <div class="nav-tabs" id="tabs">
    <button class="tab-btn active" data-step="0">1. Eggs</button>
    <button class="tab-btn" data-step="1">2. Tadpole</button>
    <button class="tab-btn" data-step="2">3. Froglet</button>
    <button class="tab-btn" data-step="3">4. Adult</button>
  </div>

  <div class="stage-card">
    <span class="badge badge-offspring" id="roleBadge">Offspring</span>
    <div class="visual-display" id="stageEmoji">🫧</div>
    <div class="stage-title" id="stageName">Eggs</div>
  </div>

  <div class="controls">
    <button class="btn-ctrl" id="prevBtn" aria-label="Previous">◀</button>
    <div class="indicator-bar" id="dots">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
    </div>
    <button class="btn-ctrl" id="nextBtn" aria-label="Next">▶</button>
  </div>

  <script>
    const stages = [
      { name: "Eggs", emoji: "🫧", role: "Offspring", isParent: false },
      { name: "Tadpole", emoji: "🐟", role: "Offspring", isParent: false },
      { name: "Froglet", emoji: "🦎", role: "Offspring", isParent: false },
      { name: "Adult Frog", emoji: "🐸", role: "Parent", isParent: true }
    ];

    let current = 0;
    const total = stages.length;

    const stageName = document.getElementById("stageName");
    const stageEmoji = document.getElementById("stageEmoji");
    const roleBadge = document.getElementById("roleBadge");
    const tabs = document.querySelectorAll(".tab-btn");
    const dots = document.querySelectorAll(".dot");

    function render(index) {
      current = (index + total) % total;
      const data = stages[current];

      stageName.textContent = data.name;
      stageEmoji.textContent = data.emoji;
      roleBadge.textContent = data.role;

      if (data.isParent) {
        roleBadge.className = "badge badge-parent";
      } else {
        roleBadge.className = "badge badge-offspring";
      }

      tabs.forEach((tab, i) => {
        tab.classList.toggle("active", i === current);
      });

      dots.forEach((dot, i) => {
        dot.classList.toggle("active", i === current);
      });
    }

    tabs.forEach(tab => {
      tab.addEventListener("click", () => {
        render(parseInt(tab.dataset.step, 10));
      });
    });

    dots.forEach(dot => {
      dot.addEventListener("click", () => {
        render(parseInt(dot.dataset.step, 10));
      });
    });

    document.getElementById("prevBtn").addEventListener("click", () => render(current - 1));
    document.getElementById("nextBtn").addEventListener("click", () => render(current + 1));
  </script>
</body>
</html>

Did you know that many young animals have their own special words?

In English, many animal offspring have **specific names** rather than just being called baby animals.

For example, a dog's offspring is a **puppy**, a sheep has a **lamb**, a cow has a **calf**, a hen raises a **chick**, and a butterfly begins as a **caterpillar**.

Where do humans fit into this big scientific picture?

In English, many animal offspring have **specific names** instead of just being called babies.

For instance, a sheep's offspring is a **lamb**, a cow's is a **calf**, a hen's is a **chick**, a dog's is a **puppy**, and a butterfly's is a **caterpillar**.

In science, humans belong to the animal kingdom, which means you are the **offspring** of your parents.

Your parents are also the offspring of your grandparents, forming a family chain that goes back through time.

What Does Offspring Mean?. Define offspring as the young of any animal, including humans, and give examples.

Growing Up / Young Animals - KS1 Science (Animals, including humans)

How do animals and humans grow and have offspring? - KS1 Science

Year 2 Science: Match Offspring to Parents & Animal Life Cycles

At Key Stage 1 (Year 2), instruction should bridge everyday language ('baby animal') to formal scientific vocabulary ('offspring', 'adult', 'reproduce'). Effective pedagogical practices include concrete matching activities using photographic flashcards of diverse animals and their young, hands-on sorting by birth type (eggs vs. live birth), and explicit discussions that humans are animals with offspring too. Emphasise non-identical pairs (such as tadpoles and caterpillars) to dispel the common misconception that all young look like miniature adult clones from birth.

What Does Offspring Mean?

What Is an Offspring?

Different Kinds of Offspring

Specific Names for Offspring