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 right now. Why is your desk made of hard, sturdy stuff instead of floppy paper towels?

Every object you touch is made of a specific substance called a **material**.

Four of the most common materials around us are **wood**, **paper**, **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>Discovering Materials</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 16px;
    user-select: none;
    -webkit-user-select: none;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 480px;
  }

  .material-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(30, 41, 69, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    text-align: center;
    position: relative;
  }

  .material-card:active {
    transform: scale(0.98);
  }

  .material-card.active {
    box-shadow: 0 4px 16px rgba(34, 183, 255, 0.22);
  }

  /* Card Themes */
  .card-wood.active { border-color: #8d6e63; background: #faf6f4; }
  .card-paper.active { border-color: #f59e0b; background: #fffdf5; }
  .card-plastic.active { border-color: #22b7ff; background: #f0f9ff; }
  .card-fabric.active { border-color: #a855f7; background: #faf5ff; }

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

  .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
  }

  .card-wood .title { color: #5d4037; }
  .card-paper .title { color: #b45309; }
  .card-plastic .title { color: #0284c7; }
  .card-fabric .title { color: #7e22ce; }

  .examples {
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.03);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 18px;
  }

  .cue {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: 12px;
  }

  .card-wood .cue { background: #efebe9; color: #6d4c41; }
  .card-paper .cue { background: #fef3c7; color: #92400e; }
  .card-plastic .cue { background: #e0f2fe; color: #0369a1; }
  .card-fabric .cue { background: #f3e8ff; color: #6b21a8; }

  /* Nav Controls */
  .controls {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    align-items: center;
  }

  .dot-btn {
    width: 28px;
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, width 0.2s ease;
  }

  .dot-btn.active {
    background: #22b7ff;
    width: 36px;
  }

  @media (max-width: 380px) {
    .grid { gap: 8px; }
    .material-card { padding: 10px 6px; }
    .icon-main { font-size: 32px; }
    .title { font-size: 14px; }
    .examples { font-size: 16px; padding: 4px 8px; }
    .cue { font-size: 10px; }
  }
</style>
</head>
<body>

<div class="grid">
  
  <div class="material-card card-wood active" onclick="selectCard(0)">
    <div class="icon-main">🪵</div>
    <div class="title">Wood</div>
    <div class="examples">
      <span>🪑</span><span>🚪</span><span>✏️</span>
    </div>
    <div class="cue">Hard</div>
  </div>

  
  <div class="material-card card-paper" onclick="selectCard(1)">
    <div class="icon-main">📄</div>
    <div class="title">Paper</div>
    <div class="examples">
      <span>📖</span><span>📦</span><span>✉️</span>
    </div>
    <div class="cue">Foldable</div>
  </div>

  
  <div class="material-card card-plastic" onclick="selectCard(2)">
    <div class="icon-main">🧴</div>
    <div class="title">Plastic</div>
    <div class="examples">
      <span>🪣</span><span>🧱</span><span>🥤</span>
    </div>
    <div class="cue">Smooth</div>
  </div>

  
  <div class="material-card card-fabric" onclick="selectCard(3)">
    <div class="icon-main">🧶</div>
    <div class="title">Fabric</div>
    <div class="examples">
      <span>👕</span><span>🧦</span><span>🧣</span>
    </div>
    <div class="cue">Soft</div>
  </div>
</div>

<div class="controls">
  <button class="dot-btn active" onclick="selectCard(0)" aria-label="Wood"></button>
  <button class="dot-btn" onclick="selectCard(1)" aria-label="Paper"></button>
  <button class="dot-btn" onclick="selectCard(2)" aria-label="Plastic"></button>
  <button class="dot-btn" onclick="selectCard(3)" aria-label="Fabric"></button>
</div>

<script>
  const cards = document.querySelectorAll('.material-card');
  const dots = document.querySelectorAll('.dot-btn');
  let currentIndex = 0;
  let autoTimer = null;

  function selectCard(index, manual = true) {
    cards.forEach((c, i) => {
      c.classList.toggle('active', i === index);
      dots[i].classList.toggle('active', i === index);
    });
    currentIndex = index;
    if (manual) {
      clearInterval(autoTimer);
      startCycle();
    }
  }

  function startCycle() {
    autoTimer = setInterval(() => {
      selectCard((currentIndex + 1) % cards.length, false);
    }, 3200);
  }

  startCycle();
</script>

</body>
</html>

How can you tell these four materials apart when you are touching them?

**Wood** comes from trees and feels hard, stiff, and strong. We use it to build things that need to stay solid, like tables and doors.

**Paper** also comes from trees! Wood gets broken down into tiny plant fibers and pressed into thin, flat sheets you can fold and draw on.

What about your colorful toys and the soft clothes you wear to school?

**Plastic** is a human-made material that can be molded into almost any shape, from smooth toy bricks to waterproof water bottles.

**Fabric** is made from soft threads woven together. It bends easily, making it perfect for your shirts, curtains, and socks.

<!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>Material Properties Explorer</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  body {
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    min-height: 100%;
    user-select: none;
    -webkit-user-select: none;
  }
  .tabs {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    margin-bottom: 12px;
  }
  .tab-btn {
    flex: 1;
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    padding: 8px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    transition: all 0.2s ease;
  }
  .tab-btn .emoji { font-size: 20px; line-height: 1; }
  .tab-btn.active {
    border-color: #22b7ff;
    color: #1e2945;
    background: #f0f9ff;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.15);
  }

  .stage-box {
    width: 100%;
    max-width: 480px;
    height: 220px;
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .test-arena {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sample-container {
    position: relative;
    width: 160px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
  }

  .material-sample {
    width: 130px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.4s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);
    position: relative;
  }

  /* Material Types */
  .mat-fabric {
    background: repeating-linear-gradient(45deg, #f472b6, #f472b6 6px, #ec4899 6px, #ec4899 12px);
    color: white;
    border-radius: 12px;
  }
  .mat-wood {
    background: linear-gradient(90deg, #d97706, #b45309, #92400e);
    color: #fef3c7;
    border-radius: 4px;
  }
  .mat-glass {
    background: rgba(186, 230, 253, 0.45);
    border: 2px solid #38bdf8;
    color: #0369a1;
    backdrop-filter: blur(2px);
  }
  .mat-metal {
    background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 50%, #cbd5e1 100%);
    border: 1px solid #64748b;
    color: #1e293b;
  }

  /* Test FX Layers */
  .fx-light {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 24px;
    background: linear-gradient(90deg, #fde047 0%, rgba(253, 224, 71, 0.1) 100%);
    border-radius: 12px;
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
  }

  .fx-drop {
    position: absolute;
    top: 15px;
    font-size: 22px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Property Tag */
  .property-banner {
    position: absolute;
    bottom: 12px;
    background: #f1f5f9;
    color: #1e2945;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .property-banner span.icon { font-size: 15px; }

  /* Test Controls */
  .controls-row {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    margin-top: 12px;
  }
  .test-btn {
    flex: 1;
    padding: 10px 6px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
  }
  .test-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.25);
  }
  .test-btn:active { transform: scale(0.97); }
</style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" onclick="setMaterial(0)">
      <span class="emoji">🧶</span>
      <span>Fabric</span>
    </button>
    <button class="tab-btn" onclick="setMaterial(1)">
      <span class="emoji">🪵</span>
      <span>Wood</span>
    </button>
    <button class="tab-btn" onclick="setMaterial(2)">
      <span class="emoji">🪟</span>
      <span>Glass</span>
    </button>
    <button class="tab-btn" onclick="setMaterial(3)">
      <span class="emoji">🥄</span>
      <span>Metal</span>
    </button>
  </div>

  
  <div class="stage-box">
    <div class="test-arena">
      <div class="fx-light" id="lightRay"></div>
      <div class="fx-drop" id="waterDrop">💧</div>
      
      <div class="sample-container" id="sampleBox">
        <div class="material-sample mat-fabric" id="sample">
          <span id="sampleName">Fabric</span>
        </div>
      </div>
    </div>

    
    <div class="property-banner">
      <span class="icon" id="propIcon">✦</span>
      <span id="propText">Flexible & Soft</span>
    </div>
  </div>

  
  <div class="controls-row">
    <button class="test-btn active" id="btnBend" onclick="runTest('bend')">
      <span>〰️</span>
      <span>Bend</span>
    </button>
    <button class="test-btn" id="btnWater" onclick="runTest('water')">
      <span>💧</span>
      <span>Water</span>
    </button>
    <button class="test-btn" id="btnLight" onclick="runTest('light')">
      <span>💡</span>
      <span>Light</span>
    </button>
  </div>

<script>
  const materials = [
    {
      name: 'Fabric',
      cls: 'mat-fabric',
      bend: { text: 'Flexible & Bends', icon: '〰️', transform: 'rotate(-18deg) scaleY(0.7)' },
      water: { text: 'Absorbent (Soaks in)', icon: '💧', transform: 'scale(1)' },
      light: { text: 'Blocks Light (Opaque)', icon: '🌑', transform: 'scale(1)' }
    },
    {
      name: 'Wood',
      cls: 'mat-wood',
      bend: { text: 'Rigid & Stiff', icon: '🪵', transform: 'rotate(0deg)' },
      water: { text: 'Water Resistant', icon: '🛡️', transform: 'scale(1)' },
      light: { text: 'Blocks Light (Opaque)', icon: '🌑', transform: 'scale(1)' }
    },
    {
      name: 'Glass',
      cls: 'mat-glass',
      bend: { text: 'Rigid & Fragile', icon: '⚠️', transform: 'rotate(0deg)' },
      water: { text: 'Waterproof', icon: '💧', transform: 'scale(1)' },
      light: { text: 'See-Through (Transparent)', icon: '✨', transform: 'scale(1)' }
    },
    {
      name: 'Metal',
      cls: 'mat-metal',
      bend: { text: 'Rigid & Strong', icon: '💪', transform: 'rotate(0deg)' },
      water: { text: 'Waterproof', icon: '💧', transform: 'scale(1)' },
      light: { text: 'Shiny & Reflective', icon: '🌟', transform: 'scale(1)' }
    }
  ];

  let currentMatIdx = 0;
  let currentTest = 'bend';

  function setMaterial(idx) {
    currentMatIdx = idx;
    const tabs = document.querySelectorAll('.tab-btn');
    tabs.forEach((t, i) => t.classList.toggle('active', i === idx));
    
    const mat = materials[idx];
    const sample = document.getElementById('sample');
    sample.className = 'material-sample ' + mat.cls;
    document.getElementById('sampleName').textContent = mat.name;
    
    renderState();
  }

  function runTest(testType) {
    currentTest = testType;
    document.getElementById('btnBend').classList.toggle('active', testType === 'bend');
    document.getElementById('btnWater').classList.toggle('active', testType === 'water');
    document.getElementById('btnLight').classList.toggle('active', testType === 'light');
    
    renderState();
  }

  function renderState() {
    const mat = materials[currentMatIdx];
    const data = mat[currentTest];
    const sampleBox = document.getElementById('sampleBox');
    const lightRay = document.getElementById('lightRay');
    const waterDrop = document.getElementById('waterDrop');
    const sample = document.getElementById('sample');

    // Reset visual effects
    lightRay.style.opacity = '0';
    lightRay.style.width = '0px';
    waterDrop.style.opacity = '0';
    waterDrop.style.transform = 'translateY(-10px)';
    sample.style.opacity = '1';

    // Apply specific test visuals
    if (currentTest === 'bend') {
      sampleBox.style.transform = data.transform;
    } else {
      sampleBox.style.transform = 'none';
    }

    if (currentTest === 'light') {
      lightRay.style.opacity = '1';
      if (currentMatIdx === 2) { // Glass
        lightRay.style.width = '360px';
      } else if (currentMatIdx === 3) { // Metal reflect
        lightRay.style.width = '140px';
      } else {
        lightRay.style.width = '140px';
      }
    }

    if (currentTest === 'water') {
      waterDrop.style.opacity = '1';
      waterDrop.style.transform = 'translateY(28px)';
      if (currentMatIdx === 0) { // Fabric absorbs
        setTimeout(() => {
          if (currentTest === 'water' && currentMatIdx === 0) {
            waterDrop.style.opacity = '0.3';
          }
        }, 300);
      }
    }

    // Update property banner
    document.getElementById('propIcon').textContent = data.icon;
    document.getElementById('propText').textContent = data.text;
  }

  // Initial render
  renderState();
</script>
</body>
</html>

Under **Curriculum for Excellence standard TCH 0-10a**, learners explore the **tactile** and **physical properties** of everyday materials.

Understanding how materials feel, bend, and hold their shape helps you choose the right items when designing and building **models, pictures, or crafts**.

## Choosing Materials to Build and Create

Under Curriculum for Excellence standard TCH 0-10a, learners explore the **tactile** and **physical properties** of everyday materials.

Testing how materials feel and bend helps you pick suitable items when designing and building **models**, **pictures**, or crafts.

Pick up an object near you right now. Can you touch it and name the **material** it is made of?

technology

Discovering Materials Around Us. Learners explore everyday materials like wood, plastic, paper, and fabric in their surroundings.

Everyday Materials - Early Level / KS1 Science & Technologies

Exploring Everyday Materials: Early Years and Primary Collection

Technologies: Craft, Design, Engineering and Graphics (TCH 0-10a Progression & Guidance)

At Early Level (P1), mastery is achieved through tactile, active learning and play-based inquiry. Practitioners should employ 'Feely Bags' and classroom scavenger hunts where children use sensory descriptors before naming materials. Scaffold linguistic structure consistently using the sentence frame: 'This [object] is made from [material] because it is [property].' Ensure continuous integration with expressive arts and junk modelling (TCH 0-10a), encouraging learners to articulate intentional material choices during construction play.

Discovering Materials Around Us

The Four Everyday Materials

Wood and Paper

Plastic and Fabric