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

Look around your room: a wooden desk, a bouncing puppy, a shiny plastic toy, and a dry leaf on the floor. Which of these are truly alive, which once lived, and which never had life at all?

To sort them out, scientists look for seven vital jobs that all living things do.

Every living organism on Earth carries out seven basic **life processes**. You can remember them with the name **MRS GREN**.

<!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="1:1">
  <title>MRS GREN Life Processes</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #f8f9fa;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .header {
      text-align: center;
      margin-bottom: 10px;
    }
    .title {
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: 0.5px;
    }
    .subtitle {
      font-size: 13px;
      color: #64748b;
      margin-top: 2px;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 10px;
    }
    .card-item {
      background: #ffffff;
      border-radius: 12px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      border: 2px solid transparent;
      transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      min-height: 74px;
    }
    .card-item:hover {
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .card-item.active {
      border-color: var(--accent);
      background: #f0fdf4;
      box-shadow: 0 0 0 2px var(--accent-light);
    }
    .letter-badge {
      font-size: 16px;
      font-weight: 800;
      color: var(--accent);
      line-height: 1;
      margin-bottom: 2px;
    }
    .icon {
      font-size: 20px;
      line-height: 1.2;
    }
    .card-name {
      font-size: 11px;
      font-weight: 600;
      color: #334155;
      margin-top: 2px;
      text-align: center;
    }
    /* Info Panel */
    .detail-panel {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      border-left: 4px solid #22c55e;
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 58px;
    }
    .detail-icon {
      font-size: 26px;
      flex-shrink: 0;
    }
    .detail-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .detail-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }
    .detail-desc {
      font-size: 13px;
      color: #475569;
      line-height: 1.3;
    }
    /* Responsive tweaks */
    @media (max-width: 380px) {
      .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
      }
      .card-item:last-child {
        grid-column: span 3;
        max-width: 120px;
        margin: 0 auto;
        width: 100%;
      }
      .card-name {
        font-size: 10px;
      }
      .letter-badge {
        font-size: 14px;
      }
      .icon {
        font-size: 18px;
      }
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">MRS GREN</div>
    <div class="subtitle">7 Life Processes of All Living Things</div>
  </div>

  <div class="grid" id="cardGrid">
    <div class="card-item active" style="--accent: #3b82f6; --accent-light: #bfdbfe;" data-idx="0">
      <span class="letter-badge">M</span>
      <span class="icon">🐆</span>
      <span class="card-name">Movement</span>
    </div>

    <div class="card-item" style="--accent: #06b6d4; --accent-light: #a5f3fc;" data-idx="1">
      <span class="letter-badge">R</span>
      <span class="icon">🫁</span>
      <span class="card-name">Respiration</span>
    </div>

    <div class="card-item" style="--accent: #eab308; --accent-light: #fef08a;" data-idx="2">
      <span class="letter-badge">S</span>
      <span class="icon">👁️</span>
      <span class="card-name">Sensitivity</span>
    </div>

    <div class="card-item" style="--accent: #22c55e; --accent-light: #bbf7d0;" data-idx="3">
      <span class="letter-badge">G</span>
      <span class="icon">🌱</span>
      <span class="card-name">Growth</span>
    </div>

    <div class="card-item" style="--accent: #ec4899; --accent-light: #fbcfe8;" data-idx="4">
      <span class="letter-badge">R</span>
      <span class="icon">🐣</span>
      <span class="card-name">Reproduction</span>
    </div>

    <div class="card-item" style="--accent: #8b5cf6; --accent-light: #ddd6fe;" data-idx="5">
      <span class="letter-badge">E</span>
      <span class="icon">💧</span>
      <span class="card-name">Excretion</span>
    </div>

    <div class="card-item" style="--accent: #f97316; --accent-light: #fed7aa;" data-idx="6">
      <span class="letter-badge">N</span>
      <span class="icon">🍎</span>
      <span class="card-name">Nutrition</span>
    </div>
  </div>

  <div class="detail-panel" id="detailPanel">
    <div class="detail-icon" id="detailIcon">🐆</div>
    <div class="detail-content">
      <div class="detail-title" id="detailTitle">Movement</div>
      <div class="detail-desc" id="detailDesc">Changing place or position to find food and stay safe.</div>
    </div>
  </div>

  <script>
    const processes = [
      {
        letter: 'M',
        name: 'Movement',
        icon: '🐆',
        color: '#3b82f6',
        desc: 'Changing position or moving parts to hunt, find light, or escape danger.'
      },
      {
        letter: 'R',
        name: 'Respiration',
        icon: '🫁',
        color: '#06b6d4',
        desc: 'Releasing energy from food inside living cells.'
      },
      {
        letter: 'S',
        name: 'Sensitivity',
        icon: '👁️',
        color: '#eab308',
        desc: 'Sensing and reacting to changes in the surrounding environment.'
      },
      {
        letter: 'G',
        name: 'Growth',
        icon: '🌱',
        color: '#22c55e',
        desc: 'Increasing in size and developing permanently over time.'
      },
      {
        letter: 'R',
        name: 'Reproduction',
        icon: '🐣',
        color: '#ec4899',
        desc: 'Producing offspring to create the next generation of life.'
      },
      {
        letter: 'E',
        name: 'Excretion',
        icon: '💧',
        color: '#8b5cf6',
        desc: 'Removing waste products and toxic substances made by the body.'
      },
      {
        letter: 'N',
        name: 'Nutrition',
        icon: '🍎',
        color: '#f97316',
        desc: 'Taking in or making nutrients needed for energy and health.'
      }
    ];

    const cards = document.querySelectorAll('.card-item');
    const panel = document.getElementById('detailPanel');
    const dIcon = document.getElementById('detailIcon');
    const dTitle = document.getElementById('detailTitle');
    const dDesc = document.getElementById('detailDesc');

    function selectCard(index) {
      cards.forEach((c, idx) => {
        c.classList.toggle('active', idx === index);
      });
      const data = processes[index];
      panel.style.borderLeftColor = data.color;
      dIcon.textContent = data.icon;
      dTitle.textContent = `${data.letter} – ${data.name}`;
      dTitle.style.color = data.color;
      dDesc.textContent = data.desc;
    }

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

    // Initialize first card
    selectCard(0);
  </script>
</body>
</html>

For something to be **living**, it must carry out all seven of these processes right now, even if it does them very slowly like a tree or a sleeping turtle.

What happens when something used to do all seven jobs, but stopped completely?

Everything in our world fits into one of three groups: **living**, **dead**, or **never alive**.

A **dead** object was once part of a living plant or animal that did all 7 life processes in the past, while a **never alive** object was made from rocks, metals, or synthetic chemicals that never had life.

<!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 {
      width: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      padding: 8px;
    }
    .diagram-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 650px;
      margin: 0 auto;
    }
    .category-col {
      display: flex;
      flex-direction: column;
      border-radius: 12px;
      border: 1.5px solid #e6e6e6;
      background: #fafafa;
      padding: 8px 6px;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    }
    .category-col.col-living {
      border-color: #bbf7d0;
      background: #f0fdf4;
    }
    .category-col.col-living.active {
      box-shadow: 0 0 0 2px #16a34a;
      background: #dcfce7;
    }
    .category-col.col-dead {
      border-color: #fde68a;
      background: #fffbeb;
    }
    .category-col.col-dead.active {
      box-shadow: 0 0 0 2px #d97706;
      background: #fef3c7;
    }
    .category-col.col-never {
      border-color: #bfdbfe;
      background: #eff6ff;
    }
    .category-col.col-never.active {
      box-shadow: 0 0 0 2px #2563eb;
      background: #dbeafe;
    }
    .col-header {
      text-align: center;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      margin-bottom: 6px;
    }
    .col-title {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
    }
    .col-living .col-title { color: #15803d; }
    .col-dead .col-title { color: #b45309; }
    .col-never .col-title { color: #1d4ed8; }

    .tag-badge {
      display: block;
      font-size: 10.5px;
      font-weight: 600;
      line-height: 1.25;
      margin-top: 4px;
      padding: 3px 4px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(0, 0, 0, 0.05);
    }
    .col-living .tag-badge { color: #166534; }
    .col-dead .tag-badge { color: #92400e; }
    .col-never .tag-badge { color: #1e40af; }

    .item-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
      flex: 1;
    }
    .item-card {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 6px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }
    .item-icon {
      font-size: 18px;
      line-height: 1;
      flex-shrink: 0;
    }
    .item-name {
      font-size: 11.5px;
      font-weight: 600;
      color: #1e2945;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .status-panel {
      max-width: 650px;
      margin: 8px auto 0 auto;
      padding: 8px 12px;
      border-radius: 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 42px;
    }
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      color: #ffffff;
      flex-shrink: 0;
    }
    .status-text {
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      text-align: right;
    }

    @media (max-width: 380px) {
      body { padding: 4px; }
      .diagram-grid { gap: 4px; }
      .category-col { padding: 6px 4px; border-radius: 8px; }
      .col-title { font-size: 12px; }
      .tag-badge { font-size: 9.5px; padding: 2px 2px; }
      .item-card { padding: 4px 4px; gap: 4px; }
      .item-icon { font-size: 16px; }
      .item-name { font-size: 10.5px; }
      .status-panel { padding: 6px 8px; }
      .status-badge { font-size: 11px; padding: 2px 6px; }
      .status-text { font-size: 11px; }
    }
  </style>
</head>
<body>
  <div class="diagram-grid">
    
    <div class="category-col col-living active" data-type="living">
      <div class="col-header">
        <div class="col-title">Living</div>
        <span class="tag-badge">Doing all 7 life processes now</span>
      </div>
      <div class="item-list">
        <div class="item-card">
          <span class="item-icon">🌳</span>
          <span class="item-name">Green Tree</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🐕</span>
          <span class="item-name">Dog</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🌵</span>
          <span class="item-name">Cactus</span>
        </div>
      </div>
    </div>

    
    <div class="category-col col-dead" data-type="dead">
      <div class="col-header">
        <div class="col-title">Once Alive</div>
        <span class="tag-badge">Life processes stopped</span>
      </div>
      <div class="item-list">
        <div class="item-card">
          <span class="item-icon">🪵</span>
          <span class="item-name">Wood Log</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🍂</span>
          <span class="item-name">Dry Leaf</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🧶</span>
          <span class="item-name">Wool</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🦴</span>
          <span class="item-name">Bone</span>
        </div>
      </div>
    </div>

    
    <div class="category-col col-never" data-type="never">
      <div class="col-header">
        <div class="col-title">Never Alive</div>
        <span class="tag-badge">No living cells ever</span>
      </div>
      <div class="item-list">
        <div class="item-card">
          <span class="item-icon">🪨</span>
          <span class="item-name">Pebble</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🚗</span>
          <span class="item-name">Plastic Toy</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🥄</span>
          <span class="item-name">Metal Spoon</span>
        </div>
        <div class="item-card">
          <span class="item-icon">💧</span>
          <span class="item-name">Water</span>
        </div>
      </div>
    </div>
  </div>

  <div class="status-panel" id="statusPanel">
    <span class="status-badge" id="statusBadge" style="background:#16a34a;">✓ Living</span>
    <span class="status-text" id="statusText">Cells active • Growing • Responding</span>
  </div>

  <script>
    const data = {
      living: {
        badge: "✓ Living",
        badgeBg: "#16a34a",
        info: "Cells active • Respiration • Growth"
      },
      dead: {
        badge: "⏸ Once Alive",
        badgeBg: "#d97706",
        info: "From living things • Stopped"
      },
      never: {
        badge: "✕ Never Alive",
        badgeBg: "#2563eb",
        info: "Minerals & synthetics • No cells"
      }
    };

    const cols = document.querySelectorAll('.category-col');
    const badge = document.getElementById('statusBadge');
    const text = document.getElementById('statusText');

    cols.forEach(col => {
      col.addEventListener('click', () => {
        cols.forEach(c => c.classList.remove('active'));
        col.classList.add('active');
        const type = col.getAttribute('data-type');
        const info = data[type];
        badge.textContent = info.badge;
        badge.style.background = info.badgeBg;
        text.textContent = info.info;
      });
    });
  </script>
</body>
</html>

Let's put this into practice with a quick decision rule you can use on anything you find.

You can classify any object by asking just two questions in order.

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

    /* Object Selector Chips */
    .chips-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 460px;
      margin-bottom: 8px;
    }
    .chip {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 5px 9px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .chip:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .chip.active {
      background: #2563eb;
      color: #ffffff;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
      border-color: #2563eb;
    }

    /* Flowchart Container */
    .flow-wrap {
      position: relative;
      width: 100%;
      max-width: 460px;
      height: 330px;
      margin: 0 auto;
    }

    /* SVG Connector Lines Layer */
    svg.connectors {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }
    .flow-line {
      stroke: #cbd5e1;
      stroke-width: 3;
      stroke-linecap: round;
      fill: none;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }
    .flow-line.active {
      stroke: #2563eb;
      stroke-width: 4;
    }
    .flow-line.active-green {
      stroke: #16a34a;
      stroke-width: 4;
    }
    .flow-line.active-amber {
      stroke: #d97706;
      stroke-width: 4;
    }
    .flow-line.active-slate {
      stroke: #475569;
      stroke-width: 4;
    }

    /* Decision Nodes */
    .node {
      position: absolute;
      z-index: 2;
      border-radius: 10px;
      padding: 6px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    }
    .node.decision {
      background: #f8fafc;
      border-color: #cbd5e1;
      width: 39%;
      height: 52px;
      left: 3%;
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.25;
    }
    .node.decision.active {
      border-color: #2563eb;
      background: #eff6ff;
      color: #1e3a8a;
      box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
    }

    /* Positions for Decisions */
    #q1 { top: 38px; }
    #q2 { top: 178px; }

    /* Outcome Nodes */
    .node.outcome {
      width: 39%;
      height: 64px;
      left: 58%;
    }
    .node.outcome .title {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.3px;
      margin-bottom: 2px;
    }
    .node.outcome .examples {
      font-size: 11px;
      font-weight: 600;
      line-height: 1.2;
    }

    #res-living {
      top: 32px;
      border-color: #86efac;
      background: #f0fdf4;
      color: #14532d;
    }
    #res-living .examples {
      color: #166534;
    }
    #res-living.active {
      border-color: #16a34a;
      background: #dcfce7;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3);
    }

    #res-dead {
      top: 172px;
      border-color: #fcd34d;
      background: #fffbeb;
      color: #78350f;
    }
    #res-dead .examples {
      color: #92400e;
    }
    #res-dead.active {
      border-color: #d97706;
      background: #fef3c7;
      box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.3);
    }

    #res-never {
      top: 254px;
      left: 3%;
      width: 39%;
      height: 64px;
      border-color: #cbd5e1;
      background: #f8fafc;
      color: #0f172a;
    }
    #res-never .title {
      color: #0f172a;
    }
    #res-never .examples {
      color: #334155;
    }
    #res-never.active {
      border-color: #475569;
      background: #e2e8f0;
      color: #0f172a;
      box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.3);
    }
    #res-never.active .examples {
      color: #1e293b;
    }

    /* Branch Labels (Badges) */
    .badge-label {
      position: absolute;
      z-index: 3;
      font-size: 10px;
      font-weight: 800;
      padding: 2px 5px;
      border-radius: 10px;
      white-space: nowrap;
      transform: translate(-50%, -50%);
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .badge-yes {
      background: #dcfce7;
      color: #14532d;
      border: 1px solid #86efac;
    }
    .badge-no {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fca5a5;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 8px;
    }
    .ctrl-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      color: #1e293b;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s, border-color 0.2s;
    }
    .ctrl-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
  </style>
</head>
<body>

  
  <div class="chips-row" id="chips">
    <button class="chip active" data-target="living">🐶 Puppy</button>
    <button class="chip" data-target="dead">🍂 Dry Leaf</button>
    <button class="chip" data-target="never">🧸 Toy</button>
    <button class="chip" data-target="living">🍄 Mushroom</button>
    <button class="chip" data-target="dead">🪵 Desk</button>
    <button class="chip" data-target="never">🪙 Coin</button>
  </div>

  
  <div class="flow-wrap">
    <svg class="connectors" viewBox="0 0 460 330">
      
      <path id="line-q1-yes" class="flow-line" d="M 193 64 L 267 64" />
      
      
      <path id="line-q1-no" class="flow-line" d="M 103 90 L 103 178" />
      
      
      <path id="line-q2-yes" class="flow-line" d="M 193 204 L 267 204" />
      
      
      <path id="line-q2-no" class="flow-line" d="M 103 230 L 103 254" />
    </svg>

    
    <div class="badge-label badge-yes" style="left: 50%; top: 64px;">YES →</div>
    <div class="badge-label badge-no" style="left: 22.5%; top: 134px;">NO ↓</div>
    <div class="badge-label badge-yes" style="left: 50%; top: 204px;">YES →</div>
    <div class="badge-label badge-no" style="left: 22.5%; top: 242px;">NO ↓</div>

    
    <div id="q1" class="node decision">
      7 life processes now?
    </div>

    
    <div id="res-living" class="node outcome">
      <div class="title">🟢 LIVING</div>
      <div class="examples">Puppy, Mushroom</div>
    </div>

    
    <div id="q2" class="node decision">
      Ever alive before?
    </div>

    
    <div id="res-dead" class="node outcome">
      <div class="title">🍂 ONCE ALIVE</div>
      <div class="examples">Wood, Leaf, Bone</div>
    </div>

    
    <div id="res-never" class="node outcome">
      <div class="title">⚪ NEVER ALIVE</div>
      <div class="examples">Metal, Plastic, Rock</div>
    </div>
  </div>

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

  <script>
    const chips = Array.from(document.querySelectorAll('.chip'));
    const q1 = document.getElementById('q1');
    const q2 = document.getElementById('q2');
    const resLiving = document.getElementById('res-living');
    const resDead = document.getElementById('res-dead');
    const resNever = document.getElementById('res-never');

    const lineQ1Yes = document.getElementById('line-q1-yes');
    const lineQ1No = document.getElementById('line-q1-no');
    const lineQ2Yes = document.getElementById('line-q2-yes');
    const lineQ2No = document.getElementById('line-q2-no');

    const playBtn = document.getElementById('playBtn');
    const nextBtn = document.getElementById('nextBtn');

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

    function clearHighlights() {
      [q1, q2, resLiving, resDead, resNever].forEach(n => n.className = n.className.replace(/\s?active/g, ''));
      [lineQ1Yes, lineQ1No, lineQ2Yes, lineQ2No].forEach(l => {
        l.className.baseVal = 'flow-line';
      });
    }

    function setPath(target) {
      clearHighlights();
      q1.classList.add('active');

      if (target === 'living') {
        lineQ1Yes.classList.add('active', 'active-green');
        resLiving.classList.add('active');
      } else if (target === 'dead') {
        lineQ1No.classList.add('active');
        q2.classList.add('active');
        lineQ2Yes.classList.add('active', 'active-amber');
        resDead.classList.add('active');
      } else if (target === 'never') {
        lineQ1No.classList.add('active');
        q2.classList.add('active');
        lineQ2No.classList.add('active', 'active-slate');
        resNever.classList.add('active');
      }
    }

    function selectObject(index) {
      currentIndex = (index + chips.length) % chips.length;
      chips.forEach((c, i) => {
        c.classList.toggle('active', i === currentIndex);
      });
      setPath(chips[currentIndex].dataset.target);
    }

    chips.forEach((chip, i) => {
      chip.addEventListener('click', () => {
        selectObject(i);
      });
    });

    nextBtn.addEventListener('click', () => {
      selectObject(currentIndex + 1);
    });

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        if (autoPlay) {
          selectObject(currentIndex + 1);
        }
      }, 3200);
    }

    playBtn.addEventListener('click', () => {
      autoPlay = !autoPlay;
      playBtn.textContent = autoPlay ? '⏸ Pause' : '▶ Play';
    });

    // Initialise
    selectObject(0);
    startTimer();
  </script>
</body>
</html>

Think about a wooden pencil: it cannot grow or breathe now (Question 1 = No), but its wood came from a tree that once grew and reproduced (Question 2 = Yes), so it is **dead organic matter**.

A plastic ruler also cannot grow or breathe (Question 1 = No), and it was made in a factory from petroleum minerals that never had life (Question 2 = No), so it is **never alive**.

Wait—what about a roaring campfire or a river that moves, gets bigger, and eats up fuel?

Fire seems to move, grow, and consume wood, which tricks many people into thinking it is alive.

However, fire is **never alive** because it is just a chemical reaction—it does not have cells, cannot pass genetic traits to offspring, and cannot sense its surroundings.

<!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>Why Fire is NEVER Alive</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: #f8fafc;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .title {
      font-size: 16px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #1e2945;
      margin-bottom: 8px;
      text-align: center;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 10px;
      width: 100%;
      max-width: 540px;
      flex-grow: 1;
    }

    @media (max-width: 420px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }

    .panel {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .panel-header {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      padding-bottom: 4px;
      border-bottom: 1.5px solid #f1f5f9;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .panel-left .panel-header { color: #ea580c; }
    .panel-right .panel-header { color: #0284c7; }

    .item-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      background: #f8fafc;
      padding: 6px 8px;
      border-radius: 8px;
      border: 1px solid #f1f5f9;
    }

    .icon-badge {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }

    .badge-orange { background: #ffedd5; color: #ea580c; }
    .badge-red { background: #fee2e2; color: #dc2626; font-weight: 800; }

    .stamp-container {
      width: 100%;
      max-width: 540px;
      margin-top: 10px;
      display: flex;
      justify-content: center;
    }

    .stamp {
      border: 2px dashed #dc2626;
      background: #fef2f2;
      color: #dc2626;
      font-size: 14px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 6px 16px;
      border-radius: 8px;
      transform: rotate(-1deg);
      text-align: center;
    }

    .sub-stamp {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: #991b1b;
      letter-spacing: 0.5px;
      margin-top: 1px;
    }
  </style>
</head>
<body>

  <div class="title">🔥 Why Fire is NEVER Alive</div>

  <div class="grid">
    
    <div class="panel panel-left">
      <div class="panel-header">
        <span>👁️</span> What It Seems To Do
      </div>
      <div class="item-list">
        <div class="item">
          <div class="icon-badge badge-orange">📈</div>
          <div>Spreads <i>(Growth?)</i></div>
        </div>
        <div class="item">
          <div class="icon-badge badge-orange">💨</div>
          <div>Flickers <i>(Movement?)</i></div>
        </div>
        <div class="item">
          <div class="icon-badge badge-orange">🪵</div>
          <div>Consumes <i>(Eating?)</i></div>
        </div>
      </div>
    </div>

    
    <div class="panel panel-right">
      <div class="panel-header">
        <span>🔬</span> Scientific Check
      </div>
      <div class="item-list">
        <div class="item">
          <div class="icon-badge badge-red">✕</div>
          <div>No Cells</div>
        </div>
        <div class="item">
          <div class="icon-badge badge-red">✕</div>
          <div>No Genetic Code (DNA)</div>
        </div>
        <div class="item">
          <div class="icon-badge badge-red">✕</div>
          <div>No Senses / Response</div>
        </div>
      </div>
    </div>
  </div>

  <div class="stamp-container">
    <div class="stamp">
      🚫 NEVER ALIVE
      <span class="sub-stamp">Chemical Reaction (Combustion)</span>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
</body>
</html>

Next time you take a walk outside, test your skills: find three things on the ground and run them through your two-question test!

science

Distinguishing Living, Dead, and Never Alive. Differentiate between living things, dead organic matter, and non-living objects using life processes.

Alive, Dead and Never Alive (KS1 / Year 2 Science)

How Can I Sort Objects into Dead, Living and Non-living? (KS1 Science)

Living, Dead and Never Been Alive - Research-to-Practice (R2P)

Teaching this objective effectively requires an inquiry-led, concrete-to-abstract pedagogical progression. Begin with a hands-on 'Schoolyard Bio-Hunt' where pupils collect a variety of tangible objects (e.g., fresh leaves, twigs, stones, plastic bottle caps, seeds, wool) and sort them into tactile hoops labelled 'Living', 'Dead', and 'Never Been Alive'. Address the classic movement trap early by explicitly testing candidate items against the complete set of MRS GREN criteria rather than relying solely on movement or rigidity. Use branching dichotomy keys to reinforce that 'Dead' requires having once carried out biological processes, bridging Year 1 seasonal observation (fallen leaves) with Year 2 classification and life science concepts.

Distinguishing Living, Dead, and Never Alive

The 7 Clues of Life

Three Clear Categories

The 2-Question Test