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

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      min-height: 100%;
      overflow-x: hidden;
    }

    .header-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 620px;
    }

    .step-pill-group {
      display: flex;
      gap: 6px;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 5px 12px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .step-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    }

    .play-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      transition: background 0.2s;
    }

    .play-btn:active {
      background: #e2e8f0;
    }

    .diagram-area {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .path-row {
      background: #f8fafc;
      border-radius: 10px;
      padding: 8px 10px;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      transition: border-color 0.3s ease, background 0.3s ease;
    }

    .path-label {
      font-size: 13px;
      font-weight: 700;
      color: #2563eb;
      width: 82px;
      flex-shrink: 0;
      line-height: 1.2;
    }

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

    .path-row.path-b .path-label {
      color: #7c3aed;
    }

    .formula-flow {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      flex-grow: 1;
      min-width: 0;
    }

    .matrix-group {
      display: inline-flex;
      align-items: center;
      padding: 2px 4px;
      border-radius: 6px;
      transition: background 0.3s ease, outline 0.3s ease;
    }

    .group-highlight-1 {
      background: rgba(37, 99, 235, 0.1);
      outline: 1.5px dashed #2563eb;
    }

    .group-highlight-2 {
      background: rgba(139, 92, 246, 0.12);
      outline: 1.5px dashed #7c3aed;
    }

    .mat {
      display: inline-flex;
      align-items: center;
      position: relative;
      padding: 0 4px;
      font-family: inherit;
    }

    .mat::before, .mat::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 3.5px;
      border-style: solid;
      border-color: #334155;
    }

    .mat::before {
      left: 0;
      border-width: 1.5px 0 1.5px 1.5px;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }

    .mat::after {
      right: 0;
      border-width: 1.5px 1.5px 1.5px 0;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }

    .mat-cols {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.25;
      padding: 2px 1px;
      min-width: 16px;
    }

    .op {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      margin: 0 1px;
    }

    .paren {
      font-size: 24px;
      font-weight: 300;
      color: #2563eb;
      line-height: 1;
      user-select: none;
    }

    .path-b .paren {
      color: #7c3aed;
    }

    .arrow {
      color: #94a3b8;
      font-size: 14px;
      font-weight: 700;
      margin: 0 2px;
      transition: color 0.3s ease;
      flex-shrink: 0;
    }

    .mat.result-mat {
      background: #ffffff;
    }

    .mat.final-mat {
      background: #fefce8;
    }
    .mat.final-mat::before, .mat.final-mat::after {
      border-color: #b45309;
      border-width: 1.5px;
    }

    /* Result Comparison Badge */
    .conclusion-panel {
      width: 100%;
      max-width: 620px;
      background: #fffbeb;
      border: 2px solid #eab308;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 6px rgba(234, 179, 8, 0.15);
      transition: border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
    }

    .conclusion-text {
      font-size: 14px;
      font-weight: 700;
      color: #713f12;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tag-badge {
      background: #b45309;
      color: #ffffff;
      padding: 3px 7px;
      border-radius: 5px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      white-space: nowrap;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .conclusion-mat {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #713f12;
    }

    .step-indicator-text {
      font-size: 13px;
      color: #475569;
      font-weight: 500;
      text-align: center;
      min-height: 18px;
      line-height: 1.3;
    }

    @media (max-width: 480px) {
      body {
        padding: 6px 4px;
        gap: 6px;
      }
      .header-controls {
        margin-bottom: 2px;
      }
      .step-btn {
        padding: 4px 8px;
        font-size: 11.5px;
      }
      .path-row {
        padding: 6px 4px;
        border-radius: 8px;
      }
      .path-label {
        font-size: 11px;
        width: 52px;
      }
      .path-label-sub {
        font-size: 9.5px;
      }
      .formula-flow {
        gap: 1px;
      }
      .matrix-group {
        padding: 1px 2px;
      }
      .mat {
        padding: 0 2px;
      }
      .mat-cols {
        font-size: 11px;
        min-width: 11px;
        line-height: 1.15;
        padding: 1px 0;
      }
      .op {
        font-size: 11px;
        margin: 0;
      }
      .arrow {
        font-size: 11px;
        margin: 0 1px;
      }
      .paren {
        font-size: 17px;
      }
      .conclusion-panel {
        padding: 6px 8px;
      }
      .conclusion-text {
        font-size: 11.5px;
        gap: 5px;
      }
      .tag-badge {
        font-size: 9.5px;
        padding: 2px 5px;
      }
      .conclusion-mat {
        font-size: 11px;
        gap: 4px;
      }
      .step-indicator-text {
        font-size: 11.5px;
      }
    }

    @media (max-width: 360px) {
      .path-label {
        font-size: 10px;
        width: 46px;
      }
      .path-label-sub {
        font-size: 8.5px;
      }
      .mat-cols {
        font-size: 10px;
        min-width: 9.5px;
      }
      .op, .arrow {
        font-size: 9.5px;
      }
      .paren {
        font-size: 15px;
      }
      .step-btn {
        padding: 3px 6px;
        font-size: 10.5px;
      }
    }
  </style>
</head>
<body>

  
  <div class="header-controls">
    <div class="step-pill-group">
      <button class="step-btn active" data-step="0">1. Group</button>
      <button class="step-btn" data-step="1">2. Add Inside</button>
      <button class="step-btn" data-step="2">3. Equals</button>
    </div>
    <button class="play-btn" id="playBtn" title="Play / Pause">⏸</button>
  </div>

  
  <div class="diagram-area">
    
    
    <div class="path-row path-a" id="row1">
      <div class="path-label">
        (A + B) + C
        <span class="path-label-sub">Add left first</span>
      </div>
      <div class="formula-flow">
        
        <div class="matrix-group" id="grp1">
          <span class="paren">(</span>
          <div class="mat"><div class="mat-cols"><span>1</span><span>2</span></div></div>
          <span class="op">+</span>
          <div class="mat"><div class="mat-cols"><span>3</span><span>-1</span></div></div>
          <span class="paren">)</span>
        </div>

        <span class="op">+</span>
        <div class="mat"><div class="mat-cols"><span>4</span><span>5</span></div></div>

        <span class="arrow" id="arr1">→</span>

        
        <div class="mat result-mat" id="stage2_1" style="opacity: 0.4; transition: opacity 0.3s;">
          <div class="mat-cols" style="color:#2563eb;"><span>4</span><span>1</span></div>
        </div>

        <span class="op" id="plus2_1" style="opacity: 0.4; transition: opacity 0.3s;">+</span>
        
        <div class="mat" id="c2_1" style="opacity: 0.4; transition: opacity 0.3s;">
          <div class="mat-cols"><span>4</span><span>5</span></div>
        </div>

        <span class="arrow" id="arr1_final">→</span>

        
        <div class="mat final-mat" id="res1" style="opacity: 0.4; transition: opacity 0.3s;">
          <div class="mat-cols" style="color:#b45309;font-weight:700;"><span>8</span><span>6</span></div>
        </div>

      </div>
    </div>

    
    <div class="path-row path-b" id="row2">
      <div class="path-label">
        A + (B + C)
        <span class="path-label-sub">Add right first</span>
      </div>
      <div class="formula-flow">
        
        <div class="mat"><div class="mat-cols"><span>1</span><span>2</span></div></div>
        <span class="op">+</span>

        <div class="matrix-group" id="grp2">
          <span class="paren">(</span>
          <div class="mat"><div class="mat-cols"><span>3</span><span>-1</span></div></div>
          <span class="op">+</span>
          <div class="mat"><div class="mat-cols"><span>4</span><span>5</span></div></div>
          <span class="paren">)</span>
        </div>

        <span class="arrow" id="arr2">→</span>

        
        <div class="mat" id="a2_2" style="opacity: 0.4; transition: opacity 0.3s;">
          <div class="mat-cols"><span>1</span><span>2</span></div>
        </div>

        <span class="op" id="plus2_2" style="opacity: 0.4; transition: opacity 0.3s;">+</span>

        <div class="mat result-mat" id="stage2_2" style="opacity: 0.4; transition: opacity 0.3s;">
          <div class="mat-cols" style="color:#7c3aed;"><span>7</span><span>4</span></div>
        </div>

        <span class="arrow" id="arr2_final">→</span>

        
        <div class="mat final-mat" id="res2" style="opacity: 0.4; transition: opacity 0.3s;">
          <div class="mat-cols" style="color:#b45309;font-weight:700;"><span>8</span><span>6</span></div>
        </div>

      </div>
    </div>

    
    <div class="conclusion-panel" id="conclPanel">
      <div class="conclusion-text">
        <span class="tag-badge">✓ ASSOCIATIVE</span>
        <span>(A + B) + C = A + (B + C)</span>
      </div>
      <div class="conclusion-mat">
        <span>Sum:</span>
        <div class="mat final-mat">
          <div class="mat-cols" style="color:#854d0e;font-weight:700;"><span>8</span><span>6</span></div>
        </div>
      </div>
    </div>

  </div>

  <div class="step-indicator-text" id="statusText">
    Grouping does not change the final sum
  </div>

  <script>
    const stepBtns = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');
    const grp1 = document.getElementById('grp1');
    const grp2 = document.getElementById('grp2');
    
    const arr1 = document.getElementById('arr1');
    const stage2_1 = document.getElementById('stage2_1');
    const plus2_1 = document.getElementById('plus2_1');
    const c2_1 = document.getElementById('c2_1');

    const arr2 = document.getElementById('arr2');
    const a2_2 = document.getElementById('a2_2');
    const plus2_2 = document.getElementById('plus2_2');
    const stage2_2 = document.getElementById('stage2_2');

    const arr1_final = document.getElementById('arr1_final');
    const res1 = document.getElementById('res1');
    const arr2_final = document.getElementById('arr2_final');
    const res2 = document.getElementById('res2');
    const conclPanel = document.getElementById('conclPanel');
    const statusText = document.getElementById('statusText');

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const descriptions = [
      "Step 1: Group (A+B) or (B+C) with parentheses first",
      "Step 2: Add matrices inside parentheses to find intermediate sum",
      "Step 3: Both paths yield the identical result [8; 6]"
    ];

    function applyStep(step) {
      currentStep = step;
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });
      statusText.textContent = descriptions[step];

      if (step === 0) {
        grp1.className = 'matrix-group group-highlight-1';
        grp2.className = 'matrix-group group-highlight-2';

        arr1.style.color = '#94a3b8';
        stage2_1.style.opacity = '0.38';
        plus2_1.style.opacity = '0.38';
        c2_1.style.opacity = '0.38';

        arr2.style.color = '#94a3b8';
        a2_2.style.opacity = '0.38';
        plus2_2.style.opacity = '0.38';
        stage2_2.style.opacity = '0.38';

        arr1_final.style.color = '#94a3b8';
        res1.style.opacity = '0.38';
        arr2_final.style.color = '#94a3b8';
        res2.style.opacity = '0.38';

        conclPanel.style.borderColor = '#e2e8f0';
        conclPanel.style.background = '#f8fafc';
        conclPanel.style.opacity = '0.75';
      } else if (step === 1) {
        grp1.className = 'matrix-group';
        grp2.className = 'matrix-group';

        arr1.style.color = '#2563eb';
        stage2_1.style.opacity = '1';
        plus2_1.style.opacity = '1';
        c2_1.style.opacity = '1';

        arr2.style.color = '#7c3aed';
        a2_2.style.opacity = '1';
        plus2_2.style.opacity = '1';
        stage2_2.style.opacity = '1';

        arr1_final.style.color = '#94a3b8';
        res1.style.opacity = '0.38';
        arr2_final.style.color = '#94a3b8';
        res2.style.opacity = '0.38';

        conclPanel.style.borderColor = '#e2e8f0';
        conclPanel.style.background = '#f8fafc';
        conclPanel.style.opacity = '0.75';
      } else if (step === 2) {
        grp1.className = 'matrix-group';
        grp2.className = 'matrix-group';

        arr1.style.color = '#94a3b8';
        stage2_1.style.opacity = '0.75';
        plus2_1.style.opacity = '0.75';
        c2_1.style.opacity = '0.75';

        arr2.style.color = '#94a3b8';
        a2_2.style.opacity = '0.75';
        plus2_2.style.opacity = '0.75';
        stage2_2.style.opacity = '0.75';

        arr1_final.style.color = '#b45309';
        res1.style.opacity = '1';
        arr2_final.style.color = '#b45309';
        res2.style.opacity = '1';

        conclPanel.style.borderColor = '#eab308';
        conclPanel.style.background = '#fffbeb';
        conclPanel.style.opacity = '1';
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % 3;
      applyStep(next);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
      playBtn.textContent = '⏸';
      isPlaying = true;
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      playBtn.textContent = '▶';
      isPlaying = false;
    }

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    stepBtns.forEach((btn) => {
      btn.addEventListener('click', (e) => {
        pauseAutoPlay();
        const step = parseInt(e.target.getAttribute('data-step'), 10);
        applyStep(step);
      });
    });

    // Initialize Step 0
    applyStep(0);
    startAutoPlay();
  </script>
</body>
</html>

Properties of Matrix Addition: Commutative and Associative

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      background: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px 8px;
    }
    .diagram-area {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Equation Layout */
    .equation-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      flex-wrap: nowrap;
    }
    .operator {
      font-size: 22px;
      font-weight: 700;
      color: #64748b;
      user-select: none;
      padding: 0 2px;
    }

    /* Matrix Container */
    .matrix-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .matrix-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }
    .matrix {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, 42px);
      grid-template-rows: repeat(2, 38px);
      gap: 4px;
      padding: 4px 8px;
      background: #ffffff;
      border-radius: 4px;
    }
    /* Rounded Matrix Brackets */
    .matrix::before, .matrix::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 6px;
      border: 2px solid #1e293b;
      pointer-events: none;
    }
    .matrix::before {
      left: 0;
      border-right: none;
      border-radius: 6px 0 0 6px;
    }
    .matrix::after {
      right: 0;
      border-left: none;
      border-radius: 0 6px 6px 0;
    }

    /* Matrix Cells */
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      font-weight: 700;
      border-radius: 6px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      color: #1e293b;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    }

    /* Color States for 4 Entries */
    /* TL: Blue #2563eb */
    .cell.c-tl.active {
      background: #eff6ff;
      border-color: #2563eb;
      color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }
    /* TR: Teal #0d9488 */
    .cell.c-tr.active {
      background: #f0fdfa;
      border-color: #0d9488;
      color: #0d9488;
      box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
    }
    /* BL: Purple #7c3aed */
    .cell.c-bl.active {
      background: #f5f3ff;
      border-color: #7c3aed;
      color: #7c3aed;
      box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
    }
    /* BR: Amber #d97706 */
    .cell.c-br.active {
      background: #fffbeb;
      border-color: #d97706;
      color: #d97706;
      box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
    }

    /* Dimmed state when single entry focused */
    .dimmed {
      opacity: 0.35;
    }

    /* Live Equation Display */
    .calc-card {
      width: 100%;
      min-height: 48px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 16px;
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: all 0.25s ease;
    }
    .math-expr {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-right: 6px;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      width: 100%;
    }
    .btn-tab {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      user-select: none;
    }
    .btn-tab:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }
    .btn-tab.active {
      background: #1e293b;
      border-color: #1e293b;
      color: #ffffff;
    }

    @media (max-width: 440px) {
      .matrix {
        grid-template-columns: repeat(2, 34px);
        grid-template-rows: repeat(2, 32px);
        gap: 3px;
        padding: 3px 5px;
      }
      .cell {
        font-size: 15px;
      }
      .operator {
        font-size: 18px;
      }
      .matrix-label {
        font-size: 11px;
      }
      .btn-tab {
        padding: 5px 8px;
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    
    <div class="equation-row">
      
      <div class="matrix-wrap">
        <div class="matrix-label">A</div>
        <div class="matrix" id="matA">
          <div class="cell c-tl active" data-pos="0">2</div>
          <div class="cell c-tr active" data-pos="1">5</div>
          <div class="cell c-bl active" data-pos="2">-1</div>
          <div class="cell c-br active" data-pos="3">4</div>
        </div>
      </div>

      <div class="operator">+</div>

      
      <div class="matrix-wrap">
        <div class="matrix-label">B</div>
        <div class="matrix" id="matB">
          <div class="cell c-tl active" data-pos="0">3</div>
          <div class="cell c-tr active" data-pos="1">1</div>
          <div class="cell c-bl active" data-pos="2">7</div>
          <div class="cell c-br active" data-pos="3">-2</div>
        </div>
      </div>

      <div class="operator">=</div>

      
      <div class="matrix-wrap">
        <div class="matrix-label">A + B</div>
        <div class="matrix" id="matRes">
          <div class="cell c-tl active" data-pos="0">5</div>
          <div class="cell c-tr active" data-pos="1">6</div>
          <div class="cell c-bl active" data-pos="2">6</div>
          <div class="cell c-br active" data-pos="3">2</div>
        </div>
      </div>
    </div>

    
    <div class="calc-card" id="calcCard">
      <span style="color: #64748b; font-size: 14px;">Corresponding entries add directly</span>
    </div>

    
    <div class="controls">
      <button class="btn-tab active" data-step="all">All Entries</button>
      <button class="btn-tab" data-step="0" style="border-left: 3px solid #2563eb;">Top-Left</button>
      <button class="btn-tab" data-step="1" style="border-left: 3px solid #0d9488;">Top-Right</button>
      <button class="btn-tab" data-step="2" style="border-left: 3px solid #7c3aed;">Bot-Left</button>
      <button class="btn-tab" data-step="3" style="border-left: 3px solid #d97706;">Bot-Right</button>
    </div>
  </div>

  <script>
    const stepsData = [
      {
        pos: '0',
        name: 'Top-Left',
        color: '#2563eb',
        bg: '#eff6ff',
        expr: '2 + 3 = 5'
      },
      {
        pos: '1',
        name: 'Top-Right',
        color: '#0d9488',
        bg: '#f0fdfa',
        expr: '5 + 1 = 6'
      },
      {
        pos: '2',
        name: 'Bottom-Left',
        color: '#7c3aed',
        bg: '#f5f3ff',
        expr: '(-1) + 7 = 6'
      },
      {
        pos: '3',
        name: 'Bottom-Right',
        color: '#d97706',
        bg: '#fffbeb',
        expr: '4 + (-2) = 2'
      }
    ];

    const allCells = document.querySelectorAll('.cell');
    const tabs = document.querySelectorAll('.btn-tab');
    const calcCard = document.getElementById('calcCard');

    function setStep(step) {
      tabs.forEach(tab => {
        tab.classList.toggle('active', tab.dataset.step === step);
      });

      if (step === 'all') {
        allCells.forEach(cell => {
          cell.classList.add('active');
          cell.classList.remove('dimmed');
        });
        calcCard.style.borderColor = '#e2e8f0';
        calcCard.innerHTML = '<span style="color: #64748b; font-size: 14px;">Corresponding entries add directly</span>';
      } else {
        const idx = parseInt(step, 10);
        const data = stepsData[idx];

        allCells.forEach(cell => {
          if (cell.dataset.pos === step) {
            cell.classList.add('active');
            cell.classList.remove('dimmed');
          } else {
            cell.classList.remove('active');
            cell.classList.add('dimmed');
          }
        });

        calcCard.style.borderColor = data.color;
        calcCard.innerHTML = `
          <div class="math-expr">
            <span class="tag" style="background: ${data.bg}; color: ${data.color}; border: 1px solid ${data.color};">${data.name}</span>
            <span style="color: ${data.color}; font-size: 18px; font-weight: 700;">${data.expr}</span>
          </div>
        `;
      }
    }

    tabs.forEach(tab => {
      tab.addEventListener('click', () => setStep(tab.dataset.step));
    });

    allCells.forEach(cell => {
      cell.addEventListener('click', () => {
        setStep(cell.dataset.pos);
      });
    });
  </script>
</body>
</html>

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 8px;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Equation Rows - clean layout without redundant outer card borders */
    .calc-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 4px 0;
    }

    .row-label {
      font-size: 13px;
      font-weight: 700;
      color: #1e3a8a;
      width: 38px;
      text-align: right;
      margin-right: 2px;
      flex-shrink: 0;
    }

    .op-symbol {
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      flex-shrink: 0;
      text-align: center;
      width: 10px;
    }

    /* Matrix component */
    .matrix-wrap {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .matrix {
      display: inline-grid;
      grid-template-columns: repeat(2, 25px);
      grid-template-rows: repeat(2, 23px);
      gap: 2px;
      padding: 2px 4px;
      position: relative;
      flex-shrink: 0;
    }

    .matrix::before,
    .matrix::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px;
      border: 1.5px solid #1e3a8a;
      pointer-events: none;
    }
    .matrix::before {
      left: 0;
      border-right: none;
      border-radius: 3px 0 0 3px;
    }
    .matrix::after {
      right: 0;
      border-left: none;
      border-radius: 0 3px 3px 0;
    }

    /* Intermediate expanded matrix */
    .matrix.expanded {
      grid-template-columns: repeat(2, 38px);
      grid-template-rows: repeat(2, 23px);
      gap: 2px;
      padding: 2px 5px;
    }

    /* Matrix Cells */
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      border-radius: 3px;
      background: transparent;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .matrix.expanded .cell {
      font-size: 10.5px;
      letter-spacing: -0.3px;
    }

    .cell.active-0 { background: #dbeafe; color: #1e3a8a; } /* Row 1, Col 1 */
    .cell.active-1 { background: #fef3c7; color: #92400e; } /* Row 1, Col 2 */
    .cell.active-2 { background: #fce7f3; color: #9d174d; } /* Row 2, Col 1 */
    .cell.active-3 { background: #e0e7ff; color: #3730a3; } /* Row 2, Col 2 */

    .matrix.result .cell {
      font-weight: 700;
    }
    .matrix.result .cell.active-0,
    .matrix.result .cell.active-1,
    .matrix.result .cell.active-2,
    .matrix.result .cell.active-3 {
      background: #bbf7d0;
      color: #166534;
    }

    /* Equal comparison badge */
    .badge-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #ecfdf5;
      border: 1.5px solid #059669;
      border-radius: 20px;
      padding: 4px 12px;
      color: #065f46;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 1px 2px rgba(5, 150, 105, 0.1);
    }

    .check-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      background: #059669;
      color: #ffffff;
      border-radius: 50%;
      font-size: 10px;
      font-weight: 900;
    }

    /* Interactive Position selector controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      flex-wrap: wrap;
      margin-top: 2px;
    }

    .pos-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      padding: 4px 7px;
      border-radius: 6px;
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .pos-btn .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      display: inline-block;
    }
    .pos-btn:nth-child(1) .dot { background: #3b82f6; }
    .pos-btn:nth-child(2) .dot { background: #f59e0b; }
    .pos-btn:nth-child(3) .dot { background: #ec4899; }
    .pos-btn:nth-child(4) .dot { background: #6366f1; }

    .pos-btn.active {
      border-color: #1e3a8a;
      background: #1e3a8a;
      color: #ffffff;
    }

    .pos-btn.all-btn.active {
      background: #059669;
      border-color: #059669;
      color: #ffffff;
    }

    /* Compact responsiveness for 350px mobile screens */
    @media (max-width: 380px) {
      .calc-row {
        gap: 3px;
      }
      .row-label {
        font-size: 11px;
        width: 28px;
        margin-right: 0;
      }
      .op-symbol {
        font-size: 13px;
        width: 8px;
      }
      .matrix {
        grid-template-columns: repeat(2, 21px);
        grid-template-rows: repeat(2, 20px);
        padding: 1px 3px;
      }
      .matrix.expanded {
        grid-template-columns: repeat(2, 32px);
        grid-template-rows: repeat(2, 20px);
        padding: 1px 4px;
      }
      .cell {
        font-size: 10.5px;
      }
      .matrix.expanded .cell {
        font-size: 9px;
      }
      .badge-bar {
        font-size: 11px;
        padding: 3px 10px;
      }
      .pos-btn {
        font-size: 10.5px;
        padding: 3px 6px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram">
    
    <div class="calc-row" id="rowAB">
      <span class="row-label">A + B</span>
      <div class="matrix" title="Matrix A">
        <div class="cell" data-idx="0">4</div>
        <div class="cell" data-idx="1">-2</div>
        <div class="cell" data-idx="2">0</div>
        <div class="cell" data-idx="3">7</div>
      </div>
      <span class="op-symbol">+</span>
      <div class="matrix" title="Matrix B">
        <div class="cell" data-idx="0">1</div>
        <div class="cell" data-idx="1">8</div>
        <div class="cell" data-idx="2">-5</div>
        <div class="cell" data-idx="3">3</div>
      </div>
      <span class="op-symbol">=</span>
      <div class="matrix expanded" title="Entry-wise Addition">
        <div class="cell" data-idx="0">4+1</div>
        <div class="cell" data-idx="1">-2+8</div>
        <div class="cell" data-idx="2">0+(-5)</div>
        <div class="cell" data-idx="3">7+3</div>
      </div>
      <span class="op-symbol">=</span>
      <div class="matrix result" title="Sum">
        <div class="cell" data-idx="0">5</div>
        <div class="cell" data-idx="1">6</div>
        <div class="cell" data-idx="2">-5</div>
        <div class="cell" data-idx="3">10</div>
      </div>
    </div>

    
    <div class="badge-bar">
      <span class="check-icon">✓</span>
      <span>A + B = B + A</span>
    </div>

    
    <div class="calc-row" id="rowBA">
      <span class="row-label">B + A</span>
      <div class="matrix" title="Matrix B">
        <div class="cell" data-idx="0">1</div>
        <div class="cell" data-idx="1">8</div>
        <div class="cell" data-idx="2">-5</div>
        <div class="cell" data-idx="3">3</div>
      </div>
      <span class="op-symbol">+</span>
      <div class="matrix" title="Matrix A">
        <div class="cell" data-idx="0">4</div>
        <div class="cell" data-idx="1">-2</div>
        <div class="cell" data-idx="2">0</div>
        <div class="cell" data-idx="3">7</div>
      </div>
      <span class="op-symbol">=</span>
      <div class="matrix expanded" title="Entry-wise Addition">
        <div class="cell" data-idx="0">1+4</div>
        <div class="cell" data-idx="1">8+(-2)</div>
        <div class="cell" data-idx="2">-5+0</div>
        <div class="cell" data-idx="3">3+7</div>
      </div>
      <span class="op-symbol">=</span>
      <div class="matrix result" title="Sum">
        <div class="cell" data-idx="0">5</div>
        <div class="cell" data-idx="1">6</div>
        <div class="cell" data-idx="2">-5</div>
        <div class="cell" data-idx="3">10</div>
      </div>
    </div>

    
    <div class="controls">
      <button type="button" class="pos-btn" onclick="selectPos(0)"><span class="dot"></span> Row 1, Col 1</button>
      <button type="button" class="pos-btn" onclick="selectPos(1)"><span class="dot"></span> Row 1, Col 2</button>
      <button type="button" class="pos-btn" onclick="selectPos(2)"><span class="dot"></span> Row 2, Col 1</button>
      <button type="button" class="pos-btn" onclick="selectPos(3)"><span class="dot"></span> Row 2, Col 2</button>
      <button type="button" class="pos-btn all-btn active" onclick="selectPos(-1)">All Entries</button>
    </div>
  </div>

  <script>
    const cells = document.querySelectorAll('.cell');
    const buttons = document.querySelectorAll('.pos-btn');

    function selectPos(idx) {
      buttons.forEach((btn, i) => {
        if (idx === -1) {
          btn.classList.toggle('active', i === 4);
        } else {
          btn.classList.toggle('active', i === idx);
        }
      });

      cells.forEach(cell => {
        const cellIdx = parseInt(cell.getAttribute('data-idx'), 10);
        cell.className = 'cell';
        if (idx === -1) {
          cell.classList.add(`active-${cellIdx}`);
        } else if (cellIdx === idx) {
          cell.classList.add(`active-${idx}`);
        }
      });
    }

    // Direct tapping on cells to highlight that position
    cells.forEach(cell => {
      cell.addEventListener('click', () => {
        const idx = parseInt(cell.getAttribute('data-idx'), 10);
        selectPos(idx);
      });
    });

    // Initialize with all entries highlighted
    selectPos(-1);
  </script>
</body>
</html>

HSN.VM.C.9

Aligned learning resources

Related diagrams