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

Think about everything your hands touched today—doorknobs, playground swings, shoelaces, and maybe even a family pet.

Even if your hands look spotless, tiny living things called **germs** can hitch a ride on your skin and make you sick if they get inside your body.

So how do we stop these invisible invaders and stay healthy?

**Hygiene** is everything we do to keep ourselves and our surroundings clean so we can stay healthy and prevent illness.

<!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: #1e293b;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .title-wrap {
      text-align: center;
      margin-bottom: 8px;
    }

    .main-title {
      font-size: 19px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.3px;
    }

    .goal-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #fef08a;
      color: #854d0e;
      border: 1.5px solid #facc15;
      padding: 3px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      margin-top: 4px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 620px;
      margin-top: 6px;
    }

    @media (max-width: 520px) {
      .grid-container {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .main-title {
        font-size: 17px;
      }
    }

    .column-card {
      border-radius: 16px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .card-personal {
      background: #f0f7ff;
      border: 2px solid #bfdbfe;
    }

    .card-environmental {
      background: #f0fdf4;
      border: 2px solid #bbf7d0;
    }

    .card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 4px;
    }

    .card-personal .card-header {
      color: #1d4ed8;
      border-bottom: 2px dashed #bfdbfe;
    }

    .card-environmental .card-header {
      color: #15803d;
      border-bottom: 2px dashed #bbf7d0;
    }

    .header-icon {
      font-size: 20px;
      line-height: 1;
    }

    .header-title {
      font-size: 14px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .tile-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .tile {
      background: #ffffff;
      border-radius: 12px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      border: 1.5px solid transparent;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
      user-select: none;
    }

    .card-personal .tile:hover,
    .card-personal .tile.active {
      border-color: #3b82f6;
      box-shadow: 0 3px 10px rgba(59, 130, 246, 0.18);
    }

    .card-environmental .tile:hover,
    .card-environmental .tile.active {
      border-color: #22c55e;
      box-shadow: 0 3px 10px rgba(34, 197, 94, 0.18);
    }

    .tile-icon {
      font-size: 24px;
      min-width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }

    .card-personal .tile-icon {
      background: #e0f2fe;
    }

    .card-environmental .tile-icon {
      background: #dcfce7;
    }

    .tile-content {
      flex: 1;
      min-width: 0;
    }

    .tile-name {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      line-height: 1.2;
    }

    .tile-tag {
      font-size: 11px;
      font-weight: 600;
      margin-top: 1px;
    }

    .card-personal .tile-tag {
      color: #2563eb;
    }

    .card-environmental .tile-tag {
      color: #16a34a;
    }

    .sparkle-check {
      font-size: 15px;
      opacity: 0.2;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .tile.active .sparkle-check {
      opacity: 1;
      transform: scale(1.15);
    }
  </style>
</head>
<body>

  <div class="title-wrap">
    <div class="main-title">The Two Sides of Hygiene</div>
    <div class="goal-badge">
      <span>🛡️</span>
      <span>Shared Goal: Stop Germs</span>
      <span>✨</span>
    </div>
  </div>

  <div class="grid-container">
    
    <div class="column-card card-personal">
      <div class="card-header">
        <span class="header-icon">👤</span>
        <span class="header-title">Personal (Our Bodies)</span>
      </div>
      <div class="tile-list">
        <div class="tile active">
          <div class="tile-icon">🧼</div>
          <div class="tile-content">
            <div class="tile-name">Wash Hands</div>
            <div class="tile-tag">20 seconds with soap</div>
          </div>
          <div class="sparkle-check">✨</div>
        </div>
        <div class="tile">
          <div class="tile-icon">🪥</div>
          <div class="tile-content">
            <div class="tile-name">Brush Teeth</div>
            <div class="tile-tag">2 times a day</div>
          </div>
          <div class="sparkle-check">✨</div>
        </div>
        <div class="tile">
          <div class="tile-icon">🚿</div>
          <div class="tile-content">
            <div class="tile-name">Wash Body</div>
            <div class="tile-tag">Bath or shower</div>
          </div>
          <div class="sparkle-check">✨</div>
        </div>
      </div>
    </div>

    
    <div class="column-card card-environmental">
      <div class="card-header">
        <span class="header-icon">🏡</span>
        <span class="header-title">Surroundings (Our Spaces)</span>
      </div>
      <div class="tile-list">
        <div class="tile active">
          <div class="tile-icon">🧽</div>
          <div class="tile-content">
            <div class="tile-name">Wipe Surfaces</div>
            <div class="tile-tag">Tables & door handles</div>
          </div>
          <div class="sparkle-check">✨</div>
        </div>
        <div class="tile">
          <div class="tile-icon">🗑️</div>
          <div class="tile-content">
            <div class="tile-name">Empty Bins</div>
            <div class="tile-tag">Keep lids closed</div>
          </div>
          <div class="sparkle-check">✨</div>
        </div>
        <div class="tile">
          <div class="tile-icon">🍽️</div>
          <div class="tile-content">
            <div class="tile-name">Wash Dishes</div>
            <div class="tile-tag">Warm soapy water</div>
          </div>
          <div class="sparkle-check">✨</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.querySelectorAll('.tile').forEach(tile => {
      tile.addEventListener('click', () => {
        tile.classList.toggle('active');
      });
    });
  </script>
</body>
</html>

What does taking care of our own bodies look like every day?

**Personal hygiene** means daily habits that keep your own body clean, such as washing your hands with soap, brushing your teeth, and bathing.

Washing your hands for 20 seconds rinses away dirt and germs before they can enter your eyes, nose, or mouth.

Is keeping our bodies clean enough, or do the spaces around us matter too?

Hygiene also includes taking care of your **surroundings**—the physical environment where you live, eat, learn, and play.

Wiping down kitchen counters, washing dishes after a meal, and keeping classroom desks clean prevent germs from multiplying on the things you touch.

<!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>Hygiene Action Check-in</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }
    .hygiene-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      user-select: none;
      transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    }
    .hygiene-card:focus-visible {
      outline: 2px solid #22b7ff;
    }
    .icon {
      font-size: 30px;
      line-height: 1;
    }
    .action-text {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.25;
      min-height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .badge {
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.25s ease;
    }
    .badge-personal {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }
    .badge-surroundings {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }
    .reason {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      background: #f8fafc;
      border-radius: 8px;
      padding: 4px 8px;
      width: 100%;
      border: 1px solid #f1f5f9;
      min-height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hygiene-card.active.type-personal {
      border-color: #38bdf8;
      box-shadow: 0 4px 12px rgba(56, 189, 248, 0.18);
    }
    .hygiene-card.active.type-surroundings {
      border-color: #fbbf24;
      box-shadow: 0 4px 12px rgba(251, 191, 36, 0.18);
    }
    .hint {
      font-size: 12px;
      color: #64748b;
      font-weight: 600;
      margin-top: 10px;
      text-align: center;
    }
    @media (max-width: 420px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .hygiene-card {
        flex-direction: row;
        text-align: left;
        padding: 10px 12px;
        gap: 10px;
      }
      .action-text {
        min-height: auto;
        justify-content: flex-start;
      }
      .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .reason {
        justify-content: flex-start;
      }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="hygiene-card active type-personal" id="card-0" onclick="toggleCard(0)">
      <div class="icon">🪥</div>
      <div class="card-body">
        <div class="action-text">Brushing teeth<br>before bed</div>
        <div class="badge badge-personal">👤 Personal Hygiene</div>
        <div class="reason">🛡️ Protects teeth & gums</div>
      </div>
    </div>

    
    <div class="hygiene-card active type-surroundings" id="card-1" onclick="toggleCard(1)">
      <div class="icon">🧽</div>
      <div class="card-body">
        <div class="action-text">Wiping kitchen crumbs<br>off counter</div>
        <div class="badge badge-surroundings">🏠 Surroundings</div>
        <div class="reason">🐜 Stops pests & germs</div>
      </div>
    </div>

    
    <div class="hygiene-card active type-personal" id="card-2" onclick="toggleCard(2)">
      <div class="icon">🧼</div>
      <div class="card-body">
        <div class="action-text">Washing hands<br>before lunch</div>
        <div class="badge badge-personal">👤 Personal Hygiene</div>
        <div class="reason">🦠 Washes off germs</div>
      </div>
    </div>

    
    <div class="hygiene-card active type-surroundings" id="card-3" onclick="toggleCard(3)">
      <div class="icon">🗑️</div>
      <div class="card-body">
        <div class="action-text">Taking out the<br>food scrap bin</div>
        <div class="badge badge-surroundings">🏠 Surroundings</div>
        <div class="reason">🪰 Keeps kitchen clean</div>
      </div>
    </div>
  </div>

  <div class="hint">Tap any action to highlight category</div>

  <script>
    const cards = [
      { type: 'personal', badge: '👤 Personal Hygiene', reason: '🛡️ Protects teeth & gums' },
      { type: 'surroundings', badge: '🏠 Surroundings', reason: '🐜 Stops pests & germs' },
      { type: 'personal', badge: '👤 Personal Hygiene', reason: '🦠 Washes off germs' },
      { type: 'surroundings', badge: '🏠 Surroundings', reason: '🪰 Keeps kitchen clean' }
    ];

    let states = [true, true, true, true];

    function toggleCard(index) {
      states[index] = !states[index];
      const cardEl = document.getElementById('card-' + index);
      const data = cards[index];
      
      const badgeEl = cardEl.querySelector('.badge');
      const reasonEl = cardEl.querySelector('.reason');

      if (states[index]) {
        cardEl.classList.add('active');
        badgeEl.style.opacity = '1';
        reasonEl.style.opacity = '1';
        badgeEl.textContent = data.badge;
        reasonEl.textContent = data.reason;
      } else {
        cardEl.classList.remove('active');
        badgeEl.style.opacity = '0.4';
        reasonEl.style.opacity = '0.4';
        badgeEl.textContent = 'Tap to show type';
        reasonEl.textContent = 'Tap to see reason';
      }
    }
  </script>
</body>
</html>

A common mistake is thinking you only need to practice hygiene when something looks or smells dirty.

Because germs are invisible, making hygiene a daily routine protects you and everyone around you before germs have a chance to spread.

science

What Is Hygiene?. Define hygiene as the things we do to keep ourselves and our surroundings clean.

Washing Hands & Staying Healthy (KS1 / Year 2 Science)

What do humans need to stay healthy? (KS1 Science: Personal Hygiene & Cleanliness)

e-Bug Key Stage 1: Hand Hygiene and Clean Environments

Teaching KS1/KS2 hygiene effectively requires moving students past the intuitive misconception that 'clean = looks clean'. Use concrete experiential modeling such as the 'Glitter/UV Lotion Germ Experiment' or soap surface-tension pepper tests. Always explicitly connect the two sides of hygiene: personal care (teeth, hands, bathing) and environmental care (surfaces, waste disposal, clean utensils) to align with statutory National Curriculum KS1 Science requirements.

What Is Hygiene?

What Is Hygiene?

Personal Hygiene

Cleaning Our Surroundings