Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Every smartphone processor packs billions of microscopic switches, and having even two extra logic gates per sub-circuit adds heat, drains battery life, and slows down clock speeds.

A **Boolean expression** is an algebraic formula containing binary variables (taking values $0$ or $1$) connected by logic operations like **AND** (multiplication, $\cdot$), **OR** (addition, $+$), and **NOT** (inversion, $\overline{A}$).

<!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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .nav-bar {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }
    .step-tab {
      flex: 1;
      padding: 6px 4px;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #6b7280;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }
    .step-tab.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 200px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-card {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .step-card.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .math-display {
      font-size: 26px;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .law-badge {
      margin-top: 14px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 10px;
      border-radius: 20px;
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .gate-meter {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      padding: 10px 16px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      justify-content: space-between;
    }
    .gate-icons {
      display: flex;
      gap: 6px;
    }
    .gate-chip {
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #cbd5e1;
      transition: all 0.3s ease;
    }
    .gate-chip.dim {
      opacity: 0.2;
      text-decoration: line-through;
    }
    .gate-chip.active-chip {
      background: #dcfce7;
      color: #166534;
      border-color: #86efac;
    }

    .controls {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .btn-ctrl {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      transition: background 0.2s ease;
    }
    .btn-ctrl:hover {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  
  <div class="nav-bar">
    <button class="step-tab active" id="tab0">1</button>
    <button class="step-tab" id="tab1">2</button>
    <button class="step-tab" id="tab2">3</button>
    <button class="step-tab" id="tab3">4</button>
  </div>

  
  <div class="stage">
    <div class="step-card step active" id="step0">
      <div class="math-display" id="eq0"></div>
      <div class="law-badge">Original Expression</div>
    </div>

    <div class="step-card step" id="step1">
      <div class="math-display" id="eq1"></div>
      <div class="law-badge">Distributive Law</div>
    </div>

    <div class="step-card step" id="step2">
      <div class="math-display" id="eq2"></div>
      <div class="law-badge">Inverse Law</div>
    </div>

    <div class="step-card step" id="step3">
      <div class="math-display" id="eq3"></div>
      <div class="law-badge">Identity Law</div>
    </div>
  </div>

  
  <div class="gate-meter">
    <span style="font-size: 13px; font-weight: 600; color: #64748b;">Hardware Cost</span>
    <div class="gate-icons" id="chips">
      <span class="gate-chip" id="g1">AND</span>
      <span class="gate-chip" id="g2">NOT</span>
      <span class="gate-chip" id="g3">AND</span>
      <span class="gate-chip" id="g4">OR</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-ctrl" id="prevBtn">◀</button>
    <button class="btn-ctrl" id="playBtn">⏸</button>
    <button class="btn-ctrl" id="nextBtn">▶</button>
  </div>

  <script>
    // KaTeX Math Rendering
    katex.render("Q = A \\cdot B + A \\cdot \\overline{B}", document.getElementById('eq0'));
    katex.render("Q = A \\cdot (B + \\overline{B})", document.getElementById('eq1'));
    katex.render("Q = A \\cdot (1)", document.getElementById('eq2'));
    katex.render("Q = A", document.getElementById('eq3'));

    const gateStates = [
      [false, false, false, false], // 4 gates
      [false, false, true, false],  // 3 gates (1 AND, 1 NOT, 1 OR)
      [false, true, true, true],   // 1 gate (1 AND)
      [true, true, true, true]     // 0 gates (pure wire)
    ];

    const chips = [
      document.getElementById('g1'),
      document.getElementById('g2'),
      document.getElementById('g3'),
      document.getElementById('g4')
    ];

    const tabs = [
      document.getElementById('tab0'),
      document.getElementById('tab1'),
      document.getElementById('tab2'),
      document.getElementById('tab3')
    ];

    function updateVisuals(idx) {
      tabs.forEach((t, i) => t.classList.toggle('active', i === idx));
      chips.forEach((c, i) => {
        const isDim = gateStates[idx][i];
        c.classList.toggle('dim', isDim);
      });
    }

    const player = new StepPlayer('.step', {
      interval: 3500,
      onChange: (idx) => updateVisuals(idx)
    });

    tabs.forEach((tab, idx) => {
      onTap(tab, () => {
        player.pause();
        player.goTo(idx);
        document.getElementById('playBtn').textContent = '▶';
      });
    });

    onTap(document.getElementById('playBtn'), () => {
      player.toggle();
      document.getElementById('playBtn').textContent = player.playing ? '⏸' : '▶';
    });

    onTap(document.getElementById('prevBtn'), () => {
      player.pause();
      player.prev();
      document.getElementById('playBtn').textContent = '▶';
    });

    onTap(document.getElementById('nextBtn'), () => {
      player.pause();
      player.next();
      document.getElementById('playBtn').textContent = '▶';
    });

    player.start();
  </script>
</body>
</html>

How do we methodically turn a messy circuit equation into its sleekest, most efficient form?

In 1854, English mathematician George Boole formalized logic into algebra to systematically test the truth of philosophical arguments without natural language ambiguities.

Single-variable operations follow four essential pairs of rules that form the building blocks of every algebraic simplification.

The **Identity Laws** state that combining a variable with an identity element preserves its state: $A \cdot 1 = A$ (AND identity) and $A + 0 = A$ (OR identity).

The **Idempotent Laws** show that redundant identical inputs collapse to a single variable: $A \cdot A = A$ and $A + A = A$.

The **Complement Laws** combine a variable with its exact inverse: $A \cdot \overline{A} = 0$ (Law of Contradiction) and $A + \overline{A} = 1$ (Law of **Excluded Middle**).

The **Idempotent Laws** show that redundant identical inputs collapse into a single variable: $A \cdot A = A$ and $A + A = A$.

The **Complement Laws** combine a variable with its logical inverse to produce fixed constants: $A \cdot \overline{A} = 0$ (Law of Contradiction) and $A + \overline{A} = 1$ (Law of **Excluded Middle**).

<!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: 100vh;
      padding: 16px;
      user-select: none;
    }

    .diagram {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Interactive Switch for Variable A */
    .input-section {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 20px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .var-label {
      font-size: 18px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .toggle-group {
      display: flex;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 8px;
      gap: 2px;
    }

    .toggle-btn {
      border: none;
      background: transparent;
      padding: 6px 16px;
      font-size: 15px;
      font-weight: 700;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .toggle-btn.active {
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(34, 183, 255, 0.3);
    }

    /* Law Visual Cards */
    .law-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .law-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .expression-row {
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #f8fafc;
      border: 1px solid #edf2f7;
      border-radius: 10px;
      padding: 12px 8px;
      font-size: 20px;
      font-weight: 700;
      font-family: "SF Mono", Monaco, Inconsolata, monospace;
    }

    .term {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      min-width: 44px;
    }

    .term-sym {
      color: #64748b;
      font-size: 14px;
      font-weight: 600;
    }

    .term-val {
      font-size: 22px;
      color: #1e2945;
      transition: color 0.2s ease;
    }

    .term-val.high { color: #0284c7; }
    .term-val.low { color: #94a3b8; }

    .op {
      color: #94a3b8;
      font-size: 20px;
    }

    .equals {
      color: #64748b;
    }

    .result-badge {
      min-width: 48px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 20px;
      font-weight: 800;
      transition: all 0.25s ease;
    }

    .result-0 {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #cbd5e1;
    }

    .result-1 {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .overline {
      text-decoration: overline;
    }
  </style>
</head>
<body>

  <div class="diagram">
    
    <div class="input-section">
      <div class="var-label">
        <span>Input Variable:</span>
        <span style="color:#0284c7;">A</span>
      </div>
      <div class="toggle-group">
        <button class="toggle-btn" id="btn0" onclick="setA(0)">0</button>
        <button class="toggle-btn active" id="btn1" onclick="setA(1)">1</button>
      </div>
    </div>

    
    <div class="law-card">
      <div class="law-header">
        <span>Contradiction</span>
        <span>A · Ā = 0</span>
      </div>
      <div class="expression-row">
        <div class="term">
          <span class="term-sym">A</span>
          <span class="term-val high" id="and-a">1</span>
        </div>
        <span class="op">·</span>
        <div class="term">
          <span class="term-sym"><span class="overline">A</span></span>
          <span class="term-val low" id="and-nota">0</span>
        </div>
        <span class="equals">=</span>
        <div class="result-badge result-0">0</div>
      </div>
    </div>

    
    <div class="law-card">
      <div class="law-header">
        <span>Excluded Middle</span>
        <span>A + Ā = 1</span>
      </div>
      <div class="expression-row">
        <div class="term">
          <span class="term-sym">A</span>
          <span class="term-val high" id="or-a">1</span>
        </div>
        <span class="op">+</span>
        <div class="term">
          <span class="term-sym"><span class="overline">A</span></span>
          <span class="term-val low" id="or-nota">0</span>
        </div>
        <span class="equals">=</span>
        <div class="result-badge result-1">1</div>
      </div>
    </div>
  </div>

  <script>
    function setA(val) {
      const notVal = val === 1 ? 0 : 1;

      // Update buttons
      document.getElementById('btn0').classList.toggle('active', val === 0);
      document.getElementById('btn1').classList.toggle('active', val === 1);

      // Update AND row
      const andA = document.getElementById('and-a');
      const andNotA = document.getElementById('and-nota');
      andA.textContent = val;
      andA.className = 'term-val ' + (val ? 'high' : 'low');
      andNotA.textContent = notVal;
      andNotA.className = 'term-val ' + (notVal ? 'high' : 'low');

      // Update OR row
      const orA = document.getElementById('or-a');
      const orNotA = document.getElementById('or-nota');
      orA.textContent = val;
      orA.className = 'term-val ' + (val ? 'high' : 'low');
      orNotA.textContent = notVal;
      orNotA.className = 'term-val ' + (notVal ? 'high' : 'low');
    }
  </script>
</body>
</html>

What happens when multiple variables interact across parentheses and combined operators?

The **Commutative and Associative Laws** ensure that order and grouping do not affect the logical outcome: $A \cdot B = B \cdot A$, $A + B = B + A$, $(A \cdot B) \cdot C = A \cdot (B \cdot C)$, and $(A + B) + C = A + (B + C)$.

Under the **Distributive Laws**, multiplication distributes over addition just like in standard algebra: $A \cdot (B + C) = A \cdot B + A \cdot C$.

Critically in Boolean algebra, addition also distributes over multiplication: $A + (B \cdot C) = (A + B) \cdot (A + C)$, a second distributive property with no equivalent in regular school algebra.

<!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">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .top-bar {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;
    }

    .var-pill {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      user-select: none;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }
    .var-pill:hover { border-color: #22b7ff; }
    .var-val {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 10px;
      font-size: 13px;
      font-weight: bold;
      color: #fff;
    }
    .val-0 { background: #94a3b8; }
    .val-1 { background: #22b7ff; }

    .eval-row {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      background: #fff;
      border-radius: 12px;
      padding: 10px 16px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }
    .eval-side {
      text-align: center;
      font-size: 15px;
    }
    .eval-math {
      font-size: 15px;
      margin-bottom: 2px;
    }
    .eval-res {
      font-weight: 700;
      font-size: 16px;
    }
    .eval-eq {
      font-size: 20px;
      font-weight: 700;
      color: #22b7ff;
    }

    .stepper-box {
      width: 100%;
      background: #fff;
      border-radius: 12px;
      padding: 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .nav-tabs {
      display: flex;
      gap: 6px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .step-btn {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #22b7ff;
      color: #fff;
      border-color: #22b7ff;
    }

    .display-area {
      min-height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
      text-align: center;
    }

    .law-tag {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #22b7ff;
      background: rgba(34, 183, 255, 0.1);
      padding: 2px 8px;
      border-radius: 6px;
    }

    .math-main {
      font-size: 19px;
    }

    .controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-top: 2px;
    }
    .ctrl-btn {
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      color: #1e2945;
    }
    .ctrl-btn:hover { background: #f1f5f9; }
    .step-indicator {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }
  </style>
</head>
<body>

  <div class="top-bar">
    <div class="var-pill" id="pillA" onclick="toggleVar('A')">
      <span>A</span><span id="valA" class="var-val val-0">0</span>
    </div>
    <div class="var-pill" id="pillB" onclick="toggleVar('B')">
      <span>B</span><span id="valB" class="var-val val-0">0</span>
    </div>
    <div class="var-pill" id="pillC" onclick="toggleVar('C')">
      <span>C</span><span id="valC" class="var-val val-1">1</span>
    </div>
  </div>

  <div class="eval-row">
    <div class="eval-side">
      <div id="mathLHS" class="eval-math"></div>
      <div id="resLHS" class="eval-res">0</div>
    </div>
    <div class="eval-eq">=</div>
    <div class="eval-side">
      <div id="mathRHS" class="eval-math"></div>
      <div id="resRHS" class="eval-res">0</div>
    </div>
  </div>

  <div class="stepper-box">
    <div class="nav-tabs">
      <button class="step-btn active" onclick="goToStep(0)">1. Expand</button>
      <button class="step-btn" onclick="goToStep(1)">2. Idempotent</button>
      <button class="step-btn" onclick="goToStep(2)">3. Factor</button>
      <button class="step-btn" onclick="goToStep(3)">4. Annulment</button>
      <button class="step-btn" onclick="goToStep(4)">5. Result</button>
    </div>

    <div class="display-area">
      <span id="lawName" class="law-tag">FOIL Expansion</span>
      <div id="stepMath" class="math-main"></div>
    </div>

    <div class="controls">
      <button class="ctrl-btn" onclick="prevStep()">← Prev</button>
      <span id="stepCounter" class="step-indicator">1 / 5</span>
      <button class="ctrl-btn" onclick="nextStep()">Next →</button>
    </div>
  </div>

  <script>
    let A = 0, B = 0, C = 1;
    let currentStep = 0;

    const steps = [
      {
        law: "FOIL Expansion",
        math: "(A + B)(A + C) = A \\cdot A + A \\cdot C + A \\cdot B + B \\cdot C"
      },
      {
        law: "Idempotent Law (A · A = A)",
        math: "= A + A \\cdot C + A \\cdot B + B \\cdot C"
      },
      {
        law: "Distributive / Common Factor",
        math: "= A(1 + C + B) + B \\cdot C"
      },
      {
        law: "Annulment Law (1 + X = 1)",
        math: "= A(1) + B \\cdot C"
      },
      {
        law: "Identity Law (A · 1 = A)",
        math: "= A + B \\cdot C"
      }
    ];

    function toggleVar(v) {
      if (v === 'A') A = 1 - A;
      if (v === 'B') B = 1 - B;
      if (v === 'C') C = 1 - C;
      updateState();
    }

    function updateState() {
      // Update pills
      const elA = document.getElementById('valA');
      const elB = document.getElementById('valB');
      const elC = document.getElementById('valC');

      elA.textContent = A;
      elA.className = 'var-val val-' + A;
      elB.textContent = B;
      elB.className = 'var-val val-' + B;
      elC.textContent = C;
      elC.className = 'var-val val-' + C;

      // Calculate expressions
      const lhs = (A || (B && C)) ? 1 : 0;
      const rhs = ((A || B) && (A || C)) ? 1 : 0;

      document.getElementById('resLHS').textContent = lhs;
      document.getElementById('resRHS').textContent = rhs;
      document.getElementById('resLHS').style.color = lhs ? '#22b7ff' : '#64748b';
      document.getElementById('resRHS').style.color = rhs ? '#22b7ff' : '#64748b';

      renderMath();
    }

    function goToStep(idx) {
      currentStep = idx;
      renderStep();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % steps.length;
      renderStep();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + steps.length) % steps.length;
      renderStep();
    }

    function renderStep() {
      document.querySelectorAll('.step-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });

      document.getElementById('stepCounter').textContent = `${currentStep + 1} / ${steps.length}`;
      document.getElementById('lawName').textContent = steps[currentStep].law;

      if (window.katex) {
        katex.render(steps[currentStep].math, document.getElementById('stepMath'), { displayMode: false, throwOnError: false });
      }
    }

    function renderMath() {
      if (window.katex) {
        katex.render("A + (B \\cdot C)", document.getElementById('mathLHS'), { throwOnError: false });
        katex.render("(A + B)(A + C)", document.getElementById('mathRHS'), { throwOnError: false });
      }
    }

    window.onload = function() {
      updateState();
      renderStep();
    };
  </script>
</body>
</html>

Can we compress expressions even faster without expanding every single parenthesis?

The **absorption law** states that $A + AB = A$, because $A(1 + B) = A(1) = A$, completely absorbing the redundant $AB$ term.

The **redundancy law** (or elimination rule) takes this further: $A + \overline{A}B = A + B$, completely wiping out the inverted $\overline{A}$ variable.

<!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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      min-height: 100%;
    }

    .main-stage {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Step tabs */
    .stepper-nav {
      display: flex;
      justify-content: center;
      gap: 6px;
    }
    .step-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.25);
    }

    /* Equation Display Box */
    .eq-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 18px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      position: relative;
    }
    .math-display {
      font-size: 26px;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .law-badge {
      margin-top: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 10px;
      border-radius: 12px;
    }

    /* Interactive Verification Matrix / Truth Table */
    .test-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .row-inputs {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .input-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      font-size: 14px;
    }
    .bit-btn {
      width: 38px;
      height: 34px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #f1f5f9;
      color: #1e2945;
      font-weight: 800;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .bit-btn.high {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
    }

    .eval-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 12px;
      border-radius: 8px;
      background: #f8fafc;
      font-size: 14px;
      font-weight: 600;
    }
    .eval-eq {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .result-badge {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 15px;
      color: #ffffff;
      background: #94a3b8;
    }
    .result-badge.high {
      background: #10b981;
    }
    .match-icon {
      font-size: 16px;
      color: #10b981;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="stepper-nav">
      <button class="step-btn active" onclick="setStep(0)">1</button>
      <button class="step-btn" onclick="setStep(1)">2</button>
      <button class="step-btn" onclick="setStep(2)">3</button>
      <button class="step-btn" onclick="setStep(3)">4</button>
    </div>

    
    <div class="eq-card">
      <div id="mathTarget" class="math-display"></div>
      <div id="lawBadge" class="law-badge"></div>
    </div>

    
    <div class="test-card">
      <div class="row-inputs">
        <div class="input-toggle">
          <span>A:</span>
          <button id="btnA" class="bit-btn" onclick="toggleBit('A')">0</button>
        </div>
        <div class="input-toggle">
          <span>B:</span>
          <button id="btnB" class="bit-btn" onclick="toggleBit('B')">0</button>
        </div>
      </div>

      <div class="eval-row">
        <div class="eval-eq"><span id="eqLeft"></span></div>
        <div id="valLeft" class="result-badge">0</div>
        <div class="match-icon">≡</div>
        <div class="eval-eq"><span id="eqRight"></span></div>
        <div id="valRight" class="result-badge">0</div>
      </div>
    </div>
  </div>

  <script>
    const steps = [
      { latex: "A + \\overline{A}B", badge: "Redundancy Law" },
      { latex: "(A + \\overline{A})(A + B)", badge: "Distributive: X + YZ" },
      { latex: "(1) \\cdot (A + B)", badge: "Complement: A + \\overline{A} = 1" },
      { latex: "A + B", badge: "Identity: 1 \\cdot X = X" }
    ];

    let currentStep = 0;
    let bitA = 0;
    let bitB = 0;

    function renderMath() {
      const target = document.getElementById('mathTarget');
      const badge = document.getElementById('lawBadge');
      
      katex.render(steps[currentStep].latex, target, { throwOnError: false });
      badge.textContent = steps[currentStep].badge;

      katex.render("A + \\overline{A}B", document.getElementById('eqLeft'), { throwOnError: false });
      katex.render("A + B", document.getElementById('eqRight'), { throwOnError: false });
    }

    function setStep(idx) {
      currentStep = idx;
      document.querySelectorAll('.step-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
      renderMath();
    }

    function toggleBit(bit) {
      if (bit === 'A') bitA = bitA ? 0 : 1;
      if (bit === 'B') bitB = bitB ? 0 : 1;
      updateEvaluator();
    }

    function updateEvaluator() {
      const btnA = document.getElementById('btnA');
      const btnB = document.getElementById('btnB');
      
      btnA.textContent = bitA;
      btnA.classList.toggle('high', bitA === 1);
      
      btnB.textContent = bitB;
      btnB.classList.toggle('high', bitB === 1);

      const notA = bitA ? 0 : 1;
      const leftVal = (bitA | (notA & bitB)) ? 1 : 0;
      const rightVal = (bitA | bitB) ? 1 : 0;

      const vL = document.getElementById('valLeft');
      const vR = document.getElementById('valRight');

      vL.textContent = leftVal;
      vL.classList.toggle('high', leftVal === 1);

      vR.textContent = rightVal;
      vR.classList.toggle('high', rightVal === 1);
    }

    // Auto cycle stepper every 4s
    let timer = setInterval(() => {
      setStep((currentStep + 1) % steps.length);
    }, 4000);

    document.querySelectorAll('.step-btn').forEach(btn => {
      btn.addEventListener('click', () => clearInterval(timer));
    });

    renderMath();
    updateEvaluator();
  </script>
</body>
</html>

How do we combine all these laws systematically to minimize a full three-variable logic expression?

Let us minimize the expression $F = AB + A\overline{B} + \overline{A}B$ down to its simplest sum-of-products form.

<!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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #f8f9fa;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      gap: 12px;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      width: 100%;
      max-width: 520px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s, box-shadow 0.2s;
    }
    .btn:hover {
      background: #f1f5f9;
    }
    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }
    .display-area {
      position: relative;
      width: 100%;
      max-width: 520px;
      height: 220px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 16px;
      overflow: hidden;
    }
    .step-content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .step-content.active {
      opacity: 1;
      pointer-events: auto;
    }
    .math-main {
      font-size: 26px;
      font-weight: 600;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .law-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 9999px;
    }
    .law-badge span.formula {
      font-family: monospace;
      color: #2563eb;
      font-weight: 700;
    }
    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 520px;
      gap: 8px;
    }
    .play-btn {
      min-width: 40px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .progress-bar {
      flex: 1;
      display: flex;
      gap: 6px;
    }
    .progress-segment {
      flex: 1;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .progress-segment.active {
      background: #22b7ff;
    }
  </style>
</head>
<body>

  <div class="controls" id="stepButtons">
    <button class="btn active" data-step="0">1. Original</button>
    <button class="btn" data-step="1">2. Factor</button>
    <button class="btn" data-step="2">3. Complement</button>
    <button class="btn" data-step="3">4. Identity</button>
    <button class="btn" data-step="4">5. Redundancy</button>
  </div>

  <div class="display-area">
    
    <div class="step-content active" id="step-0">
      <div class="math-main" data-katex="F = \color{#2563eb}{AB + A\overline{B}} + \overline{A}B"></div>
      <div class="law-badge">Initial Expression</div>
    </div>

    
    <div class="step-content" id="step-1">
      <div class="math-main" data-katex="F = \color{#2563eb}{A(B + \overline{B})} + \overline{A}B"></div>
      <div class="law-badge">Distributive Law: <span class="formula">AX + AY = A(X+Y)</span></div>
    </div>

    
    <div class="step-content" id="step-2">
      <div class="math-main" data-katex="F = A(\color{#16a34a}{1}) + \overline{A}B"></div>
      <div class="law-badge">Complement Law: <span class="formula">B + B&#773; = 1</span></div>
    </div>

    
    <div class="step-content" id="step-3">
      <div class="math-main" data-katex="F = \color{#2563eb}{A} + \overline{A}B"></div>
      <div class="law-badge">Identity Law: <span class="formula">A &middot; 1 = A</span></div>
    </div>

    
    <div class="step-content" id="step-4">
      <div class="math-main" data-katex="F = \color{#16a34a}{A + B}"></div>
      <div class="law-badge">Redundancy Law: <span class="formula">A + A&#773;B = A + B</span></div>
    </div>
  </div>

  <div class="nav-bar">
    <button class="btn play-btn" id="playBtn">⏸</button>
    <div class="progress-bar" id="progressBar">
      <div class="progress-segment active" data-step="0"></div>
      <div class="progress-segment" data-step="1"></div>
      <div class="progress-segment" data-step="2"></div>
      <div class="progress-segment" data-step="3"></div>
      <div class="progress-segment" data-step="4"></div>
    </div>
  </div>

  <script>
    // KaTeX rendering
    document.querySelectorAll('[data-katex]').forEach(el => {
      const tex = el.getAttribute('data-katex');
      if (window.katex) {
        katex.render(tex, el, { throwOnError: false });
      } else {
        el.textContent = tex;
      }
    });

    let currentStep = 0;
    const totalSteps = 5;
    let isPlaying = true;
    let timer = null;

    const stepButtons = document.querySelectorAll('#stepButtons .btn');
    const stepContents = document.querySelectorAll('.step-content');
    const segments = document.querySelectorAll('.progress-segment');
    const playBtn = document.getElementById('playBtn');

    function goToStep(idx) {
      currentStep = (idx + totalSteps) % totalSteps;
      stepContents.forEach((el, i) => {
        el.classList.toggle('active', i === currentStep);
      });
      stepButtons.forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });
      segments.forEach((seg, i) => {
        seg.classList.toggle('active', i === currentStep);
      });
    }

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(() => {
        goToStep(currentStep + 1);
      }, 3500);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

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

    stepButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        stopAutoPlay();
        goToStep(parseInt(btn.getAttribute('data-step'), 10));
      });
    });

    segments.forEach(seg => {
      seg.addEventListener('click', () => {
        stopAutoPlay();
        goToStep(parseInt(seg.getAttribute('data-step'), 10));
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        goToStep(currentStep + 1);
        startAutoPlay();
      }
    });

    startAutoPlay();
  </script>
</body>
</html>

You can also duplicate terms using the idempotent law ($AB = AB + AB$) to pair $AB$ with both $A\overline{B}$ and $\overline{A}B$ simultaneously, reaching $A + B$ in two quick steps.

What happens when expressions include nested parentheses and complementary variables mixed together?

Consider the complex expression $Z = (A + B)(A + \overline{B}C) + \overline{A}BC$.

First, expand $(A + B)(A + \overline{B}C)$ using the distributive law to get $AA + A\overline{B}C + AB + B\overline{B}C$.

Since $AA = A$ and $B\overline{B} = 0$, the term $B\overline{B}C$ becomes $0 \cdot C = 0$, leaving $Z = A + A\overline{B}C + AB + \overline{A}BC$.

Applying the absorption law to $A + A\overline{B}C + AB$ collapses those three terms into simply $A$, reducing the entire equation to $Z = A + \overline{A}BC$.

Finally, applying the redundancy law ($A + \overline{A}X = A + X$ where $X = BC$) gives the minimal solution: $Z = A + BC$.

<!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>Simplifying Boolean Expressions</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      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;
      padding: 12px;
      user-select: none;
    }

    .stepper-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .nav-btn {
      padding: 6px 14px;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      background: #ffffff;
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.2s ease;
    }

    .nav-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 6px rgba(34,183,255,0.35);
    }

    .play-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
      color: #1e2945;
      margin-left: 6px;
    }

    .stage-card {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 3px 12px rgba(0,0,0,0.05);
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
      min-height: 230px;
      justify-content: space-between;
    }

    .law-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 12px;
      background: #eff6ff;
      color: #0284c7;
      margin-bottom: 12px;
    }

    .math-display {
      font-family: 'Cambria Math', 'Times New Roman', serif;
      font-size: 32px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      letter-spacing: 1px;
      min-height: 56px;
      transition: all 0.3s ease;
    }

    .term {
      padding: 2px 6px;
      border-radius: 6px;
      transition: all 0.3s ease;
      display: inline-block;
      position: relative;
    }

    .term.a { color: #0284c7; background: #e0f2fe; }
    .term.not-a { color: #8b5cf6; background: #f3e8ff; }
    .term.x { color: #16a34a; background: #dcfce7; }
    .term.one { color: #ea580c; background: #ffedd5; }
    .term.dim { opacity: 0.25; filter: grayscale(1); }

    .bar {
      text-decoration: overline;
      text-decoration-thickness: 2px;
    }

    .op {
      color: #64748b;
      font-weight: normal;
      padding: 0 2px;
    }

    .parens {
      color: #94a3b8;
      font-weight: 300;
    }

    .mapping-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 10px;
      padding: 8px 14px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      width: 100%;
      max-width: 360px;
    }

    .mapping-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .arrow {
      color: #94a3b8;
    }

    .rule-pill {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      background: #e2e8f0;
      color: #334155;
    }
  </style>
</head>
<body>

  <div class="stepper-nav">
    <button class="nav-btn active" data-step="0">1. Original</button>
    <button class="nav-btn" data-step="1">2. Expand</button>
    <button class="nav-btn" data-step="2">3. Identity</button>
    <button class="nav-btn" data-step="3">4. Minimal</button>
    <button id="playBtn" class="play-btn" title="Toggle Auto-Play">▶</button>
  </div>

  <div class="stage-card">
    <div id="lawBadge" class="law-badge">Redundancy Law Form</div>
    
    <div id="mathBox" class="math-display">
      
    </div>

    <div id="mappingBox" class="mapping-box">
      
    </div>
  </div>

  <script>
    const steps = [
      {
        badge: '1. Group Sub-term',
        html: '<span class="op">Z =</span> <span class="term a">A</span> <span class="op">+</span> <span class="term not-a"><span class="bar">A</span></span><span class="term x">BC</span>',
        map: '<span class="mapping-item">Let <span class="term x" style="font-size:12px;padding:1px 4px;">X = BC</span></span> <span class="arrow">→</span> <span class="mapping-item"><span class="term a" style="font-size:12px;padding:1px 4px;">A</span> + <span class="term not-a" style="font-size:12px;padding:1px 4px;"><span class="bar">A</span></span><span class="term x" style="font-size:12px;padding:1px 4px;">X</span></span>'
      },
      {
        badge: '2. Distributive Law',
        html: '<span class="op">Z =</span> <span class="parens">(</span><span class="term a">A</span> <span class="op">+</span> <span class="term not-a"><span class="bar">A</span></span><span class="parens">)</span> <span class="parens">(</span><span class="term a">A</span> <span class="op">+</span> <span class="term x">BC</span><span class="parens">)</span>',
        map: '<span class="rule-pill">(A + <span class="bar">A</span>)(A + X)</span> <span class="arrow">→</span> <span class="mapping-item">Expand terms</span>'
      },
      {
        badge: '3. Complement Law',
        html: '<span class="op">Z =</span> <span class="parens">(</span><span class="term one">1</span><span class="parens">)</span> <span class="op">·</span> <span class="parens">(</span><span class="term a">A</span> <span class="op">+</span> <span class="term x">BC</span><span class="parens">)</span>',
        map: '<span class="mapping-item"><span class="term a" style="font-size:12px;padding:1px 4px;">A</span> + <span class="term not-a" style="font-size:12px;padding:1px 4px;"><span class="bar">A</span></span> = <span class="term one" style="font-size:12px;padding:1px 4px;">1</span></span> <span class="arrow">→</span> <span class="rule-pill">1 · Y = Y</span>'
      },
      {
        badge: '4. Minimal Form',
        html: '<span class="op">Z =</span> <span class="term a">A</span> <span class="op">+</span> <span class="term x">BC</span>',
        map: '<span class="rule-pill">A + <span class="bar">A</span>X = A + X</span> <span class="arrow">✓</span> <span class="mapping-item" style="color:#16a34a;font-weight:700;">Simplified</span>'
      }
    ];

    let current = 0;
    let timer = null;

    const mathBox = document.getElementById('mathBox');
    const lawBadge = document.getElementById('lawBadge');
    const mappingBox = document.getElementById('mappingBox');
    const navBtns = document.querySelectorAll('.nav-btn');
    const playBtn = document.getElementById('playBtn');

    function render(index) {
      current = index;
      const s = steps[index];
      lawBadge.textContent = s.badge;
      mathBox.innerHTML = s.html;
      mappingBox.innerHTML = s.map;

      navBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });
    }

    function next() {
      render((current + 1) % steps.length);
    }

    function startAuto() {
      if (!timer) {
        playBtn.textContent = '⏸';
        timer = setInterval(next, 3200);
      }
    }

    function stopAuto() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = '▶';
      }
    }

    navBtns.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        stopAuto();
        render(i);
      });
    });

    playBtn.addEventListener('click', () => {
      if (timer) {
        stopAuto();
      } else {
        next();
        startAuto();
      }
    });

    // Initialize
    render(0);
    startAuto();
  </script>
</body>
</html>

A frequent mistake is treating Boolean addition like arithmetic addition and writing $A + A = 2A$ or forgetting that $1 + 1 = 1$.

Always look for common single variables to factor out or absorb first before blindly expanding giant brackets into long sum-of-product expressions.

electronics

Simplifying Boolean Expressions Using Algebraic Laws. Apply Boolean algebraic laws (identity, null, idempotent, complement, commutative, associative, distributive) to minimise expressions.

Boolean Algebra & Simplifying Expressions (A Level)

Boolean Logic and Logic Simplification

Boolean Rules for Simplification - Lessons In Electric Circuits

At A2 Level (Year 13), students must understand that Boolean algebraic minimisation directly serves physical hardware optimisation: reducing propagation delay, silicon footprint, gate count, and dynamic power dissipation. Scaffold lessons by first juxtaposing standard algebra axioms with Boolean algebra axioms (explicitly highlighting the dual distributive law $A + BC = (A+B)(A+C)$). Require students to annotate each transformation step with the formal name of the law applied. Finally, pair algebraic proofs with corresponding 2-to-4 variable truth table verifications and link towards Karnaugh mapping as an alternative graphical minimisation method.

Simplifying Boolean Expressions Using Algebraic Laws

Single-Variable Axioms