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 closing your eyes and picturing a brand new person you have never seen before.

Authors do not need paint to draw a picture for you — they use words like magic tools to build characters in your mind.

Authors use **adjectives**, which are describing words that tell us how a character looks, feels, or sounds.

<!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>Adjectives Describe Characters</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

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

    .main-wrap {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: center;
    }

    /* Adjective Selector Buttons */
    .btn-group {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }

    .adj-btn {
      flex: 1;
      padding: 10px 8px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 10px;
      border: 2px solid transparent;
      background: #ffffff;
      color: #6b7280;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      transition: all 0.25s ease;
      text-align: center;
    }

    .adj-btn.active {
      color: #1e2945;
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.25);
    }

    /* Creature Stage Card */
    .character-card {
      width: 100%;
      background: #ffffff;
      border-radius: 16px;
      padding: 20px 16px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      transition: background 0.3s ease;
    }

    /* Visual Avatar */
    .avatar-box {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 56px;
      transition: all 0.3s ease;
      position: relative;
    }

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

    .trait-tile {
      background: #f8f9fa;
      border-radius: 10px;
      padding: 10px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      text-align: center;
    }

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

    .trait-sense {
      font-size: 11px;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .trait-word {
      font-size: 14px;
      font-weight: 800;
      color: #1e2945;
      transition: color 0.25s ease;
    }

    /* Theme-specific styles */
    .theme-fluffy .avatar-box {
      background: #fdf2f8;
      box-shadow: 0 0 0 8px #fce7f3;
      border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%;
    }
    .theme-fluffy .trait-word { color: #db2777; }

    .theme-jagged .avatar-box {
      background: #fef2f2;
      box-shadow: 0 0 0 8px #fee2e2;
      border-radius: 20%;
    }
    .theme-jagged .trait-word { color: #dc2626; }

    .theme-slimy .avatar-box {
      background: #ecfdf5;
      box-shadow: 0 0 0 8px #d1fae5;
      border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%;
    }
    .theme-slimy .trait-word { color: #059669; }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="btn-group">
      <button class="adj-btn active" data-char="0">Fluffy</button>
      <button class="adj-btn" data-char="1">Jagged</button>
      <button class="adj-btn" data-char="2">Slimy</button>
    </div>

    
    <div id="card" class="character-card theme-fluffy">
      <div id="avatar" class="avatar-box">🐰</div>

      
      <div class="traits-grid">
        <div class="trait-tile">
          <span class="trait-icon">👀</span>
          <span class="trait-sense">Looks</span>
          <span id="lookVal" class="trait-word">Soft</span>
        </div>
        <div class="trait-tile">
          <span class="trait-icon">✋</span>
          <span class="trait-sense">Feels</span>
          <span id="feelVal" class="trait-word">Fluffy</span>
        </div>
        <div class="trait-tile">
          <span class="trait-icon">👂</span>
          <span class="trait-sense">Sounds</span>
          <span id="soundVal" class="trait-word">Gentle</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    const data = [
      {
        theme: 'theme-fluffy',
        emoji: '🐰',
        looks: 'Soft',
        feels: 'Fluffy',
        sounds: 'Gentle'
      },
      {
        theme: 'theme-jagged',
        emoji: '🐲',
        looks: 'Spiky',
        feels: 'Jagged',
        sounds: 'Fierce'
      },
      {
        theme: 'theme-slimy',
        emoji: '🐸',
        looks: 'Glossy',
        feels: 'Slimy',
        sounds: 'Bubbly'
      }
    ];

    const card = $('#card');
    const avatar = $('#avatar');
    const lookVal = $('#lookVal');
    const feelVal = $('#feelVal');
    const soundVal = $('#soundVal');
    const btns = $$('.adj-btn');

    function applyCharacter(index) {
      btns.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      const char = data[index];
      card.className = `character-card ${char.theme}`;
      avatar.textContent = char.emoji;
      lookVal.textContent = char.looks;
      feelVal.textContent = char.feels;
      soundVal.textContent = char.sounds;
    }

    btns.forEach((btn, i) => {
      onTap(btn, () => applyCharacter(i));
    });
  </script>
</body>
</html>

Words like *fluffy* or *jagged* instantly tell your brain whether a character is soft and cuddly or rough and scary.

But what happens once a character steps out of the picture and starts moving around the page?

Authors choose **action verbs**, or movement words, to show a character's mood and personality.

Instead of just saying someone "walked" into the kitchen, an author might write that they **stomped**, **tiptoed**, or **bounded**.

<!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>Action Verbs and Character Feelings</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;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    gap: 12px;
  }

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

  .nav-btn {
    flex: 1 1 calc(25% - 8px);
    min-width: 76px;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.25s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }

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

  .stage {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 240px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
  }

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

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

  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .verb-badge {
    font-size: 18px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

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

  .clue-angry { background: #fee2e2; color: #b91c1c; }
  .clue-sneaky { background: #f3e8ff; color: #7e22ce; }
  .clue-excited { background: #fef3c7; color: #b45309; }
  .clue-neutral { background: #f1f5f9; color: #475569; }

  .track-area {
    position: relative;
    height: 110px;
    width: 100%;
    display: flex;
    align-items: flex-end;
  }

  .floor-line {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    height: 2px;
    background: #e2e8f0;
    border-radius: 1px;
  }

  .actor {
    position: absolute;
    bottom: 14px;
    font-size: 40px;
    line-height: 1;
    will-change: transform, left;
  }

  /* Stomp animation */
  .view-panel.active .actor-stomp {
    animation: stompMove 2.6s ease-in-out infinite;
  }
  @keyframes stompMove {
    0% { left: 10%; transform: translateY(0); }
    20% { left: 10%; transform: translateY(-30px); }
    30% { left: 35%; transform: translateY(0); }
    50% { left: 35%; transform: translateY(-30px); }
    60% { left: 60%; transform: translateY(0); }
    80% { left: 60%; transform: translateY(-30px); }
    90%, 100% { left: 80%; transform: translateY(0); }
  }

  .shockwave {
    position: absolute;
    bottom: 8px;
    font-size: 18px;
    opacity: 0;
  }
  .view-panel.active .shock-1 { left: 33%; animation: blast 2.6s infinite 0.78s; }
  .view-panel.active .shock-2 { left: 58%; animation: blast 2.6s infinite 1.56s; }
  .view-panel.active .shock-3 { left: 78%; animation: blast 2.6s infinite 2.34s; }

  @keyframes blast {
    0% { opacity: 1; transform: scale(0.6); }
    30% { opacity: 0.8; transform: scale(1.3); }
    60%, 100% { opacity: 0; transform: scale(1.6); }
  }

  /* Tiptoe animation */
  .view-panel.active .actor-tiptoe {
    animation: tiptoeMove 3.2s linear infinite;
  }
  @keyframes tiptoeMove {
    0% { left: 10%; transform: translateY(0); }
    25% { left: 30%; transform: translateY(-6px); }
    50% { left: 50%; transform: translateY(0); }
    75% { left: 70%; transform: translateY(-6px); }
    100% { left: 85%; transform: translateY(0); }
  }

  .step-mark {
    position: absolute;
    bottom: 12px;
    font-size: 11px;
    opacity: 0;
    color: #94a3b8;
  }
  .view-panel.active .mark-1 { left: 22%; animation: fadeStep 3.2s infinite 0.5s; }
  .view-panel.active .mark-2 { left: 42%; animation: fadeStep 3.2s infinite 1.3s; }
  .view-panel.active .mark-3 { left: 62%; animation: fadeStep 3.2s infinite 2.1s; }
  .view-panel.active .mark-4 { left: 82%; animation: fadeStep 3.2s infinite 2.8s; }

  @keyframes fadeStep {
    0% { opacity: 0; }
    20% { opacity: 0.9; }
    80%, 100% { opacity: 0; }
  }

  /* Bounded animation */
  .view-panel.active .actor-bound {
    animation: boundMove 2.4s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
  }
  @keyframes boundMove {
    0% { left: 10%; transform: translateY(0) rotate(0deg); }
    25% { left: 35%; transform: translateY(-50px) rotate(10deg); }
    50% { left: 55%; transform: translateY(0) rotate(0deg); }
    75% { left: 75%; transform: translateY(-50px) rotate(10deg); }
    100% { left: 85%; transform: translateY(0) rotate(0deg); }
  }

  .arc-trail {
    position: absolute;
    bottom: 14px;
    font-size: 14px;
    opacity: 0;
  }
  .view-panel.active .trail-1 { left: 28%; bottom: 35px; animation: arcPop 2.4s infinite 0.4s; }
  .view-panel.active .trail-2 { left: 68%; bottom: 35px; animation: arcPop 2.4s infinite 1.5s; }

  @keyframes arcPop {
    0% { opacity: 0; transform: scale(0.5); }
    30% { opacity: 1; transform: scale(1.1); }
    70%, 100% { opacity: 0; transform: scale(0.8); }
  }

  /* Walk animation */
  .view-panel.active .actor-walk {
    animation: walkMove 2.8s linear infinite;
  }
  @keyframes walkMove {
    0% { left: 10%; transform: translateY(0); }
    50% { left: 50%; transform: translateY(-3px); }
    100% { left: 85%; transform: translateY(0); }
  }

  .footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    border-top: 1px dashed #e2e8f0;
    padding-top: 8px;
  }

  .controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .ctrl-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
  }
  .ctrl-btn:hover {
    background: #f8fafc;
  }
</style>
</head>
<body>

  <div class="nav-tabs">
    <button class="nav-btn active" data-idx="0">Stomped</button>
    <button class="nav-btn" data-idx="1">Tiptoed</button>
    <button class="nav-btn" data-idx="2">Bounded</button>
    <button class="nav-btn" data-idx="3">Walked</button>
  </div>

  <div class="stage">
    
    <div class="view-panel active">
      <div class="header-row">
        <span class="verb-badge">💥 Stomped</span>
        <span class="clue-badge clue-angry">😠 Angry / Upset</span>
      </div>
      <div class="track-area">
        <div class="floor-line"></div>
        <div class="shockwave shock-1">💥</div>
        <div class="shockwave shock-2">💥</div>
        <div class="shockwave shock-3">💥</div>
        <div class="actor actor-stomp">😠</div>
      </div>
      <div class="footer-row">
        <span>Heavy, forceful motion</span>
        <span>Shows anger</span>
      </div>
    </div>

    
    <div class="view-panel">
      <div class="header-row">
        <span class="verb-badge">🤫 Tiptoed</span>
        <span class="clue-badge clue-sneaky">🤫 Sneaky / Quiet</span>
      </div>
      <div class="track-area">
        <div class="floor-line"></div>
        <div class="step-mark mark-1">🐾</div>
        <div class="step-mark mark-2">🐾</div>
        <div class="step-mark mark-3">🐾</div>
        <div class="step-mark mark-4">🐾</div>
        <div class="actor actor-tiptoe">🤫</div>
      </div>
      <div class="footer-row">
        <span>Light, silent steps</span>
        <span>Shows secrecy</span>
      </div>
    </div>

    
    <div class="view-panel">
      <div class="header-row">
        <span class="verb-badge">⚡ Bounded</span>
        <span class="clue-badge clue-excited">😃 Excited / Joyful</span>
      </div>
      <div class="track-area">
        <div class="floor-line"></div>
        <div class="arc-trail trail-1">✨</div>
        <div class="arc-trail trail-2">✨</div>
        <div class="actor actor-bound">😃</div>
      </div>
      <div class="footer-row">
        <span>High, energetic leaps</span>
        <span>Shows excitement</span>
      </div>
    </div>

    
    <div class="view-panel">
      <div class="header-row">
        <span class="verb-badge">🚶 Walked</span>
        <span class="clue-badge clue-neutral">😐 Neutral</span>
      </div>
      <div class="track-area">
        <div class="floor-line"></div>
        <div class="actor actor-walk">🚶</div>
      </div>
      <div class="footer-row">
        <span>Plain baseline motion</span>
        <span>No specific feeling</span>
      </div>
    </div>
  </div>

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

<script>
  const panels = $$('.view-panel');
  const tabs = $$('.nav-btn');
  const playBtn = $('#playBtn');

  const player = new StepPlayer('.view-panel', {
    interval: 3200,
    onChange: (idx) => {
      tabs.forEach((t, i) => {
        if (i === idx) t.classList.add('active');
        else t.classList.remove('active');
      });
    }
  });

  tabs.forEach((tab) => {
    onTap(tab, () => {
      const idx = parseInt(tab.getAttribute('data-idx'), 10);
      player.goTo(idx);
    });
  });

  onTap(playBtn, () => {
    player.toggle();
    playBtn.textContent = player.playing ? '⏸ Pause' : '▶ Auto-Play';
  });

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

The way a character moves gives you clues about how they feel without the author having to say "he was angry."

Now, what gives us the biggest clue of all about who a character really is inside?

**Dialogue** means the exact words a character speaks out loud in a story.

Instead of using the word "said" every time, authors use colorful speech tags like **whispered**, **bellowed**, or **giggled**.

<!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>Speech Tags Reveal Character</title>
<script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
<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;
  }

  .main-stage {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  /* Tag Selector Pills */
  .tag-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  .tag-btn {
    border: 2px solid #e2e8f0;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
  }

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

  /* Character & Speech Area */
  .display-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
  }

  .scene-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
  }

  .avatar-box {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    background: #f8fafc;
    border: 3px solid #e2e8f0;
    transition: all 0.3s ease;
    flex-shrink: 0;
  }

  .speech-bubble {
    position: relative;
    background: #f0f9ff;
    border: 2px solid #bae6fd;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #0369a1;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
  }

  .speech-bubble::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 10px 6px 0;
    border-style: solid;
    border-color: transparent #bae6fd transparent transparent;
  }

  .verb-highlight {
    color: #22b7ff;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Trait Output Badge */
  .trait-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 300px;
  }

  /* Auto player controls */
  .controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .ctrl-btn {
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="main-stage">
  
  <div class="tag-nav">
    <button class="tag-btn active" data-index="0">whispered</button>
    <button class="tag-btn" data-index="1">bellowed</button>
    <button class="tag-btn" data-index="2">giggled</button>
    <button class="tag-btn" data-index="3">gasped</button>
  </div>

  
  <div class="display-card">
    <div class="scene-row">
      <div class="avatar-box" id="avatar">🤫</div>
      <div class="speech-bubble" id="speechBox">
        <span>“I found it!”</span>
        <span class="verb-highlight" id="verbText">whispered</span>
      </div>
    </div>

    
    <div class="trait-banner" id="traitBadge">
      <span id="traitIcon">🔒</span>
      <span id="traitText">Secretive &amp; Cautious</span>
    </div>
  </div>

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

<script>
  const data = [
    {
      verb: "whispered",
      emoji: "🤫",
      trait: "Secretive & Cautious",
      icon: "🔒",
      avatarBg: "#eff6ff",
      avatarBorder: "#60a5fa",
      badgeBg: "#f1f5f9",
      badgeColor: "#334155"
    },
    {
      verb: "bellowed",
      emoji: "📢",
      trait: "Loud & Forceful",
      icon: "⚡",
      avatarBg: "#fff7ed",
      avatarBorder: "#fb923c",
      badgeBg: "#ffedd5",
      badgeColor: "#9a3412"
    },
    {
      verb: "giggled",
      emoji: "🤭",
      trait: "Playful & Cheerful",
      icon: "✨",
      avatarBg: "#fdf4ff",
      avatarBorder: "#e879f9",
      badgeBg: "#fae8ff",
      badgeColor: "#86198f"
    },
    {
      verb: "gasped",
      emoji: "😲",
      trait: "Shocked & Alarmed",
      icon: "❗",
      avatarBg: "#fef2f2",
      avatarBorder: "#f87171",
      badgeBg: "#fee2e2",
      badgeColor: "#991b1b"
    }
  ];

  const buttons = $$('.tag-btn');
  const avatar = $('#avatar');
  const verbText = $('#verbText');
  const traitBadge = $('#traitBadge');
  const traitIcon = $('#traitIcon');
  const traitText = $('#traitText');
  const playBtn = $('#playBtn');

  function updateView(index) {
    const item = data[index];
    buttons.forEach((btn, i) => btn.classList.toggle('active', i === index));

    avatar.textContent = item.emoji;
    avatar.style.backgroundColor = item.avatarBg;
    avatar.style.borderColor = item.avatarBorder;

    verbText.textContent = item.verb;

    traitIcon.textContent = item.icon;
    traitText.textContent = item.trait;
    traitBadge.style.backgroundColor = item.badgeBg;
    traitBadge.style.color = item.badgeColor;
  }

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

  function startCycle() {
    stopCycle();
    timer = setInterval(() => {
      currentIndex = (currentIndex + 1) % data.length;
      updateView(currentIndex);
    }, 3200);
  }

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

  buttons.forEach((btn, i) => {
    onTap(btn, () => {
      currentIndex = i;
      updateView(currentIndex);
      if (isPlaying) {
        startCycle();
      }
    });
  });

  onTap(playBtn, () => {
    isPlaying = !isPlaying;
    if (isPlaying) {
      playBtn.textContent = '⏸ Pause';
      startCycle();
    } else {
      playBtn.textContent = '▶ Play';
      stopCycle();
    }
  });

  updateView(0);
  startCycle();
</script>

</body>
</html>

A common mistake is waiting for an author to write a simple sentence like "Leo was brave."

Great storytellers usually show courage through Leo's actions and trembling whispers rather than just telling you.

Next time you read your favorite book, look for the special adjectives, verbs, and dialogue tags that bring the characters to life!

How Language Describes Characters. Identify how authors use language to present characters in different ways.

Use Actions and Dialogue to Understand Characters (AC9E2LE03)

Generating Vocabulary to Describe Characters in Stories (KS1 / Year 2)

How to Describe a Character (KS1 English Language & Literature)

For Year 2 learners, begin by using rich picture books and multimodal texts where language can be explicitly linked to illustrations. Scaffold the distinction between 'outside words' (appearance adjectives) and 'inside words' (personality/feelings traits). Utilize drama conventions (e.g., hot seating, freeze-frames) to let students embody the verbs and dialogue used by authors before engaging in comparative text discussions.

How Language Describes Characters

Look Closely: Appearance Words

Action Words: How Characters Move