<!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="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    /* Key / Category Pills */
    .key-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }

    .key-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
      border: 1.5px solid transparent;
      transition: all 0.25s ease;
      background: #f1f5f9;
      color: #64748b;
    }

    .key-tag.active-diet, .key-tag[data-cat="diet"].active {
      background: #fff7ed;
      color: #c2410c;
      border-color: #ea580c;
      box-shadow: 0 0 10px rgba(234, 88, 12, 0.25);
    }

    .key-tag.active-habitat, .key-tag[data-cat="habitat"].active {
      background: #f0fdf4;
      color: #15803d;
      border-color: #16a34a;
      box-shadow: 0 0 10px rgba(22, 163, 74, 0.25);
    }

    .key-tag.active-threat, .key-tag[data-cat="threat"].active {
      background: #fef2f2;
      color: #b91c1c;
      border-color: #dc2626;
      box-shadow: 0 0 10px rgba(220, 38, 38, 0.25);
    }

    .key-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
    }
    .dot-orange { background: #ea580c; }
    .dot-green { background: #16a34a; }
    .dot-red { background: #dc2626; }

    /* Notebook Facts Container */
    .facts-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 440px;
    }

    /* Lined Note Strip */
    .note-strip {
      position: relative;
      background-color: #ffffff;
      background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 27px,
        #e2e8f0 28px
      );
      background-position: 0 4px;
      border: 1px solid #e2e8f0;
      border-left: 5px solid #cbd5e1;
      border-radius: 8px;
      padding: 10px 12px 10px 14px;
      cursor: pointer;
      transition: border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
      min-height: 72px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }

    .note-strip:hover {
      border-color: #94a3b8;
    }

    .fact-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }

    .fact-num {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #94a3b8;
    }

    .fact-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      opacity: 0;
      transform: translateY(-3px);
      transition: all 0.3s ease;
    }

    .fact-text-wrap {
      position: relative;
      display: inline;
      font-size: 14px;
      line-height: 1.5;
      color: #334155;
      font-weight: 500;
    }

    /* Highlighter sweep overlay */
    .highlight-sweep {
      position: absolute;
      top: 0;
      bottom: 0;
      left: -2px;
      width: 0%;
      border-radius: 3px;
      opacity: 0.38;
      z-index: 1;
      pointer-events: none;
      transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .fact-text {
      position: relative;
      z-index: 2;
    }

    /* Active Highlight States */
    .note-strip.highlight-orange {
      border-left-color: #ea580c;
      background-color: #fffaf5;
    }
    .note-strip.highlight-orange .highlight-sweep {
      width: 102%;
      background: #fed7aa;
      box-shadow: 0 0 8px #ea580c44;
    }
    .note-strip.highlight-orange .fact-badge {
      opacity: 1;
      transform: translateY(0);
      background: #ffedd5;
      color: #c2410c;
    }
    .note-strip.highlight-orange .fact-text {
      color: #1e2945;
      font-weight: 600;
    }

    .note-strip.highlight-green {
      border-left-color: #16a34a;
      background-color: #f6fef9;
    }
    .note-strip.highlight-green .highlight-sweep {
      width: 102%;
      background: #bbf7d0;
      box-shadow: 0 0 8px #16a34a44;
    }
    .note-strip.highlight-green .fact-badge {
      opacity: 1;
      transform: translateY(0);
      background: #dcfce7;
      color: #15803d;
    }
    .note-strip.highlight-green .fact-text {
      color: #1e2945;
      font-weight: 600;
    }

    .note-strip.highlight-red {
      border-left-color: #dc2626;
      background-color: #fdf6f6;
    }
    .note-strip.highlight-red .highlight-sweep {
      width: 102%;
      background: #fecaca;
      box-shadow: 0 0 8px #dc262644;
    }
    .note-strip.highlight-red .fact-badge {
      opacity: 1;
      transform: translateY(0);
      background: #fee2e2;
      color: #b91c1c;
    }
    .note-strip.highlight-red .fact-text {
      color: #1e2945;
      font-weight: 600;
    }

    /* Bottom Interactive Toolbar */
    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 440px;
      padding-top: 4px;
    }

    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }

    .btn-step:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

    .stepper-dots {
      display: flex;
      gap: 6px;
    }

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

    .dot-step.active {
      background: #2563eb;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  
  <div class="key-container">
    <div class="key-tag" data-cat="diet" id="key-diet">
      <span class="key-dot dot-orange"></span> Orange = Diet
    </div>
    <div class="key-tag" data-cat="habitat" id="key-habitat">
      <span class="key-dot dot-green"></span> Green = Habitat
    </div>
    <div class="key-tag" data-cat="threat" id="key-threat">
      <span class="key-dot dot-red"></span> Red = Threats
    </div>
  </div>

  
  <div class="facts-list">
    
    <div class="note-strip" id="card-1" data-cat="diet">
      <div class="fact-meta">
        <span class="fact-num">Fact 1</span>
        <span class="fact-badge">Diet</span>
      </div>
      <div class="fact-text-wrap">
        <span class="highlight-sweep"></span>
        <span class="fact-text">Green sea turtles graze on underwater seagrass beds.</span>
      </div>
    </div>

    
    <div class="note-strip" id="card-2" data-cat="habitat">
      <div class="fact-meta">
        <span class="fact-num">Fact 2</span>
        <span class="fact-badge">Habitat</span>
      </div>
      <div class="fact-text-wrap">
        <span class="highlight-sweep"></span>
        <span class="fact-text">Hatchlings crawl toward the open ocean under moonlight.</span>
      </div>
    </div>

    
    <div class="note-strip" id="card-3" data-cat="threat">
      <div class="fact-meta">
        <span class="fact-num">Fact 3</span>
        <span class="fact-badge">Threats</span>
      </div>
      <div class="fact-text-wrap">
        <span class="highlight-sweep"></span>
        <span class="fact-text">Plastic bags floating in water look like jellyfish to turtles.</span>
      </div>
    </div>
  </div>

  
  <div class="toolbar">
    <button class="btn-step" id="btn-toggle">▶ Auto-Sort</button>
    <div class="stepper-dots">
      <div class="dot-step active" data-step="0"></div>
      <div class="dot-step" data-step="1"></div>
      <div class="dot-step" data-step="2"></div>
      <div class="dot-step" data-step="3"></div>
    </div>
    <button class="btn-step" id="btn-all">Show All</button>
  </div>

  <script>
    const strips = [
      { el: document.getElementById('card-1'), class: 'highlight-orange', key: document.getElementById('key-diet') },
      { el: document.getElementById('card-2'), class: 'highlight-green', key: document.getElementById('key-habitat') },
      { el: document.getElementById('card-3'), class: 'highlight-red', key: document.getElementById('key-threat') }
    ];

    const dots = document.querySelectorAll('.dot-step');
    const toggleBtn = document.getElementById('btn-toggle');
    const allBtn = document.getElementById('btn-all');

    let currentStep = 0; // 0 = raw, 1 = Fact 1, 2 = Fact 2, 3 = Fact 3, 4 = All
    let isPlaying = false;
    let autoInterval = null;

    function applyState(step) {
      currentStep = step;
      
      // Update dots
      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === Math.min(step, 3));
      });

      // Clear all
      strips.forEach(s => {
        s.el.classList.remove('highlight-orange', 'highlight-green', 'highlight-red');
        s.key.classList.remove('active', 'active-diet', 'active-habitat', 'active-threat');
      });

      if (step === 1) {
        strips[0].el.classList.add(strips[0].class);
        strips[0].key.classList.add('active', 'active-diet');
      } else if (step === 2) {
        strips[1].el.classList.add(strips[1].class);
        strips[1].key.classList.add('active', 'active-habitat');
      } else if (step === 3) {
        strips[2].el.classList.add(strips[2].class);
        strips[2].key.classList.add('active', 'active-threat');
      } else if (step >= 4) {
        strips.forEach((s, idx) => {
          s.el.classList.add(s.class);
          const catClass = ['active-diet', 'active-habitat', 'active-threat'][idx];
          s.key.classList.add('active', catClass);
        });
      }
    }

    function nextStep() {
      let next = currentStep + 1;
      if (next > 4) next = 0;
      applyState(next);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      toggleBtn.textContent = isPlaying ? '⏸ Pause' : '▶ Auto-Sort';
      if (isPlaying) {
        if (currentStep === 4 || currentStep === 0) {
          applyState(1);
        }
        autoInterval = setInterval(() => {
          nextStep();
        }, 2200);
      } else {
        clearInterval(autoInterval);
      }
    }

    toggleBtn.addEventListener('click', togglePlay);

    allBtn.addEventListener('click', () => {
      if (isPlaying) togglePlay();
      applyState(4);
    });

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => {
        if (isPlaying) togglePlay();
        applyState(idx);
      });
    });

    // Tap strips directly to toggle individual highlight
    strips.forEach((s, idx) => {
      s.el.addEventListener('click', () => {
        if (isPlaying) togglePlay();
        applyState(idx + 1);
      });
      s.key.addEventListener('click', () => {
        if (isPlaying) togglePlay();
        applyState(idx + 1);
      });
    });

    // Start with step 1 visible after a gentle delay
    setTimeout(() => {
      applyState(1);
    }, 400);
  </script>
</body>
</html>

Categorizing Evidence by Research Subtopics

<!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 {
      width: 100%;
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .header-bar {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .step-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 250px;
      background: #f8fafc;
      border-radius: 12px;
      overflow: hidden;
    }

    /* Folders Grid */
    .folders-container {
      position: absolute;
      bottom: 12px;
      left: 12px;
      right: 12px;
      display: flex;
      gap: 14px;
      justify-content: space-between;
    }

    .folder-wrapper {
      position: relative;
      flex: 1;
      height: 110px;
    }

    /* Folder Tab & Back */
    .folder-tab {
      position: absolute;
      top: 0;
      left: 0;
      width: 65%;
      height: 24px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 8px;
      white-space: nowrap;
    }

    .folder-back {
      position: absolute;
      top: 18px;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 0 8px 8px 8px;
    }

    /* Folder Front Pocket */
    .folder-front {
      position: absolute;
      top: 34px;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 6px;
      border-top: 1px solid rgba(255,255,255,0.7);
      box-shadow: 0 -2px 6px rgba(0,0,0,0.04);
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
    }

    /* Folder A (Diet) Theme */
    .folder-diet .folder-tab { background: #bbdefb; color: #0d47a1; }
    .folder-diet .folder-back { background: #90caf9; }
    .folder-diet .folder-front {
      background: #e3f2fd;
      border: 1px solid #90caf9;
      color: #1565c0;
    }
    .folder-diet.highlight .folder-front {
      box-shadow: 0 0 0 2px #2563eb, 0 4px 12px rgba(37,99,235,0.25);
    }

    /* Folder B (Threats) Theme */
    .folder-threats .folder-tab { background: #ffcdd2; color: #b71c1c; }
    .folder-threats .folder-back { background: #ef9a9a; }
    .folder-threats .folder-threats-front, .folder-threats .folder-front {
      background: #ffebee;
      border: 1px solid #ef9a9a;
      color: #c62828;
    }

    /* Floating Index Card */
    .index-card {
      position: absolute;
      width: 210px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-left: 4px solid #f59e0b;
      border-radius: 6px;
      padding: 10px 12px;
      font-size: 13px;
      line-height: 1.35;
      color: #334155;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
      z-index: 4;
      left: 50%;
      top: 18px;
      transform: translateX(-50%);
      transition: all 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
    }

    .index-card .card-tag {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #d97706;
      margin-bottom: 4px;
    }

    .index-card .keyword {
      color: #0d47a1;
      font-weight: 700;
      background: #e0f2fe;
      padding: 1px 3px;
      border-radius: 3px;
    }

    /* Card Placement States */
    .stage[data-step="0"] .index-card {
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 1;
    }

    .stage[data-step="1"] .index-card {
      top: 20px;
      left: 50%;
      transform: translateX(-50%) scale(1.03);
      box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
    }

    .stage[data-step="2"] .index-card {
      top: 132px;
      left: 27%;
      width: 175px;
      font-size: 11px;
      padding: 6px 8px;
      transform: translateX(-50%) scale(0.92);
      box-shadow: 0 2px 5px rgba(0,0,0,0.08);
      z-index: 2;
    }

    /* Indicator Arrow */
    .path-arrow {
      position: absolute;
      top: 75px;
      left: 38%;
      font-size: 26px;
      color: #2563eb;
      opacity: 0;
      transform: translateY(-6px) rotate(45deg);
      transition: all 0.4s ease;
      z-index: 1;
    }
    .stage[data-step="1"] .path-arrow {
      opacity: 1;
      transform: translateY(0) rotate(45deg);
    }

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

    .play-btn {
      background: #2563eb;
      color: white;
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .play-btn:active { background: #1d4ed8; }

    .caption {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }
  </style>
</head>
<body>

  
  <div class="header-bar">
    <button class="step-btn active" id="btn0" onclick="setStep(0)">1. Evidence</button>
    <button class="step-btn" id="btn1" onclick="setStep(1)">2. Match Subtopic</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">3. Categorized</button>
  </div>

  
  <div class="stage" id="stage" data-step="0">
    
    
    <div class="index-card" id="card">
      <div class="card-tag">Evidence Card</div>
      Loggerheads crush hard <span class="keyword">crab shells</span> with strong jaws.
    </div>

    
    <div class="path-arrow">↙</div>

    
    <div class="folders-container">
      
      <div class="folder-wrapper folder-diet" id="folderA">
        <div class="folder-tab">Folder A</div>
        <div class="folder-back"></div>
        <div class="folder-front">🦀 Diet</div>
      </div>

      
      <div class="folder-wrapper folder-threats" id="folderB">
        <div class="folder-tab">Folder B</div>
        <div class="folder-back"></div>
        <div class="folder-front">⚠️ Threats</div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="play-btn" id="playBtn" onclick="toggleAutoPlay()">
      <span id="playIcon">⏸</span> <span id="playText">Pause</span>
    </button>
    <span class="caption" id="stepCaption">Step 1: Unsorted evidence card</span>
  </div>

  <script>
    let currentStep = 0;
    let autoPlayTimer = null;
    let isPlaying = true;

    const captions = [
      "Step 1: Read evidence detail",
      "Step 2: 'Crab shells' → Food source",
      "Step 3: Filed into Folder A (Diet)"
    ];

    function setStep(step) {
      currentStep = step;
      const stage = document.getElementById('stage');
      const folderA = document.getElementById('folderA');
      
      stage.setAttribute('data-step', step);
      document.getElementById('stepCaption').textContent = captions[step];

      for (let i = 0; i < 3; i++) {
        document.getElementById(`btn${i}`).classList.toggle('active', i === step);
      }

      folderA.classList.toggle('highlight', step === 1 || step === 2);
    }

    function advance() {
      currentStep = (currentStep + 1) % 3;
      setStep(currentStep);
    }

    function startTimer() {
      stopTimer();
      autoPlayTimer = setInterval(advance, 3000);
    }

    function stopTimer() {
      if (autoPlayTimer) clearInterval(autoPlayTimer);
    }

    function toggleAutoPlay() {
      isPlaying = !isPlaying;
      document.getElementById('playIcon').textContent = isPlaying ? '⏸' : '▶';
      document.getElementById('playText').textContent = isPlaying ? 'Pause' : 'Play';
      
      if (isPlaying) {
        advance();
        startTimer();
      } else {
        stopTimer();
      }
    }

    // Initialize auto play
    startTimer();
  </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;
    }

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

    .tree-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Main Topic Card */
    .main-topic-card {
      background: #0f172a;
      color: #ffffff;
      padding: 10px 18px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
      z-index: 2;
    }

    .topic-icon {
      font-size: 22px;
      line-height: 1;
    }

    .topic-text {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.2px;
    }

    .topic-badge {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #94a3b8;
      display: block;
      margin-bottom: 2px;
    }

    /* Connector Tree SVG */
    .connector-svg {
      width: 100%;
      height: 48px;
      display: block;
      margin: -2px 0;
    }

    /* Category Buckets Grid */
    .buckets-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      z-index: 2;
    }

    .bucket-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 6px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 2px solid transparent;
      transition: box-shadow 0.25s ease, background-color 0.25s ease;
      cursor: pointer;
      user-select: none;
    }

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

    .bucket-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 3px;
    }

    .bucket-desc {
      font-size: 11px;
      line-height: 1.25;
      font-weight: 500;
      color: #64748b;
    }

    /* Category Specific Colors */
    .bucket-green {
      border-color: #22c55e;
    }
    .bucket-green .bucket-title {
      color: #15803d;
    }
    .bucket-green.active {
      background-color: #f0fdf4;
      box-shadow: 0 0 0 2px #22c55e;
    }

    .bucket-orange {
      border-color: #f97316;
    }
    .bucket-orange .bucket-title {
      color: #c2410c;
    }
    .bucket-orange.active {
      background-color: #fff7ed;
      box-shadow: 0 0 0 2px #f97316;
    }

    .bucket-red {
      border-color: #ef4444;
    }
    .bucket-red .bucket-title {
      color: #b91c1c;
    }
    .bucket-red.active {
      background-color: #fef2f2;
      box-shadow: 0 0 0 2px #ef4444;
    }

    /* Path stroke styling */
    .branch-path {
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      transition: stroke-width 0.2s ease, opacity 0.2s ease;
    }

    .branch-green {
      stroke: #22c55e;
    }
    .branch-orange {
      stroke: #f97316;
    }
    .branch-red {
      stroke: #ef4444;
    }

    .branch-dimmed {
      opacity: 0.25;
      stroke-width: 2;
    }

    .branch-highlighted {
      stroke-width: 4;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="tree-container">
    
    <div class="main-topic-card" id="mainTopic">
      <span class="topic-icon">🐢</span>
      <div>
        <span class="topic-badge">Main Topic</span>
        <div class="topic-text">Sea Turtles</div>
      </div>
    </div>

    
    <svg class="connector-svg" viewBox="0 0 300 48" preserveAspectRatio="none">
      
      <path id="path-green" class="branch-path branch-green" d="M 150 0 C 150 24, 50 24, 50 48" />
      
      <path id="path-orange" class="branch-path branch-orange" d="M 150 0 L 150 48" />
      
      <path id="path-red" class="branch-path branch-red" d="M 150 0 C 150 24, 250 24, 250 48" />
    </svg>

    
    <div class="buckets-grid">
      
      <div class="bucket-card bucket-green" data-type="green">
        <div class="bucket-icon">🌊</div>
        <div class="bucket-title">Habitat</div>
        <div class="bucket-desc">Where they live</div>
      </div>

      
      <div class="bucket-card bucket-orange" data-type="orange">
        <div class="bucket-icon">🪼</div>
        <div class="bucket-title">Diet</div>
        <div class="bucket-desc">What they eat</div>
      </div>

      
      <div class="bucket-card bucket-red" data-type="red">
        <div class="bucket-icon">⚠️</div>
        <div class="bucket-title">Threats</div>
        <div class="bucket-desc">Dangers faced</div>
      </div>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.bucket-card');
    const paths = {
      green: document.getElementById('path-green'),
      orange: document.getElementById('path-orange'),
      red: document.getElementById('path-red')
    };

    let activeType = null;

    cards.forEach(card => {
      card.addEventListener('click', () => {
        const type = card.dataset.type;

        if (activeType === type) {
          // Reset if tapped again
          activeType = null;
          cards.forEach(c => c.classList.remove('active'));
          Object.values(paths).forEach(p => {
            p.classList.remove('branch-dimmed', 'branch-highlighted');
          });
        } else {
          // Highlight active branch and bucket
          activeType = type;
          cards.forEach(c => c.classList.toggle('active', c.dataset.type === type));
          
          Object.keys(paths).forEach(key => {
            paths[key].classList.remove('branch-dimmed', 'branch-highlighted');
            if (key === type) {
              paths[key].classList.add('branch-highlighted');
            } else {
              paths[key].classList.add('branch-dimmed');
            }
          });
        }
      });
    });
  </script>
</body>
</html>

OGE.5.WR.2

Aligned learning resources

Related diagrams