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

Imagine opening three different books: one is a bedtime tale about dragons, one is a science book about frogs, and one is a recipe for pancakes.

Even though they all use words, each writer has a special goal called a **purpose**.

<!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>Different Texts for Different Purposes</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

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

    /* Selector Tabs */
    .tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

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

    .tab-btn .tab-icon {
      font-size: 24px;
    }

    .tab-btn.active[data-type="story"] {
      border-color: #8b5cf6;
      background: #f5f3ff;
      color: #6d28d9;
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
    }

    .tab-btn.active[data-type="science"] {
      border-color: #10b981;
      background: #ecfdf5;
      color: #047857;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    .tab-btn.active[data-type="recipe"] {
      border-color: #f59e0b;
      background: #fffbeb;
      color: #b45309;
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
    }

    /* Display Area */
    .viewer {
      position: relative;
      height: 230px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Purpose Header Banner */
    .purpose-banner {
      padding: 10px 16px;
      font-size: 15px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #e2e8f0;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .purpose-banner.story {
      background: #f5f3ff;
      color: #6d28d9;
      border-color: #ede9fe;
    }

    .purpose-banner.science {
      background: #ecfdf5;
      color: #047857;
      border-color: #d1fae5;
    }

    .purpose-banner.recipe {
      background: #fffbeb;
      color: #b45309;
      border-color: #fef3c7;
    }

    /* Book Pages Stage */
    .stage {
      flex: 1;
      position: relative;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .page-content {
      position: absolute;
      inset: 12px;
      display: flex;
      gap: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .page-content.active {
      opacity: 1;
      pointer-events: auto;
    }

    .book-left, .book-right {
      flex: 1;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }

    .main-emoji {
      font-size: 44px;
      line-height: 1;
    }

    /* Skeuomorphic visual text lines */
    .text-lines {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .line {
      height: 8px;
      border-radius: 4px;
      background: #cbd5e1;
    }

    .line.short { width: 50%; }
    .line.med { width: 75%; }
    .line.long { width: 95%; }

    .badge {
      font-size: 12px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .story .badge { background: #ede9fe; color: #6d28d9; }
    .science .badge { background: #d1fae5; color: #047857; }
    .recipe .badge { background: #fef3c7; color: #b45309; }

    /* Controls */
    .nav-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 4px;
    }

    .nav-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background-color 0.25s ease;
    }

    .nav-dot.active {
      background: #1e2945;
    }
  </style>
</head>
<body>

  <div class="main-container">
    
    <div class="tabs">
      <button class="tab-btn active" data-type="story" onclick="selectType('story', 0)">
        <span class="tab-icon">🐉</span>
        <span>Story</span>
      </button>
      <button class="tab-btn" data-type="science" onclick="selectType('science', 1)">
        <span class="tab-icon">🐸</span>
        <span>Science</span>
      </button>
      <button class="tab-btn" data-type="recipe" onclick="selectType('recipe', 2)">
        <span class="tab-icon">🥞</span>
        <span>Recipe</span>
      </button>
    </div>

    
    <div class="viewer">
      <div id="banner" class="purpose-banner story">
        <span id="bannerPurpose">🎭 Purpose: Entertain</span>
        <span id="bannerGenre" class="badge">Fiction</span>
      </div>

      <div class="stage">
        
        <div id="panel-story" class="page-content story active">
          <div class="book-left">
            <span class="main-emoji">🐉</span>
            <div class="badge">Bedtime Tale</div>
          </div>
          <div class="book-right">
            <div class="text-lines">
              <div class="line med"></div>
              <div class="line long"></div>
              <div class="line long"></div>
              <div class="line short"></div>
            </div>
            <div class="badge">Imagination ✨</div>
          </div>
        </div>

        
        <div id="panel-science" class="page-content science">
          <div class="book-left">
            <span class="main-emoji">🐸</span>
            <div class="badge">Life Cycle</div>
          </div>
          <div class="book-right">
            <div class="text-lines">
              <div class="line short"></div>
              <div class="line long"></div>
              <div class="line med"></div>
              <div class="line long"></div>
            </div>
            <div class="badge">Real Facts 🔍</div>
          </div>
        </div>

        
        <div id="panel-recipe" class="page-content recipe">
          <div class="book-left">
            <span class="main-emoji">🥞</span>
            <div class="badge">Pancakes</div>
          </div>
          <div class="book-right">
            <div class="text-lines">
              <div class="line short"></div>
              <div class="line med"></div>
              <div class="line short"></div>
              <div class="line med"></div>
            </div>
            <div class="badge">Step-by-Step 📋</div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="nav-dots">
      <button class="nav-dot active" aria-label="Story" onclick="selectType('story', 0)"></button>
      <button class="nav-dot" aria-label="Science" onclick="selectType('science', 1)"></button>
      <button class="nav-dot" aria-label="Recipe" onclick="selectType('recipe', 2)"></button>
    </div>
  </div>

  <script>
    const data = {
      story: {
        purpose: '🎭 Purpose: Entertain',
        genre: 'Fiction',
        bannerClass: 'purpose-banner story'
      },
      science: {
        purpose: '💡 Purpose: Inform',
        genre: 'Non-Fiction',
        bannerClass: 'purpose-banner science'
      },
      recipe: {
        purpose: '📋 Purpose: Instruct',
        genre: 'Procedure',
        bannerClass: 'purpose-banner recipe'
      }
    };

    const types = ['story', 'science', 'recipe'];
    let currentIndex = 0;

    function selectType(type, index) {
      currentIndex = index;

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

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

      // Update Panels
      document.querySelectorAll('.page-content').forEach(panel => {
        panel.classList.remove('active');
      });
      const activePanel = document.getElementById('panel-' + type);
      if (activePanel) {
        activePanel.classList.add('active');
      }

      // Update Banner
      const banner = document.getElementById('banner');
      const bannerPurpose = document.getElementById('bannerPurpose');
      const bannerGenre = document.getElementById('bannerGenre');

      banner.className = data[type].bannerClass;
      bannerPurpose.textContent = data[type].purpose;
      bannerGenre.textContent = data[type].genre;
    }
  </script>
</body>
</html>

What happens when an author wants to take you on a magical adventure?

When an author writes to **narrate**, their goal is to tell an entertaining story with characters, a setting, and an adventure.

<!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>Narrative Text Structure</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

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

    /* Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

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

    .tab-btn.active {
      border-color: #2ecc71;
      color: #15803d;
      background: #f0fdf4;
      box-shadow: 0 0 0 1px #2ecc71;
    }

    /* Visual Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 230px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }

    /* Setting Backdrop */
    .backdrop {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, #e0f2fe 0%, #f8fafc 65%, #f1f5f9 100%);
      transition: opacity 0.4s ease;
      opacity: 0.35;
    }

    .backdrop.highlight {
      opacity: 1;
    }

    .scenery-item {
      position: absolute;
      user-select: none;
      pointer-events: none;
      transition: all 0.4s ease;
    }

    .castle { font-size: 38px; top: 18px; right: 28px; }
    .mountains { font-size: 32px; top: 32px; left: 45%; }
    .trees-1 { font-size: 26px; bottom: 38px; left: 24px; }
    .trees-2 { font-size: 24px; bottom: 42px; right: 110px; }

    /* Narrative Arc SVG */
    .arc-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .arc-path-bg {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 3;
      stroke-dasharray: 6 6;
    }

    .arc-path-active {
      fill: none;
      stroke: #2ecc71;
      stroke-width: 4;
      stroke-linecap: round;
      transition: stroke-dashoffset 0.6s ease;
    }

    /* Journey Nodes */
    .node {
      position: absolute;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .node-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
    }

    .node.active .node-dot {
      border-color: #2ecc71;
      background: #2ecc71;
      color: #ffffff;
      transform: scale(1.15);
    }

    .node-label {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      transition: color 0.3s ease;
    }

    .node.active .node-label {
      color: #15803d;
    }

    /* Hero / Character */
    .hero {
      position: absolute;
      transform: translate(-50%, -100%);
      font-size: 32px;
      transition: left 0.6s cubic-bezier(0.34, 1.2, 0.64, 1), top 0.6s cubic-bezier(0.34, 1.2, 0.64, 1), transform 0.3s ease;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
      user-select: none;
      z-index: 5;
    }

    .hero-glow {
      position: absolute;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(46, 204, 113, 0.25);
      transform: translate(-50%, -50%);
      pointer-events: none;
      transition: left 0.6s ease, top 0.6s ease, opacity 0.3s ease;
      z-index: 4;
    }

    /* Story Elements Spotlight Badge */
    .element-pill {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid #e2e8f0;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      transition: all 0.3s ease;
    }

    /* Playback Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .ctrl-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
      transition: background 0.2s ease;
    }

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

  <div class="tabs">
    <button class="tab-btn active" data-step="0">🧙 Characters</button>
    <button class="tab-btn" data-step="1">🏰 Setting</button>
    <button class="tab-btn" data-step="2">⚡ Adventure</button>
  </div>

  <div class="stage">
    
    <div class="backdrop" id="backdrop">
      <span class="scenery-item castle">🏰</span>
      <span class="scenery-item mountains">🏔️</span>
      <span class="scenery-item trees-1">🌲</span>
      <span class="scenery-item trees-2">🌳</span>
    </div>

    
    <svg class="arc-svg" viewBox="0 0 400 200" preserveAspectRatio="none">
      <path class="arc-path-bg" d="M 60,150 Q 200,30 340,150" />
      <path id="activeArc" class="arc-path-active" d="M 60,150 Q 200,30 340,150" stroke-dasharray="350" stroke-dashoffset="350" />
    </svg>

    
    <div class="node active" id="node0" style="left: 15%; top: 75%;">
      <div class="node-dot">1</div>
      <div class="node-label">Start</div>
    </div>

    <div class="node" id="node1" style="left: 50%; top: 38%;">
      <div class="node-dot">2</div>
      <div class="node-label">Climax</div>
    </div>

    <div class="node" id="node2" style="left: 85%; top: 75%;">
      <div class="node-dot">3</div>
      <div class="node-label">Finish</div>
    </div>

    
    <div class="hero-glow" id="heroGlow" style="left: 15%; top: 70%;"></div>
    <div class="hero" id="hero" style="left: 15%; top: 75%;">🧙</div>

    
    <div class="element-pill" id="elementPill">
      <span>🧙</span> Characters
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="prevBtn">◀</button>
    <button class="ctrl-btn" id="playBtn">⏸</button>
    <button class="ctrl-btn" id="nextBtn">▶</button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const positions = [
      { x: 15, y: 75, arcOffset: 280, label: '🧙 Characters', highlightSetting: false, hero: '🧙' },
      { x: 50, y: 38, arcOffset: 160, label: '🏰 Setting', highlightSetting: true, hero: '🧙' },
      { x: 85, y: 75, arcOffset: 0,   label: '⚡ Adventure', highlightSetting: true, hero: '🏆' }
    ];

    const tabBtns = document.querySelectorAll('.tab-btn');
    const hero = document.getElementById('hero');
    const heroGlow = document.getElementById('heroGlow');
    const backdrop = document.getElementById('backdrop');
    const activeArc = document.getElementById('activeArc');
    const elementPill = document.getElementById('elementPill');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

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

    function applyStep(index) {
      currentStep = index;
      const state = positions[index];

      // Update tabs
      tabBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      // Update nodes
      for (let i = 0; i < 3; i++) {
        const node = document.getElementById(`node${i}`);
        node.classList.toggle('active', i <= index);
      }

      // Update Hero & Glow Position
      hero.style.left = `${state.x}%`;
      hero.style.top = `${state.y}%`;
      hero.textContent = state.hero;

      heroGlow.style.left = `${state.x}%`;
      heroGlow.style.top = `${state.y - 5}%`;

      // Update Path & Backdrop
      activeArc.style.strokeDashoffset = state.arcOffset;
      backdrop.classList.toggle('highlight', state.highlightSetting);

      // Update Pill
      elementPill.innerHTML = state.label;
    }

    function next() {
      applyStep((currentStep + 1) % 3);
    }

    function prev() {
      applyStep((currentStep - 1 + 3) % 3);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(next, 3200);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playBtn.textContent = '▶';
    }

    // Interaction Handlers
    tabBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        applyStep(idx);
        pauseAutoPlay();
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        next();
        startAutoPlay();
      }
    });

    prevBtn.addEventListener('click', () => {
      prev();
      pauseAutoPlay();
    });

    nextBtn.addEventListener('click', () => {
      next();
      pauseAutoPlay();
    });

    // Start on load
    applyStep(0);
    startAutoPlay();
  </script>
</body>
</html>

Stories can be made-up fantasy or realistic, but they always lead you through an exciting journey from start to finish.

What if you want to write a postcard about your real trip to the beach yesterday?

A **recount** retells real events that already happened in the order they occurred.

<!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>Recount Timeline</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

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

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

    /* Timeline tracker bar */
    .timeline-track {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding: 0 20px;
    }

    .track-line {
      position: absolute;
      top: 50%;
      left: 30px;
      right: 30px;
      height: 4px;
      background: #e2e8f0;
      transform: translateY(-50%);
      z-index: 1;
    }

    .track-progress {
      position: absolute;
      top: 50%;
      left: 30px;
      height: 4px;
      background: #3498db;
      transform: translateY(-50%);
      z-index: 2;
      transition: width 0.4s ease;
      width: 0%;
    }

    .nav-btn {
      position: relative;
      z-index: 3;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      transition: all 0.3s ease;
    }

    .nav-btn.active {
      background: #3498db;
      border-color: #3498db;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(52, 152, 219, 0.35);
    }

    /* Main Stage Card */
    .stage {
      width: 100%;
      height: 220px;
      position: relative;
    }

    .step-card {
      position: absolute;
      inset: 0;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

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

    .order-badge {
      background: #ebf5fb;
      color: #2980b9;
      font-size: 14px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 12px;
      letter-spacing: 0.5px;
    }

    .emoji-scene {
      font-size: 64px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08));
    }

    .event-label {
      font-size: 18px;
      font-weight: 600;
      color: #1e2945;
    }

    /* Footer controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 50%;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      color: #334155;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      transition: background 0.2s ease;
    }

    .play-btn:hover {
      background: #f1f5f9;
    }

    .time-arrow {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      background: #f1f5f9;
      padding: 6px 14px;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    
    <div class="timeline-track">
      <div class="track-line"></div>
      <div class="track-progress" id="progress"></div>
      <button class="nav-btn dot active" data-index="0">1. First</button>
      <button class="nav-btn dot" data-index="1">2. Next</button>
      <button class="nav-btn dot" data-index="2">3. Finally</button>
    </div>

    
    <div class="stage">
      <div class="step-card step active">
        <span class="order-badge">Order: 1</span>
        <span class="emoji-scene">☀️ 🥪</span>
        <span class="event-label">Breakfast</span>
      </div>

      <div class="step-card step">
        <span class="order-badge">Order: 2</span>
        <span class="emoji-scene">🚌 🦒</span>
        <span class="event-label">Zoo Trip</span>
      </div>

      <div class="step-card step">
        <span class="order-badge">Order: 3</span>
        <span class="emoji-scene">🏠 🌙</span>
        <span class="event-label">Home</span>
      </div>
    </div>

    
    <div class="controls">
      <button class="play-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
      <div class="time-arrow">Past ➔ Time Order</div>
    </div>
  </div>

  <script src="https://cdn.classace.io/vendor/classace-diagram.js"></script>
  <script>
    const progress = $('#progress');
    const buttons = $$('.dot');
    const steps = $$('.step');

    const progressWidths = ['0%', '50%', '100%'];

    const player = new StepPlayer('.step', {
      interval: 3200,
      onChange: (index) => {
        progress.style.width = progressWidths[index];
        buttons.forEach((btn, i) => {
          btn.classList.toggle('active', i === index);
        });
      }
    });

    player.start();

    buttons.forEach((btn, index) => {
      onTap(btn, () => {
        player.goTo(index);
      });
    });

    onTap($('#playBtn'), () => {
      player.toggle();
      $('#playBtn').textContent = player.playing ? '⏸' : '▶';
    });
  </script>
</body>
</html>

Recounts often use time order words like **first**, **next**, and **finally** to guide you through what happened.

What if you need to find true facts about the Moon or giant sharks?

An **informative text** teaches you true facts and real details without telling a 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;
      -webkit-tap-highlight-color: transparent;
    }

    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: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .main-wrap {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Interactive text page simulation */
    .page-sheet {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }

    /* Anatomy sections */
    .feature-box {
      border-radius: 8px;
      padding: 8px 12px;
      background: #fdfdfd;
      border: 2px solid transparent;
      transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      cursor: pointer;
      position: relative;
    }

    .feature-box:hover {
      background: #f1f5f9;
    }

    .feature-box.active {
      border-color: #f39c12;
      background: #fffdf5;
      box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.18);
    }

    /* Mini tags for features */
    .tag {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 7px;
      border-radius: 6px;
      background: #e2e8f0;
      color: #64748b;
      transition: background 0.25s ease, color 0.25s ease;
      pointer-events: none;
    }

    .feature-box.active .tag {
      background: #f39c12;
      color: #ffffff;
    }

    /* Heading row */
    .heading-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .heading-text {
      font-size: 19px;
      font-weight: 800;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Photo & Label row */
    .visual-area {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: #f8fafc;
      border-radius: 8px;
      padding: 12px;
    }

    .photo-frame {
      width: 80px;
      height: 80px;
      background: #ffffff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 42px;
      line-height: 1;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.25s ease;
      position: relative;
    }

    .photo-frame.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.2);
    }

    .label-pointer {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.25s ease;
    }

    .label-pointer.active {
      border-color: #10b981;
      background: #ecfdf5;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

    .pointer-arrow {
      font-size: 15px;
      color: #64748b;
      line-height: 1;
    }

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

    /* Fact box */
    .fact-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
    }

    .fact-icon {
      font-size: 18px;
    }

    /* Control buttons */
    .nav-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      width: 100%;
    }

    .tab-btn {
      padding: 8px 4px;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .tab-btn:hover {
      background: #f1f5f9;
    }

    .tab-btn.active {
      color: #ffffff;
      background: #1e2945;
      border-color: #1e2945;
    }
  </style>
</head>
<body>

<div class="main-wrap">
  
  <div class="page-sheet">
    
    <div class="feature-box heading-box active" id="feat-heading" onclick="selectFeature(0)">
      <div class="heading-text">
        <span>🐸</span>
        <span>Frogs</span>
      </div>
      <div class="tag">Heading</div>
    </div>

    
    <div class="visual-area">
      <div class="photo-frame" id="feat-photo" onclick="selectFeature(1)" title="Photo">
        🐸
        <div class="tag" style="top: auto; bottom: -8px; right: 50%; transform: translateX(50%); font-size: 9px; padding: 2px 5px;">Photo</div>
      </div>

      <div class="label-pointer" id="feat-label" onclick="selectFeature(2)" title="Label">
        <span class="pointer-arrow">←</span>
        <span class="label-name">Webbed feet</span>
        <div class="tag" style="right: -8px; top: -10px; transform: none; font-size: 9px; padding: 2px 5px;">Label</div>
      </div>
    </div>

    
    <div class="feature-box fact-box" id="feat-fact" onclick="selectFeature(3)">
      <div class="fact-row">
        <span class="fact-icon">✦</span>
        <span>True Facts</span>
      </div>
      <div class="tag">Fact</div>
    </div>
  </div>

  
  <div class="nav-bar">
    <button class="tab-btn active" id="btn-0" onclick="selectFeature(0)">Heading</button>
    <button class="tab-btn" id="btn-1" onclick="selectFeature(1)">Photo</button>
    <button class="tab-btn" id="btn-2" onclick="selectFeature(2)">Label</button>
    <button class="tab-btn" id="btn-3" onclick="selectFeature(3)">Fact</button>
  </div>
</div>

<script>
  let currentIndex = 0;
  const elements = [
    document.getElementById('feat-heading'),
    document.getElementById('feat-photo'),
    document.getElementById('feat-label'),
    document.getElementById('feat-fact')
  ];

  function selectFeature(index) {
    currentIndex = index;
    elements.forEach((el, i) => {
      if (i === index) {
        el.classList.add('active');
      } else {
        el.classList.remove('active');
      }
      const btn = document.getElementById('btn-' + i);
      if (btn) {
        if (i === index) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      }
    });
  }
</script>

</body>
</html>

These texts use real photographs, labels, and headings so you can find information quickly.

What if you want to know the steps for how a tiny seed grows into a giant sunflower?

An **explanation** shows how something works or why something happens step by step.

<!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>Step-by-Step Explanation</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .stepper-nav {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      width: 100%;
      max-width: 360px;
    }

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

    .step-tab.active {
      background: #27ae60;
      border-color: #27ae60;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(39, 174, 96, 0.25);
    }

    .stage-card {
      width: 100%;
      max-width: 360px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
      min-height: 220px;
      justify-content: center;
    }

    .flow-connector {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 20px;
    }

    .node {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      background: #f1f5f9;
      color: #6b7280;
      border: 2px solid #e2e8f0;
      transition: all 0.3s ease;
    }

    .node.active {
      background: #27ae60;
      color: #ffffff;
      border-color: #27ae60;
      box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.15);
    }

    .node.done {
      background: #e8f5e9;
      color: #27ae60;
      border-color: #27ae60;
    }

    .arrow {
      color: #cbd5e1;
      font-size: 14px;
      font-weight: 900;
      transition: color 0.3s ease;
    }

    .arrow.active {
      color: #27ae60;
    }

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

    .step-view {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }

    .step-view.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

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

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

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

    .ctrl-btn {
      background: #f8f9fa;
      border: 1px solid #e6e6e6;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s ease;
    }

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

  <div class="stepper-nav">
    <button class="step-tab active" data-index="0">1</button>
    <button class="step-tab" data-index="1">2</button>
    <button class="step-tab" data-index="2">3</button>
  </div>

  <div class="stage-card">
    <div class="flow-connector">
      <div class="node active" id="node-0">1</div>
      <div class="arrow" id="arrow-0">→</div>
      <div class="node" id="node-1">2</div>
      <div class="arrow" id="arrow-1">→</div>
      <div class="node" id="node-2">3</div>
    </div>

    <div class="visual-area">
      <div class="step-view active" id="view-0">
        <div class="icon-display">🌱</div>
        <div class="step-title">Plant Seed</div>
      </div>

      <div class="step-view" id="view-1">
        <div class="icon-display">🌧️ ☀️</div>
        <div class="step-title">Add Water</div>
      </div>

      <div class="step-view" id="view-2">
        <div class="icon-display">🌻</div>
        <div class="step-title">Flower Blooms</div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="play-btn">⏸ Pause</button>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const tabs = document.querySelectorAll('.step-tab');
    const views = [document.getElementById('view-0'), document.getElementById('view-1'), document.getElementById('view-2')];
    const nodes = [document.getElementById('node-0'), document.getElementById('node-1'), document.getElementById('node-2')];
    const arrows = [document.getElementById('arrow-0'), document.getElementById('arrow-1')];
    const playBtn = document.getElementById('play-btn');

    function showStep(index) {
      currentStep = index;

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

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

      nodes.forEach((node, i) => {
        node.classList.remove('active', 'done');
        if (i === index) {
          node.classList.add('active');
        } else if (i < index) {
          node.classList.add('done');
        }
      });

      arrows.forEach((arrow, i) => {
        arrow.classList.toggle('active', i < index);
      });
    }

    function nextStep() {
      const next = (currentStep + 1) % 3;
      showStep(next);
    }

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

    function stopTimer() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        const idx = parseInt(tab.dataset.index, 10);
        showStep(idx);
        if (isPlaying) {
          startTimer();
        }
      });
    });

    playBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playBtn.textContent = '⏸ Pause';
        nextStep();
        startTimer();
      } else {
        playBtn.textContent = '▶ Play';
        stopTimer();
      }
    });

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

Recipes, science cycle guides, and rule books are all great examples of texts that explain.

How can you quickly figure out why any text was written?

Whenever you read, ask yourself: Is this text entertaining me with a story, sharing facts, retelling a real day, or showing me how something works?

<!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>Text Purposes</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: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

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

    .tab-btn {
      background: #ffffff;
      border: 2px solid transparent;
      border-radius: 12px;
      padding: 8px 4px;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .tab-btn .tab-icon { font-size: 22px; line-height: 1; }
    .tab-btn .tab-label { font-size: 13px; font-weight: 600; color: #6b7280; }

    .tab-btn.active {
      background: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 0 0 1px #22b7ff, 0 4px 10px rgba(34,183,255,0.15);
    }
    .tab-btn.active .tab-label { color: #1e2945; }

    .display-stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 220px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      overflow: hidden;
    }

    .purpose-panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .purpose-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

    .preview-card {
      width: 90%;
      max-width: 320px;
      background: #f8f9fa;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .preview-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
    }

    .preview-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .line {
      height: 8px;
      border-radius: 4px;
      background: #e2e8f0;
    }

    .line.w-full { width: 100%; }
    .line.w-3-4 { width: 75%; }
    .line.w-1-2 { width: 50%; }

    .step-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
    }

    .step-badge {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #22b7ff;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 10px;
      width: 100%;
      max-width: 520px;
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
  </style>
</head>
<body>

  <div class="nav-grid">
    <button class="tab-btn active" data-index="0">
      <span class="tab-icon">🎭</span>
      <span class="tab-label">Entertain</span>
    </button>
    <button class="tab-btn" data-index="1">
      <span class="tab-icon">🌍</span>
      <span class="tab-label">Inform</span>
    </button>
    <button class="tab-btn" data-index="2">
      <span class="tab-icon">📔</span>
      <span class="tab-label">Recount</span>
    </button>
    <button class="tab-btn" data-index="3">
      <span class="tab-icon">🛠️</span>
      <span class="tab-label">Instruct</span>
    </button>
  </div>

  <div class="display-stage">
    
    <div class="purpose-panel active" id="panel-0">
      <div class="preview-card" style="border-left: 4px solid #a855f7;">
        <div class="preview-header" style="color: #7e22ce;">
          <span>🐉</span> The Brave Knight
        </div>
        <div class="preview-body">
          <div class="line w-full" style="background: #e9d5ff;"></div>
          <div class="line w-3-4" style="background: #e9d5ff;"></div>
          <div class="line w-1-2" style="background: #e9d5ff;"></div>
        </div>
      </div>
    </div>

    
    <div class="purpose-panel" id="panel-1">
      <div class="preview-card" style="border-left: 4px solid #3b82f6;">
        <div class="preview-header" style="color: #1d4ed8;">
          <span>🦒</span> All About Giraffes
        </div>
        <div class="preview-body">
          <div class="line w-full" style="background: #bfdbfe;"></div>
          <div class="line w-3-4" style="background: #bfdbfe;"></div>
          <div class="line w-full" style="background: #bfdbfe;"></div>
        </div>
      </div>
    </div>

    
    <div class="purpose-panel" id="panel-2">
      <div class="preview-card" style="border-left: 4px solid #f59e0b;">
        <div class="preview-header" style="color: #b45309;">
          <span>📅</span> My Weekend Trip
        </div>
        <div class="preview-body">
          <div class="line w-full" style="background: #fde68a;"></div>
          <div class="line w-3-4" style="background: #fde68a;"></div>
          <div class="line w-1-2" style="background: #fde68a;"></div>
        </div>
      </div>
    </div>

    
    <div class="purpose-panel" id="panel-3">
      <div class="preview-card" style="border-left: 4px solid #10b981;">
        <div class="preview-header" style="color: #047857; margin-bottom: 4px;">
          <span>🥞</span> How to Bake
        </div>
        <div class="preview-body" style="gap: 8px;">
          <div class="step-item">
            <span class="step-badge" style="background: #10b981;">1</span>
            <div class="line w-3-4" style="background: #a7f3d0;"></div>
          </div>
          <div class="step-item">
            <span class="step-badge" style="background: #10b981;">2</span>
            <div class="line w-1-2" style="background: #a7f3d0;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="play-btn" id="toggleBtn">
      <span id="playIcon">⏸</span>
      <span id="playText">Auto</span>
    </button>
  </div>

  <script>
    const tabs = document.querySelectorAll('.tab-btn');
    const panels = document.querySelectorAll('.purpose-panel');
    const toggleBtn = document.getElementById('toggleBtn');
    const playIcon = document.getElementById('playIcon');
    let currentIndex = 0;
    let timer = null;
    let isPlaying = true;

    function setStep(index) {
      currentIndex = (index + tabs.length) % tabs.length;
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === currentIndex);
      });
      panels.forEach((panel, i) => {
        panel.classList.toggle('active', i === currentIndex);
      });
    }

    function startAuto() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        setStep(currentIndex + 1);
      }, 3200);
      isPlaying = true;
      playIcon.textContent = '⏸';
    }

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

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

    toggleBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAuto();
      } else {
        startAuto();
      }
    });

    startAuto();
  </script>
</body>
</html>

Next time you pick up a book or look at a sign, check the clues to spot its purpose right away!

Different Texts for Different Purposes. Understand that texts are written for different purposes such as to recount, narrate, inform or explain.

Identify the Purpose of a Text (Level D / Grade 2 Reading Comprehension)

KS1 English: Understanding Text Types, Form and Purpose

Overview of Text Types and their Purpose Across the Curriculum (Aligned with AC9E1LA03)

Teaching text purpose in Years 1–2 is most effective using the 'Text Detective' multi-sensory approach. Begin with concrete mentor texts (e.g., a recipe/how-to guide vs. a fairy tale vs. a zoo report vs. a weekend journal) and guide students using explicit 'clue hunts' for organizational features (timelines, steps, dialogue bubbles, bulleted facts). Emphasize the connection between why an author writes and how they arrange their page layout and grammatical choices.

Different Texts for Different Purposes

1. To Narrate

2. To Recount