<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

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

    .grid-container {
      display: grid;
      grid-template-columns: 36px 1fr 1fr;
      grid-template-rows: 36px 1fr 1fr;
      gap: 6px;
      width: 100%;
      aspect-ratio: 1 / 1;
    }

    .cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      transition: all 0.25s ease;
      user-select: none;
    }

    .corner-label {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gamete {
      background: #f1f5f9;
      font-size: 20px;
      font-weight: 800;
      color: #0284c7;
    }

    .gamete.female {
      color: #0284c7;
    }

    .gamete.male {
      color: #0284c7;
    }

    .box {
      border: 2px solid #e2e8f0;
      background: #ffffff;
      cursor: pointer;
      padding: 4px;
    }

    .box .alleles {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: 1px;
      line-height: 1.1;
    }

    .box .trait {
      font-size: 13px;
      font-weight: 600;
      margin-top: 2px;
    }

    .box.tall {
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #166534;
    }

    .box.short {
      background: #fefce8;
      border-color: #fef08a;
      color: #854d0e;
    }

    .box.highlight {
      box-shadow: 0 0 0 3px #0284c7;
      transform: scale(1.02);
      z-index: 2;
    }

    .box.dimmed {
      opacity: 0.35;
    }

    .cards-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
    }

    .ratio-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 6px;
      text-align: center;
      cursor: pointer;
      transition: all 0.25s ease;
      user-select: none;
    }

    .ratio-card.active {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 1px #0284c7;
    }

    .card-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 4px;
    }

    .card-val {
      font-size: 13px;
      font-weight: 800;
      color: #1e2945;
      white-space: nowrap;
    }

    .badge-t {
      color: #166534;
    }
    .badge-s {
      color: #854d0e;
    }
  </style>
</head>
<body>

  <div class="diagram">
    <div class="grid-container">
      
      <div class="cell corner-label">♀ \ ♂</div>

      
      <div class="cell gamete female">T</div>
      <div class="cell gamete female">t</div>

      
      <div class="cell gamete male">T</div>
      <div class="cell box tall" data-geno="TT" data-pheno="tall">
        <span class="alleles">TT</span>
        <span class="trait">Tall</span>
      </div>
      <div class="cell box tall" data-geno="Tt" data-pheno="tall">
        <span class="alleles">Tt</span>
        <span class="trait">Tall</span>
      </div>

      
      <div class="cell gamete male">t</div>
      <div class="cell box tall" data-geno="Tt" data-pheno="tall">
        <span class="alleles">Tt</span>
        <span class="trait">Tall</span>
      </div>
      <div class="cell box short" data-geno="tt" data-pheno="short">
        <span class="alleles">tt</span>
        <span class="trait">Short</span>
      </div>
    </div>

    
    <div class="cards-row">
      <div class="ratio-card" id="cardGeno">
        <div class="card-title">Genotypic Ratio</div>
        <div class="card-val">1 TT : 2 Tt : 1 tt</div>
      </div>
      <div class="ratio-card" id="cardPheno">
        <div class="card-title">Phenotypic Ratio</div>
        <div class="card-val"><span class="badge-t">3 Tall</span> : <span class="badge-s">1 Short</span></div>
      </div>
    </div>
  </div>

  <script>
    const boxes = document.querySelectorAll('.box');
    const cardGeno = document.getElementById('cardGeno');
    const cardPheno = document.getElementById('cardPheno');
    let activeFilter = null;

    function resetHighlights() {
      boxes.forEach(b => {
        b.classList.remove('highlight', 'dimmed');
      });
      cardGeno.classList.remove('active');
      cardPheno.classList.remove('active');
    }

    cardGeno.addEventListener('click', () => {
      if (activeFilter === 'geno') {
        activeFilter = null;
        resetHighlights();
      } else {
        activeFilter = 'geno';
        resetHighlights();
        cardGeno.classList.add('active');
      }
    });

    cardPheno.addEventListener('click', () => {
      if (activeFilter === 'pheno') {
        activeFilter = null;
        resetHighlights();
      } else {
        activeFilter = 'pheno';
        resetHighlights();
        cardPheno.classList.add('active');
      }
    });

    boxes.forEach(box => {
      box.addEventListener('click', () => {
        const geno = box.dataset.geno;
        if (activeFilter === geno) {
          activeFilter = null;
          resetHighlights();
        } else {
          activeFilter = geno;
          resetHighlights();
          boxes.forEach(b => {
            if (b.dataset.geno === geno) {
              b.classList.add('highlight');
            } else {
              b.classList.add('dimmed');
            }
          });
        }
      });
    });
  </script>
</body>
</html>

Using Ratios and Proportions in Genetic Crosses

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

    /* Problem Header */
    .problem-bar {
      width: 100%;
      max-width: 460px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 600;
    }
    .badge-cross {
      background: #1e2945;
      color: #ffffff;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 13px;
      letter-spacing: 0.5px;
    }
    .total-badge {
      background: #e2e8f0;
      color: #334155;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 13px;
    }

    /* Stepper Navigation */
    .nav-bar {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 460px;
      margin: 8px 0;
    }
    .step-btn {
      flex: 1;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #64748b;
      padding: 6px 4px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    /* Stage Container (Fixed Height to prevent CLS) */
    .stage-container {
      position: relative;
      width: 100%;
      max-width: 460px;
      height: 220px;
      overflow: hidden;
    }

    .step-panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .step-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Step 1: Punnett & Ratio */
    .punnett-wrap {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .punnett-grid {
      display: grid;
      grid-template-columns: 24px 44px 44px;
      grid-template-rows: 24px 44px 44px;
      gap: 3px;
      align-items: center;
      justify-items: center;
      font-weight: 700;
      font-size: 14px;
    }
    .cell-allele {
      color: #64748b;
    }
    .cell-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      font-size: 15px;
      border: 1px solid #cbd5e1;
    }
    .cell-black {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
    .cell-white {
      background: #ffffff;
      color: #1e2945;
      border-color: #94a3b8;
    }
    .ratio-result {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ratio-pill {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ratio-pill.highlight {
      background: #eff6ff;
      border-color: #bfdbfe;
      color: #1d4ed8;
    }

    /* Step 2: Fraction */
    .math-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      width: 100%;
    }
    .equation-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 700;
    }
    .frac {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      padding: 0 4px;
      font-size: 17px;
    }
    .frac-num {
      border-bottom: 2px solid #1e2945;
      padding-bottom: 2px;
      width: 100%;
      text-align: center;
    }
    .frac-den {
      padding-top: 2px;
      width: 100%;
      text-align: center;
    }
    .fraction-bar {
      display: flex;
      width: 80%;
      max-width: 280px;
      height: 32px;
      border-radius: 8px;
      overflow: hidden;
      border: 2px solid #cbd5e1;
      font-weight: 700;
      font-size: 13px;
    }
    .bar-seg {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .seg-black {
      background: #1e2945;
      color: #ffffff;
    }
    .seg-white {
      background: #f8fafc;
      color: #1e2945;
      border-left: 1px solid #cbd5e1;
    }

    /* Step 3: Total Calculation */
    .calc-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 20px;
      font-weight: 700;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 12px 18px;
      border-radius: 10px;
    }
    .result-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #22c55e;
      color: #ffffff;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 18px;
      font-weight: 700;
    }

    /* Footer Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 460px;
      margin-top: 4px;
    }
    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .ctrl-btn:hover {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  
  <div class="problem-bar">
    <div style="display:flex; align-items:center; gap:6px;">
      <span class="badge-cross">Bb × bb</span>
      <span>Cross</span>
    </div>
    <span class="total-badge">Total = 480 mice</span>
  </div>

  
  <div class="nav-bar">
    <button class="step-btn active" onclick="setStep(0)">1. Ratio</button>
    <button class="step-btn" onclick="setStep(1)">2. Fraction</button>
    <button class="step-btn" onclick="setStep(2)">3. Calculate</button>
  </div>

  
  <div class="stage-container">
    
    <div class="step-panel active" id="panel-0">
      <div class="punnett-wrap">
        <div class="punnett-grid">
          <div></div>
          <div class="cell-allele">b</div>
          <div class="cell-allele">b</div>
          <div class="cell-allele">B</div>
          <div class="cell-box cell-black">Bb</div>
          <div class="cell-box cell-black">Bb</div>
          <div class="cell-allele">b</div>
          <div class="cell-box cell-white">bb</div>
          <div class="cell-box cell-white">bb</div>
        </div>
        <div class="ratio-result">
          <div class="ratio-pill">2 Bb : 2 bb</div>
          <div class="ratio-pill highlight">➔ 1 Black : 1 White</div>
        </div>
      </div>
    </div>

    
    <div class="step-panel" id="panel-1">
      <div class="math-card">
        <div class="equation-row">
          <span>White Fraction =</span>
          <div class="frac">
            <span class="frac-num">1</span>
            <span class="frac-den">1 + 1</span>
          </div>
          <span>=</span>
          <div class="frac">
            <span class="frac-num">1</span>
            <span class="frac-den">2</span>
          </div>
        </div>
        <div class="fraction-bar">
          <div class="bar-seg seg-black">½ Black</div>
          <div class="bar-seg seg-white">½ White</div>
        </div>
      </div>
    </div>

    
    <div class="step-panel" id="panel-2">
      <div class="math-card">
        <div class="calc-row">
          <div class="frac">
            <span class="frac-num">1</span>
            <span class="frac-den">2</span>
          </div>
          <span>× 480 =</span>
          <span class="result-badge">240 White 🐭</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" onclick="prevStep()">◀</button>
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
    <button class="ctrl-btn" onclick="nextStep()">▶</button>
  </div>

  <script>
    let current = 0;
    let isPlaying = true;
    let timer = null;
    const totalSteps = 3;
    const intervalTime = 4000;

    function render() {
      document.querySelectorAll('.step-btn').forEach((btn, idx) => {
        btn.classList.toggle('active', idx === current);
      });
      document.querySelectorAll('.step-panel').forEach((panel, idx) => {
        panel.classList.toggle('active', idx === current);
      });
    }

    function setStep(idx) {
      current = idx;
      render();
      resetTimer();
    }

    function nextStep() {
      current = (current + 1) % totalSteps;
      render();
      resetTimer();
    }

    function prevStep() {
      current = (current - 1 + totalSteps) % totalSteps;
      render();
      resetTimer();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        current = (current + 1) % totalSteps;
        render();
      }, intervalTime);
    }

    function resetTimer() {
      if (isPlaying) {
        startTimer();
      }
    }

    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">
  <title>Genotype vs Phenotype</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

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

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

    .header-row {
      display: grid;
      grid-template-columns: 1fr 60px 1fr;
      gap: 8px;
      margin-bottom: 12px;
      text-align: center;
    }

    .col-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .col-title.geno {
      color: #2563eb;
    }

    .col-title.pheno {
      color: #059669;
    }

    .main-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 80px 1fr;
      gap: 8px;
      align-items: center;
    }

    .card-col {
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 2;
    }

    .card-col.pheno-col {
      justify-content: space-around;
      height: 100%;
    }

    .item-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .item-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border-color: #cbd5e1;
    }

    .item-card.active {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

    .item-card.pheno-card.active {
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

    .item-card.dimmed {
      opacity: 0.35;
    }

    .badge-code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 18px;
      font-weight: 800;
      padding: 4px 8px;
      border-radius: 6px;
      background: #eff6ff;
      color: #1d4ed8;
      min-width: 38px;
      text-align: center;
    }

    .badge-code.recessive {
      background: #f1f5f9;
      color: #475569;
    }

    .label-group {
      display: flex;
      flex-direction: column;
    }

    .item-name {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

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

    .plant-icon {
      font-size: 24px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: #ecfdf5;
    }

    .plant-icon.short {
      font-size: 18px;
      background: #f8fafc;
    }

    .svg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .conn-path {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 2.5;
      stroke-linecap: round;
      transition: stroke 0.25s ease, stroke-width 0.25s ease, opacity 0.25s ease;
    }

    .conn-path.active {
      stroke: #10b981;
      stroke-width: 3.5;
      opacity: 1;
    }

    .conn-path.dimmed {
      opacity: 0.2;
    }

    .instructions {
      text-align: center;
      font-size: 12px;
      color: #64748b;
      margin-top: 10px;
      font-weight: 500;
    }

    @media (max-width: 420px) {
      .item-card {
        padding: 8px 8px;
        gap: 6px;
      }
      .badge-code {
        font-size: 16px;
        padding: 3px 6px;
        min-width: 32px;
      }
      .item-name {
        font-size: 12px;
      }
      .item-sub {
        font-size: 10px;
      }
      .col-title {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram">
    <div class="header-row">
      <div class="col-title geno">Genotype</div>
      <div></div>
      <div class="col-title pheno">Phenotype</div>
    </div>

    <div class="main-grid" id="gridArea">
      
      <div class="card-col">
        <div class="item-card" id="card-TT" data-geno="TT" data-pheno="tall">
          <div class="badge-code">TT</div>
          <div class="label-group">
            <span class="item-name">Homozygous</span>
            <span class="item-sub">Dominant</span>
          </div>
        </div>

        <div class="item-card" id="card-Tt" data-geno="Tt" data-pheno="tall">
          <div class="badge-code">Tt</div>
          <div class="label-group">
            <span class="item-name">Heterozygous</span>
            <span class="item-sub">Carrier of 't'</span>
          </div>
        </div>

        <div class="item-card" id="card-tt" data-geno="tt" data-pheno="short">
          <div class="badge-code recessive">tt</div>
          <div class="label-group">
            <span class="item-name">Homozygous</span>
            <span class="item-sub">Recessive</span>
          </div>
        </div>
      </div>

      
      <div></div>

      
      <div class="card-col pheno-col">
        <div class="item-card pheno-card" id="card-tall" data-pheno="tall">
          <div class="plant-icon">🌿</div>
          <div class="label-group">
            <span class="item-name" style="color: #059669;">Tall Plant</span>
            <span class="item-sub">Dominant Trait</span>
          </div>
        </div>

        <div class="item-card pheno-card" id="card-short" data-pheno="short">
          <div class="plant-icon short">🌱</div>
          <div class="label-group">
            <span class="item-name" style="color: #475569;">Short Plant</span>
            <span class="item-sub">Recessive Trait</span>
          </div>
        </div>
      </div>

      
      <svg class="svg-overlay" id="svgConnections">
        <path id="path-TT" class="conn-path" />
        <path id="path-Tt" class="conn-path" />
        <path id="path-tt" class="conn-path" />
      </svg>
    </div>

    <div class="instructions" id="hintText">Tap any box to highlight genetic expression</div>
  </div>

  <script>
    const svg = document.getElementById('svgConnections');
    const grid = document.getElementById('gridArea');
    const pathTT = document.getElementById('path-TT');
    const pathTt = document.getElementById('path-Tt');
    const pathtt = document.getElementById('path-tt');

    const cardTT = document.getElementById('card-TT');
    const cardTt = document.getElementById('card-Tt');
    const cardtt = document.getElementById('card-tt');
    const cardTall = document.getElementById('card-tall');
    const cardShort = document.getElementById('card-short');

    let selected = null;

    function updatePaths() {
      const gridRect = grid.getBoundingClientRect();

      function getRightMid(el) {
        const r = el.getBoundingClientRect();
        return {
          x: r.right - gridRect.left,
          y: r.top + r.height / 2 - gridRect.top
        };
      }

      function getLeftMid(el) {
        const r = el.getBoundingClientRect();
        return {
          x: r.left - gridRect.left,
          y: r.top + r.height / 2 - gridRect.top
        };
      }

      const pTT = getRightMid(cardTT);
      const pTt = getRightMid(cardTt);
      const ptt = getRightMid(cardtt);

      const pTall = getLeftMid(cardTall);
      const pShort = getLeftMid(cardShort);

      function makeBezier(p1, p2) {
        const dx = (p2.x - p1.x) * 0.55;
        return `M ${p1.x} ${p1.y} C ${p1.x + dx} ${p1.y}, ${p2.x - dx} ${p2.y}, ${p2.x} ${p2.y}`;
      }

      pathTT.setAttribute('d', makeBezier(pTT, pTall));
      pathTt.setAttribute('d', makeBezier(pTt, pTall));
      pathtt.setAttribute('d', makeBezier(ptt, pShort));
    }

    function applySelection(targetType, targetValue) {
      if (selected && selected.type === targetType && selected.value === targetValue) {
        // Reset to all active
        selected = null;
      } else {
        selected = { type: targetType, value: targetValue };
      }

      const allCards = [cardTT, cardTt, cardtt, cardTall, cardShort];
      const allPaths = [
        { el: pathTT, geno: 'TT', pheno: 'tall' },
        { el: pathTt, geno: 'Tt', pheno: 'tall' },
        { el: pathtt, geno: 'tt', pheno: 'short' }
      ];

      if (!selected) {
        allCards.forEach(c => {
          c.classList.remove('active', 'dimmed');
        });
        allPaths.forEach(p => {
          p.el.classList.remove('active', 'dimmed');
        });
        return;
      }

      allCards.forEach(card => {
        let match = false;
        if (selected.type === 'geno') {
          if (card.dataset.geno === selected.value) match = true;
          if (card.dataset.pheno && card.id.includes(cardTT.dataset.pheno) && selected.value === 'TT') match = true;
          if (card.dataset.pheno && card.id.includes(cardTt.dataset.pheno) && selected.value === 'Tt') match = true;
          if (card.dataset.pheno && card.id.includes(cardtt.dataset.pheno) && selected.value === 'tt') match = true;
        } else if (selected.type === 'pheno') {
          if (card.dataset.pheno === selected.value) match = true;
        }

        if (match) {
          card.classList.add('active');
          card.classList.remove('dimmed');
        } else {
          card.classList.remove('active');
          card.classList.add('dimmed');
        }
      });

      allPaths.forEach(p => {
        let match = false;
        if (selected.type === 'geno' && p.geno === selected.value) match = true;
        if (selected.type === 'pheno' && p.pheno === selected.value) match = true;

        if (match) {
          p.el.classList.add('active');
          p.el.classList.remove('dimmed');
        } else {
          p.el.classList.remove('active');
          p.el.classList.add('dimmed');
        }
      });
    }

    [cardTT, cardTt, cardtt].forEach(card => {
      card.addEventListener('click', () => {
        applySelection('geno', card.dataset.geno);
      });
    });

    [cardTall, cardShort].forEach(card => {
      card.addEventListener('click', () => {
        applySelection('pheno', card.dataset.pheno);
      });
    });

    window.addEventListener('resize', updatePaths);
    window.addEventListener('DOMContentLoaded', updatePaths);
    setTimeout(updatePaths, 50);
  </script>
</body>
</html>

UK-GCSE-SCIENCE-BIO-IVE-05-01

Aligned learning resources

Related diagrams