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 read a story about a flying carpet, or a rabbit that wears a blue jacket? Stories come in all kinds of fun types!

A **fairy tale** is a story filled with magic and make-believe. You might meet a princess, a dragon, or a fairy godmother with a glowing wand!

<!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>Story Types</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .nav-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 600;
      background: #ffffff;
      border: 1px solid #e2d9f3;
      border-radius: 10px;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 3px rgba(139, 92, 246, 0.05);
    }
    .tab-btn.active {
      background: #8b5cf6;
      color: #ffffff;
      border-color: #8b5cf6;
      box-shadow: 0 3px 8px rgba(139, 92, 246, 0.3);
    }
    .stage-container {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 250px;
      background: #f8f6fc;
      border: 1px solid #e9e3f7;
      border-radius: 16px;
      overflow: hidden;
    }
    .story-panel {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 14px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .story-panel.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .item-card {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #eee7fb;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }
    .item-card .icon {
      font-size: 30px;
      line-height: 1.1;
      margin-bottom: 4px;
    }
    .item-card .label {
      font-size: 13px;
      font-weight: 600;
      color: #332a4d;
    }
    .item-card .sub {
      font-size: 11px;
      color: #8b5cf6;
      font-weight: 500;
    }
    .indicator-bar {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }
    .dot-btn {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #d8b4fe;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: all 0.25s ease;
    }
    .dot-btn.active {
      background: #8b5cf6;
      width: 20px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <div class="nav-tabs" role="tablist">
    <button class="tab-btn active" onclick="setPanel(0)">🧚 Fairy Tale</button>
    <button class="tab-btn" onclick="setPanel(1)">🦊 Animal</button>
    <button class="tab-btn" onclick="setPanel(2)">🗺️ Adventure</button>
  </div>

  <div class="stage-container">
    
    <div class="story-panel active" id="panel-0">
      <div class="item-card">
        <span class="icon">✨</span>
        <span class="label">Magic</span>
        <span class="sub">Spells & Wands</span>
      </div>
      <div class="item-card">
        <span class="icon">🏰</span>
        <span class="label">Castles</span>
        <span class="sub">Faraway Lands</span>
      </div>
      <div class="item-card">
        <span class="icon">👑</span>
        <span class="label">Royalty</span>
        <span class="sub">Princes & Queens</span>
      </div>
      <div class="item-card">
        <span class="icon">🐉</span>
        <span class="label">Monsters</span>
        <span class="sub">Dragons & Giants</span>
      </div>
    </div>

    
    <div class="story-panel" id="panel-1">
      <div class="item-card">
        <span class="icon">💬</span>
        <span class="label">Talking</span>
        <span class="sub">Animal Voices</span>
      </div>
      <div class="item-card">
        <span class="icon">🌲</span>
        <span class="label">Wild Homes</span>
        <span class="sub">Forests & Dens</span>
      </div>
      <div class="item-card">
        <span class="icon">🦊</span>
        <span class="label">Clever Fox</span>
        <span class="sub">Tricks & Riddles</span>
      </div>
      <div class="item-card">
        <span class="icon">🐾</span>
        <span class="label">Teamwork</span>
        <span class="sub">Animal Friends</span>
      </div>
    </div>

    
    <div class="story-panel" id="panel-2">
      <div class="item-card">
        <span class="icon">🗺️</span>
        <span class="label">Quests</span>
        <span class="sub">Secret Maps</span>
      </div>
      <div class="item-card">
        <span class="icon">⛵</span>
        <span class="label">Journeys</span>
        <span class="sub">Sailing & Treks</span>
      </div>
      <div class="item-card">
        <span class="icon">💎</span>
        <span class="label">Treasure</span>
        <span class="sub">Lost Gold</span>
      </div>
      <div class="item-card">
        <span class="icon">🌋</span>
        <span class="label">Danger</span>
        <span class="sub">Braving Risks</span>
      </div>
    </div>
  </div>

  <div class="indicator-bar">
    <button class="dot-btn active" aria-label="Story 1" onclick="setPanel(0)"></button>
    <button class="dot-btn" aria-label="Story 2" onclick="setPanel(1)"></button>
    <button class="dot-btn" aria-label="Story 3" onclick="setPanel(2)"></button>
  </div>

  <script>
    let currentIndex = 0;
    const total = 3;
    const tabs = document.querySelectorAll('.tab-btn');
    const panels = document.querySelectorAll('.story-panel');
    const dots = document.querySelectorAll('.dot-btn');
    let autoTimer;

    function setPanel(index) {
      currentIndex = index;
      tabs.forEach((tab, i) => tab.classList.toggle('active', i === index));
      panels.forEach((panel, i) => panel.classList.toggle('active', i === index));
      dots.forEach((dot, i) => dot.classList.toggle('active', i === index));
      resetTimer();
    }

    function nextPanel() {
      setPanel((currentIndex + 1) % total);
    }

    function resetTimer() {
      clearInterval(autoTimer);
      autoTimer = setInterval(nextPanel, 4000);
    }

    autoTimer = setInterval(nextPanel, 4000);
  </script>
</body>
</html>

Fairy tales often start with the magical words **Once upon a time** and end with **Happily ever after**.

What if a story has no magic wands, but all the characters have fur, whiskers, and paws?

An **animal story** has animals as the main characters who talk, wear hats, and act just like people. Think of a friendly bear eating porridge or three little pigs building houses!

<!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>Animal Stories Comparison</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f0fdf4;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 16px;
  }

  .nav {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    background: #e2f7e9;
    padding: 4px;
    border-radius: 999px;
  }

  .nav-btn {
    border: none;
    background: transparent;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #4b5563;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .nav-btn.active {
    background: #22c55e;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
  }

  .stage-container {
    width: 100%;
    max-width: 420px;
    height: 280px;
    position: relative;
  }

  .scene-card {
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .scene-card.active {
    opacity: 1;
    pointer-events: auto;
  }

  .avatar-stage {
    position: relative;
    width: 120px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bear {
    font-size: 72px;
    line-height: 1;
    z-index: 2;
  }

  .prop-hat {
    position: absolute;
    top: -12px;
    font-size: 34px;
    z-index: 3;
    animation: gentle-bob 2.5s ease-in-out infinite;
  }

  .prop-bubble {
    position: absolute;
    top: -16px;
    right: -24px;
    font-size: 26px;
    background: #ffffff;
    padding: 2px 6px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    border: 2px solid #22c55e;
    z-index: 4;
  }

  .traits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
  }

  .trait-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

  .scene-card.story .trait-item {
    background: #f0fdf4;
    border-color: #bbf7d0;
  }

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

  .trait-text {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    line-height: 1.2;
  }

  @keyframes gentle-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
</style>
</head>
<body>

<div class="nav">
  <button class="nav-btn active" id="btn-real" onclick="showScene(0)">Real Animal</button>
  <button class="nav-btn" id="btn-story" onclick="showScene(1)">Story Animal</button>
</div>

<div class="stage-container">
  
  <div class="scene-card active" id="scene-real">
    <div class="avatar-stage">
      <div class="bear">🐻</div>
    </div>
    <div class="traits">
      <div class="trait-item">
        <div class="trait-icon">🌲</div>
        <div class="trait-text">Forest</div>
      </div>
      <div class="trait-item">
        <div class="trait-icon">🐟</div>
        <div class="trait-text">Wild food</div>
      </div>
      <div class="trait-item">
        <div class="trait-icon">🐾</div>
        <div class="trait-text">Roars</div>
      </div>
    </div>
  </div>

  
  <div class="scene-card story" id="scene-story">
    <div class="avatar-stage">
      <div class="prop-hat">🎩</div>
      <div class="bear">🐻</div>
      <div class="prop-bubble">💬</div>
    </div>
    <div class="traits">
      <div class="trait-item">
        <div class="trait-icon">🏠</div>
        <div class="trait-text">House</div>
      </div>
      <div class="trait-item">
        <div class="trait-icon">🥣</div>
        <div class="trait-text">Porridge</div>
      </div>
      <div class="trait-item">
        <div class="trait-icon">❤️</div>
        <div class="trait-text">Feelings</div>
      </div>
    </div>
  </div>
</div>

<script>
  function showScene(index) {
    const isStory = index === 1;
    document.getElementById('btn-real').classList.toggle('active', !isStory);
    document.getElementById('btn-story').classList.toggle('active', isStory);
    document.getElementById('scene-real').classList.toggle('active', !isStory);
    document.getElementById('scene-story').classList.toggle('active', isStory);
  }
</script>

</body>
</html>

Real animals do not talk, but in an animal story, they share big feelings and teach us helpful lessons.

What if a story has no dragons and no talking foxes, but looks just like your normal day?

An **everyday story** is about real things that could happen to kids like you. The characters go to school, ride bicycles, and play with friends at the park!

How can you tell which type of story you are reading?

Look closely at the characters and the world they live in to spot the clues!

<!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;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 440px;
    }

    .tab-btn {
      flex: 1;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      padding: 8px 4px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: all 0.25s ease;
    }

    .tab-btn span.emoji {
      font-size: 20px;
    }

    .tab-btn.active {
      border-color: #3b82f6;
      background: #eff6ff;
      color: #1d4ed8;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 250px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 1px solid #e2e8f0;
      overflow: hidden;
    }

    .genre-panel {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform: translateY(6px);
      padding: 16px;
    }

    .genre-panel.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

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

    .clue-box {
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px;
      text-align: center;
    }

    .box-characters {
      background: #fdf4ff;
      border: 1.5px solid #f0abfc;
    }

    .box-world {
      background: #f0fdf4;
      border: 1.5px solid #86efac;
    }

    .clue-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    .box-characters .clue-title {
      color: #a21caf;
    }

    .box-world .clue-title {
      color: #15803d;
    }

    .clue-icons {
      font-size: 34px;
      display: flex;
      gap: 6px;
      line-height: 1.2;
      margin-bottom: 4px;
    }

    .clue-label {
      font-size: 14px;
      font-weight: 600;
      color: #334155;
    }
  </style>
</head>
<body>

  <div class="nav-tabs" role="tablist">
    <button class="tab-btn active" onclick="showGenre(0)">
      <span class="emoji">👑</span>
      Fairy Tale
    </button>
    <button class="tab-btn" onclick="showGenre(1)">
      <span class="emoji">🦊</span>
      Animal Story
    </button>
    <button class="tab-btn" onclick="showGenre(2)">
      <span class="emoji">🚀</span>
      Sci-Fi
    </button>
  </div>

  <div class="stage">
    
    <div class="genre-panel active" id="genre-0">
      <div class="clues-grid">
        <div class="clue-box box-characters">
          <div class="clue-title">Characters</div>
          <div class="clue-icons">👸 🧙 🐉</div>
          <div class="clue-label">Magic & Royals</div>
        </div>
        <div class="clue-box box-world">
          <div class="clue-title">World</div>
          <div class="clue-icons">🏰 🪄 ✨</div>
          <div class="clue-label">Castles & Spells</div>
        </div>
      </div>
    </div>

    
    <div class="genre-panel" id="genre-1">
      <div class="clues-grid">
        <div class="clue-box box-characters">
          <div class="clue-title">Characters</div>
          <div class="clue-icons">🦊 🐰 🦉</div>
          <div class="clue-label">Talking Animals</div>
        </div>
        <div class="clue-box box-world">
          <div class="clue-title">World</div>
          <div class="clue-icons">🌲 🏞️ 🍄</div>
          <div class="clue-label">Forests & Nature</div>
        </div>
      </div>
    </div>

    
    <div class="genre-panel" id="genre-2">
      <div class="clues-grid">
        <div class="clue-box box-characters">
          <div class="clue-title">Characters</div>
          <div class="clue-icons">🤖 👽 🧑‍🚀</div>
          <div class="clue-label">Robots & Aliens</div>
        </div>
        <div class="clue-box box-world">
          <div class="clue-title">World</div>
          <div class="clue-icons">🚀 🪐 🛸</div>
          <div class="clue-label">Space & Future</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function showGenre(index) {
      const tabs = document.querySelectorAll('.tab-btn');
      const panels = document.querySelectorAll('.genre-panel');

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

      panels.forEach((panel, i) => {
        panel.classList.toggle('active', i === index);
      });
    }
  </script>
</body>
</html>

Next time you open a book, check the clues to find out what type of adventure is waiting for you!

Different Types of Stories: Fairy Tales, Animal Stories and More. Recognise different types of literary texts such as fairy tales and animal stories.

Traditional Tales and Fairy Tales for Early Years & KS1

Story Time: Exploring Narrative and Characters for Foundation

Kindergarten Reading Foundations: Identify Characters, Settings, and Story Types

Teaching story genres to Foundation (Kindergarten/Prep) learners requires multimodal, interactive strategies. Use enlarged big books, shared read-alouds, tactile character puppets, and visual props (e.g., crowns, animal ears, wands) to model the difference between magical fairy tales and anthropomorphic animal stories. Encourage oral retelling using consistent transition phrases ('In the beginning...', 'Next, what happened was...', 'At the end...').

Different Types of Stories: Fairy Tales, Animal Stories and More

Fairy Tales

Animal Stories

Everyday Stories