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 taken apart a toy car to see how the wheels and gears click together?

Stories have secret inner parts just like toys. A **story structure** is the hidden skeleton that gives a tale its shape from start to finish.

<!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">
  <script src="https://cdn.classace.io/diagrams/classace-diagram.js"></script>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      background: transparent;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .theme-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 12px;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.25s ease;
    }

    .theme-btn.active {
      border-color: #22b7ff;
      background: #eaf7ff;
      color: #0284c7;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 16px;
      padding: 24px 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    }

    .spine-bar {
      position: absolute;
      top: 50%;
      left: 14%;
      right: 14%;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      z-index: 1;
      transform: translateY(-50%);
    }

    .spine-fill {
      height: 100%;
      width: 100%;
      background: #22b7ff;
      border-radius: 3px;
      opacity: 0.7;
    }

    .beats-grid {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .beat-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f8fafc;
      border: 2px solid #cbd5e1;
      border-radius: 12px;
      padding: 12px 8px;
      width: 29%;
      min-width: 80px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      transition: border-color 0.25s ease, background-color 0.25s ease;
    }

    .beat-card.active-beat {
      border-color: #22b7ff;
      background: #ffffff;
    }

    .step-num {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 6px;
    }

    .emoji-display {
      font-size: 32px;
      line-height: 1;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .beat-name {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
    }

    .skeleton-tag {
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }

    .pulse-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22b7ff;
    }
  </style>
</head>
<body>

  <div class="theme-nav">
    <button class="theme-btn active" id="btn0">🐷 Classic</button>
    <button class="theme-btn" id="btn1">🚀 Space</button>
    <button class="theme-btn" id="btn2">🌊 Ocean</button>
  </div>

  <div class="stage">
    <div class="spine-bar">
      <div class="spine-fill"></div>
    </div>

    <div class="beats-grid">
      <div class="beat-card active-beat">
        <span class="step-num">Step 1</span>
        <div class="emoji-display" id="icon1">🪵</div>
        <span class="beat-name">Build</span>
      </div>

      <div class="beat-card active-beat">
        <span class="step-num">Step 2</span>
        <div class="emoji-display" id="icon2">🐺</div>
        <span class="beat-name">Threat</span>
      </div>

      <div class="beat-card active-beat">
        <span class="step-num">Step 3</span>
        <div class="emoji-display" id="icon3">🧱</div>
        <span class="beat-name">Safe</span>
      </div>
    </div>
  </div>

  <div class="skeleton-tag">
    <span class="pulse-dot"></span>
    <span>Same Skeleton • New Theme</span>
  </div>

  <script>
    const themes = [
      { icons: ['🪵', '🐺', '🧱'] },
      { icons: ['🛰️', '☄️', '🛡️'] },
      { icons: ['🪸', '🦈', '🏰'] }
    ];

    const btns = [$('#btn0'), $('#btn1'), $('#btn2')];
    const iconEls = [$('#icon1'), $('#icon2'), $('#icon3')];

    function selectTheme(idx) {
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));
      
      iconEls.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'scale(0.8)';
      });

      setTimeout(() => {
        iconEls.forEach((el, i) => {
          el.textContent = themes[idx].icons[i];
          el.style.opacity = '1';
          el.style.transform = 'scale(1)';
        });
      }, 150);
    }

    btns.forEach((btn, i) => {
      onTap(btn, () => {
        current = i;
        selectTheme(i);
        resetAutoCycle();
      });
    });

    let current = 0;
    let timer = setInterval(autoCycle, 3200);

    function autoCycle() {
      current = (current + 1) % themes.length;
      selectTheme(current);
    }

    function resetAutoCycle() {
      clearInterval(timer);
      timer = setInterval(autoCycle, 3200);
    }
  </script>
</body>
</html>

What happens if we keep that same strong skeleton, but dress it up in totally new clothes?

To **adapt** a story means to borrow an existing story pattern while creating brand-new characters, settings, and props.

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

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

    .toggle-bar {
      display: flex;
      background: #e9ecef;
      padding: 3px;
      border-radius: 10px;
      gap: 4px;
    }

    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 7px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      text-align: center;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      position: relative;
    }

    .pattern-header {
      background: #e0f2fe;
      border: 1.5px dashed #38bdf8;
      border-radius: 10px;
      padding: 6px 4px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #0369a1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .story-card {
      background: #ffffff;
      border-radius: 10px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      border: 1.5px solid #e5e7eb;
      transition: all 0.3s ease;
      min-height: 96px;
      justify-content: center;
    }

    .story-card.fail {
      border-color: #fca5a5;
      background: #fff5f5;
    }

    .story-card.win {
      border-color: #86efac;
      background: #f0fdf4;
    }

    .icon-box {
      font-size: 26px;
      line-height: 1;
      position: relative;
    }

    .badge {
      font-size: 13px;
      margin-left: 2px;
      vertical-align: middle;
    }

    .card-label {
      font-size: 12px;
      font-weight: 600;
      color: #374151;
    }

    .story-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-top: 2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .story-label::before,
    .story-label::after {
      content: "";
      height: 1px;
      background: #cbd5e1;
      flex: 1;
    }

    .connector {
      position: relative;
      display: flex;
      justify-content: space-around;
      padding: 0 10%;
    }

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

    .highlight {
      outline: 2px solid #22b7ff;
    }
  </style>
</head>
<body>

<div class="container">
  
  <div class="toggle-bar">
    <button class="tab-btn active" id="btn-compare" onclick="setView('compare')">Compare Both</button>
    <button class="tab-btn" id="btn-original" onclick="setView('original')">Classic</button>
    <button class="tab-btn" id="btn-adapted" onclick="setView('adapted')">Adapted</button>
  </div>

  
  <div class="pattern-header-row grid-container">
    <div class="pattern-header">
      <span>Beat 1</span>
      <span>❌ Quick Fail</span>
    </div>
    <div class="pattern-header">
      <span>Beat 2</span>
      <span>❌ Quick Fail</span>
    </div>
    <div class="pattern-header" style="background:#dcfce7; border-color:#4ade80; color:#15803d;">
      <span>Beat 3</span>
      <span>✔️ Clever Win</span>
    </div>
  </div>

  
  <div class="story-label" id="label-orig">Classic: 3 Pigs</div>
  <div class="grid-container" id="row-orig">
    <div class="story-card fail">
      <div class="icon-box">🌾 <span class="badge">💨</span></div>
      <span class="card-label">Straw</span>
    </div>
    <div class="story-card fail">
      <div class="icon-box">🪵 <span class="badge">💨</span></div>
      <span class="card-label">Sticks</span>
    </div>
    <div class="story-card win">
      <div class="icon-box">🧱 <span class="badge">🛡️</span></div>
      <span class="card-label">Bricks</span>
    </div>
  </div>

  
  <div class="story-label" id="label-adapt">Adaptation: 3 Robots</div>
  <div class="grid-container" id="row-adapt">
    <div class="story-card fail">
      <div class="icon-box">📦 <span class="badge">⚡</span></div>
      <span class="card-label">Cardboard</span>
    </div>
    <div class="story-card fail">
      <div class="icon-box">🪵 <span class="badge">⚡</span></div>
      <span class="card-label">Plastic</span>
    </div>
    <div class="story-card win">
      <div class="icon-box">🚀 <span class="badge">🛡️</span></div>
      <span class="card-label">Titanium</span>
    </div>
  </div>
</div>

<script>
  function setView(mode) {
    const origRow = document.getElementById('row-orig');
    const origLabel = document.getElementById('label-orig');
    const adaptRow = document.getElementById('row-adapt');
    const adaptLabel = document.getElementById('label-adapt');

    const btnComp = document.getElementById('btn-compare');
    const btnOrig = document.getElementById('btn-original');
    const btnAdapt = document.getElementById('btn-adapted');

    btnComp.classList.remove('active');
    btnOrig.classList.remove('active');
    btnAdapt.classList.remove('active');

    if (mode === 'original') {
      btnOrig.classList.add('active');
      origRow.style.display = 'grid';
      origLabel.style.display = 'flex';
      adaptRow.style.display = 'none';
      adaptLabel.style.display = 'none';
    } else if (mode === 'adapted') {
      btnAdapt.classList.add('active');
      origRow.style.display = 'none';
      origLabel.style.display = 'none';
      adaptRow.style.display = 'grid';
      adaptLabel.style.display = 'flex';
    } else {
      btnComp.classList.add('active');
      origRow.style.display = 'grid';
      origLabel.style.display = 'flex';
      adaptRow.style.display = 'grid';
      adaptLabel.style.display = 'flex';
    }
  }
</script>

</body>
</html>

Notice how the core pattern stays identical: two quick tries that fail, and one clever, sturdy try that saves the day.

What makes a familiar tale so easy to remember and chant along with?

A **catchphrase** is a memorable line repeated at key moments to build rhythm and excitement.

In *The Three Little Pigs*, the wolf growls: *'I'll huff, and I'll puff, and I'll blow your house in!'* We can adapt that rhythm for our robot story.

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

  .nav-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
  }

  .tab-btn {
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .tab-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.3);
  }

  .play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: #1e2945;
  }

  .stage-area {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 240px;
    overflow: hidden;
  }

  .step-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

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

  .story-row {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
    flex: 1;
  }

  .story-tag {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    width: 80px;
  }

  .story-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
  }

  .story-flow .arrow {
    font-size: 16px;
    color: #9ca3af;
  }

  .result-badge {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
  }

  .badge-fail {
    background: #fff1f2;
    color: #e11d48;
  }

  .badge-success {
    background: #ecfdf5;
    color: #059669;
  }

  .formula-bar {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    background: #f1f5f9;
    padding: 6px 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .formula-tag {
    color: #22b7ff;
    font-weight: 700;
  }
</style>
</head>
<body>

<div class="nav-bar">
  <button class="tab-btn active" data-step="0">Beat 1</button>
  <button class="tab-btn" data-step="1">Beat 2</button>
  <button class="tab-btn" data-step="2">Beat 3</button>
  <button class="play-btn" id="playBtn" title="Toggle Play/Pause">⏸</button>
</div>

<div class="stage-area">
  
  <div class="step-panel active">
    <div class="story-row">
      <span class="story-tag">Original</span>
      <div class="story-flow">
        <span>🐺</span>
        <span class="arrow">💨</span>
        <span>🌾</span>
      </div>
      <span class="result-badge badge-fail">💥 Falls</span>
    </div>
    <div class="story-row">
      <span class="story-tag">Adapted</span>
      <div class="story-flow">
        <span>👾</span>
        <span class="arrow">⚡</span>
        <span>💾</span>
      </div>
      <span class="result-badge badge-fail">💥 Falls</span>
    </div>
  </div>

  
  <div class="step-panel">
    <div class="story-row">
      <span class="story-tag">Original</span>
      <div class="story-flow">
        <span>🐺</span>
        <span class="arrow">💨</span>
        <span>🪵</span>
      </div>
      <span class="result-badge badge-fail">💥 Falls</span>
    </div>
    <div class="story-row">
      <span class="story-tag">Adapted</span>
      <div class="story-flow">
        <span>👾</span>
        <span class="arrow">⚡</span>
        <span>⚙️</span>
      </div>
      <span class="result-badge badge-fail">💥 Falls</span>
    </div>
  </div>

  
  <div class="step-panel">
    <div class="story-row">
      <span class="story-tag">Original</span>
      <div class="story-flow">
        <span>🐺</span>
        <span class="arrow">💨</span>
        <span>🧱</span>
      </div>
      <span class="result-badge badge-success">🛡️ Holds</span>
    </div>
    <div class="story-row">
      <span class="story-tag">Adapted</span>
      <div class="story-flow">
        <span>👾</span>
        <span class="arrow">⚡</span>
        <span>💎</span>
      </div>
      <span class="result-badge badge-success">🛡️ Holds</span>
    </div>
  </div>
</div>

<div class="formula-bar">
  <span>Pattern:</span>
  <span class="formula-tag" id="formulaText">Test 1 (Weak)</span>
</div>

<script>
  const panels = document.querySelectorAll('.step-panel');
  const tabs = document.querySelectorAll('.tab-btn');
  const playBtn = document.getElementById('playBtn');
  const formulaText = document.getElementById('formulaText');

  const formulas = [
    'Test 1 (Weak)',
    'Test 2 (Stronger)',
    'Climax (Strongest)'
  ];

  let current = 0;
  let timer = null;

  function showStep(idx) {
    current = idx;
    panels.forEach((p, i) => p.classList.toggle('active', i === idx));
    tabs.forEach((t, i) => t.classList.toggle('active', i === idx));
    formulaText.textContent = formulas[idx];
  }

  function nextStep() {
    showStep((current + 1) % panels.length);
  }

  function startAuto() {
    if (timer) clearInterval(timer);
    timer = setInterval(nextStep, 3200);
    playBtn.textContent = '⏸';
  }

  function stopAuto() {
    if (timer) clearInterval(timer);
    timer = null;
    playBtn.textContent = '▶';
  }

  tabs.forEach((tab, idx) => {
    tab.addEventListener('click', () => {
      showStep(idx);
      stopAuto();
    });
  });

  playBtn.addEventListener('click', () => {
    if (timer) {
      stopAuto();
    } else {
      nextStep();
      startAuto();
    }
  });

  startAuto();
</script>

</body>
</html>

How do we map out our own adaptation without losing track of the plot?

Let's turn the classic tale into an underwater adventure called *The Three Little Fish*.

<!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">
  <script src="https://assets.classace.io/vendor/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

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

    .nav-btn {
      flex: 1;
      max-width: 130px;
      padding: 8px 12px;
      border: 1px solid #e6e6e6;
      background: #ffffff;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .nav-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.3);
    }

    .stage-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .story-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px 16px;
      display: grid;
      grid-template-columns: 80px 1fr auto 1fr auto;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 6px;
      padding: 4px 8px;
    }

    .badge-pigs {
      background: #fff0f5;
      color: #d81b60;
    }

    .badge-fish {
      background: #e0f7fa;
      color: #00838f;
    }

    .element-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .element-icon {
      font-size: 26px;
      line-height: 1.1;
    }

    .element-name {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      margin-top: 2px;
    }

    .arrow {
      font-size: 16px;
      color: #9ca3af;
      font-weight: bold;
    }

    .threat-icon {
      font-size: 22px;
    }

    .result-badge {
      font-size: 18px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .result-fail {
      background: #fee2e2;
      color: #dc2626;
    }

    .result-win {
      background: #dcfce7;
      color: #16a34a;
    }

    .pattern-bar {
      margin-top: 10px;
      background: #f8f9fa;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: #6b7280;
      border: 1px dashed #d1d5db;
    }

    .pattern-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      margin: 0 2px;
    }

    .pattern-dot.active {
      background: #22b7ff;
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="nav-btn active" id="btn-0">Beat 1</button>
    <button class="nav-btn" id="btn-1">Beat 2</button>
    <button class="nav-btn" id="btn-2">Beat 3</button>
  </div>

  <div class="stage-container">
    
    <div class="story-card">
      <div class="badge badge-pigs">🐷 Pigs</div>
      <div class="element-box">
        <div class="element-icon" id="pig-mat-icon">🌾</div>
        <div class="element-name" id="pig-mat-name">Straw</div>
      </div>
      <div class="arrow">vs</div>
      <div class="element-box">
        <div class="threat-icon">🐺</div>
        <div class="element-name">Wolf</div>
      </div>
      <div class="result-badge result-fail" id="pig-result">💥</div>
    </div>

    
    <div class="story-card">
      <div class="badge badge-fish">🐟 Fish</div>
      <div class="element-box">
        <div class="element-icon" id="fish-mat-icon">🌿</div>
        <div class="element-name" id="fish-mat-name">Seaweed</div>
      </div>
      <div class="arrow">vs</div>
      <div class="element-box">
        <div class="threat-icon">🦈</div>
        <div class="element-name">Shark</div>
      </div>
      <div class="result-badge result-fail" id="fish-result">💥</div>
    </div>

    
    <div class="pattern-bar">
      <span>Rule of Three</span>
      <div>
        <span class="pattern-dot active" id="dot-0"></span>
        <span class="pattern-dot" id="dot-1"></span>
        <span class="pattern-dot" id="dot-2"></span>
      </div>
      <span id="strength-label">Weak Shelter</span>
    </div>
  </div>

  <script>
    const beats = [
      {
        pigIcon: '🌾',
        pigName: 'Straw',
        pigRes: '💥',
        pigWin: false,
        fishIcon: '🌿',
        fishName: 'Seaweed',
        fishRes: '💥',
        fishWin: false,
        strength: 'Weak Shelter'
      },
      {
        pigIcon: '🪵',
        pigName: 'Sticks',
        pigRes: '💥',
        pigWin: false,
        fishIcon: '🪵',
        fishName: 'Driftwood',
        fishRes: '💥',
        fishWin: false,
        strength: 'Stronger Shelter'
      },
      {
        pigIcon: '🧱',
        pigName: 'Bricks',
        pigRes: '🛡️',
        pigWin: true,
        fishIcon: '🪨',
        fishName: 'Coral Reef',
        fishRes: '🛡️',
        fishWin: true,
        strength: 'Strongest Shelter'
      }
    ];

    let currentBeat = 0;

    function renderBeat(index) {
      currentBeat = index;
      const data = beats[index];

      // Update Nav Buttons
      document.querySelectorAll('.nav-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      // Update Dots
      document.querySelectorAll('.pattern-dot').forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });

      // Update Pigs
      document.getElementById('pig-mat-icon').textContent = data.pigIcon;
      document.getElementById('pig-mat-name').textContent = data.pigName;
      const pigResEl = document.getElementById('pig-result');
      pigResEl.textContent = data.pigRes;
      pigResEl.className = 'result-badge ' + (data.pigWin ? 'result-win' : 'result-fail');

      // Update Fish
      document.getElementById('fish-mat-icon').textContent = data.fishIcon;
      document.getElementById('fish-mat-name').textContent = data.fishName;
      const fishResEl = document.getElementById('fish-result');
      fishResEl.textContent = data.fishRes;
      fishResEl.className = 'result-badge ' + (data.fishWin ? 'result-win' : 'result-fail');

      // Update Pattern Label
      document.getElementById('strength-label').textContent = data.strength;
    }

    beats.forEach((_, i) => {
      document.getElementById(`btn-${i}`).addEventListener('click', () => {
        renderBeat(i);
        resetAutoCycle();
      });
    });

    let autoTimer = setInterval(() => {
      renderBeat((currentBeat + 1) % beats.length);
    }, 3500);

    function resetAutoCycle() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        renderBeat((currentBeat + 1) % beats.length);
      }, 3500);
    }
  </script>
</body>
</html>

A common mistake is changing the ending so much that the pattern breaks. If Crunch the Shark smashes all three shelters, our rule of three loses its satisfying payoff.

Pick a fairy tale you know by heart, swap the characters and setting, and see what exciting new world you can build on that classic skeleton!

Adapting a Familiar Story Structure. Adapt the structure and language features of a familiar literary text to create your own.

How to Build Stories: Structure, Character, and Language with Story Factory

KS1 Narrative Writing: Adapting and Writing from Familiar Story Structures

KS1 English: How to Write and Adapt a Story

Teaching story adaptation in Year 2 is most effective through the 'Talk for Writing' pedagogical framework (Imitate -> Innovate -> Invent). Students internalize the mentor text through oral storytelling, drama, and physical story-mapping before writing. Scaffolding substitution with color-coded storyboards reduces cognitive load, enabling Year 2 learners to focus on expressive vocabulary, expanded noun groups, and sentence-level punctuation.

Adapting a Familiar Story Structure

Swapping the Story Skin

Borrowing Catchy Language