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 closing your eyes and reaching into a mystery bag. Can your fingertips tell you what an object is made of before you even see it?

Everything around us is made of different kinds of stuff called **materials**. We use our eyes to see colors and our fingers to feel **textures**.

Four of the most common materials in your home and classroom are **wood**, **metal**, **plastic**, and **fabric**.

<!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>Observing Materials</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;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .nav {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 440px;
  }

  .nav-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #e6e6e6;
    background: #ffffff;
    color: #6b7280;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.25s ease;
  }

  .nav-btn.active {
    border-color: #22b7ff;
    background: #e8f7ff;
    color: #0077b6;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.2);
  }

  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 440px;
  }

  .tile {
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .tile.selected {
    border-color: #22b7ff;
    box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
  }

  .swatch {
    width: 100%;
    height: 64px;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
  }

  /* Material Textures */
  .wood-pat {
    background: repeating-linear-gradient(90deg, #965d34 0px, #a86c3e 12px, #864f28 16px, #b87a4a 24px, #965d34 32px);
  }
  .wood-pat::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0px, transparent 15px, rgba(0,0,0,0.06) 16px);
  }

  .metal-pat {
    background: linear-gradient(135deg, #b0bec5 0%, #eceff1 35%, #78909c 50%, #ffffff 70%, #90a4ae 100%);
  }
  .metal-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    transform: translateX(-100%);
  }
  .mode-look .metal-shimmer {
    animation: shine 2.5s infinite ease-in-out;
  }
  @keyframes shine {
    0%, 20% { transform: translateX(-100%); }
    60%, 100% { transform: translateX(100%); }
  }

  .plastic-pat {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  }
  .plastic-pat::before {
    content: '';
    position: absolute;
    top: 4px; left: 8px; right: 8px; height: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);
    border-radius: 4px;
  }

  .fabric-pat {
    background:
      repeating-linear-gradient(45deg, #e91e63 0px, #e91e63 4px, #d81557 4px, #d81557 8px),
      repeating-linear-gradient(-45deg, #c2185b 0px, #c2185b 4px, transparent 4px, transparent 8px);
    background-blend-mode: overlay;
  }

  .name {
    font-size: 15px;
    font-weight: 700;
    color: #1e2945;
    margin-bottom: 4px;
  }

  .trait-badge {
    font-size: 13px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }

  .mode-look .trait-badge {
    background: #fef3c7;
    color: #92400e;
  }

  .mode-touch .trait-badge {
    background: #dcfce7;
    color: #166534;
  }
</style>
</head>
<body>

<div class="nav">
  <button class="nav-btn active" id="btnLook" onclick="setMode('look')">
    <span>👀</span> Color & Look
  </button>
  <button class="nav-btn" id="btnTouch" onclick="setMode('touch')">
    <span>✋</span> Texture & Touch
  </button>
</div>

<div class="grid mode-look" id="grid">
  
  <div class="tile" onclick="selectTile(this)">
    <div class="swatch wood-pat"></div>
    <div class="name">🪵 Wood</div>
    <div class="trait-badge" data-look="Brown Grain" data-touch="Rough Lines">Brown Grain</div>
  </div>

  
  <div class="tile" onclick="selectTile(this)">
    <div class="swatch metal-pat">
      <div class="metal-shimmer"></div>
    </div>
    <div class="name">🥄 Metal</div>
    <div class="trait-badge" data-look="Shiny Gleam" data-touch="Hard & Cool">Shiny Gleam</div>
  </div>

  
  <div class="tile" onclick="selectTile(this)">
    <div class="swatch plastic-pat"></div>
    <div class="name">🧱 Plastic</div>
    <div class="trait-badge" data-look="Bright Color" data-touch="Smooth & Slick">Bright Color</div>
  </div>

  
  <div class="tile" onclick="selectTile(this)">
    <div class="swatch fabric-pat"></div>
    <div class="name">🧣 Fabric</div>
    <div class="trait-badge" data-look="Woven Threads" data-touch="Soft & Bendy">Woven Threads</div>
  </div>
</div>

<script>
  function setMode(mode) {
    const grid = document.getElementById('grid');
    const btnLook = document.getElementById('btnLook');
    const btnTouch = document.getElementById('btnTouch');
    
    if (mode === 'look') {
      grid.classList.remove('mode-touch');
      grid.classList.add('mode-look');
      btnLook.classList.add('active');
      btnTouch.classList.remove('active');
    } else {
      grid.classList.remove('mode-look');
      grid.classList.add('mode-touch');
      btnTouch.classList.add('active');
      btnLook.classList.remove('active');
    }

    document.querySelectorAll('.trait-badge').forEach(badge => {
      badge.textContent = badge.getAttribute('data-' + mode);
    });
  }

  function selectTile(tile) {
    document.querySelectorAll('.tile').forEach(t => t.classList.remove('selected'));
    tile.classList.add('selected');
  }
</script>

</body>
</html>

How can your eyes and fingers tell brown wood apart from shiny metal?

Wood comes from trees. It is usually brown, has natural lines called wood grain, and feels hard and slightly warm.

Metal comes from rocks in the ground. It often has a shiny gleam and feels cold and very hard when you touch 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">
  <title>Observing Color and Texture</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background-color: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }

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

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

    .tab-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      transition: all 0.25s ease;
      user-select: none;
    }

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

    .tab-btn.active {
      background: #ffffff;
      color: #1e2945;
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
    }

    /* Stage */
    .stage {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Texture Preview Viewport */
    .preview-box {
      width: 100%;
      height: 150px;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      border: 1px solid #e6e6e6;
    }

    .texture-layer {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.4s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .texture-layer.active {
      opacity: 1;
    }

    /* 1. Metal Texture */
    .tex-metal {
      background: linear-gradient(135deg, #bcc6cc 0%, #e8ecef 35%, #ffffff 50%, #a8b4ba 65%, #d0d7dc 100%);
      position: relative;
    }
    .tex-metal::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.8) 50%, transparent 100%);
      transform: skewX(-25deg) translateX(-150%);
      animation: gleam 3.5s infinite ease-in-out;
    }

    @keyframes gleam {
      0%, 40% { transform: skewX(-25deg) translateX(-150%); }
      70%, 100% { transform: skewX(-25deg) translateX(250%); }
    }

    /* 2. Fabric Texture */
    .tex-fabric {
      background-color: #3b82f6;
      background-image: 
        repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 2px, transparent 2px, transparent 6px),
        repeating-linear-gradient(-45deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 2px, transparent 2px, transparent 6px);
    }

    /* 3. Wood Texture */
    .tex-wood {
      background-color: #b45309;
      background-image: 
        repeating-radial-gradient(ellipse at 20% 50%, #92400e 0px, #b45309 8px, #78350f 16px, #92400e 24px);
    }

    /* 4. Plastic Texture */
    .tex-plastic {
      background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
      position: relative;
    }
    .tex-plastic::after {
      content: '';
      position: absolute;
      top: 8px;
      left: 8px;
      right: 8px;
      height: 40%;
      border-radius: 4px;
      background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 100%);
    }

    /* Magnifier Badge */
    .zoom-badge {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(4px);
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.08);
      z-index: 2;
    }

    /* Property Cards */
    .props-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .prop-card {
      background: #f8f9fa;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

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

    .prop-meta {
      display: flex;
      flex-direction: column;
    }

    .prop-label {
      font-size: 11px;
      color: #6b7280;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .prop-value {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }
  </style>
</head>
<body>

  <div class="diagram-root">
    
    <div class="tabs" role="tablist">
      <button class="tab-btn active" data-index="0" role="tab" aria-selected="true">
        <span class="icon">🪙</span>
        <span>Metal</span>
      </button>
      <button class="tab-btn" data-index="1" role="tab" aria-selected="false">
        <span class="icon">🧶</span>
        <span>Fabric</span>
      </button>
      <button class="tab-btn" data-index="2" role="tab" aria-selected="false">
        <span class="icon">🪵</span>
        <span>Wood</span>
      </button>
      <button class="tab-btn" data-index="3" role="tab" aria-selected="false">
        <span class="icon">🧸</span>
        <span>Plastic</span>
      </button>
    </div>

    
    <div class="stage">
      <div class="preview-box">
        <div class="texture-layer tex-metal active" data-index="0"></div>
        <div class="texture-layer tex-fabric" data-index="1"></div>
        <div class="texture-layer tex-wood" data-index="2"></div>
        <div class="texture-layer tex-plastic" data-index="3"></div>
        <div class="zoom-badge">🔍 Zoom</div>
      </div>

      
      <div class="props-grid">
        <div class="prop-card">
          <span class="prop-icon">👁️</span>
          <div class="prop-meta">
            <span class="prop-label">Color</span>
            <span class="prop-value" id="valColor">Silver</span>
          </div>
        </div>

        <div class="prop-card">
          <span class="prop-icon">✋</span>
          <div class="prop-meta">
            <span class="prop-label">Texture</span>
            <span class="prop-value" id="valTexture">Shiny</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const data = [
      { color: 'Silver', texture: 'Shiny' },
      { color: 'Blue', texture: 'Soft' },
      { color: 'Brown', texture: 'Rough' },
      { color: 'Bright', texture: 'Smooth' }
    ];

    const tabs = document.querySelectorAll('.tab-btn');
    const layers = document.querySelectorAll('.texture-layer');
    const valColor = document.getElementById('valColor');
    const valTexture = document.getElementById('valTexture');

    let currentIndex = 0;
    let autoTimer = null;

    function setMaterial(index) {
      currentIndex = index;

      tabs.forEach((tab, i) => {
        const isActive = i === index;
        tab.classList.toggle('active', isActive);
        tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
      });

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

      valColor.textContent = data[index].color;
      valTexture.textContent = data[index].texture;
    }

    tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => {
        clearInterval(autoTimer);
        setMaterial(index);
      });
    });

    // Gentle auto-cycle for initial discovery
    autoTimer = setInterval(() => {
      setMaterial((currentIndex + 1) % data.length);
    }, 3200);
  </script>
</body>
</html>

What about the clothes you wear every day and the colorful toys you play with?

Plastic can be made into almost any bright color you can imagine. It is usually smooth, light, and waterproof.

Fabric is made from spun threads woven together. It feels soft, fuzzy, or stretchy, and it bends easily in your hands.

<!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>Observing Color and Texture</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .nav-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 12px;
    }

    .tab-btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .tab-btn .icon {
      font-size: 20px;
    }

    .tab-btn.active {
      border-color: #22b7ff;
      color: #1e2945;
      background: #f0f9ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }

    .inspector-card {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 14px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    .sample-display {
      width: 100%;
      height: 110px;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(0, 0, 0, 0.08);
      transition: background 0.3s ease;
    }

    /* CSS Textures */
    .texture-wood {
      background: repeating-linear-gradient(90deg, #b45309 0px, #d97706 6px, #92400e 14px, #b45309 20px);
    }

    .texture-metal {
      background: linear-gradient(135deg, #94a3b8 0%, #f1f5f9 45%, #64748b 70%, #cbd5e1 100%);
    }

    .texture-fabric {
      background-color: #3b82f6;
      background-image: 
        repeating-linear-gradient(45deg, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 5px, transparent 5px, transparent 10px),
        repeating-linear-gradient(-45deg, rgba(0,0,0,0.15) 0, rgba(0,0,0,0.15) 5px, transparent 5px, transparent 10px);
    }

    .texture-glass {
      background: linear-gradient(135deg, rgba(224, 242, 254, 0.8) 0%, rgba(186, 230, 253, 0.4) 50%, rgba(255, 255, 255, 0.9) 100%);
      box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.3);
    }

    .zoom-circle {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 3px solid #ffffff;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(1px);
    }

    .clues-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .clue-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      text-align: center;
    }

    .clue-header {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .clue-value {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
    }

    .dots-container {
      display: flex;
      gap: 6px;
      margin-top: 4px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s;
    }

    .dot.active {
      background: #22b7ff;
      transform: scale(1.15);
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="tab-btn active" data-index="0">
      <span class="icon">🪵</span>
      <span>Wood</span>
    </button>
    <button class="tab-btn" data-index="1">
      <span class="icon">🔩</span>
      <span>Metal</span>
    </button>
    <button class="tab-btn" data-index="2">
      <span class="icon">🧶</span>
      <span>Fabric</span>
    </button>
    <button class="tab-btn" data-index="3">
      <span class="icon">🪟</span>
      <span>Glass</span>
    </button>
  </div>

  <div class="inspector-card">
    <div id="sample" class="sample-display texture-wood">
      <div id="zoomIcon" class="zoom-circle">🪵</div>
    </div>

    <div class="clues-grid">
      <div class="clue-box">
        <span class="clue-header">👁️ Color & Sight</span>
        <span id="colorVal" class="clue-value">Brown Grain</span>
      </div>
      <div class="clue-box">
        <span class="clue-header">✋ Touch & Feel</span>
        <span id="textureVal" class="clue-value">Rough & Rigid</span>
      </div>
    </div>

    <div class="dots-container">
      <div class="dot active" data-index="0"></div>
      <div class="dot" data-index="1"></div>
      <div class="dot" data-index="2"></div>
      <div class="dot" data-index="3"></div>
    </div>
  </div>

  <script>
    const data = [
      {
        icon: "🪵",
        textureClass: "texture-wood",
        color: "Brown Grain",
        texture: "Rough & Rigid"
      },
      {
        icon: "🔩",
        textureClass: "texture-metal",
        color: "Shiny Silver",
        texture: "Smooth & Cold"
      },
      {
        icon: "🧶",
        textureClass: "texture-fabric",
        color: "Woven Threads",
        texture: "Soft & Bends"
      },
      {
        icon: "🪟",
        textureClass: "texture-glass",
        color: "Clear / See-through",
        texture: "Smooth & Stiff"
      }
    ];

    let current = 0;
    const tabs = document.querySelectorAll('.tab-btn');
    const dots = document.querySelectorAll('.dot');
    const sample = document.getElementById('sample');
    const zoomIcon = document.getElementById('zoomIcon');
    const colorVal = document.getElementById('colorVal');
    const textureVal = document.getElementById('textureVal');

    function selectMaterial(index) {
      current = index;
      const item = data[index];

      tabs.forEach((t, i) => t.classList.toggle('active', i === index));
      dots.forEach((d, i) => d.classList.toggle('active', i === index));

      sample.className = `sample-display ${item.textureClass}`;
      zoomIcon.textContent = item.icon;
      colorVal.textContent = item.color;
      textureVal.textContent = item.texture;
    }

    tabs.forEach((btn, i) => {
      btn.addEventListener('click', () => selectMaterial(i));
    });

    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => selectMaterial(i));
    });
  </script>
</body>
</html>

Can you use your new detective clues to name the material of mystery objects?

Whenever you investigate an object, check its color, shine, and texture first to identify what it is made of.

<!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>Observing Materials</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
    body {
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }
    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      border: 1px solid #e6e6e6;
      background: #ffffff;
      border-radius: 10px;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      outline: none;
      transition: background-color 0.2s, box-shadow 0.2s;
    }
    .tab-btn:hover {
      background: #f1f5f9;
    }
    .tab-btn.active {
      background: #eaf7ff;
      box-shadow: 0 0 0 2px #22b7ff;
    }
    .tab-icon {
      font-size: 20px;
    }
    .stage {
      display: flex;
      width: 100%;
      max-width: 440px;
      gap: 12px;
    }
    @media (max-width: 380px) {
      .stage {
        flex-direction: column;
      }
    }
    .preview-box {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 160px;
      position: relative;
    }
    .object-display {
      font-size: 54px;
      line-height: 1;
      margin-bottom: 8px;
    }
    .sample-swatch {
      width: 100%;
      height: 48px;
      border-radius: 8px;
      border: 1px solid rgba(0,0,0,0.1);
      position: relative;
      overflow: hidden;
    }
    .clues-box {
      flex: 1.2;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .clue-row {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .clue-label {
      font-size: 13px;
      color: #6b7280;
      font-weight: 500;
    }
    .clue-value {
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .swatch-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.15);
      display: inline-block;
    }
    .result-badge {
      width: 100%;
      max-width: 440px;
      background: #22b7ff;
      color: #ffffff;
      border-radius: 10px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="tabs">
    <button class="tab-btn active" onclick="showItem(0)">
      <span class="tab-icon">🥄</span>
      <span>Spoon</span>
    </button>
    <button class="tab-btn" onclick="showItem(1)">
      <span class="tab-icon">✏️</span>
      <span>Pencil</span>
    </button>
    <button class="tab-btn" onclick="showItem(2)">
      <span class="tab-icon">🎒</span>
      <span>Bag</span>
    </button>
    <button class="tab-btn" onclick="showItem(3)">
      <span class="tab-icon">🪟</span>
      <span>Window</span>
    </button>
  </div>

  <div class="stage">
    <div class="preview-box">
      <div id="objIcon" class="object-display">🥄</div>
      <div id="textureSwatch" class="sample-swatch"></div>
    </div>

    <div class="clues-box">
      <div class="clue-row">
        <span class="clue-label">Color</span>
        <span class="clue-value">
          <span id="colorDot" class="swatch-dot"></span>
          <span id="colorText">Silver</span>
        </span>
      </div>

      <div class="clue-row">
        <span class="clue-label">Shine</span>
        <span class="clue-value" id="shineVal">Shiny ✨</span>
      </div>

      <div class="clue-row">
        <span class="clue-label">Texture</span>
        <span class="clue-value" id="textureVal">Smooth 🪞</span>
      </div>
    </div>
  </div>

  <div class="result-badge">
    <span>Material:</span>
    <span id="materialName">Metal</span>
  </div>

  <script>
    const data = [
      {
        icon: '🥄',
        colorName: 'Silver',
        colorDot: 'linear-gradient(135deg, #f0f0f0, #9aa0a6)',
        shine: 'Shiny ✨',
        texture: 'Smooth 🪞',
        material: 'Metal 🔩',
        swatchBg: 'linear-gradient(120deg, #d8d8d8 0%, #ffffff 40%, #a0a0a0 100%)'
      },
      {
        icon: '✏️',
        colorName: 'Brown',
        colorDot: '#b87333',
        shine: 'Dull ☁️',
        texture: 'Rough 🪵',
        material: 'Wood 🪵',
        swatchBg: 'repeating-linear-gradient(45deg, #c68642, #c68642 6px, #a0652d 6px, #a0652d 12px)'
      },
      {
        icon: '🎒',
        colorName: 'Blue',
        colorDot: '#3b82f6',
        shine: 'Dull ☁️',
        texture: 'Woven 🧵',
        material: 'Fabric 🧵',
        swatchBg: 'radial-gradient(#1d4ed8 20%, transparent 20%), radial-gradient(#2563eb 20%, #3b82f6 20%)',
        swatchSize: '8px 8px'
      },
      {
        icon: '🪟',
        colorName: 'Clear',
        colorDot: 'linear-gradient(135deg, #e0f2fe, #bae6fd)',
        shine: 'Shiny ✨',
        texture: 'Smooth 🧊',
        material: 'Glass 🪟',
        swatchBg: 'linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(186,230,253,0.6) 50%, rgba(255,255,255,0.9) 100%)'
      }
    ];

    function showItem(idx) {
      const btns = document.querySelectorAll('.tab-btn');
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));

      const item = data[idx];
      document.getElementById('objIcon').textContent = item.icon;
      
      const swatch = document.getElementById('textureSwatch');
      swatch.style.background = item.swatchBg;
      swatch.style.backgroundSize = item.swatchSize || 'auto';

      document.getElementById('colorDot').style.background = item.colorDot;
      document.getElementById('colorText').textContent = item.colorName;
      document.getElementById('shineVal').textContent = item.shine;
      document.getElementById('textureVal').textContent = item.texture;
      document.getElementById('materialName').textContent = item.material;
    }

    showItem(0);
  </script>
</body>
</html>

Next time you hold your backpack, pencil, or spoon, ask yourself: what clues tell you what material it is?

science

Observing Color and Texture to Identify Materials. Identify and sort materials by observing their distinct color patterns and surface textures.

What are materials? - KS1 Science

Kindergarten Science: Identify materials: wood, plastic, metal, and fabric

Everyday Materials and Their Properties Unit

At Kindergarten / Level 1 (Age 5), hands-on tactile inquiry is essential for building foundational concept mastery. Teachers should employ a 'Sensory Feely Box' or 'Mystery Bag' strategy where learners first feel an unseen object to describe its texture (rough, smooth, cold, soft) before looking at it to observe visual cues (grain, shine, weave, color). Explicitly model sentence frames such as 'The object is a [spoon], but the material is [metal]' to dismantle the pervasive object-versus-material cognitive trap. Emphasize multi-attribute checking so students realize color alone does not define a material.

Observing Color and Texture to Identify Materials

The Four Big Materials

Wood and Metal

Plastic and Fabric