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 you ask for an apple, and your friend brings you a tiny, sour, green one when you wanted a huge, sweet, red one!

How do we tell people exactly what something looks, feels, or tastes like?

A **noun** is a naming word for a person, place, or thing, like *dog*, *box*, or *cookie*.

An **adjective** is a describing word that tells us the qualities of a noun, giving our minds a clear picture.

<!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>Words That Describe: Adjectives</title>
<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;
    gap: 14px;
    user-select: none;
    -webkit-user-select: none;
  }

  .formula-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .tag-adj {
    color: #0284c7;
    background: #e0f2fe;
    padding: 3px 8px;
    border-radius: 6px;
  }
  .tag-plus { color: #94a3b8; }
  .tag-noun {
    color: #475569;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
  }

  /* Stage Visual */
  .stage {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 160px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(30, 41, 69, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .stage-backdrop {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, #f0f9ff 0%, #ffffff 70%);
    transition: background 0.4s ease;
  }

  .icon-display {
    position: relative;
    font-size: 54px;
    line-height: 1;
    z-index: 2;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .caption-pill {
    margin-top: 8px;
    z-index: 2;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    gap: 6px;
    align-items: baseline;
  }
  .adj-word {
    color: #0284c7;
    border-bottom: 2px solid #38bdf8;
    transition: color 0.3s ease;
  }
  .noun-word {
    color: #1e2945;
  }

  /* Interactive Button Chips */
  .chip-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 340px;
  }

  .chip-btn {
    flex: 1 1 calc(50% - 8px);
    max-width: 160px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .chip-btn.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.25);
  }

  .chip-icon {
    font-size: 16px;
  }
</style>
</head>
<body>

  <div class="formula-bar">
    <span class="tag-adj">Adjective</span>
    <span class="tag-plus">+</span>
    <span class="tag-noun">Noun</span>
  </div>

  <div class="stage">
    <div class="stage-backdrop" id="backdrop"></div>
    <div class="icon-display" id="stageIcon">🐩</div>
    <div class="caption-pill">
      <span class="adj-word" id="adjText">Fluffy</span>
      <span class="noun-word">dog</span>
    </div>
  </div>

  <div class="chip-grid">
    <button class="chip-btn active" data-index="0">
      <span class="chip-icon">🐩</span>
      <span>Fluffy</span>
    </button>
    <button class="chip-btn" data-index="1">
      <span class="chip-icon">💤</span>
      <span>Sleepy</span>
    </button>
    <button class="chip-btn" data-index="2">
      <span class="chip-icon">🐕</span>
      <span>Spotted</span>
    </button>
    <button class="chip-btn" data-index="3">
      <span class="chip-icon">✨</span>
      <span>Golden</span>
    </button>
  </div>

  <script>
    const data = [
      { adj: 'Fluffy', icon: '🐩', bg: '#f0f9ff' },
      { adj: 'Sleepy', icon: '🐶💤', bg: '#f5f3ff' },
      { adj: 'Spotted', icon: '🐕', bg: '#fef3c7' },
      { adj: 'Golden', icon: '🦮✨', bg: '#fffbeb' }
    ];

    let current = 0;
    let timer = null;

    const iconEl = document.getElementById('stageIcon');
    const adjEl = document.getElementById('adjText');
    const backdropEl = document.getElementById('backdrop');
    const buttons = document.querySelectorAll('.chip-btn');

    function setAdjective(index, manual = false) {
      if (manual && timer) {
        clearInterval(timer);
        timer = setInterval(nextAdjective, 3600);
      }
      current = index;
      const item = data[index];

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

      iconEl.style.opacity = '0';
      iconEl.style.transform = 'translateY(4px)';

      setTimeout(() => {
        iconEl.textContent = item.icon;
        adjEl.textContent = item.adj;
        backdropEl.style.background = `radial-gradient(circle, ${item.bg} 0%, #ffffff 70%)`;
        iconEl.style.opacity = '1';
        iconEl.style.transform = 'translateY(0)';
      }, 150);
    }

    function nextAdjective() {
      const next = (current + 1) % data.length;
      setAdjective(next);
    }

    buttons.forEach((btn, i) => {
      btn.addEventListener('click', () => setAdjective(i, true));
    });

    timer = setInterval(nextAdjective, 3600);
  </script>
</body>
</html>

What different kinds of details can these special words tell us?

Adjectives use our five senses to describe how something looks, feels, sounds, smells, or tastes.

They can tell us a thing's **color**, **size**, **shape**, or even how many there are.

<!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: Words That Describe</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -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;
    }

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

    .tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }

    .tab-btn {
      background: #ffffff;
      border: 2px solid transparent;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      border-radius: 8px;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      color: #0284c7;
      background: #e0f2fe;
      border-color: #22b7ff;
    }

    .display-box {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      height: 230px;
      justify-content: space-between;
    }

    .phrase-tag {
      font-size: 19px;
      font-weight: 700;
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .adj-highlight {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 6px;
      transition: all 0.2s ease;
    }

    .noun-label {
      color: #1e2945;
    }

    .viewport {
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .items-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      transition: transform 0.3s ease;
    }

    .gem {
      width: 54px;
      height: 54px;
      background: #3b82f6;
      border-radius: 50%;
      transition: all 0.3s ease;
      box-shadow: inset 0 -4px 6px rgba(0,0,0,0.2), inset 0 4px 6px rgba(255,255,255,0.4);
    }

    /* Sub-options */
    .sub-options {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
    }

    .opt-btn {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .opt-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    <div class="tabs">
      <button class="tab-btn active" data-cat="0">Color</button>
      <button class="tab-btn" data-cat="1">Size</button>
      <button class="tab-btn" data-cat="2">Shape</button>
      <button class="tab-btn" data-cat="3">Number</button>
    </div>

    <div class="display-box">
      <div class="phrase-tag">
        <span id="adjText" class="adj-highlight">Blue</span>
        <span id="nounText" class="noun-label">Circles</span>
      </div>

      <div class="viewport">
        <div id="itemsContainer" class="items-row">
          <div class="gem"></div>
        </div>
      </div>

      <div id="optionsRow" class="sub-options"></div>
    </div>
  </div>

  <script>
    const modes = [
      {
        name: 'Color',
        opts: ['Blue', 'Gold', 'Pink'],
        apply: (idx) => {
          const colors = ['#3b82f6', '#eab308', '#ec4899'];
          renderGems(1, { bg: colors[idx], shape: '50%', size: '54px' });
          setPhrase(modes[0].opts[idx], 'Circle');
        }
      },
      {
        name: 'Size',
        opts: ['Tiny', 'Medium', 'Huge'],
        apply: (idx) => {
          const sizes = ['24px', '54px', '88px'];
          renderGems(1, { bg: '#3b82f6', shape: '50%', size: sizes[idx] });
          setPhrase(modes[1].opts[idx], 'Circle');
        }
      },
      {
        name: 'Shape',
        opts: ['Round', 'Square', 'Pill'],
        apply: (idx) => {
          const shapes = ['50%', '8px', '28px / 14px'];
          renderGems(1, { bg: '#3b82f6', shape: shapes[idx], size: '54px' });
          setPhrase(modes[2].opts[idx], 'Object');
        }
      },
      {
        name: 'Number',
        opts: ['One', 'Three', 'Five'],
        apply: (idx) => {
          const counts = [1, 3, 5];
          const c = counts[idx];
          renderGems(c, { bg: '#3b82f6', shape: '50%', size: c > 3 ? '40px' : '50px' });
          setPhrase(modes[3].opts[idx], c === 1 ? 'Circle' : 'Circles');
        }
      }
    ];

    let curCat = 0;
    let curOpt = 0;

    const adjEl = document.getElementById('adjText');
    const nounEl = document.getElementById('nounText');
    const container = document.getElementById('itemsContainer');
    const optionsRow = document.getElementById('optionsRow');
    const tabBtns = document.querySelectorAll('.tab-btn');

    function setPhrase(adj, noun) {
      adjEl.textContent = adj;
      nounEl.textContent = noun;
    }

    function renderGems(count, style) {
      container.innerHTML = '';
      for (let i = 0; i < count; i++) {
        const d = document.createElement('div');
        d.className = 'gem';
        d.style.background = style.bg;
        d.style.borderRadius = style.shape;
        d.style.width = style.size;
        d.style.height = style.size;
        container.appendChild(d);
      }
    }

    function showCategory(catIdx, optIdx = 0) {
      curCat = catIdx;
      curOpt = optIdx;

      tabBtns.forEach((b, i) => b.classList.toggle('active', i === catIdx));

      optionsRow.innerHTML = '';
      modes[catIdx].opts.forEach((optName, i) => {
        const btn = document.createElement('button');
        btn.className = 'opt-btn' + (i === optIdx ? ' active' : '');
        btn.textContent = optName;
        btn.onclick = () => {
          curOpt = i;
          document.querySelectorAll('.opt-btn').forEach((b, j) => b.classList.toggle('active', j === i));
          modes[curCat].apply(i);
        };
        optionsRow.appendChild(btn);
      });

      modes[catIdx].apply(optIdx);
    }

    tabBtns.forEach((tab) => {
      tab.addEventListener('click', () => {
        showCategory(parseInt(tab.dataset.cat, 10), 0);
      });
    });

    showCategory(0, 0);
  </script>
</body>
</html>

Now that we know what adjectives do, how do we find them inside a real sentence?

To find an adjective, first find the noun (the thing), then ask: *What kind of noun is it?*

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

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

    /* Stage preview card */
    .preview-card {
      background: #ffffff;
      width: 100%;
      border-radius: 16px;
      padding: 24px 16px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      position: relative;
    }

    .illustration {
      font-size: 72px;
      line-height: 1;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
    }

    /* Sentence / Label row */
    .phrase-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 22px;
      font-weight: 700;
    }

    .tag-adj {
      background: #e0f4ff;
      color: #0088cc;
      padding: 4px 12px;
      border-radius: 8px;
      border: 1.5px solid #22b7ff;
      transition: all 0.25s ease;
      min-width: 90px;
      text-align: center;
    }

    .tag-noun {
      background: #f1f3f5;
      color: #1e2945;
      padding: 4px 12px;
      border-radius: 8px;
      border: 1.5px solid #dcdfe4;
    }

    /* Question clue */
    .question-badge {
      font-size: 13px;
      font-weight: 600;
      color: #0088cc;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* Adjective Selector Buttons */
    .options-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
    }

    .adj-btn {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 4px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      outline: none;
    }

    .adj-btn span {
      font-size: 18px;
    }

    .adj-btn.active {
      background: #e0f4ff;
      border-color: #22b7ff;
      color: #0077b6;
      box-shadow: 0 0 0 1px #22b7ff;
    }
  </style>
</head>
<body>

  <div class="main">
    <div class="preview-card">
      <div class="question-badge">
        <span>What kind of monster?</span>
        <span>↓</span>
      </div>

      <div class="illustration" id="previewEmoji">😴</div>

      <div class="phrase-row">
        <div class="tag-adj" id="adjText">sleepy</div>
        <div class="tag-noun">monster</div>
      </div>
    </div>

    <div class="options-grid">
      <button class="adj-btn active" data-adj="sleepy" data-emoji="😴">
        <span>😴</span>
        sleepy
      </button>
      <button class="adj-btn" data-adj="happy" data-emoji="🥳">
        <span>🥳</span>
        happy
      </button>
      <button class="adj-btn" data-adj="spooky" data-emoji="👻">
        <span>👻</span>
        spooky
      </button>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.adj-btn');
    const previewEmoji = document.getElementById('previewEmoji');
    const adjText = document.getElementById('adjText');

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        adjText.textContent = btn.dataset.adj;
        previewEmoji.textContent = btn.dataset.emoji;
      });
    });
  </script>
</body>
</html>

Adjectives usually sit right before the noun they describe, like *warm jacket*, but they can also come after words like *is*, like *the soup is hot*.

Look around the room right now — can you spot three things and name one adjective for each?

Words That Describe: Adjectives. Recognise that adjectives are words that describe the qualities of nouns.

What is an adjective? - KS1 English

Adjectives: to describe (KS1 / Year 1 English)

Identify adjectives that describe nouns (Year 1 English Practice)

For Years 1-2 students, grammar concepts should be introduced using concrete, tactile, and visual anchors. Begin with hands-on 'feely bags' or real objects where students verbally generate sensory attributes before moving to written labels. Explicitly teach the noun-adjective partnership ('Adjectives are noun helpers') before introducing sentence positions, starting with attributive adjectives (before nouns) and gradually progressing to predicate adjectives (after 'is/are/was'). Use colour-coded text highlighting during shared reading to reinforce word roles within sentences.

Words That Describe: Adjectives

What Is an Adjective?

Kinds of Clues Adjectives Give

Finding Adjectives