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

What if you opened your closet door and found a secret pathway to a world made entirely of candy?

An **imaginative text** is a made-up story from your imagination where anything you dream up can come to life.

Before great writers start writing full sentences, they build a quick plan using three key ingredients.

<!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>3 Story Ingredients</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .pillar {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 16px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }

    .pillar.active {
      border-color: #22b7ff;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.25);
    }

    .icon {
      font-size: 32px;
      line-height: 1;
      margin-bottom: 8px;
    }

    .name {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 2px;
    }

    .question {
      font-size: 13px;
      font-weight: 500;
      color: #6b7280;
    }

    .arrow-row {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 12px 0 8px;
      font-size: 20px;
      color: #94a3b8;
    }

    .result {
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 12px;
      padding: 12px 24px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.15);
    }

    .result-icon {
      font-size: 26px;
    }

    .result-label {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
    }

    .dots {
      display: flex;
      gap: 8px;
      margin-top: 14px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #d1d5db;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .dot.active {
      background: #22b7ff;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  <div class="grid">
    <div class="pillar step active" id="p1">
      <div class="icon">👤</div>
      <div class="name">Character</div>
      <div class="question">Who?</div>
    </div>
    <div class="pillar step" id="p2">
      <div class="icon">🏰</div>
      <div class="name">Setting</div>
      <div class="question">Where?</div>
    </div>
    <div class="pillar step" id="p3">
      <div class="icon">⚡</div>
      <div class="name">Problem</div>
      <div class="question">What?</div>
    </div>
  </div>

  <div class="arrow-row">↓</div>

  <div class="result">
    <span class="result-icon">📖</span>
    <span class="result-label">Story Plan</span>
  </div>

  <div class="dots">
    <button class="dot active" aria-label="Ingredient 1"></button>
    <button class="dot" aria-label="Ingredient 2"></button>
    <button class="dot" aria-label="Ingredient 3"></button>
  </div>

  <script>
    const pillars = $$('.pillar');
    const dots = $$('.dot');

    const player = new StepPlayer('.step', {
      interval: 3200,
      onChange: (idx) => {
        dots.forEach((d, i) => d.classList.toggle('active', i === idx));
      }
    });

    pillars.forEach((p, idx) => {
      onTap(p, () => player.goTo(idx));
    });

    dots.forEach((d, idx) => {
      onTap(d, () => player.goTo(idx));
    });

    player.start();
  </script>
</body>
</html>

How do we choose the right hero and world before building the adventure?

First, you pick your **character**, which is the person, talking animal, or creature your story follows.

Next, you pick your **setting**, which is where and when your story takes place, like a sunny beach or a spooky castle at midnight.

Now that our hero is in their world, what makes the story exciting to read?

A **plot** is the action of your story, organized into three parts: a beginning, a middle problem, and a happy ending.

<!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 Plot Structure</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: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

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

    .tab-btn {
      flex: 1;
      padding: 8px 10px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    .tab-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
    }

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

    .mountain-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .plot-point {
      position: absolute;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: opacity 0.3s ease;
    }

    .node-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      transition: all 0.3s ease;
      z-index: 2;
    }

    .node-label {
      margin-top: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      background: #f8fafc;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      white-space: nowrap;
      transition: all 0.3s ease;
    }

    .plot-point.active .node-icon {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.2), 0 4px 8px rgba(0,0,0,0.1);
    }

    .plot-point.active .node-label {
      color: #0284c7;
      background: #e0f2fe;
      border-color: #bae6fd;
    }

    /* Positions mapped along story mountain */
    #point-1 { left: 16%; top: 70%; }
    #point-2 { left: 50%; top: 25%; }
    #point-3 { left: 84%; top: 70%; }

    /* Character marker */
    .hero-marker {
      position: absolute;
      width: 32px;
      height: 32px;
      background: #0284c7;
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      transform: translate(-50%, -130%);
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
      transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 3;
      pointer-events: none;
    }

    .hero-marker::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 4px 4px 0;
      border-style: solid;
      border-color: #0284c7 transparent transparent;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 12px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .ctrl-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setStep(0)">🌱 Beginning</button>
    <button class="tab-btn" onclick="setStep(1)">⚡ Middle</button>
    <button class="tab-btn" onclick="setStep(2)">⭐ Ending</button>
  </div>

  <div class="stage-area">
    <svg class="mountain-svg" viewBox="0 0 460 250" preserveAspectRatio="none">
      
      <polygon points="0,250 74,175 230,62 386,175 460,250" fill="#f1f5f9" />
      
      <line x1="0" y1="210" x2="460" y2="210" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="4 4" />
      
      <path d="M 40,195 Q 160,175 230,62 Q 300,175 420,195" fill="none" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round" />
      
      <path id="progress-path" d="M 40,195 Q 160,175 230,62 Q 300,175 420,195" fill="none" stroke="#0284c7" stroke-width="4" stroke-dasharray="500" stroke-dashoffset="500" stroke-linecap="round" style="transition: stroke-dashoffset 0.5s ease;" />
    </svg>

    
    <div id="hero" class="hero-marker" style="left: 16%; top: 70%;">🚶</div>

    
    <div class="plot-point active" id="point-1" onclick="setStep(0)">
      <div class="node-icon">🏡</div>
      <div class="node-label">Beginning</div>
    </div>

    <div class="plot-point" id="point-2" onclick="setStep(1)">
      <div class="node-icon">🧗</div>
      <div class="node-label">Problem</div>
    </div>

    <div class="plot-point" id="point-3" onclick="setStep(2)">
      <div class="node-icon">🎉</div>
      <div class="node-label">Ending</div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
  </div>

  <script>
    const points = [
      { left: '16%', top: '70%', offset: 360, hero: '🚶' },
      { left: '50%', top: '25%', offset: 180, hero: '🧗' },
      { left: '84%', top: '70%', offset: 0,   hero: '🎉' }
    ];

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const tabs = document.querySelectorAll('.tab-btn');
    const nodes = [
      document.getElementById('point-1'),
      document.getElementById('point-2'),
      document.getElementById('point-3')
    ];
    const hero = document.getElementById('hero');
    const progressPath = document.getElementById('progress-path');
    const playBtn = document.getElementById('playBtn');

    function updateView() {
      tabs.forEach((tab, i) => tab.classList.toggle('active', i === currentStep));
      nodes.forEach((node, i) => node.classList.toggle('active', i === currentStep));

      const p = points[currentStep];
      hero.style.left = p.left;
      hero.style.top = p.top;
      hero.textContent = p.hero;
      progressPath.style.strokeDashoffset = p.offset;
    }

    function setStep(idx) {
      currentStep = idx;
      updateView();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % points.length;
      updateView();
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playBtn.textContent = '⏸ Pause';
        startTimer();
      } else {
        playBtn.textContent = '▶ Play';
        clearInterval(timer);
      }
    }

    updateView();
    startTimer();
  </script>
</body>
</html>

In the beginning, we meet the hero and see their normal world.

In the middle, a **problem** pops up that makes things tricky, which keeps the reader wondering what happens next.

At the ending, the hero finds a **solution** to fix the trouble and finish the adventure.

What does a complete story plan look like when we put all three parts together?

Let's plan a story about a tiny robot who loves collecting shiny buttons.

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

  .story-board {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .stage-area {
    position: relative;
    width: 100%;
    height: 220px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .arc-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .actor {
    position: absolute;
    font-size: 38px;
    transform: translate(-50%, -50%);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 5;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  }

  .scene-card {
    position: absolute;
    top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 6px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: opacity 0.3s ease;
  }

  .scene-title {
    font-weight: 700;
    font-size: 15px;
    color: #1e2945;
  }

  .scene-icon {
    font-size: 20px;
    margin-top: 2px;
  }

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

  .step-btn {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 10px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .step-btn.active {
    background: #f0f9ff;
    box-shadow: 0 0 0 2px #22b7ff;
  }

  .step-num {
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
  }

  .step-btn.active .step-num {
    color: #0284c7;
  }

  .step-label {
    font-size: 13px;
    font-weight: 700;
    color: #1e2945;
  }

  .controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 2px;
  }

  .ctrl-btn {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1e2945;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  }

  .ctrl-btn:active {
    background: #f1f5f9;
  }
</style>
</head>
<body>

<div class="story-board">
  <div class="stage-area">
    <svg class="arc-svg" viewBox="0 0 400 200" preserveAspectRatio="none">
      <defs>
        <linearGradient id="curveGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#38bdf8"/>
          <stop offset="50%" stop-color="#f59e0b"/>
          <stop offset="100%" stop-color="#10b981"/>
        </linearGradient>
      </defs>
      
      <path d="M 40 160 Q 140 160 200 45 Q 260 160 360 160" fill="none" stroke="#e2e8f0" stroke-width="8" stroke-linecap="round"/>
      <path d="M 40 160 Q 140 160 200 45 Q 260 160 360 160" fill="none" stroke="url(#curveGrad)" stroke-width="4" stroke-linecap="round" stroke-dasharray="4 6"/>
      
      
      <circle cx="40" cy="160" r="7" fill="#38bdf8"/>
      <circle cx="130" cy="115" r="7" fill="#fbbf24"/>
      <circle cx="200" cy="45" r="8" fill="#ef4444"/>
      <circle cx="360" cy="160" r="7" fill="#10b981"/>
    </svg>

    <div id="sceneCard" class="scene-card">
      <span id="sceneTitle" class="scene-title">Beginning</span>
      <span id="sceneIcon" class="scene-icon">🤖 🏠</span>
    </div>

    <div id="actor" class="actor" style="left: 10%; top: 80%;">🤖</div>
  </div>

  <div class="nav-grid">
    <button class="step-btn active" onclick="setStep(0)">
      <span class="step-num">Step 1</span>
      <span class="step-label">Beginning</span>
    </button>
    <button class="step-btn" onclick="setStep(1)">
      <span class="step-num">Step 2</span>
      <span class="step-label">Problem</span>
    </button>
    <button class="step-btn" onclick="setStep(2)">
      <span class="step-num">Step 3</span>
      <span class="step-label">Climax</span>
    </button>
    <button class="step-btn" onclick="setStep(3)">
      <span class="step-num">Step 4</span>
      <span class="step-label">Ending</span>
    </button>
  </div>

  <div class="controls">
    <button id="playBtn" class="ctrl-btn" onclick="togglePlay()">
      <span id="playIcon">⏸</span> Auto-Play
    </button>
  </div>
</div>

<script>
  const stages = [
    { title: "Beginning", icon: "🤖 🔘", actor: "🤖", x: 10, y: 80 },
    { title: "Problem", icon: "🌧️ 🕳️", actor: "😰", x: 32.5, y: 57.5 },
    { title: "Climax", icon: "⚡ 💡", actor: "🚀", x: 50, y: 22.5 },
    { title: "Ending", icon: "✨ 🏆", actor: "🎉", x: 90, y: 80 }
  ];

  let current = 0;
  let timer = null;
  let isPlaying = true;

  const actorEl = document.getElementById('actor');
  const titleEl = document.getElementById('sceneTitle');
  const iconEl = document.getElementById('sceneIcon');
  const playIcon = document.getElementById('playIcon');
  const btns = document.querySelectorAll('.step-btn');

  function render() {
    const s = stages[current];
    actorEl.style.left = s.x + '%';
    actorEl.style.top = s.y + '%';
    actorEl.textContent = s.actor;
    titleEl.textContent = s.title;
    iconEl.textContent = s.icon;

    btns.forEach((btn, idx) => {
      btn.classList.toggle('active', idx === current);
    });
  }

  function setStep(idx) {
    current = idx;
    render();
    if (isPlaying) resetTimer();
  }

  function next() {
    current = (current + 1) % stages.length;
    render();
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    playIcon.textContent = isPlaying ? '⏸' : '▶';
    if (isPlaying) {
      next();
      startTimer();
    } else {
      clearInterval(timer);
    }
  }

  function startTimer() {
    clearInterval(timer);
    timer = setInterval(next, 3200);
  }

  function resetTimer() {
    clearInterval(timer);
    timer = setInterval(next, 3200);
  }

  render();
  startTimer();
</script>
</body>
</html>

A common mistake is writing a list of events without any problem, like: 'Pip went to the park, saw a slide, and ate a snack.'

Without a **problem** to solve, a story feels flat because there is no mystery or challenge for the hero to overcome.

Grab a piece of paper and write down your character, setting, and one exciting problem for them to solve.

Planning an Imaginative Text. Plan a short imaginative text by choosing characters, a setting, and a simple plot.

How to Build Stories: Characters, Settings, and Plots

KS1 English: Narrative Writing - Planning Characters, Setting, and Plot

How to Plan and Write a Story (KS1 English)

For Year 2 students, oral rehearsal must precede independent written planning. Teachers should model 'Talk for Writing' techniques where students use gesture actions for narrative transition markers ('Once upon a time...', 'Suddenly...', 'Luckily...'). Encourage drawing quick thumbnails (storyboarding) accompanied by descriptive word labels (noun groups and verbs) before having students draft full sentences, ensuring students master the structural difference between planning and writing.

Planning an Imaginative Text

Characters and Setting

Building a Simple Plot