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

A barn owl glides silently through the night sky, spotting a tiny mouse rustling in the tall grass.

In a split second, the owl swoops down and catches its dinner.

A **predator** is an animal that hunts, catches, and kills other animals for food.

The animal that is hunted and eaten is called the **prey**.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Predator and Prey Relationship</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;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      user-select: none;
      gap: 16px;
    }

    .main-stage {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .role-card {
      flex: 1;
      max-width: 250px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.05);
      transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
      cursor: pointer;
    }

    .role-card.predator.active {
      border-color: #2563eb;
      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.16);
    }

    .role-card.prey.active {
      border-color: #e11d48;
      box-shadow: 0 4px 16px rgba(225, 29, 72, 0.16);
    }

    .badge {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 6px;
    }

    .badge-predator {
      background: #eff6ff;
      color: #1d4ed8;
    }

    .badge-prey {
      background: #fff1f2;
      color: #be123c;
    }

    .avatar {
      font-size: 42px;
      line-height: 1;
      margin: 4px 0 8px 0;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
    }

    .trait-list {
      list-style: none;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 5px;
      font-size: 12px;
      font-weight: 500;
      color: #334155;
    }

    .trait-item {
      background: #f8fafc;
      padding: 5px 8px;
      border-radius: 8px;
      border: 1px solid #f1f5f9;
      line-height: 1.25;
    }

    .trait-example {
      font-weight: 600;
      color: #1e2945;
      background: #edf2f7;
      border-color: #e2e8f0;
    }

    /* Arrow Connector */
    .relation-flow {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 90px;
      flex-shrink: 0;
      position: relative;
    }

    .flow-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 3px;
      text-align: center;
      white-space: nowrap;
    }

    .arrow-track {
      width: 100%;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .arrow-svg {
      width: 100%;
      height: 24px;
      display: block;
    }

    .arrow-svg-vertical {
      display: none;
      width: 24px;
      height: 48px;
    }

    .pulse-dot-h {
      animation: trackMoveHorizontal 2.8s infinite ease-in-out;
    }

    @keyframes trackMoveHorizontal {
      0% {
        cx: 12;
        opacity: 0.2;
      }
      50% {
        opacity: 1;
      }
      100% {
        cx: 68;
        opacity: 0.2;
      }
    }

    .pulse-dot-v {
      animation: trackMoveVertical 2.8s infinite ease-in-out;
    }

    @keyframes trackMoveVertical {
      0% {
        cy: 10;
        opacity: 0.2;
      }
      50% {
        opacity: 1;
      }
      100% {
        cy: 38;
        opacity: 0.2;
      }
    }

    /* Controls */
    .nav-bar {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .nav-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #475569;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .nav-btn:hover {
      background: #f1f5f9;
      color: #1e2945;
    }

    .nav-btn.active {
      background: #1e2945;
      border-color: #1e2945;
      color: #ffffff;
    }

    /* Responsive adjustments for mobile view */
    @media (max-width: 420px) {
      body {
        padding: 10px 8px;
        gap: 12px;
        min-height: auto;
      }

      .main-stage {
        flex-direction: column;
        gap: 6px;
        max-width: 320px;
      }

      .role-card {
        width: 100%;
        max-width: 100%;
        padding: 10px 12px;
        flex-direction: row;
        text-align: left;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
      }

      .card-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 75px;
      }

      .badge {
        font-size: 11px;
        padding: 3px 8px;
        margin-bottom: 2px;
      }

      .avatar {
        font-size: 34px;
        margin: 2px 0 0 0;
      }

      .trait-list {
        flex: 1;
        gap: 4px;
        font-size: 11.5px;
      }

      .trait-item {
        padding: 3px 6px;
      }

      .relation-flow {
        width: 100%;
        flex-direction: row;
        gap: 8px;
        margin: 2px 0;
      }

      .flow-label {
        font-size: 10px;
        margin-bottom: 0;
      }

      .arrow-track {
        width: 24px;
        height: 28px;
      }

      .arrow-svg {
        display: none;
      }

      .arrow-svg-vertical {
        display: block;
        width: 20px;
        height: 28px;
      }
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div id="cardPredator" class="role-card predator active" onclick="selectRole('predator')">
      <div class="card-header">
        <span class="badge badge-predator">Predator</span>
        <div class="avatar">🦉</div>
      </div>
      <ul class="trait-list">
        <li class="trait-item">Hunts other animals</li>
        <li class="trait-item">Kills for food</li>
        <li class="trait-item trait-example">Example: Barn Owl</li>
      </ul>
    </div>

    
    <div class="relation-flow">
      <span class="flow-label">hunts and eats</span>
      <div class="arrow-track">
        
        <svg class="arrow-svg" viewBox="0 0 80 24" fill="none">
          <line x1="8" y1="12" x2="68" y2="12" stroke="#94a3b8" stroke-width="2.5" stroke-dasharray="4 3" />
          <polygon points="66,7 76,12 66,17" fill="#64748b" />
          <circle class="pulse-dot-h" cy="12" r="3.5" fill="#2563eb" />
        </svg>
        
        <svg class="arrow-svg-vertical" viewBox="0 0 24 48" fill="none">
          <line x1="12" y1="6" x2="12" y2="38" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3 3" />
          <polygon points="7,36 12,44 17,36" fill="#64748b" />
          <circle class="pulse-dot-v" cx="12" r="3" fill="#2563eb" />
        </svg>
      </div>
    </div>

    
    <div id="cardPrey" class="role-card prey active" onclick="selectRole('prey')">
      <div class="card-header">
        <span class="badge badge-prey">Prey</span>
        <div class="avatar">🐭</div>
      </div>
      <ul class="trait-list">
        <li class="trait-item">Is hunted</li>
        <li class="trait-item">Gets eaten</li>
        <li class="trait-item trait-example">Example: Field Mouse</li>
      </ul>
    </div>
  </div>

  
  <div class="nav-bar">
    <button id="btnBoth" class="nav-btn active" onclick="selectRole('both')">Both</button>
    <button id="btnPredator" class="nav-btn" onclick="selectRole('predator')">Predator</button>
    <button id="btnPrey" class="nav-btn" onclick="selectRole('prey')">Prey</button>
  </div>

  <script>
    function selectRole(role) {
      const cardPredator = document.getElementById('cardPredator');
      const cardPrey = document.getElementById('cardPrey');
      const btnBoth = document.getElementById('btnBoth');
      const btnPredator = document.getElementById('btnPredator');
      const btnPrey = document.getElementById('btnPrey');

      btnBoth.classList.toggle('active', role === 'both');
      btnPredator.classList.toggle('active', role === 'predator');
      btnPrey.classList.toggle('active', role === 'prey');

      if (role === 'both') {
        cardPredator.classList.add('active');
        cardPrey.classList.add('active');
        cardPredator.style.opacity = '1';
        cardPrey.style.opacity = '1';
      } else if (role === 'predator') {
        cardPredator.classList.add('active');
        cardPrey.classList.remove('active');
        cardPredator.style.opacity = '1';
        cardPrey.style.opacity = '0.38';
      } else if (role === 'prey') {
        cardPredator.classList.remove('active');
        cardPrey.classList.add('active');
        cardPredator.style.opacity = '0.38';
        cardPrey.style.opacity = '1';
      }
    }
  </script>
</body>
</html>

Can an animal be a hunter one minute, but become dinner the next?

Many animals are both a predator and prey at the same time.

A green bullfrog is a predator when it catches a dragonfly, but it becomes prey when a hungry garter snake slithers by.

<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100%;
    }

    .flow-container {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    .cards-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .organism-card {
      flex: 1;
      min-width: 0;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .organism-card.highlight {
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px #22b7ff, 0 4px 12px rgba(34, 183, 255, 0.15);
    }

    .emoji {
      font-size: 38px;
      line-height: 1.1;
      margin-bottom: 6px;
    }

    .name {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .badge-stack {
      display: flex;
      flex-direction: column;
      gap: 5px;
      width: 100%;
      align-items: center;
    }

    .badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      line-height: 1.2;
      max-width: 100%;
      text-align: center;
    }

    .badge-prey {
      background: #fff3e0;
      color: #d97706;
      border: 1px solid #fcd34d;
    }

    .badge-predator {
      background: #e0f2fe;
      color: #0284c7;
      border: 1px solid #7dd3fc;
    }

    .arrow-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 32px;
    }

    .arrow-icon {
      font-size: 18px;
      color: #94a3b8;
      font-weight: bold;
    }

    .arrow-label {
      font-size: 10px;
      color: #64748b;
      font-weight: 600;
      white-space: nowrap;
      margin-top: -2px;
    }

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

    .btn {
      flex: 1;
      border: 1px solid #e6e6e6;
      background: #f8fafc;
      color: #1e2945;
      font-size: 12px;
      font-weight: 600;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    @media (max-width: 480px) {
      .emoji {
        font-size: 30px;
      }
      .name {
        font-size: 13px;
      }
      .badge {
        font-size: 10px;
        padding: 3px 5px;
      }
      .arrow-col {
        width: 24px;
      }
      .arrow-label {
        font-size: 8px;
      }
      .btn {
        font-size: 11px;
        padding: 6px 4px;
      }
    }
  </style>
</head>
<body>

  <div class="flow-container">
    <div class="cards-row">
      
      <div class="organism-card" id="card-dragonfly">
        <span class="emoji">🪰</span>
        <span class="name">Dragonfly</span>
        <div class="badge-stack">
          <span class="badge badge-prey">Prey</span>
        </div>
      </div>

      
      <div class="arrow-col">
        <span class="arrow-icon">➔</span>
        <span class="arrow-label">eaten by</span>
      </div>

      
      <div class="organism-card highlight" id="card-frog">
        <span class="emoji">🐸</span>
        <span class="name">Frog</span>
        <div class="badge-stack">
          <span class="badge badge-predator" id="badge-frog-pred">Predator to dragonfly</span>
          <span class="badge badge-prey" id="badge-frog-prey">Prey to snake</span>
        </div>
      </div>

      
      <div class="arrow-col">
        <span class="arrow-icon">➔</span>
        <span class="arrow-label">eaten by</span>
      </div>

      
      <div class="organism-card" id="card-snake">
        <span class="emoji">🐍</span>
        <span class="name">Snake</span>
        <div class="badge-stack">
          <span class="badge badge-predator">Predator</span>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn active" id="btn-both" onclick="setMode('both')">Both Roles</button>
      <button class="btn" id="btn-predator" onclick="setMode('predator')">Frog as Predator</button>
      <button class="btn" id="btn-prey" onclick="setMode('prey')">Frog as Prey</button>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const cardFrog = document.getElementById('card-frog');
      const cardDragonfly = document.getElementById('card-dragonfly');
      const cardSnake = document.getElementById('card-snake');
      const badgeFrogPred = document.getElementById('badge-frog-pred');
      const badgeFrogPrey = document.getElementById('badge-frog-prey');

      document.getElementById('btn-both').classList.remove('active');
      document.getElementById('btn-predator').classList.remove('active');
      document.getElementById('btn-prey').classList.remove('active');
      document.getElementById('btn-' + mode).classList.add('active');

      if (mode === 'both') {
        cardFrog.classList.add('highlight');
        cardDragonfly.classList.remove('highlight');
        cardSnake.classList.remove('highlight');
        badgeFrogPred.style.opacity = '1';
        badgeFrogPrey.style.opacity = '1';
      } else if (mode === 'predator') {
        cardFrog.classList.add('highlight');
        cardDragonfly.classList.add('highlight');
        cardSnake.classList.remove('highlight');
        badgeFrogPred.style.opacity = '1';
        badgeFrogPrey.style.opacity = '0.3';
      } else if (mode === 'prey') {
        cardFrog.classList.add('highlight');
        cardDragonfly.classList.remove('highlight');
        cardSnake.classList.add('highlight');
        badgeFrogPred.style.opacity = '0.3';
        badgeFrogPrey.style.opacity = '1';
      }
    }
  </script>
</body>
</html>

What about animals that only eat things that are already dead?

To be a true predator, an animal must actively **hunt and kill** living animals.

A turkey vulture that feeds on an animal that died naturally is called a **scavenger**, not a predator.

Next time you see an American robin pull an earthworm out of the soil, look closely: you are watching a predator catch its prey!

science

Defining Predators and Prey. Define a predator as an animal that hunts and kills other animals, and prey as an animal that is hunted.

Predators and Prey in a Food Chain (Key Stage 2 Science)

Producers, Consumers, Predators and Prey in Habitats

Predators and Prey: Adaptations and Feeding Relationships

To achieve mastery across KS1-KS2, begin with concrete, relatable animal pairs (e.g. Fox and Rabbit, Owl and Mouse) before progressing to multi-step food chains where intermediate organisms serve dual roles. Use consistent sentence stems ('The [animal] is a predator because it hunts [animal]'; 'The [animal] is prey because it is hunted by [animal]'). Always reinforce the directional meaning of arrows in food chains to eliminate the pervasive 'arrow points to the victim' misconception.

Defining Predators and Prey

Hunters and the Hunted

Playing Both Roles

Hunters vs. Scavengers