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 reading a funny bedtime story about a flying puppy, and then reading a science book about how real dogs hear sounds.

Both books are about dogs, but they tell their information in completely different ways!

How can two completely different books share the exact same subject?

A **topic** is the main person, animal, place, or idea that a text is about.

Authors can take one single topic—like frogs—and write an imaginative story, a factual science report, or an advertisement.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 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: 580px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Comparison mode switcher */
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

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

    .tab-btn.active {
      background: #22c55e;
      border-color: #22c55e;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
    }

    /* Cards Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .text-card {
      background: #ffffff;
      border: 2px solid transparent;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
      min-height: 180px;
      position: relative;
    }

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

    .card-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 8px;
    }

    /* Dynamic Focus Badge */
    .focus-badge {
      width: 100%;
      border-radius: 8px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.3s ease;
      min-height: 56px;
      background: #f1f5f9;
      color: #475569;
    }

    .badge-icon {
      font-size: 18px;
      line-height: 1;
    }

    /* Highlight States */
    .mode-topic .text-card {
      border-color: #22c55e;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
    }
    .mode-topic .focus-badge {
      background: #dcfce7;
      color: #15803d;
    }

    .mode-purpose .card-story {
      border-color: #a855f7;
    }
    .mode-purpose .card-story .focus-badge {
      background: #f3e8ff;
      color: #7e22ce;
    }

    .mode-purpose .card-report {
      border-color: #0284c7;
    }
    .mode-purpose .card-report .focus-badge {
      background: #e0f2fe;
      color: #0369a1;
    }

    .mode-purpose .card-ad {
      border-color: #f97316;
    }
    .mode-purpose .card-ad .focus-badge {
      background: #ffedd5;
      color: #c2410c;
    }

    .mode-type .card-story {
      border-color: #ec4899;
    }
    .mode-type .card-story .focus-badge {
      background: #fce7f3;
      color: #be185d;
    }

    .mode-type .card-report {
      border-color: #10b981;
    }
    .mode-type .card-report .focus-badge {
      background: #d1fae5;
      color: #047857;
    }

    .mode-type .card-ad {
      border-color: #6366f1;
    }
    .mode-type .card-ad .focus-badge {
      background: #e0e7ff;
      color: #4338ca;
    }

    /* Comparison Status Banner */
    .status-bar {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }

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

    .tag-same {
      background: #dcfce7;
      color: #166534;
    }

    .tag-diff {
      background: #fee2e2;
      color: #991b1b;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="controls">
      <button class="tab-btn active" data-mode="topic">
        <span>🐸</span> Topic
      </button>
      <button class="tab-btn" data-mode="purpose">
        <span>🎯</span> Purpose
      </button>
      <button class="tab-btn" data-mode="type">
        <span>📝</span> Form
      </button>
    </div>

    
    <div class="cards-grid mode-topic" id="grid">
      
      <div class="text-card card-story">
        <div class="card-icon">📖</div>
        <div class="card-title">Story</div>
        <div class="focus-badge" id="badge-story">
          <span class="badge-icon">🐸</span>
          <span class="badge-text">Frog</span>
        </div>
      </div>

      
      <div class="text-card card-report">
        <div class="card-icon">🔬</div>
        <div class="card-title">Report</div>
        <div class="focus-badge" id="badge-report">
          <span class="badge-icon">🐸</span>
          <span class="badge-text">Frog</span>
        </div>
      </div>

      
      <div class="text-card card-ad">
        <div class="card-icon">📣</div>
        <div class="card-title">Poster</div>
        <div class="focus-badge" id="badge-ad">
          <span class="badge-icon">🐸</span>
          <span class="badge-text">Frog</span>
        </div>
      </div>
    </div>

    
    <div class="status-bar" id="status">
      <span class="status-tag tag-same">SAME</span>
      <span id="status-label">All texts share 1 topic</span>
    </div>
  </div>

  <script>
    const data = {
      topic: {
        className: 'mode-topic',
        tagClass: 'tag-same',
        tagText: 'SAME',
        label: 'All texts share 1 topic',
        cards: [
          { icon: '🐸', text: 'Frog' },
          { icon: '🐸', text: 'Frog' },
          { icon: '🐸', text: 'Frog' }
        ]
      },
      purpose: {
        className: 'mode-purpose',
        tagClass: 'tag-diff',
        tagText: 'DIFFERENT',
        label: 'Entertain vs Inform vs Persuade',
        cards: [
          { icon: '✨', text: 'Entertain' },
          { icon: '💡', text: 'Inform' },
          { icon: '📢', text: 'Persuade' }
        ]
      },
      type: {
        className: 'mode-type',
        tagClass: 'tag-diff',
        tagText: 'DIFFERENT',
        label: 'Fiction vs Science vs Notice',
        cards: [
          { icon: '🧚', text: 'Fiction' },
          { icon: '📊', text: 'Facts' },
          { icon: '⚡', text: 'Action' }
        ]
      }
    };

    const grid = document.getElementById('grid');
    const buttons = document.querySelectorAll('.tab-btn');
    const badgeStory = document.getElementById('badge-story');
    const badgeReport = document.getElementById('badge-report');
    const badgeAd = document.getElementById('badge-ad');
    const statusBar = document.getElementById('status');

    function setMode(modeKey) {
      const mode = data[modeKey];
      
      // Update buttons
      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.mode === modeKey);
      });

      // Update grid mode class
      grid.className = 'cards-grid ' + mode.className;

      // Update badge contents
      const badges = [badgeStory, badgeReport, badgeAd];
      mode.cards.forEach((item, index) => {
        badges[index].innerHTML = `
          <span class="badge-icon">${item.icon}</span>
          <span class="badge-text">${item.text}</span>
        `;
      });

      // Update comparison summary
      statusBar.innerHTML = `
        <span class="status-tag ${mode.tagClass}">${mode.tagText}</span>
        <span>${mode.label}</span>
      `;
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        setMode(btn.dataset.mode);
      });
    });
  </script>
</body>
</html>

When you have two texts about the same topic, how do you look at them side by side?

To **compare** means to look at two or more things to find what is the **same** and what is **different**.

Think of it like being a reading detective who searches for matching clues and unique details.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 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;
  }

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

  .controls {
    display: flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 24px;
  }

  .tab {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .tab.active {
    background: #8b5cf6;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  }

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

  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .circle {
    transition: all 0.3s ease;
  }

  .clue {
    font-size: 26px;
    transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
    user-select: none;
  }

  .clue-label {
    font-size: 12px;
    font-weight: 700;
    fill: #64748b;
    transition: fill 0.3s ease, opacity 0.3s ease;
  }

  .header-label {
    font-size: 15px;
    font-weight: 800;
    fill: #1e2945;
  }

  .status-badge {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    background: #f3e8ff;
    color: #8b5cf6;
    transition: all 0.3s ease;
  }

  /* State classes */
  .dimmed {
    opacity: 0.2;
    filter: grayscale(100%);
  }

  .highlighted {
    transform: scale(1.15);
    filter: drop-shadow(0 4px 6px rgba(139, 92, 246, 0.4));
  }

  .active-zone {
    stroke-width: 3.5px;
  }
</style>
</head>
<body>

<div class="diagram">
  <div class="controls">
    <button class="tab active" data-mode="all">All</button>
    <button class="tab" data-mode="same">Same 🔍</button>
    <button class="tab" data-mode="different">Different ✦</button>
  </div>

  <div class="venn-box">
    <svg viewBox="0 0 360 210">
      
      <circle id="circleA" class="circle" cx="135" cy="115" r="80" 
              fill="#8b5cf6" fill-opacity="0.1" stroke="#8b5cf6" stroke-width="2" />

      
      <circle id="circleB" class="circle" cx="225" cy="115" r="80" 
              fill="#3b82f6" fill-opacity="0.1" stroke="#3b82f6" stroke-width="2" />

      
      <text class="header-label" x="90" y="24" text-anchor="middle">Text A</text>
      <text class="header-label" x="270" y="24" text-anchor="middle">Text B</text>

      
      <g id="itemA" class="clue-group">
        <text class="clue" x="90" y="118" text-anchor="middle" dominant-baseline="middle">🦴</text>
      </g>

      
      <g id="itemSame" class="clue-group">
        <text class="clue" x="180" y="92" text-anchor="middle" dominant-baseline="middle">🐕</text>
        <text class="clue" x="180" y="138" text-anchor="middle" dominant-baseline="middle">🎾</text>
      </g>

      
      <g id="itemB" class="clue-group">
        <text class="clue" x="270" y="118" text-anchor="middle" dominant-baseline="middle">🐟</text>
      </g>
    </svg>
  </div>

  <div id="badge" class="status-badge">Compare Texts</div>
</div>

<script>
  const tabs = document.querySelectorAll('.tab');
  const badge = document.getElementById('badge');
  const itemA = document.getElementById('itemA');
  const itemB = document.getElementById('itemB');
  const itemSame = document.getElementById('itemSame');
  const circleA = document.getElementById('circleA');
  const circleB = document.getElementById('circleB');

  const modes = {
    all: {
      text: 'Compare Texts',
      apply: () => {
        resetAll();
      }
    },
    same: {
      text: 'Same (Match)',
      apply: () => {
        resetAll();
        itemA.classList.add('dimmed');
        itemB.classList.add('dimmed');
        itemSame.classList.add('highlighted');
        circleA.setAttribute('stroke-width', '3');
        circleB.setAttribute('stroke-width', '3');
      }
    },
    different: {
      text: 'Different (Unique)',
      apply: () => {
        resetAll();
        itemSame.classList.add('dimmed');
        itemA.classList.add('highlighted');
        itemB.classList.add('highlighted');
      }
    }
  };

  function resetAll() {
    [itemA, itemB, itemSame].forEach(el => {
      el.classList.remove('dimmed', 'highlighted');
    });
    circleA.setAttribute('stroke-width', '2');
    circleB.setAttribute('stroke-width', '2');
  }

  function setMode(modeKey) {
    tabs.forEach(t => t.classList.toggle('active', t.dataset.mode === modeKey));
    const mode = modes[modeKey];
    mode.apply();
    badge.textContent = mode.text;
  }

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      setMode(tab.dataset.mode);
    });
  });

  // Calm auto-cycle on idle, cancellable on interaction
  let autoIndex = 0;
  const cycleOrder = ['all', 'same', 'different'];
  let timer = setInterval(() => {
    autoIndex = (autoIndex + 1) % cycleOrder.length;
    setMode(cycleOrder[autoIndex]);
  }, 3200);

  document.querySelector('.diagram').addEventListener('pointerdown', () => {
    clearInterval(timer);
  }, { once: true });
</script>

</body>
</html>

Let's test our detective skills on two short texts right now!

**Text 1:** *Pip the green frog pulled on his red boots and zoomed across the lily pads to bake a fly pie.*

**Text 2:** *Frogs are green animals with powerful back legs that help them leap into ponds to catch insects.*

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
  }

  .nav-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 24px;
  }

  .tab-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .tab-btn.active {
    background: #ffffff;
    color: #3b82f6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .diagram-area {
    display: flex;
    width: 100%;
    max-width: 480px;
    gap: 12px;
    position: relative;
  }

  .text-card {
    flex: 1;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
  }

  .card-title {
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 4px;
  }

  .tag-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    transition: all 0.3s ease;
  }

  /* State Highlighting */
  body[data-mode="same"] .tag.same {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
  }
  body[data-mode="same"] .tag.diff {
    opacity: 0.25;
  }

  body[data-mode="diff"] .tag.diff {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #b45309;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
  }
  body[data-mode="diff"] .tag.same {
    opacity: 0.25;
  }

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

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
  }
  .badge-same { background: #dbeafe; color: #1e40af; }
  .badge-diff { background: #fef3c7; color: #92400e; }
</style>
</head>
<body data-mode="all">

  <div class="nav-tabs">
    <button class="tab-btn active" data-view="all">Show All</button>
    <button class="tab-btn" data-view="same">Same (=)</button>
    <button class="tab-btn" data-view="diff">Different (≠)</button>
  </div>

  <div class="diagram-area">
    <div class="text-card" id="card1">
      <div class="card-title">Text 1</div>
      <div class="tag-list">
        <div class="tag same">🟢 Green</div>
        <div class="tag same">🦘 Jump</div>
        <div class="tag diff">🌳 Forest</div>
      </div>
    </div>

    <div class="text-card" id="card2">
      <div class="card-title">Text 2</div>
      <div class="tag-list">
        <div class="tag same">🟢 Green</div>
        <div class="tag same">🦘 Jump</div>
        <div class="tag diff">💧 Pond</div>
      </div>
    </div>
  </div>

  <div class="indicator">
    <span class="badge badge-same">Same: 2</span>
    <span class="badge badge-diff">Different: 2</span>
  </div>

<script>
  const buttons = document.querySelectorAll('.tab-btn');
  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      buttons.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      document.body.setAttribute('data-mode', btn.dataset.view);
    });
  });
</script>
</body>
</html>

Both texts share the same topic and mention green frogs jumping.

However, Text 1 uses make-believe details to entertain you, while Text 2 uses **true facts** to teach you.

What is an easy trap readers fall into when comparing?

Some readers think comparing means *only* looking for things that are different.

A true reading detective always checks for **both** the things that match and the things that are different!

What Does It Mean to Compare Texts?. Understand that the same topic can appear in different types of texts and that comparing means noticing what is the same and what is different.

Comparing Texts on the Same Topic Activity Sheet & Unit (AC9E2LY01)

Compare and Contrast in Informational and Literary Texts (Year 2 / Grade 2)

Primary English: Comparing Fiction and Non-Fiction Texts on the Same Subject

To master Australian Curriculum standard AC9E2LY01 at Year 2, instruction should begin with tangible, multimodal pairings (e.g., a 1-minute nature video clip and a short picture story on the same animal). Teachers should explicitly model the metalanguage of 'topic' versus 'text type' using anchor charts and dual-circle Venn diagrams. Scaffolding should transition from shared whole-class sorting of facts and features to guided partner comparisons using structured sentence frames ('Both Text A and Text B tell us about [Topic], but Text A is a [Text Type] because...').

What Does It Mean to Compare Texts?

What Is a Topic?

What Does It Mean to Compare?