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

Every person you know, from your best friend to your grandparents, started out smaller than a single grain of salt.

Over our lives, our bodies pass through **seven major stages** of growth called the human life timeline.

<!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>Human Life Timeline</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;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }

    .timeline-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
    }

    /* Cards Grid */
    .stages-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
      position: relative;
    }

    @media (max-width: 520px) {
      .stages-grid {
        grid-template-columns: repeat(4, 1fr);
      }
      .stages-grid .stage-card:nth-child(n+5) {
        grid-column: span 1;
      }
      .stages-grid .stage-card:nth-child(5) {
        grid-column-start: 1;
      }
    }

    .stage-card {
      background: #ffffff;
      border: 1.5px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
      position: relative;
    }

    .stage-card:hover {
      border-color: #bce7ff;
    }

    .stage-card.active {
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px #22b7ff, 0 4px 12px rgba(34, 183, 255, 0.25);
      background-color: #f0f9ff;
    }

    .stage-icon {
      font-size: 22px;
      line-height: 1.2;
      margin-bottom: 4px;
    }

    .stage-name {
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      color: #1e2945;
      margin-bottom: 2px;
    }

    .stage-age {
      font-size: 9.5px;
      color: #6b7280;
      line-height: 1.1;
    }

    /* Detail Panel */
    .detail-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 96px;
      justify-content: center;
    }

    .detail-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .detail-title {
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .stage-badge {
      font-size: 10px;
      font-weight: 600;
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 7px;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .detail-text {
      font-size: 13px;
      color: #4b5563;
      line-height: 1.4;
    }

    /* Controls Bar */
    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s, border-color 0.2s;
    }

    .nav-btn:hover {
      background-color: #f3f4f6;
      border-color: #9ca3af;
    }

    .nav-btn:active {
      background-color: #e5e7eb;
    }

    .play-btn {
      width: 32px;
      height: 32px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="timeline-container">
    
    <div class="stages-grid" id="stagesGrid">
      <div class="stage-card active" data-index="0">
        <span class="stage-icon">🤰</span>
        <span class="stage-name">Fetus</span>
        <span class="stage-age">Before birth</span>
      </div>

      <div class="stage-card" data-index="1">
        <span class="stage-icon">🍼</span>
        <span class="stage-name">Infant</span>
        <span class="stage-age">0–1 yr</span>
      </div>

      <div class="stage-card" data-index="2">
        <span class="stage-icon">🧸</span>
        <span class="stage-name">Toddler</span>
        <span class="stage-age">1–3 yrs</span>
      </div>

      <div class="stage-card" data-index="3">
        <span class="stage-icon">🎒</span>
        <span class="stage-name">Child</span>
        <span class="stage-age">3–12 yrs</span>
      </div>

      <div class="stage-card" data-index="4">
        <span class="stage-icon">🎧</span>
        <span class="stage-name">Adolescent</span>
        <span class="stage-age">12–18 yrs</span>
      </div>

      <div class="stage-card" data-index="5">
        <span class="stage-icon">💼</span>
        <span class="stage-name">Adult</span>
        <span class="stage-age">18–65 yrs</span>
      </div>

      <div class="stage-card" data-index="6">
        <span class="stage-icon">🧓</span>
        <span class="stage-name">Elderly</span>
        <span class="stage-age">65+ yrs</span>
      </div>
    </div>

    
    <div class="detail-card">
      <div class="detail-header">
        <div class="detail-title" id="stageTitle">
          <span>🤰 Fetus</span>
          <span class="stage-badge" id="stageAgeBadge">Before birth</span>
        </div>
        <span class="stage-badge" id="stepCounter">Stage 1 of 7</span>
      </div>
      <p class="detail-text" id="stageDesc">Grows and develops rapidly inside the uterus before birth.</p>
    </div>

    
    <div class="controls-row">
      <button class="nav-btn" id="prevBtn" aria-label="Previous Stage">◀ Prev</button>
      <button class="nav-btn play-btn" id="playBtn" aria-label="Play or Pause">⏸</button>
      <button class="nav-btn" id="nextBtn" aria-label="Next Stage">Next ▶</button>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const stageData = [
      { name: 'Fetus', icon: '🤰', age: 'Before birth', desc: 'Grows and develops rapidly inside the uterus before birth.' },
      { name: 'Infant', icon: '🍼', age: '0–1 yr', desc: 'Develops basic motor skills, smiles, and relies fully on care.' },
      { name: 'Toddler', icon: '🧸', age: '1–3 yrs', desc: 'Learns to walk, talk, eat independently, and explore.' },
      { name: 'Child', icon: '🎒', age: '3–12 yrs', desc: 'Builds complex physical coordination, speech, and school skills.' },
      { name: 'Adolescent', icon: '🎧', age: '12–18 yrs', desc: 'Undergoes puberty and transitions into physical maturity.' },
      { name: 'Adult', icon: '💼', age: '18–65 yrs', desc: 'Reaches full physical growth, independence, and career life.' },
      { name: 'Elderly Adult', icon: '🧓', age: '65+ yrs', desc: 'Aging body experiences gradual changes; rich in life experience.' }
    ];

    const cards = $$('.stage-card');
    const stageTitle = $('#stageTitle');
    const stageAgeBadge = $('#stageAgeBadge');
    const stepCounter = $('#stepCounter');
    const stageDesc = $('#stageDesc');
    const playBtn = $('#playBtn');

    function updateDetails(index) {
      const data = stageData[index];
      stageTitle.innerHTML = `<span>${data.icon} ${data.name}</span>`;
      stageAgeBadge.textContent = data.age;
      stepCounter.textContent = `Stage ${index + 1} of 7`;
      stageDesc.textContent = data.desc;
    }

    const player = new StepPlayer('.stage-card', {
      interval: 3200,
      onChange: (index) => {
        updateDetails(index);
      }
    });

    player.start();

    cards.forEach((card, i) => {
      onTap(card, () => {
        player.pause();
        playBtn.textContent = '▶';
        player.goTo(i);
      });
    });

    onTap($('#prevBtn'), () => {
      player.pause();
      playBtn.textContent = '▶';
      player.prev();
    });

    onTap($('#nextBtn'), () => {
      player.pause();
      playBtn.textContent = '▶';
      player.next();
    });

    onTap(playBtn, () => {
      player.toggle();
      playBtn.textContent = player.playing ? '⏸' : '▶';
    });
  </script>
</body>
</html>

Where does this journey begin before we are even born?

A **fetus** is the unborn baby growing safely inside its mother's womb.

During this 9-month period called **gestation**, the baby grows from a tiny cluster of cells into a complete human with a beating heart, fingers, and toes.

Once the baby is born, how does it start exploring the world?

An **infant** is a baby from birth up to 1 year old who drinks milk and depends completely on adults for food, warmth, and care.

A **toddler** is a child aged 1 to 3 years who is learning to walk with unsteady, wobbly steps — which is where the word "toddle" comes from!

<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    body {
      background-color: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Side-by-side Stage Cards */
    .stages-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .stage-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: box-shadow 0.25s ease, background 0.25s ease;
      box-shadow: 0 0 0 2px transparent;
    }

    .stage-card.active {
      box-shadow: 0 0 0 2px #22b7ff, 0 4px 12px rgba(34, 183, 255, 0.15);
      background: #ffffff;
    }

    .stage-avatar {
      font-size: 38px;
      line-height: 1;
      margin-bottom: 6px;
    }

    .stage-title {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 2px;
    }

    .stage-age {
      font-size: 12px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 10px;
      margin-bottom: 10px;
    }

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

    .tag-item {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 13px;
      font-weight: 500;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: flex-start;
      text-align: left;
    }

    .stage-card.active .tag-item {
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    /* Milestone Progress Timeline */
    .timeline-container {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 16px 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .timeline-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .timeline-track-wrap {
      position: relative;
      padding: 10px 4px 6px;
    }

    .timeline-track-bg {
      position: absolute;
      top: 22px;
      left: 12px;
      right: 12px;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      z-index: 1;
    }

    .timeline-track-fill {
      position: absolute;
      top: 22px;
      left: 12px;
      height: 4px;
      background: #22b7ff;
      border-radius: 2px;
      z-index: 2;
      transition: width 0.35s ease;
      width: 50%;
    }

    .timeline-nodes {
      position: relative;
      z-index: 3;
      display: flex;
      justify-content: space-between;
    }

    .node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
    }

    .node-check {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      color: #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      transition: all 0.25s ease;
    }

    .node.checked .node-check {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    .node-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }

    .node.checked .node-label {
      color: #0284c7;
      font-weight: 700;
    }
  </style>
</head>
<body>

  
  <div class="stages-grid">
    
    <div class="stage-card active" id="card-infant" onclick="selectStage('infant')">
      <div class="stage-avatar">👶</div>
      <div class="stage-title">Infant</div>
      <div class="stage-age">0 – 1 yr</div>
      <div class="tag-list">
        <div class="tag-item">🍼 Drinks milk</div>
        <div class="tag-item">🔄 Sits & rolls</div>
        <div class="tag-item">🤫 No words yet</div>
      </div>
    </div>

    
    <div class="stage-card" id="card-toddler" onclick="selectStage('toddler')">
      <div class="stage-avatar">🧒</div>
      <div class="stage-title">Toddler</div>
      <div class="stage-age">1 – 3 yrs</div>
      <div class="tag-list">
        <div class="tag-item">🍎 Solid food</div>
        <div class="tag-item">🚶 First steps</div>
        <div class="tag-item">💬 First words</div>
      </div>
    </div>
  </div>

  
  <div class="timeline-container">
    <div class="timeline-header">
      <span>Milestones</span>
      <span id="timeline-span-text" style="color:#0284c7;">Age 0 – 1</span>
    </div>
    <div class="timeline-track-wrap">
      <div class="timeline-track-bg"></div>
      <div class="timeline-track-fill" id="track-fill" style="width: 50%;"></div>
      <div class="timeline-nodes">
        <div class="node checked" id="node-0" onclick="selectStage('infant')">
          <div class="node-check">✓</div>
          <div class="node-label">Birth</div>
        </div>
        <div class="node checked" id="node-1" onclick="selectStage('infant')">
          <div class="node-check">✓</div>
          <div class="node-label">1 yr</div>
        </div>
        <div class="node" id="node-2" onclick="selectStage('toddler')">
          <div class="node-check">✓</div>
          <div class="node-label">2 yrs</div>
        </div>
        <div class="node" id="node-3" onclick="selectStage('toddler')">
          <div class="node-check">✓</div>
          <div class="node-label">3 yrs</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function selectStage(stage) {
      const cardInfant = document.getElementById('card-infant');
      const cardToddler = document.getElementById('card-toddler');
      const trackFill = document.getElementById('track-fill');
      const spanText = document.getElementById('timeline-span-text');
      const node2 = document.getElementById('node-2');
      const node3 = document.getElementById('node-3');

      if (stage === 'infant') {
        cardInfant.classList.add('active');
        cardToddler.classList.remove('active');
        trackFill.style.width = '33%';
        spanText.textContent = 'Age 0 – 1';
        node2.classList.remove('checked');
        node3.classList.remove('checked');
      } else {
        cardToddler.classList.add('active');
        cardInfant.classList.remove('active');
        trackFill.style.width = '100%';
        spanText.textContent = 'Age 1 – 3';
        node2.classList.add('checked');
        node3.classList.add('checked');
      }
    }
  </script>
</body>
</html>

After mastering walking and talking, what big changes happen next as you go to school?

A **child** (ages 3 to 12) grows taller rapidly, loses baby teeth to grow adult teeth, and learns complex skills like reading, sports, and making friends.

An **adolescent** (ages 12 to 18), often called a teenager, goes through **puberty**, a stage where the body changes physically into an adult body.

What happens once the body finishes growing?

An **adult** (ages 18 to 65) has a fully grown body at peak strength and takes on responsibilities like working, managing a home, or raising children.

An **elderly adult** (age 65 and older) is in the final stage of life, where bones and muscles slowly lose strength, hair often turns gray, and a lifetime of wisdom is shared with younger generations.

<!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>Match Life Stages</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }
    .match-board {
      position: relative;
      width: 100%;
      max-width: 480px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      z-index: 1;
    }
    .column {
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 2;
    }
    .tile {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      cursor: pointer;
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      line-height: 1.25;
    }
    .tile.selected {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
    }
    .tile.matched {
      border-color: #10b981;
      background: #ecfdf5;
      color: #065f46;
      cursor: default;
    }
    .tile.error {
      border-color: #ef4444;
      background: #fef2f2;
    }
    .svg-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }
    .connection-line {
      stroke: #22b7ff;
      stroke-width: 3;
      stroke-linecap: round;
      transition: stroke 0.3s ease;
    }
    .connection-line.correct {
      stroke: #10b981;
    }
    .connection-line.wrong {
      stroke: #ef4444;
    }
    .controls {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
    }
    .status-msg {
      font-size: 14px;
      font-weight: 700;
      min-height: 20px;
      color: #10b981;
      text-align: center;
    }
    .btn-reset {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
    }
    .btn-reset:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  <div class="match-board" id="board">
    <svg class="svg-layer" id="svgLayer"></svg>

    
    <div class="column" id="colLeft">
      <div class="tile" data-id="1">0 to 1 year</div>
      <div class="tile" data-id="2">12 to 18 years<br>(Puberty)</div>
      <div class="tile" data-id="0">In the womb</div>
      <div class="tile" data-id="3">Age 65+</div>
    </div>

    
    <div class="column" id="colRight">
      <div class="tile" data-id="0">Fetus</div>
      <div class="tile" data-id="1">Infant</div>
      <div class="tile" data-id="2">Adolescent</div>
      <div class="tile" data-id="3">Elderly Adult</div>
    </div>
  </div>

  <div class="controls">
    <div class="status-msg" id="status"></div>
    <button class="btn-reset" id="resetBtn">↺ Reset</button>
  </div>

  <script>
    const board = document.getElementById('board');
    const svgLayer = document.getElementById('svgLayer');
    const statusMsg = document.getElementById('status');
    const resetBtn = document.getElementById('resetBtn');

    let selectedLeft = null;
    let selectedRight = null;
    let matches = []; // array of { leftEl, rightEl, id }

    function getAnchor(el, isLeft) {
      const bRect = board.getBoundingClientRect();
      const tRect = el.getBoundingClientRect();
      const y = tRect.top - bRect.top + tRect.height / 2;
      const x = isLeft ? (tRect.right - bRect.left) : (tRect.left - bRect.left);
      return { x, y };
    }

    function renderLines() {
      svgLayer.innerHTML = '';
      matches.forEach(m => {
        const p1 = getAnchor(m.leftEl, true);
        const p2 = getAnchor(m.rightEl, false);
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', p1.x);
        line.setAttribute('y1', p1.y);
        line.setAttribute('x2', p2.x);
        line.setAttribute('y2', p2.y);
        line.setAttribute('class', 'connection-line correct');
        svgLayer.appendChild(line);
      });
    }

    function handleSelect(tile, isLeft) {
      if (tile.classList.contains('matched')) return;

      if (isLeft) {
        if (selectedLeft === tile) {
          tile.classList.remove('selected');
          selectedLeft = null;
          return;
        }
        document.querySelectorAll('#colLeft .tile').forEach(t => t.classList.remove('selected'));
        tile.classList.add('selected');
        selectedLeft = tile;
      } else {
        if (selectedRight === tile) {
          tile.classList.remove('selected');
          selectedRight = null;
          return;
        }
        document.querySelectorAll('#colRight .tile').forEach(t => t.classList.remove('selected'));
        tile.classList.add('selected');
        selectedRight = tile;
      }

      if (selectedLeft && selectedRight) {
        checkPair(selectedLeft, selectedRight);
      }
    }

    function checkPair(leftEl, rightEl) {
      const leftId = leftEl.dataset.id;
      const rightId = rightEl.dataset.id;

      if (leftId === rightId) {
        leftEl.className = 'tile matched';
        rightEl.className = 'tile matched';
        matches.push({ leftEl, rightEl, id: leftId });
        selectedLeft = null;
        selectedRight = null;
        renderLines();

        if (matches.length === 4) {
          statusMsg.textContent = 'Great job! ✓';
          if (window.answerCorrect) {
            window.answerCorrect({ answer: 'All stages matched', explanation: 'Correct timeline pairs.' });
          }
        }
      } else {
        leftEl.classList.add('error');
        rightEl.classList.add('error');
        setTimeout(() => {
          leftEl.classList.remove('error', 'selected');
          rightEl.classList.remove('error', 'selected');
          selectedLeft = null;
          selectedRight = null;
        }, 500);
      }
    }

    document.querySelectorAll('#colLeft .tile').forEach(t => {
      t.addEventListener('click', () => handleSelect(t, true));
    });

    document.querySelectorAll('#colRight .tile').forEach(t => {
      t.addEventListener('click', () => handleSelect(t, false));
    });

    function reset() {
      matches = [];
      selectedLeft = null;
      selectedRight = null;
      statusMsg.textContent = '';
      document.querySelectorAll('.tile').forEach(t => {
        t.className = 'tile';
      });
      renderLines();
    }

    resetBtn.addEventListener('click', reset);
    window.addEventListener('resize', renderLines);
  </script>
</body>
</html>

Think about your own family: which of the seven stages is each person in right now?

science

The Human Life Timeline: From Conception to Old Age. Outline the full human timeline: foetus, infant, toddler, child, adolescent, adult, and elderly adult.

How do humans change during their lifetime? - KS2 Science

Human Development: Changes in humans from birth to old age

Year 5 Animals Including Humans: The Human Life Cycle and Growth

Teaching the human timeline across KS1-KS2 requires a sensitive, scientific approach that balances biological accuracy with accessibility. Effective strategies include: (1) Using comparative visual timelines that clearly differentiate between a circular species lifecycle (reproduction) and an individual linear life course; (2) Incorporating real-life data (e.g. height/mass growth charts) to integrate cross-curricular mathematical enquiry ($x$-$y$ plotting and rate calculations); (3) Directly challenging age-related stereotypes by exploring active ageing and individual variation; (4) Clarifying precise biological terms (such as uterus vs stomach, foetus vs baby, puberty vs adolescence) to build foundational scientific literacy for Key Stage 3.

The Human Life Timeline: From Conception to Old Age

1. Before Birth: The Fetus

2. Early Years: Infant and Toddler