<!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: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    /* Filter Bar */
    .filter-bar {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .filter-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }

    .filter-btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }

    /* Cards Layout */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    @media (max-width: 480px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
    }

    .plant-card {
      border-radius: 16px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      border: 2px solid transparent;
      transition: all 0.2s ease;
    }

    .card-rose {
      background: #fff1f2;
      border-color: #fecdd3;
    }

    .card-oak {
      background: #f0fdf4;
      border-color: #bbf7d0;
    }

    /* Plant Header */
    .plant-header {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .plant-icon {
      font-size: 32px;
      line-height: 1;
    }

    .plant-name {
      font-size: 17px;
      font-weight: 700;
    }

    .card-rose .plant-name { color: #9f1239; }
    .card-oak .plant-name { color: #166534; }

    /* Observation Badges */
    .obs-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .obs-badge {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 10px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
      transition: opacity 0.25s ease, transform 0.2s ease;
    }

    .obs-badge.dimmed {
      opacity: 0.3;
    }

    .obs-badge.highlighted {
      opacity: 1;
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px #22b7ff;
    }

    .sense-icon {
      font-size: 20px;
      line-height: 1;
      width: 24px;
      text-align: center;
      flex-shrink: 0;
    }

    .obs-text {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
      color: #334155;
    }

    .warning-pill {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      color: #b91c1c;
      background: #fee2e2;
      padding: 1px 6px;
      border-radius: 6px;
      margin-left: 4px;
      vertical-align: middle;
    }
  </style>
</head>
<body>

  
  <div class="filter-bar">
    <button class="filter-btn active" data-sense="all">All Senses</button>
    <button class="filter-btn" data-sense="eye">👁️ See</button>
    <button class="filter-btn" data-sense="hand">✋ Touch</button>
    <button class="filter-btn" data-sense="nose">👃 Smell</button>
  </div>

  
  <div class="comparison-grid">

    
    <div class="plant-card card-rose">
      <div class="plant-header">
        <span class="plant-icon">🌸</span>
        <span class="plant-name">Rose Bush</span>
      </div>

      <div class="obs-list">
        <div class="obs-badge" data-sense="eye">
          <span class="sense-icon">👁️</span>
          <div class="obs-text">Pink petals & green leaves</div>
        </div>

        <div class="obs-badge" data-sense="nose">
          <span class="sense-icon">👃</span>
          <div class="obs-text">Sweet perfume smell</div>
        </div>

        <div class="obs-badge" data-sense="hand">
          <span class="sense-icon">✋</span>
          <div class="obs-text">
            Soft petals <span class="warning-pill">⚠️ Sharp thorns</span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="plant-card card-oak">
      <div class="plant-header">
        <span class="plant-icon">🌳</span>
        <span class="plant-name">Oak Tree</span>
      </div>

      <div class="obs-list">
        <div class="obs-badge" data-sense="eye">
          <span class="sense-icon">👁️</span>
          <div class="obs-text">Tall trunk & leafy canopy</div>
        </div>

        <div class="obs-badge" data-sense="hand">
          <span class="sense-icon">✋</span>
          <div class="obs-text">Rough, bumpy wood bark</div>
        </div>

        <div class="obs-badge" data-sense="nose">
          <span class="sense-icon">👃</span>
          <div class="obs-text">Fresh earthy forest smell</div>
        </div>
      </div>
    </div>

  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const filterButtons = document.querySelectorAll('.filter-btn');
    const badges = document.querySelectorAll('.obs-badge');

    filterButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        filterButtons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        const selectedSense = btn.getAttribute('data-sense');

        badges.forEach(badge => {
          const badgeSense = badge.getAttribute('data-sense');
          if (selectedSense === 'all') {
            badge.classList.remove('dimmed', 'highlighted');
          } else if (badgeSense === selectedSense) {
            badge.classList.remove('dimmed');
            badge.classList.add('highlighted');
          } else {
            badge.classList.add('dimmed');
            badge.classList.remove('highlighted');
          }
        });
      });
    });
  </script>
</body>
</html>

Using Our Five Senses to Observe Living Things

<!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;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

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

    .title {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .sense-pills {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .pill-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .pill-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
    }

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

    .animal-card {
      border-radius: 14px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      border: 1.5px solid transparent;
      transition: box-shadow 0.25s ease, opacity 0.25s ease;
      cursor: pointer;
      position: relative;
    }

    .card-bird {
      background: #dbeafe;
      border-color: #bfdbfe;
    }

    .card-cricket {
      background: #dcfce7;
      border-color: #bbf7d0;
    }

    .card-dog {
      background: #fef3c7;
      border-color: #fde68a;
    }

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

    .animal-tag {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
    }

    .animal-icon {
      font-size: 24px;
      line-height: 1;
    }

    .audio-btn {
      border: none;
      background: rgba(255, 255, 255, 0.85);
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: background 0.2s;
    }

    .audio-btn:active {
      background: #ffffff;
      box-shadow: 0 0 0 2px #0284c7;
    }

    .clues-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .clue-item {
      background: rgba(255, 255, 255, 0.85);
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 12px;
      line-height: 1.35;
      display: flex;
      align-items: flex-start;
      gap: 6px;
      transition: opacity 0.2s ease, background 0.2s ease;
      border-left: 3px solid transparent;
    }

    .clue-item.dimmed {
      opacity: 0.3;
    }

    .clue-item.highlight {
      background: #ffffff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }

    .clue-sound {
      border-left-color: #3b82f6;
    }

    .clue-sight {
      border-left-color: #10b981;
    }

    .clue-touch {
      border-left-color: #f59e0b;
    }

    .clue-icon {
      font-size: 14px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .clue-text {
      color: #1e293b;
      font-weight: 500;
    }

    .clue-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 800;
      color: #64748b;
      display: block;
      margin-bottom: 1px;
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">🐾 Animal Clues</div>
    <div class="sense-pills">
      <button class="pill-btn active" data-filter="all">All Senses</button>
      <button class="pill-btn" data-filter="sound">👂 Sound</button>
      <button class="pill-btn" data-filter="sight">👁️ Sight</button>
      <button class="pill-btn" data-filter="touch">✋ Touch</button>
    </div>
  </div>

  <div class="cards-grid">
    
    <div class="animal-card card-bird" onclick="playAnimal('bird')">
      <div class="card-header">
        <div class="animal-tag">
          <span class="animal-icon">🐦</span>
          <span>Bird</span>
        </div>
        <button class="audio-btn" title="Hear sound">🔊</button>
      </div>
      <div class="clues-list">
        <div class="clue-item clue-sound" data-sense="sound">
          <span class="clue-icon">👂</span>
          <div>
            <span class="clue-label">Sound</span>
            <span class="clue-text">"Tweet! Chirp!"</span>
          </div>
        </div>
        <div class="clue-item clue-sight" data-sense="sight">
          <span class="clue-icon">👁️</span>
          <div>
            <span class="clue-label">Sight</span>
            <span class="clue-text">Feathers, 2 wings, hops in tree</span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="animal-card card-cricket" onclick="playAnimal('cricket')">
      <div class="card-header">
        <div class="animal-tag">
          <span class="animal-icon">🦗</span>
          <span>Cricket</span>
        </div>
        <button class="audio-btn" title="Hear sound">🔊</button>
      </div>
      <div class="clues-list">
        <div class="clue-item clue-sound" data-sense="sound">
          <span class="clue-icon">👂</span>
          <div>
            <span class="clue-label">Sound</span>
            <span class="clue-text">"Chirp-chirp" in grass</span>
          </div>
        </div>
        <div class="clue-item clue-sight" data-sense="sight">
          <span class="clue-icon">👁️</span>
          <div>
            <span class="clue-label">Sight</span>
            <span class="clue-text">6 legs, green body</span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="animal-card card-dog" onclick="playAnimal('dog')">
      <div class="card-header">
        <div class="animal-tag">
          <span class="animal-icon">🐶</span>
          <span>Family Dog</span>
        </div>
        <button class="audio-btn" title="Hear sound">🔊</button>
      </div>
      <div class="clues-list">
        <div class="clue-item clue-sound" data-sense="sound">
          <span class="clue-icon">👂</span>
          <div>
            <span class="clue-label">Sound</span>
            <span class="clue-text">"Woof!" &amp; panting</span>
          </div>
        </div>
        <div class="clue-item clue-touch" data-sense="touch">
          <span class="clue-icon">✋</span>
          <div>
            <span class="clue-label">Touch</span>
            <span class="clue-text">Soft, warm fur (ask first!)</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Sense filter interactivity
    const pillButtons = document.querySelectorAll('.pill-btn');
    const clueItems = document.querySelectorAll('.clue-item');

    pillButtons.forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        pillButtons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        const filter = btn.dataset.filter;
        clueItems.forEach(item => {
          if (filter === 'all' || item.dataset.sense === filter) {
            item.classList.remove('dimmed');
            item.classList.add('highlight');
          } else {
            item.classList.add('dimmed');
            item.classList.remove('highlight');
          }
        });
      });
    });

    // Synthesized animal sound cues
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    function playAnimal(animal) {
      try {
        const ctx = getAudioContext();
        const now = ctx.currentTime;

        if (animal === 'bird') {
          // Double chirp tweet
          for (let i = 0; i < 2; i++) {
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            const startT = now + i * 0.14;
            osc.frequency.setValueAtTime(1900 + i * 300, startT);
            osc.frequency.exponentialRampToValueAtTime(3200 + i * 200, startT + 0.08);
            gain.gain.setValueAtTime(0.18, startT);
            gain.gain.exponentialRampToValueAtTime(0.001, startT + 0.09);
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start(startT);
            osc.stop(startT + 0.1);
          }
        } else if (animal === 'cricket') {
          // Rapid cricket chirp pulses
          for (let i = 0; i < 4; i++) {
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            const startT = now + i * 0.06;
            osc.type = 'triangle';
            osc.frequency.setValueAtTime(4200, startT);
            gain.gain.setValueAtTime(0.12, startT);
            gain.gain.exponentialRampToValueAtTime(0.001, startT + 0.04);
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start(startT);
            osc.stop(startT + 0.05);
          }
        } else if (animal === 'dog') {
          // Playful low woof
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'sawtooth';
          osc.frequency.setValueAtTime(260, now);
          osc.frequency.exponentialRampToValueAtTime(110, now + 0.16);
          gain.gain.setValueAtTime(0.2, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.18);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start(now);
          osc.stop(now + 0.19);
        }
      } catch (e) {
        // Safe fallback if audio is not supported
      }
    }
  </script>
</body>
</html>

<!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;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

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

    .sense-card {
      background: #ffffff;
      border-radius: 16px;
      border: 2px solid #e2e8f0;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .sense-card:hover {
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    }

    .sense-card.active {
      box-shadow: 0 0 0 3px var(--accent-color), 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 20px;
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.2px;
      margin-bottom: 10px;
    }

    .visual-pair {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 4px 0 6px 0;
    }

    .icon-bubble {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #f8fafc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      border: 1px solid #edf2f7;
    }

    .arrow {
      font-size: 16px;
      color: #94a3b8;
      font-weight: bold;
    }

    .target-bubble {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--bg-tint);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      border: 2px solid var(--accent-color);
    }

    .sub-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-top: 4px;
    }

    /* Color variations */
    .card-see {
      --accent-color: #3b82f6;
      --bg-tint: #eff6ff;
    }
    .card-see .badge { background: #3b82f6; }

    .card-hear {
      --accent-color: #22c55e;
      --bg-tint: #f0fdf4;
    }
    .card-hear .badge { background: #22c55e; }

    .card-touch {
      --accent-color: #f59e0b;
      --bg-tint: #fffbeb;
    }
    .card-touch .badge { background: #f59e0b; }

    .card-smell {
      --accent-color: #ec4899;
      --bg-tint: #fdf2f8;
    }
    .card-smell .badge { background: #ec4899; }

    @media (max-width: 380px) {
      .grid { gap: 8px; }
      .sense-card { padding: 10px 6px; }
      .badge { font-size: 13px; padding: 4px 10px; }
      .icon-bubble { width: 40px; height: 40px; font-size: 22px; }
      .target-bubble { width: 46px; height: 46px; font-size: 26px; }
      .sub-label { font-size: 12px; }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="sense-card card-see active" onclick="selectCard(this, 523)">
      <div class="badge">👀 Eyes: See</div>
      <div class="visual-pair">
        <div class="icon-bubble">👁️</div>
        <span class="arrow">➜</span>
        <div class="target-bubble">🌼</div>
      </div>
      <div class="sub-label">Yellow Flower</div>
    </div>

    
    <div class="sense-card card-hear" onclick="selectCard(this, 659)">
      <div class="badge">👂 Ears: Hear</div>
      <div class="visual-pair">
        <div class="icon-bubble">👂</div>
        <span class="arrow">➜</span>
        <div class="target-bubble">🐦</div>
      </div>
      <div class="sub-label">Singing Bluebird</div>
    </div>

    
    <div class="sense-card card-touch" onclick="selectCard(this, 784)">
      <div class="badge">✋ Hands: Touch</div>
      <div class="visual-pair">
        <div class="icon-bubble">✋</div>
        <span class="arrow">➜</span>
        <div class="target-bubble">🌿</div>
      </div>
      <div class="sub-label">Fuzzy Green Moss</div>
    </div>

    
    <div class="sense-card card-smell" onclick="selectCard(this, 880)">
      <div class="badge">👃 Nose: Smell</div>
      <div class="visual-pair">
        <div class="icon-bubble">👃</div>
        <span class="arrow">➜</span>
        <div class="target-bubble">🌲</div>
      </div>
      <div class="sub-label">Woody Pinecone</div>
    </div>
  </div>

  <script>
    let audioCtx = null;

    function playTone(freq) {
      try {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.15, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.3);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.3);
      } catch (e) {}
    }

    function selectCard(el, freq) {
      document.querySelectorAll('.sense-card').forEach(c => c.classList.remove('active'));
      el.classList.add('active');
      playTone(freq);
    }
  </script>
</body>
</html>

OGM.1.STEM.4

Aligned learning resources

Related diagrams