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 finished reading an amazing book, but when your friend asked about it, you could only say, "It was good"?

There is a much better way to share your excitement so others can see why the story was so special.

What makes a reader's opinion sound clear and powerful?

To **appreciate** a text means to notice the special parts of a story or poem and explain why you enjoyed them.

When you share your **response**, you tell which characters, words, or scenes caught your attention.

<!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>Sharing a Response</title>
  <script src="https://cdn.jsdelivr.net/npm/classace-diagram@latest/dist/index.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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      gap: 16px;
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 420px;
    }

    .tab-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 8px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      background: #f8f9fa;
      border: 1.5px solid #e6e6e6;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      user-select: none;
    }

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

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

    .card-panel {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      padding: 18px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

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

    .flow-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      height: 100%;
    }

    .box {
      flex: 1;
      height: 100%;
      background: #f8f9fa;
      border-radius: 10px;
      border: 1px dashed #cbd5e1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 12px 8px;
      gap: 8px;
    }

    .box.response {
      border: 1.5px solid #bae6fd;
      background: #f0f9ff;
    }

    .icon-large {
      font-size: 38px;
      line-height: 1;
    }

    .tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .box.response .tag {
      color: #0284c7;
    }

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

    .arrow {
      font-size: 20px;
      color: #94a3b8;
      font-weight: bold;
      flex-shrink: 0;
    }

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

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #e2e8f0;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }

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

  <div class="nav-tabs">
    <button class="tab-btn active" data-index="0">👤 Character</button>
    <button class="tab-btn" data-index="1">💬 Word</button>
    <button class="tab-btn" data-index="2">🎬 Scene</button>
  </div>

  <div class="stage">
    
    <div class="card-panel active" id="panel-0">
      <div class="flow-row">
        <div class="box">
          <span class="tag">Attention</span>
          <span class="icon-large">🦁</span>
          <span class="label-main">Brave Hero</span>
        </div>
        <div class="arrow">➔</div>
        <div class="box response">
          <span class="tag">Response</span>
          <span class="icon-large">💡</span>
          <span class="label-main">"I admired..."</span>
        </div>
      </div>
    </div>

    
    <div class="card-panel" id="panel-1">
      <div class="flow-row">
        <div class="box">
          <span class="tag">Attention</span>
          <span class="icon-large">✨</span>
          <span class="label-main">"Glimmer"</span>
        </div>
        <div class="arrow">➔</div>
        <div class="box response">
          <span class="tag">Response</span>
          <span class="icon-large">💭</span>
          <span class="label-main">"I pictured..."</span>
        </div>
      </div>
    </div>

    
    <div class="card-panel" id="panel-2">
      <div class="flow-row">
        <div class="box">
          <span class="tag">Attention</span>
          <span class="icon-large">🌙</span>
          <span class="label-main">Dark Forest</span>
        </div>
        <div class="arrow">➔</div>
        <div class="box response">
          <span class="tag">Response</span>
          <span class="icon-large">⚡</span>
          <span class="label-main">"I felt tense..."</span>
        </div>
      </div>
    </div>
  </div>

  <div class="stepper-controls">
    <div class="dot active" data-index="0"></div>
    <div class="dot" data-index="1"></div>
    <div class="dot" data-index="2"></div>
  </div>

  <script>
    const tabs = document.querySelectorAll('.tab-btn');
    const panels = document.querySelectorAll('.card-panel');
    const dots = document.querySelectorAll('.dot');
    let currentIndex = 0;
    let timer = null;

    function setStep(idx) {
      currentIndex = idx;
      tabs.forEach((tab, i) => tab.classList.toggle('active', i === idx));
      panels.forEach((p, i) => p.classList.toggle('active', i === idx));
      dots.forEach((dot, i) => dot.classList.toggle('active', i === idx));
    }

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(() => {
        setStep((currentIndex + 1) % 3);
      }, 3500);
    }

    function stopAutoPlay() {
      if (timer) clearInterval(timer);
    }

    tabs.forEach((tab) => {
      tab.addEventListener('click', () => {
        stopAutoPlay();
        setStep(parseInt(tab.dataset.index, 10));
      });
    });

    dots.forEach((dot) => {
      dot.addEventListener('click', () => {
        stopAutoPlay();
        setStep(parseInt(dot.dataset.index, 10));
      });
    });

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

How can you build a complete response sentence without getting stuck?

You can share your thoughts clearly by stacking three simple pieces together like building blocks.

First share your **opinion**, next add your **reason** using the word "because", and finish with **evidence** by naming a real example from the text.

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

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

  .step-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 2px solid transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .step-card.active {
    border-color: #22b7ff;
    background: #f0f9ff;
    box-shadow: 0 4px 14px rgba(34, 183, 255, 0.18);
  }

  .step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s ease, color 0.25s ease;
  }

  .step-card.active .step-num {
    background: #22b7ff;
    color: #ffffff;
  }

  .step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

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

  .step-clue {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
  }

  .step-icon {
    font-size: 24px;
    opacity: 0.8;
  }

  .connector {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: bold;
  }

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

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

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

<div class="ladder-container">
  
  <div class="step-card active" data-step="0" id="card-0">
    <div class="step-num">1</div>
    <div class="step-content">
      <div class="step-title">Opinion</div>
      <div class="step-clue">"I think..."</div>
    </div>
    <div class="step-icon">💭</div>
  </div>

  <div class="connector">↓</div>

  
  <div class="step-card" data-step="1" id="card-1">
    <div class="step-num">2</div>
    <div class="step-content">
      <div class="step-title">Reason</div>
      <div class="step-clue">"...because..."</div>
    </div>
    <div class="step-icon">🔗</div>
  </div>

  <div class="connector">↓</div>

  
  <div class="step-card" data-step="2" id="card-2">
    <div class="step-num">3</div>
    <div class="step-content">
      <div class="step-title">Evidence</div>
      <div class="step-clue">"...for example..."</div>
    </div>
    <div class="step-icon">📖</div>
  </div>

  <div class="controls">
    <button class="dot-btn active" aria-label="Step 1" data-step="0"></button>
    <button class="dot-btn" aria-label="Step 2" data-step="1"></button>
    <button class="dot-btn" aria-label="Step 3" data-step="2"></button>
  </div>
</div>

<script>
  let currentStep = 0;
  const cards = [document.getElementById('card-0'), document.getElementById('card-1'), document.getElementById('card-2')];
  const dots = document.querySelectorAll('.dot-btn');
  let timer = null;

  function setStep(index) {
    currentStep = index;
    cards.forEach((card, idx) => {
      if (idx === index) {
        card.classList.add('active');
      } else {
        card.classList.remove('active');
      }
    });
    dots.forEach((dot, idx) => {
      if (idx === index) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
  }

  function startAutoPlay() {
    stopAutoPlay();
    timer = setInterval(() => {
      setStep((currentStep + 1) % 3);
    }, 3200);
  }

  function stopAutoPlay() {
    if (timer) clearInterval(timer);
  }

  cards.forEach((card, idx) => {
    card.addEventListener('click', () => {
      setStep(idx);
      startAutoPlay();
    });
  });

  dots.forEach((dot, idx) => {
    dot.addEventListener('click', () => {
      setStep(idx);
      startAutoPlay();
    });
  });

  startAutoPlay();
</script>

</body>
</html>

Let's test this ladder on a real story to see how it works.

Imagine you read this sentence: *Pip the mouse tiptoed across the moonlit kitchen floor, dodging the sleeping cat's whiskers to grab the golden cheese.*

A basic response is: "I liked the mouse story."

A great appreciation response says: "I thought the story was **thrilling** because Pip was daring, especially when he squeezed right past the cat's whiskers!"

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

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

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

    /* Tab switcher */
    .tabs {
      display: flex;
      gap: 6px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 10px;
    }

    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 4px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    }

    /* Formula Stack */
    .stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .card-block {
      background: #ffffff;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      border-left: 4px solid #cbd5e1;
      transition: border-color 0.25s ease, background 0.25s ease;
    }

    .card-block.step-1 { border-left-color: #22b7ff; }
    .card-block.step-2 { border-left-color: #10b981; }
    .card-block.step-3 { border-left-color: #f59e0b; }

    .tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 6px;
      border-radius: 6px;
      white-space: nowrap;
      min-width: 68px;
      text-align: center;
    }

    .tag-1 { background: #e0f2fe; color: #0369a1; }
    .tag-2 { background: #d1fae5; color: #047857; }
    .tag-3 { background: #fef3c7; color: #b45309; }

    .phrase {
      font-size: 14px;
      color: #334155;
      line-height: 1.3;
    }

    .highlight {
      font-weight: 700;
      color: #0f172a;
    }

    /* Connectors */
    .plus-icon {
      text-align: center;
      font-size: 12px;
      font-weight: 800;
      color: #94a3b8;
      margin: -4px 0;
    }

    /* Bottom Summary Bar */
    .formula-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #ffffff;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    .pill {
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
    }

    .pill-1 { background: #e0f2fe; color: #0284c7; }
    .pill-2 { background: #d1fae5; color: #059669; }
    .pill-3 { background: #fef3c7; color: #d97706; }
  </style>
</head>
<body>

  <div class="main">
    
    <div class="tabs" role="tablist">
      <button class="tab-btn active" onclick="selectStory(0)">⚡ Thrilling</button>
      <button class="tab-btn" onclick="selectStory(1)">😂 Hilarious</button>
      <button class="tab-btn" onclick="selectStory(2)">🔍 Mysterious</button>
    </div>

    
    <div class="stack">
      
      <div class="card-block step-1">
        <span class="tag tag-1">1. Feeling</span>
        <span class="phrase" id="part1">I thought the story was <span class="highlight">thrilling</span></span>
      </div>

      <div class="plus-icon">+</div>

      
      <div class="card-block step-2">
        <span class="tag tag-2">2. Reason</span>
        <span class="phrase" id="part2">because <span class="highlight">Pip was daring</span>,</span>
      </div>

      <div class="plus-icon">+</div>

      
      <div class="card-block step-3">
        <span class="tag tag-3">3. Evidence</span>
        <span class="phrase" id="part3">especially when <span class="highlight">he crept past the cat!</span></span>
      </div>
    </div>

    
    <div class="formula-bar">
      <span class="pill pill-1">Strong Word</span>
      <span>+</span>
      <span class="pill pill-2">Why</span>
      <span>+</span>
      <span class="pill pill-3">Proof</span>
    </div>
  </div>

  <script>
    const data = [
      {
        part1: 'I thought the story was <span class="highlight">thrilling</span>',
        part2: 'because <span class="highlight">Pip was daring</span>,',
        part3: 'especially when <span class="highlight">he crept past the cat!</span>'
      },
      {
        part1: 'The chapter was <span class="highlight">hilarious</span>',
        part2: 'because <span class="highlight">the puppy was clumsy</span>,',
        part3: 'especially when <span class="highlight">he slipped into the bath!</span>'
      },
      {
        part1: 'The plot felt <span class="highlight">mysterious</span>',
        part2: 'because <span class="highlight">clues vanished</span>,',
        part3: 'especially when <span class="highlight">the old clock ticked backwards!</span>'
      }
    ];

    function selectStory(index) {
      const buttons = document.querySelectorAll('.tab-btn');
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      document.getElementById('part1').innerHTML = data[index].part1;
      document.getElementById('part2').innerHTML = data[index].part2;
      document.getElementById('part3').innerHTML = data[index].part3;
    }
  </script>
</body>
</html>

What words can you use when you want to describe a story without using the word "good"?

Using **descriptive words** helps your listener feel the exact same mood you felt while reading.

<!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>Descriptive Words and Mood</title>
<script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
  body {
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 16px;
    user-select: none;
  }
  .app-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    width: 100%;
  }
  .tab-btn {
    flex: 1;
    border: 2px solid #e6e6e6;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 4px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .tab-btn.active {
    border-color: #22b7ff;
    color: #1e2945;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(34, 183, 255, 0.2);
  }
  .stage {
    position: relative;
    width: 100%;
    height: 230px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    transition: background 0.4s ease, border-color 0.4s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  }
  .flow-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
  }
  .card-box {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 110px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
  }
  .icon-big {
    font-size: 40px;
    line-height: 1;
    transition: transform 0.3s ease;
  }
  .label-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
  }
  .word-val {
    font-size: 15px;
    font-weight: 700;
    color: #1e2945;
  }
  .connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #22b7ff;
    font-size: 20px;
    font-weight: bold;
  }
  .spark {
    font-size: 18px;
    animation: pulse 1.5s infinite ease-in-out;
  }
  @keyframes pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.15); }
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="tabs">
    <button class="tab-btn active" id="btn-0">🌧️ Gloomy</button>
    <button class="tab-btn" id="btn-1">⚡ Thrilling</button>
    <button class="tab-btn" id="btn-2">✨ Magical</button>
  </div>

  <div class="stage" id="stage">
    <div class="flow-row">
      
      <div class="card-box" id="wordCard">
        <span class="label-tag">Word</span>
        <div class="icon-big" id="wordIcon">📖</div>
        <div class="word-val" id="wordText">Shadowy</div>
      </div>

      
      <div class="connector">
        <span class="spark">✦</span>
        <span>→</span>
      </div>

      
      <div class="card-box" id="moodCard">
        <span class="label-tag">Mood</span>
        <div class="icon-big" id="moodIcon">🌫️</div>
        <div class="word-val" id="moodText">Eerie</div>
      </div>
    </div>
  </div>
</div>

<script>
  const data = [
    {
      word: "Shadowy",
      wordIcon: "📖",
      mood: "Eerie",
      moodIcon: "🌫️",
      stageBg: "linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%)",
      borderColor: "#cbd5e1"
    },
    {
      word: "Thunderous",
      wordIcon: "⚡",
      mood: "Intense",
      moodIcon: "🔥",
      stageBg: "linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%)",
      borderColor: "#fed7aa"
    },
    {
      word: "Glimmering",
      wordIcon: "✨",
      mood: "Wonder",
      moodIcon: "🌟",
      stageBg: "linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%)",
      borderColor: "#bbf7d0"
    }
  ];

  let activeIndex = 0;
  const stage = $('#stage');
  const wordText = $('#wordText');
  const wordIcon = $('#wordIcon');
  const moodText = $('#moodText');
  const moodIcon = $('#moodIcon');

  function setMood(index) {
    activeIndex = index;
    const item = data[index];
    
    $$('.tab-btn').forEach((btn, i) => {
      btn.classList.toggle('active', i === index);
    });

    stage.style.background = item.stageBg;
    stage.style.borderColor = item.borderColor;
    wordText.textContent = item.word;
    wordIcon.textContent = item.wordIcon;
    moodText.textContent = item.mood;
    moodIcon.textContent = item.moodIcon;
  }

  $$('.tab-btn').forEach((btn, idx) => {
    onTap(btn, () => setMood(idx));
  });

  setMood(0);
</script>

</body>
</html>

Is there anything you should avoid when sharing your review?

A common mistake is **retelling** the whole plot from start to finish instead of sharing your own thoughts.

Your listeners do not need a list of every single event; they want to know which part mattered most to you and why you enjoyed it.

The next time you finish a chapter or hear a poem, pick out your favorite detail and tell a friend what made it unforgettable.

Using Language to Appreciate Texts. Use language to express appreciation for texts you have read or heard.

Year 2 English: Complete the Opinion Passage with a Reason & Order Words Based on Meaning

Language for Interacting with Others (AC9E2LA02): Responding to Literature and Sharing Preferences

Primary English: Expressing Opinions About Books and Giving Reasons

To achieve mastery in AC9E2LA02, teachers should scaffold oral language before written tasks. Use think-pair-share routines with sentence frames (e.g., 'I preferred [Book A] over [Book B] because the author used [specific detail] to show [evaluative description]'). Model the transition away from generic evaluative terms ('good', 'fun') toward rich adjectives ('hilarious', 'adventurous', 'calming') via classroom word banks and anchor charts.

Using Language to Appreciate Texts

What Is Text Appreciation?

The Three-Step Response Ladder