<!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: 12px;
    }

    .diagram-wrap {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .btn-toggle {
      background: #ffffff;
      border: 2px solid #22b7ff;
      color: #0284c7;
      font-size: 15px;
      font-weight: 600;
      padding: 8px 18px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.06);
      transition: background 0.2s ease, color 0.2s ease;
    }

    .btn-toggle:hover {
      background: #e0f2fe;
    }

    .btn-toggle.inside-mode {
      background: #22b7ff;
      color: #ffffff;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Cutaway transition */
    .right-exterior {
      transition: opacity 0.4s ease, transform 0.4s ease;
      transform-origin: center right;
    }

    .cutaway-labels, .cutaway-lines {
      transition: opacity 0.3s ease;
    }

    .hidden {
      opacity: 0;
      pointer-events: none;
    }

    .label-text {
      font-size: 13px;
      font-weight: 700;
      fill: #1e2945;
    }

    .ash-particle {
      animation: rise 3s infinite ease-out;
    }
    .ash-p2 { animation-delay: 1s; }
    .ash-p3 { animation-delay: 2s; }

    @keyframes rise {
      0% { transform: translateY(0) scale(0.8); opacity: 0.8; }
      100% { transform: translateY(-30px) scale(1.3); opacity: 0; }
    }
  </style>
</head>
<body>

  <div class="diagram-wrap">
    <button id="toggleBtn" class="btn-toggle inside-mode" onclick="toggleView()">
      <span id="btnIcon">👁️</span> <span id="btnText">Cutaway View: INSIDE</span>
    </button>

    <svg viewBox="0 0 540 380" aria-label="Cutaway diagram of a volcano">
      <defs>
        
        <radialGradient id="magmaGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#ffedd5" />
          <stop offset="40%" stop-color="#f97316" />
          <stop offset="100%" stop-color="#c2410c" />
        </radialGradient>
        
        <linearGradient id="rockInterior" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#78350f" />
          <stop offset="50%" stop-color="#573016" />
          <stop offset="100%" stop-color="#3b1d0c" />
        </linearGradient>
        
        <linearGradient id="grassExterior" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#65a30d" />
          <stop offset="70%" stop-color="#4d7c0f" />
          <stop offset="100%" stop-color="#3f6212" />
        </linearGradient>
      </defs>

      
      <g transform="translate(180, 70)">
        <ellipse cx="0" cy="0" rx="35" ry="18" fill="#94a3b8" opacity="0.6" class="ash-particle ash-p1" />
        <ellipse cx="10" cy="-15" rx="25" ry="14" fill="#cbd5e1" opacity="0.7" class="ash-particle ash-p2" />
        <ellipse cx="-8" cy="-25" rx="30" ry="16" fill="#64748b" opacity="0.5" class="ash-particle ash-p3" />
      </g>

      
      <rect x="20" y="270" width="320" height="70" fill="#a16207" rx="4" />
      <rect x="20" y="270" width="320" height="12" fill="#65a30d" rx="2" />

      
      
      <polygon points="180,95 70,270 290,270" fill="url(#rockInterior)" />
      
      
      <ellipse cx="180" cy="305" rx="65" ry="25" fill="url(#magmaGlow)" />
      
      
      <path d="M 168,300 L 173,100 L 187,100 L 192,300 Z" fill="#ea580c" />
      <path d="M 174,300 L 177,100 L 183,100 L 186,300 Z" fill="#fbbf24" />

      
      <ellipse cx="180" cy="98" rx="22" ry="7" fill="#b91c1c" />

      
      <path d="M 180,95 L 70,270 L 180,270 Z" fill="url(#grassExterior)" />
      
      <path d="M 180,95 L 140,160 L 160,150 L 170,165 L 180,150 Z" fill="#f8fafc" opacity="0.85" />

      
      <g id="rightExterior" class="right-exterior">
        
        <path d="M 180,95 L 290,270 L 180,270 Z" fill="#4d7c0f" />
        
        <path d="M 180,95 L 180,150 L 195,160 L 210,145 L 220,160 Z" fill="#f8fafc" opacity="0.85" />
        
        <rect x="180" y="270" width="160" height="70" fill="#854d0e" />
        <rect x="180" y="270" width="160" height="12" fill="#4d7c0f" />
      </g>

      
      <line x1="180" y1="95" x2="180" y2="340" stroke="#ffffff" stroke-width="2" stroke-dasharray="3 3" opacity="0.7" />

      
      <g id="labelsGroup" class="cutaway-labels">
        
        <line x1="185" y1="98" x2="360" y2="98" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="2 2" />
        <circle cx="185" cy="98" r="3.5" fill="#0284c7" />
        <text x="368" y="102" class="label-text">Crater</text>

        
        <line x1="185" y1="180" x2="360" y2="180" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="2 2" />
        <circle cx="185" cy="180" r="3.5" fill="#0284c7" />
        <text x="368" y="184" class="label-text">Main Vent</text>

        
        <line x1="260" y1="276" x2="360" y2="245" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="2 2" />
        <circle cx="260" cy="276" r="3.5" fill="#0284c7" />
        <text x="368" y="249" class="label-text">Crust</text>

        
        <line x1="215" y1="305" x2="360" y2="310" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="2 2" />
        <circle cx="215" cy="305" r="3.5" fill="#0284c7" />
        <text x="368" y="314" class="label-text">Magma Chamber</text>
      </g>

      
      <text x="125" y="365" font-size="12" font-weight="600" fill="#64748b" text-anchor="middle">Exterior</text>
      <text x="240" y="365" id="insideText" font-size="12" font-weight="600" fill="#0284c7" text-anchor="middle">Cutaway (Inside)</text>
    </svg>
  </div>

  <script>
    let showInside = true;

    function toggleView() {
      showInside = !showInside;
      const rightExterior = document.getElementById('rightExterior');
      const labelsGroup = document.getElementById('labelsGroup');
      const btn = document.getElementById('toggleBtn');
      const btnText = document.getElementById('btnText');
      const btnIcon = document.getElementById('btnIcon');
      const insideText = document.getElementById('insideText');

      if (showInside) {
        rightExterior.classList.remove('hidden');
        rightExterior.style.opacity = '0';
        labelsGroup.classList.remove('hidden');
        btn.classList.add('inside-mode');
        btnIcon.textContent = '👁️';
        btnText.textContent = 'Cutaway View: INSIDE';
        insideText.textContent = 'Cutaway (Inside)';
        insideText.setAttribute('fill', '#0284c7');
      } else {
        rightExterior.style.opacity = '1';
        labelsGroup.classList.add('hidden');
        btn.classList.remove('inside-mode');
        btnIcon.textContent = '⛰️';
        btnText.textContent = 'Surface View: OUTSIDE';
        insideText.textContent = 'Exterior';
        insideText.setAttribute('fill', '#64748b');
      }
    }

    // Initialize state
    document.getElementById('rightExterior').style.opacity = '0';
  </script>
</body>
</html>

Reading Labeled Diagrams and Cutaways

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100%;
      user-select: none;
    }

    .stepper {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
      width: 100%;
      max-width: 460px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 460px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .title-badge {
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 700;
      color: #334155;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      border-radius: 20px;
      margin-bottom: 8px;
      transition: all 0.25s ease;
      text-align: center;
    }

    .title-badge.highlight {
      background: #eff6ff;
      border-color: #2563eb;
      color: #1d4ed8;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    }

    .svg-container {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    svg {
      width: 100%;
      max-width: 440px;
      height: auto;
      display: block;
    }

    /* SVG Label Styles */
    .label-tag {
      font-size: 12px;
      font-weight: 700;
      fill: #334155;
      transition: fill 0.3s ease;
    }

    .label-box {
      fill: #ffffff;
      stroke: #cbd5e1;
      stroke-width: 1.5;
      rx: 6;
      transition: all 0.3s ease;
    }

    .leader-line {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 4, 3;
      transition: all 0.3s ease;
    }

    .line-dot {
      fill: #64748b;
      transition: all 0.3s ease;
    }

    /* Highlights */
    .lines-active .leader-line {
      stroke: #0284c7;
      stroke-width: 2;
      stroke-dasharray: none;
    }

    .lines-active .line-dot {
      fill: #0284c7;
    }

    .lines-active .label-box {
      stroke: #0284c7;
      fill: #f0f9ff;
    }

    .lines-active .label-tag {
      fill: #0369a1;
    }

    /* Step 3 Target match */
    .target-active #box-dungeon {
      fill: #fef3c7;
      stroke: #d97706;
      stroke-width: 2;
    }

    .target-active #text-dungeon {
      fill: #92400e;
      font-weight: 800;
    }

    .target-active #line-dungeon {
      stroke: #d97706;
      stroke-width: 2.5;
      stroke-dasharray: none;
    }

    .target-active #dot-dungeon {
      fill: #d97706;
      r: 4.5;
    }

    .target-active #room-dungeon {
      fill: #fef3c7;
      stroke: #d97706;
      stroke-width: 2;
    }

    .clue-panel {
      width: 100%;
      margin-top: 8px;
      padding: 8px 12px;
      background: #f1f5f9;
      border-radius: 8px;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 42px;
    }

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

    .clue-text b {
      color: #0f172a;
    }

    .match-tag {
      background: #dbeafe;
      color: #1e40af;
      padding: 4px 10px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 11px;
      white-space: nowrap;
    }
  </style>
</head>
<body>

  
  <div class="stepper" role="tablist">
    <button class="step-btn active" id="btn-0">1. Read Title</button>
    <button class="step-btn" id="btn-1">2. Leader Lines</button>
    <button class="step-btn" id="btn-2">3. Match Text</button>
  </div>

  <div class="stage" id="stage">
    
    <div class="title-badge highlight" id="titleBadge">
      🏰 Cross-Section of a Castle Tower
    </div>

    
    <div class="svg-container">
      <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
        
        <path d="M 22 145 L 210 145" stroke="#64748b" stroke-width="2" stroke-dasharray="3 3" />
        <text x="24" y="160" font-size="10" fill="#334155" font-weight="700" letter-spacing="0.5">GROUND LEVEL</text>

        
        <g stroke="#334155" stroke-width="2">
          
          <rect id="room-battlements" x="50" y="10" width="110" height="40" fill="#f8fafc" rx="2" />
          
          <rect x="50" y="2" width="18" height="10" fill="#cbd5e1" />
          <rect x="80" y="2" width="18" height="10" fill="#cbd5e1" />
          <rect x="110" y="2" width="18" height="10" fill="#cbd5e1" />
          <rect x="142" y="2" width="18" height="10" fill="#cbd5e1" />

          
          <rect id="room-quarters" x="50" y="55" width="110" height="75" fill="#f8fafc" rx="2" />

          
          <rect id="room-dungeon" x="50" y="135" width="110" height="55" fill="#e2e8f0" rx="2" />
        </g>

        
        
        <text x="96" y="36" font-size="18" text-anchor="middle">🛡️</text>
        
        <text x="80" y="98" font-size="18" text-anchor="middle">🛏️</text>
        <text x="125" y="98" font-size="18" text-anchor="middle">🕯️</text>
        <line x1="55" y1="125" x2="155" y2="125" stroke="#cbd5e1" stroke-width="3" />
        
        <text x="105" y="172" font-size="18" text-anchor="middle">⛓️</text>
        <line x1="70" y1="135" x2="70" y2="190" stroke="#64748b" stroke-width="1.5" />
        <line x1="85" y1="135" x2="85" y2="190" stroke="#64748b" stroke-width="1.5" />
        <line x1="125" y1="135" x2="125" y2="190" stroke="#64748b" stroke-width="1.5" />
        <line x1="140" y1="135" x2="140" y2="190" stroke="#64748b" stroke-width="1.5" />

        
        <g id="leaderLinesGroup">
          
          <circle id="dot-battlements" class="line-dot" cx="145" cy="30" r="3.5" />
          <polyline id="line-battlements" class="leader-line" points="145,30 215,30 235,30" />

          
          <circle id="dot-quarters" class="line-dot" cx="145" cy="85" r="3.5" />
          <polyline id="line-quarters" class="leader-line" points="145,85 205,85 235,85" />

          
          <circle id="dot-dungeon" class="line-dot" cx="145" cy="162" r="3.5" />
          <polyline id="line-dungeon" class="leader-line" points="145,162 205,162 235,162" />
        </g>

        
        <g id="labelsGroup">
          
          <g transform="translate(240, 17)">
            <rect id="box-battlements" class="label-box" width="145" height="26" />
            <text id="text-battlements" class="label-tag" x="12" y="17">Battlements</text>
          </g>

          
          <g transform="translate(240, 72)">
            <rect id="box-quarters" class="label-box" width="145" height="26" />
            <text id="text-quarters" class="label-tag" x="12" y="17">Living Quarters</text>
          </g>

          
          <g transform="translate(240, 149)">
            <rect id="box-dungeon" class="label-box" width="145" height="26" />
            <text id="text-dungeon" class="label-tag" x="12" y="17">Dungeon</text>
          </g>
        </g>
      </svg>
    </div>

    
    <div class="clue-panel" id="cluePanel">
      <span class="clue-text" id="clueText">Step 1: The <b>Title</b> states the subject.</span>
      <span class="match-tag" id="clueTag">Subject</span>
    </div>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const titleBadge = document.getElementById('titleBadge');
    const clueText = document.getElementById('clueText');
    const clueTag = document.getElementById('clueTag');
    const buttons = document.querySelectorAll('.step-btn');

    const stepsData = [
      {
        text: 'Step 1: Read the <b>Title</b> to identify the topic.',
        tag: '1. Title',
        titleHighlight: true,
        linesActive: false,
        targetActive: false
      },
      {
        text: 'Step 2: Trace <b>Leader Lines</b> from labels to parts.',
        tag: '2. Leader Lines',
        titleHighlight: false,
        linesActive: true,
        targetActive: false
      },
      {
        text: 'Step 3: <i>"Prisoners were kept in the deepest room."</i>',
        tag: 'Match: Dungeon ✓',
        titleHighlight: false,
        linesActive: true,
        targetActive: true
      }
    ];

    function setStep(index) {
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === index);
      });

      const d = stepsData[index];
      titleBadge.classList.toggle('highlight', d.titleHighlight);
      stage.classList.toggle('lines-active', d.linesActive);
      stage.classList.toggle('target-active', d.targetActive);

      clueText.innerHTML = d.text;
      clueTag.textContent = d.tag;
    }

    buttons.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        setStep(idx);
      });
    });
  </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;
    }

    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: 12px;
      user-select: none;
    }

    .diagram-wrap {
      width: 100%;
      max-width: 600px;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Interactive label buttons in SVG */
    .label-group {
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .label-bg {
      fill: #ffffff;
      stroke: #e2e8f0;
      stroke-width: 1.5;
      rx: 8;
      transition: fill 0.2s, stroke 0.2s, filter 0.2s;
    }

    .label-text {
      font-size: 15px;
      font-weight: 600;
      fill: #1e2945;
      dominant-baseline: central;
      transition: fill 0.2s;
    }

    .leader-line {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.45;
      transition: opacity 0.2s, stroke-width 0.2s;
    }

    .target-dot {
      fill: #22b7ff;
      transition: r 0.2s;
    }

    .target-ring {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 2.5;
      opacity: 0;
      transform-origin: center;
      transition: opacity 0.25s, transform 0.25s;
    }

    /* Active & hover states */
    .item.active .label-bg,
    .item:hover .label-bg {
      fill: #e0f4ff;
      stroke: #22b7ff;
      filter: drop-shadow(0 2px 6px rgba(34, 183, 255, 0.25));
    }

    .item.active .label-text,
    .item:hover .label-text {
      fill: #0077b6;
    }

    .item.active .leader-line,
    .item:hover .leader-line {
      opacity: 1;
      stroke-width: 2.5;
    }

    .item.active .target-dot,
    .item:hover .target-dot {
      fill: #0096e6;
    }

    .item.active .target-ring,
    .item:hover .target-ring {
      opacity: 1;
      animation: pulse 1.6s ease-out infinite;
    }

    @keyframes pulse {
      0% {
        r: 6;
        opacity: 1;
        stroke-width: 3;
      }
      100% {
        r: 18;
        opacity: 0;
        stroke-width: 1;
      }
    }

    .target-hit-area {
      cursor: pointer;
      fill: transparent;
    }

    @media (max-width: 480px) {
      .label-text {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-wrap">
    <svg viewBox="0 0 540 380" aria-label="Cross-section diagram of an apple">
      <defs>
        
        <linearGradient id="skinGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#ea384d"/>
          <stop offset="60%" stop-color="#cc1c32"/>
          <stop offset="100%" stop-color="#990b1e"/>
        </linearGradient>

        <linearGradient id="fleshGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#ffffff"/>
          <stop offset="60%" stop-color="#fffbee"/>
          <stop offset="100%" stop-color="#fdf4d0"/>
        </linearGradient>

        <linearGradient id="coreGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#e8d8b5" stop-opacity="0.8"/>
          <stop offset="100%" stop-color="#dec798" stop-opacity="0.8"/>
        </linearGradient>

        <filter id="subtle-shadow" x="-5%" y="-5%" width="115%" height="115%">
          <feDropShadow dx="0" dy="6" stdDeviation="8" flood-color="#1e2945" flood-opacity="0.08"/>
        </filter>
      </defs>

      
      <g transform="translate(370, 195)" filter="url(#subtle-shadow)">
        
        
        <path d="M 0 -130 C -3 -155, 12 -175, 20 -185 C 22 -187, 26 -185, 24 -182 C 16 -170, 5 -152, 6 -130 Z" 
              fill="#5a3d28" stroke="#3d2717" stroke-width="0.5"/>

        
        <path d="M 0 -130 
                 C 45 -138, 105 -105, 115 -35 
                 C 125 40, 95 105, 60 135 
                 C 30 160, 10 152, 0 144 
                 C -10 152, -30 160, -60 135 
                 C -95 105, -125 40, -115 -35 
                 C -105 -105, -45 -138, 0 -130 Z" 
              fill="url(#skinGrad)" stroke="#a11324" stroke-width="1.5"/>

        
        <path d="M 0 -124 
                 C 42 -131, 98 -98, 107 -32 
                 C 117 38, 88 98, 55 127 
                 C 28 150, 9 143, 0 136 
                 C -9 143, -28 150, -55 127 
                 C -88 98, -117 38, -107 -32 
                 C -98 -98, -42 -131, 0 -124 Z" 
              fill="url(#fleshGrad)"/>

        
        <g opacity="0.85">
          
          <ellipse cx="0" cy="5" rx="22" ry="42" fill="url(#coreGrad)" stroke="#ceb27d" stroke-width="1" stroke-dasharray="3,2"/>
          <path d="M -16 -12 C -24 3, -24 12, -14 26" fill="none" stroke="#bda069" stroke-width="1.5" stroke-linecap="round"/>
          <path d="M 16 -12 C 24 3, 24 12, 14 26" fill="none" stroke="#bda069" stroke-width="1.5" stroke-linecap="round"/>
          
          
          <path d="M -9 8 C -14 3, -12 -9, -7 -14 C -6 -16, -4 -13, -4 -10 C -4 -4, -4 4, -9 8 Z" 
                fill="#3b1e08" stroke="#210f03" stroke-width="0.5"/>
          
          <path d="M 9 14 C 4 9, 3 -3, 6 -9 C 7 -11, 9 -9, 9 -6 C 10 0, 12 9, 9 14 Z" 
                fill="#45230a" stroke="#210f03" stroke-width="0.5"/>
        </g>

        
        <path d="M -5 138 C -2 142, 2 142, 5 138" fill="none" stroke="#7a583a" stroke-width="1.5" stroke-linecap="round"/>
      </g>

      

      
      <g class="item" id="item-stem" data-index="0">
        <path class="leader-line" d="M 130 50 L 320 50 L 382 35"/>
        <g class="label-group">
          <rect class="label-bg" x="30" y="32" width="100" height="36"/>
          <text class="label-text" x="52" y="50">Stem</text>
        </g>
        <circle class="target-ring" cx="382" cy="35" r="8"/>
        <circle class="target-dot" cx="382" cy="35" r="4.5"/>
        <circle class="target-hit-area" cx="382" cy="35" r="22"/>
      </g>

      
      <g class="item" id="item-skin" data-index="1">
        <path class="leader-line" d="M 130 115 L 260 115 L 290 125 L 476 135"/>
        <g class="label-group">
          <rect class="label-bg" x="30" y="97" width="100" height="36"/>
          <text class="label-text" x="54" y="115">Skin</text>
        </g>
        <circle class="target-ring" cx="476" cy="135" r="8"/>
        <circle class="target-dot" cx="476" cy="135" r="4.5"/>
        <circle class="target-hit-area" cx="476" cy="135" r="22"/>
      </g>

      
      <g class="item" id="item-flesh" data-index="2">
        <path class="leader-line" d="M 130 180 L 270 180 L 320 180"/>
        <g class="label-group">
          <rect class="label-bg" x="30" y="162" width="100" height="36"/>
          <text class="label-text" x="51" y="180">Flesh</text>
        </g>
        <circle class="target-ring" cx="320" cy="180" r="8"/>
        <circle class="target-dot" cx="320" cy="180" r="4.5"/>
        <circle class="target-hit-area" cx="320" cy="180" r="22"/>
      </g>

      
      <g class="item" id="item-core" data-index="3">
        <path class="leader-line" d="M 130 245 L 255 245 L 354 225"/>
        <g class="label-group">
          <rect class="label-bg" x="30" y="227" width="100" height="36"/>
          <text class="label-text" x="52" y="245">Core</text>
        </g>
        <circle class="target-ring" cx="354" cy="225" r="8"/>
        <circle class="target-dot" cx="354" cy="225" r="4.5"/>
        <circle class="target-hit-area" cx="354" cy="225" r="22"/>
      </g>

      
      <g class="item" id="item-seed" data-index="4">
        <path class="leader-line" d="M 130 310 L 290 310 L 363 194"/>
        <g class="label-group">
          <rect class="label-bg" x="30" y="292" width="100" height="36"/>
          <text class="label-text" x="53" y="310">Seed</text>
        </g>
        <circle class="target-ring" cx="363" cy="194" r="8"/>
        <circle class="target-dot" cx="363" cy="194" r="4.5"/>
        <circle class="target-hit-area" cx="363" cy="194" r="22"/>
      </g>
    </svg>
  </div>

  <script>
    const items = document.querySelectorAll('.item');
    let activeItem = null;

    function setActive(el) {
      items.forEach(item => item.classList.remove('active'));
      if (el) {
        el.classList.add('active');
        activeItem = el;
      } else {
        activeItem = null;
      }
    }

    items.forEach(item => {
      // Hover behavior
      item.addEventListener('mouseenter', () => {
        setActive(item);
      });

      item.addEventListener('mouseleave', () => {
        setActive(null);
      });

      // Click / Touch behavior
      item.addEventListener('click', (e) => {
        e.stopPropagation();
        if (activeItem === item) {
          setActive(null);
        } else {
          setActive(item);
        }
      });
    });

    document.addEventListener('click', () => {
      setActive(null);
    });
  </script>
</body>
</html>

OGE.3.RI.7

Aligned learning resources

Related diagrams