<!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;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .title-bar {
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

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

    .badge-card {
      position: relative;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      overflow: hidden;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .badge-card:hover {
      border-color: #94a3b8;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

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

    .icon {
      font-size: 36px;
      line-height: 1;
      z-index: 2;
      pointer-events: none;
    }

    .word {
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 8px;
      z-index: 2;
      pointer-events: none;
    }

    /* Word badge styles */
    .crunch .word { background: #ffedd5; color: #c2410c; }
    .buzz   .word { background: #fef9c3; color: #a16207; }
    .drip   .word { background: #e0f2fe; color: #0284c7; }
    .roar   .word { background: #fee2e2; color: #b91c1c; }

    /* Ripple waves */
    .waves {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 1;
    }

    .wave {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid transparent;
      opacity: 0;
    }

    .active .wave:nth-child(1) {
      animation: ripple 0.8s ease-out;
    }
    .active .wave:nth-child(2) {
      animation: ripple 0.8s 0.2s ease-out;
    }

    .crunch.active .wave { border-color: #f97316; }
    .buzz.active   .wave { border-color: #eab308; }
    .drip.active   .wave { border-color: #0284c7; }
    .roar.active   .wave { border-color: #ef4444; }

    @keyframes ripple {
      0% { width: 30px; height: 30px; opacity: 0.8; }
      100% { width: 140px; height: 140px; opacity: 0; }
    }

    .prompt {
      margin-top: 12px;
      font-size: 13px;
      font-weight: 500;
      color: #64748b;
    }
  </style>
</head>
<body>

  <div class="title-bar">
    <span>Sound words wake up your ears!</span>
    <span>👂</span>
  </div>

  <div class="grid">
    <div class="badge-card crunch" onclick="playEffect(0)">
      <div class="waves"><div class="wave"></div><div class="wave"></div></div>
      <div class="icon">🍂</div>
      <div class="word">CRUNCH!</div>
    </div>

    <div class="badge-card buzz" onclick="playEffect(1)">
      <div class="waves"><div class="wave"></div><div class="wave"></div></div>
      <div class="icon">🐝</div>
      <div class="word">BUZZZZ!</div>
    </div>

    <div class="badge-card drip" onclick="playEffect(2)">
      <div class="waves"><div class="wave"></div><div class="wave"></div></div>
      <div class="icon">💧</div>
      <div class="word">DRIP-DROP!</div>
    </div>

    <div class="badge-card roar" onclick="playEffect(3)">
      <div class="waves"><div class="wave"></div><div class="wave"></div></div>
      <div class="icon">🦁</div>
      <div class="word">ROAR!</div>
    </div>
  </div>

  <div class="prompt">Tap any sound word 🔊</div>

  <script>
    let audioCtx = null;

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

    function playSound(type) {
      try {
        const ctx = getAudioContext();
        const now = ctx.currentTime;

        if (type === 0) {
          // Crunch: quick crackles
          for (let i = 0; i < 4; i++) {
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.type = 'triangle';
            osc.frequency.setValueAtTime(140 + Math.random() * 200, now + i * 0.06);
            gain.gain.setValueAtTime(0.2, now + i * 0.06);
            gain.gain.exponentialRampToValueAtTime(0.01, now + i * 0.06 + 0.04);
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start(now + i * 0.06);
            osc.stop(now + i * 0.06 + 0.05);
          }
        } else if (type === 1) {
          // Buzz: saw wave buzz
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'sawtooth';
          osc.frequency.setValueAtTime(160, now);
          osc.frequency.linearRampToValueAtTime(180, now + 0.35);
          gain.gain.setValueAtTime(0.18, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.4);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start(now);
          osc.stop(now + 0.4);
        } else if (type === 2) {
          // Drip-drop: two high sine drops
          [880, 1100].forEach((freq, idx) => {
            const t = now + idx * 0.14;
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.type = 'sine';
            osc.frequency.setValueAtTime(freq, t);
            osc.frequency.exponentialRampToValueAtTime(freq * 0.6, t + 0.1);
            gain.gain.setValueAtTime(0.25, t);
            gain.gain.exponentialRampToValueAtTime(0.001, t + 0.1);
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start(t);
            osc.stop(t + 0.11);
          });
        } else if (type === 3) {
          // Roar: low frequency growl
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'sawtooth';
          osc.frequency.setValueAtTime(90, now);
          osc.frequency.linearRampToValueAtTime(65, now + 0.45);
          gain.gain.setValueAtTime(0.25, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.5);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start(now);
          osc.stop(now + 0.5);
        }
      } catch (e) {
        // Fallback gracefully if audio is blocked
      }
    }

    const cards = document.querySelectorAll('.badge-card');

    function playEffect(index) {
      cards.forEach((c, i) => {
        if (i === index) {
          c.classList.remove('active');
          void c.offsetWidth; // retrigger CSS animation
          c.classList.add('active');
        } else {
          c.classList.remove('active');
        }
      });
      playSound(index);
    }
  </script>
</body>
</html>

Spotting Sensory Words That Describe Sight and Sound

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

    /* Top Sentence Display */
    .sentence-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      text-align: center;
      font-size: 15px;
      line-height: 1.6;
      font-weight: 500;
    }

    .word-btn {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 6px;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.2s, box-shadow 0.2s;
    }

    .word-sight {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }
    .word-sound {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .word-btn.active {
      box-shadow: 0 0 0 2px #0f172a;
    }

    /* Two-Column Sorting Board */
    .board-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .column {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .column-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      padding-bottom: 6px;
      border-bottom: 1px solid #f1f5f9;
    }

    .col-sight .column-header { color: #0284c7; }
    .col-sound .column-header { color: #d97706; }

    .sub-label {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
    }

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

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 9px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.2s, box-shadow 0.2s;
    }

    .badge-sight {
      background: #f0f9ff;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }

    .badge-sound {
      background: #fffbeb;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .badge.active {
      box-shadow: 0 0 0 2px #0f172a;
    }

    /* Thought Bubble Visual Scene */
    .thought-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
    }

    .child-avatar {
      font-size: 28px;
      line-height: 1;
      flex-shrink: 0;
    }

    .thought-bubble {
      flex: 1;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      min-height: 52px;
    }

    .clue-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 20px;
      opacity: 0.35;
      transition: opacity 0.2s, transform 0.2s;
      cursor: pointer;
    }

    .clue-icon.active {
      opacity: 1;
    }

    .clue-caption {
      font-size: 10px;
      font-weight: 600;
      color: #475569;
      margin-top: 2px;
    }
  </style>
</head>
<body>

  
  <div class="sentence-box">
    The <span class="word-btn word-sight active" data-clue="sparkling">✨ sparkling</span>
    <span class="word-btn word-sight active" data-clue="yellow">🟡 yellow</span>
    bus
    <span class="word-btn word-sound active" data-clue="screeched">🔊 screeched</span>
    to a stop on the
    <span class="word-btn word-sight active" data-clue="wet">💧 wet</span>
    street.
  </div>

  
  <div class="board-grid">
    
    <div class="column col-sight">
      <div class="column-header">
        <span>👁️ Sight Words</span>
        <span class="sub-label">(What we see)</span>
      </div>
      <div class="badges">
        <div class="badge badge-sight active" data-clue="sparkling">✨ sparkling</div>
        <div class="badge badge-sight active" data-clue="yellow">🟡 yellow</div>
        <div class="badge badge-sight active" data-clue="wet">💧 wet</div>
      </div>
    </div>

    
    <div class="column col-sound">
      <div class="column-header">
        <span>👂 Sound Words</span>
        <span class="sub-label">(What we hear)</span>
      </div>
      <div class="badges">
        <div class="badge badge-sound active" data-clue="screeched">🔊 screeched</div>
      </div>
    </div>
  </div>

  
  <div class="thought-card">
    <div class="child-avatar" title="Visualizing in mind">🧒💭</div>
    <div class="thought-bubble">
      <div class="clue-icon active" data-clue="sparkling">
        <span>✨</span>
        <span class="clue-caption">sparkle</span>
      </div>
      <div class="clue-icon active" data-clue="yellow">
        <span>🚌</span>
        <span class="clue-caption">yellow</span>
      </div>
      <div class="clue-icon active" data-clue="screeched">
        <span>💨</span>
        <span class="clue-caption">screech!</span>
      </div>
      <div class="clue-icon active" data-clue="wet">
        <span>💧</span>
        <span class="clue-caption">wet road</span>
      </div>
    </div>
  </div>

  <script>
    // Audio synthesizer for interactive feedback
    function playClueSound(type) {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        
        if (type === 'screeched') {
          // Screech slide sound
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'sawtooth';
          osc.frequency.setValueAtTime(800, ctx.currentTime);
          osc.frequency.exponentialRampToValueAtTime(250, ctx.currentTime + 0.35);
          gain.gain.setValueAtTime(0.12, ctx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.35);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start();
          osc.stop(ctx.currentTime + 0.35);
        } else {
          // Gentle chime for sight words
          const freqs = { sparkling: 880, yellow: 587.33, wet: 659.25 };
          const f = freqs[type] || 523.25;
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'sine';
          osc.frequency.setValueAtTime(f, ctx.currentTime);
          gain.gain.setValueAtTime(0.15, ctx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start();
          osc.stop(ctx.currentTime + 0.3);
        }
      } catch (e) {}
    }

    let activeFilter = null;

    function selectClue(clue) {
      if (activeFilter === clue) {
        activeFilter = null; // Toggle off to show all
      } else {
        activeFilter = clue;
        playClueSound(clue);
      }

      const allElements = document.querySelectorAll('[data-clue]');
      allElements.forEach(el => {
        if (!activeFilter || el.dataset.clue === activeFilter) {
          el.classList.add('active');
        } else {
          el.classList.remove('active');
        }
      });
    }

    document.querySelectorAll('[data-clue]').forEach(el => {
      el.addEventListener('click', () => {
        selectClue(el.dataset.clue);
      });
    });
  </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">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }

    /* Comparison Cards Container */
    .compare-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }

    .compare-card {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 2px solid transparent;
      transition: all 0.3s ease;
    }

    /* Plain Card Style */
    .card-plain {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    /* Sensory Card Style */
    .card-sensory {
      background: #0f172a;
      border-color: #38bdf8;
      color: #f8fafc;
      box-shadow: 0 4px 14px rgba(56, 189, 248, 0.15);
    }

    .card-content {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      width: fit-content;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .badge-plain {
      background: #e2e8f0;
      color: #64748b;
    }

    .badge-sensory {
      background: #0369a1;
      color: #38bdf8;
    }

    .sentence {
      font-size: 15px;
      line-height: 1.4;
      font-weight: 600;
    }

    .sentence-plain {
      color: #475569;
    }

    /* Word Highlight Tags */
    .tag-glow {
      background: #fef08a;
      color: #854d0e;
      padding: 1px 5px;
      border-radius: 4px;
      font-weight: 700;
    }

    .tag-green {
      background: #4ade80;
      color: #14532d;
      padding: 1px 5px;
      border-radius: 4px;
      font-weight: 700;
    }

    .tag-wings {
      background: #38bdf8;
      color: #0c4a6e;
      padding: 1px 5px;
      border-radius: 4px;
      font-weight: 700;
    }

    /* Visual Previews */
    .preview-box {
      width: 76px;
      height: 76px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex-shrink: 0;
      overflow: hidden;
    }

    .preview-plain {
      background: #e2e8f0;
    }

    .preview-sensory {
      background: #020617;
      border: 1px solid rgba(56, 189, 248, 0.3);
    }

    /* Blurry Blob */
    .plain-blob {
      width: 32px;
      height: 24px;
      background: #94a3b8;
      border-radius: 50%;
      filter: blur(4px);
      opacity: 0.6;
    }

    /* Sensory Firefly Illustration */
    .firefly-svg {
      width: 68px;
      height: 68px;
    }

    .glow-tail {
      animation: pulseGlow 2.5s ease-in-out infinite;
      transform-origin: center;
    }

    .sparkle {
      animation: sparkleTwinkle 2s ease-in-out infinite alternate;
    }

    .sparkle-2 {
      animation-delay: 1s;
    }

    @keyframes pulseGlow {
      0%, 100% {
        filter: drop-shadow(0 0 4px #4ade80) drop-shadow(0 0 10px #fef08a);
        opacity: 0.9;
      }
      50% {
        filter: drop-shadow(0 0 10px #4ade80) drop-shadow(0 0 18px #fef08a);
        opacity: 1;
      }
    }

    @keyframes sparkleTwinkle {
      0% { opacity: 0.2; transform: scale(0.8); }
      100% { opacity: 1; transform: scale(1.1); }
    }

    /* Mode Switcher Buttons */
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 2px;
    }

    .btn-toggle {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.2s ease;
    }

    .btn-toggle.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
    }
  </style>
</head>
<body>

  <div class="compare-container">
    
    <div id="cardPlain" class="compare-card card-plain">
      <div class="card-content">
        <span class="badge badge-plain">Plain</span>
        <div class="sentence sentence-plain">I saw a bug.</div>
      </div>
      <div class="preview-box preview-plain">
        <div class="plain-blob"></div>
      </div>
    </div>

    
    <div id="cardSensory" class="compare-card card-sensory">
      <div class="card-content">
        <span class="badge badge-sensory">Sensory Words ✦</span>
        <div class="sentence sentence-sensory">
          I saw a <span class="tag-glow">glowing</span> <span class="tag-green">neon green</span> bug with <span class="tag-wings">striped</span> wings!
        </div>
      </div>
      <div class="preview-box preview-sensory">
        <svg class="firefly-svg" viewBox="0 0 100 100">
          
          <text x="12" y="24" fill="#fef08a" font-size="12" class="sparkle">✦</text>
          <text x="80" y="76" fill="#4ade80" font-size="10" class="sparkle sparkle-2">✦</text>

          
          <g fill="none" stroke="#38bdf8" stroke-width="2.5">
            
            <ellipse cx="32" cy="42" rx="16" ry="10" transform="rotate(-30 32 42)" fill="rgba(56, 189, 248, 0.25)"/>
            <line x1="22" y1="36" x2="42" y2="48" stroke="#bae6fd" stroke-width="1.5"/>
            <line x1="26" y1="32" x2="38" y2="52" stroke="#bae6fd" stroke-width="1.5"/>

            
            <ellipse cx="68" cy="42" rx="16" ry="10" transform="rotate(30 68 42)" fill="rgba(56, 189, 248, 0.25)"/>
            <line x1="78" y1="36" x2="58" y2="48" stroke="#bae6fd" stroke-width="1.5"/>
            <line x1="74" y1="32" x2="62" y2="52" stroke="#bae6fd" stroke-width="1.5"/>
          </g>

          
          <ellipse cx="50" cy="62" rx="13" ry="17" fill="#4ade80" class="glow-tail"/>
          <ellipse cx="50" cy="65" rx="8" ry="10" fill="#fef08a" opacity="0.85" class="glow-tail"/>

          
          <ellipse cx="50" cy="42" rx="11" ry="13" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
          <circle cx="50" cy="27" r="8" fill="#1e293b"/>

          
          <path d="M46 21 Q40 10 33 13" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round"/>
          <path d="M54 21 Q60 10 67 13" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round"/>

          
          <circle cx="47" cy="26" r="2" fill="#ffffff"/>
          <circle cx="53" cy="26" r="2" fill="#ffffff"/>
        </svg>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button id="btnBoth" class="btn-toggle active" onclick="setFocus('both')">All</button>
    <button id="btnPlain" class="btn-toggle" onclick="setFocus('plain')">Plain</button>
    <button id="btnSensory" class="btn-toggle" onclick="setFocus('sensory')">Sensory ✨</button>
  </div>

  <script>
    function setFocus(mode) {
      const cardPlain = document.getElementById('cardPlain');
      const cardSensory = document.getElementById('cardSensory');
      const btnBoth = document.getElementById('btnBoth');
      const btnPlain = document.getElementById('btnPlain');
      const btnSensory = document.getElementById('btnSensory');

      [btnBoth, btnPlain, btnSensory].forEach(b => b.classList.remove('active'));

      if (mode === 'plain') {
        btnPlain.classList.add('active');
        cardPlain.style.opacity = '1';
        cardPlain.style.transform = 'scale(1)';
        cardSensory.style.opacity = '0.35';
        cardSensory.style.transform = 'scale(0.98)';
      } else if (mode === 'sensory') {
        btnSensory.classList.add('active');
        cardSensory.style.opacity = '1';
        cardSensory.style.transform = 'scale(1)';
        cardPlain.style.opacity = '0.35';
        cardPlain.style.transform = 'scale(0.98)';
      } else {
        btnBoth.classList.add('active');
        cardPlain.style.opacity = '1';
        cardPlain.style.transform = 'scale(1)';
        cardSensory.style.opacity = '1';
        cardSensory.style.transform = 'scale(1)';
      }
    }
  </script>
</body>
</html>

OGE.2.RL.4

Aligned learning resources

Related diagrams