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 photo on your phone, video you stream, and game you install is just a massive collection of 1s and 0s.

How do computers group tiny electrical switches into file sizes like megabytes and terabytes, and how do we convert between them in an exam?

A **bit** (short for binary digit) is the smallest unit of data in computing, holding a single value of either `0` or `1`.

When we group bits together, we get larger measurable units: a **nibble** is 4 bits, and a **byte** is exactly 8 bits.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background-color: #f8f9fa;
      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;
      min-height: 100%;
      padding: 16px 8px;
    }

    .diagram-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      align-items: stretch;
      width: 100%;
      max-width: 680px;
    }

    .unit-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      flex: 1 1 180px;
      min-width: 140px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }

    .header {
      text-align: center;
      margin-bottom: 12px;
    }

    .title {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
    }

    .subtitle {
      font-size: 13px;
      color: #6b7280;
      font-weight: 500;
      margin-top: 2px;
    }

    .switches-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      padding: 8px;
      background: #f8f9fa;
      border-radius: 8px;
      border: 1px dashed #e6e6e6;
      margin: 8px 0;
      width: 100%;
      max-width: 190px;
    }

    .switch-btn {
      width: 34px;
      height: 48px;
      background: #ffffff;
      border: 1.5px solid #d1d5db;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 4px 2px;
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .switch-btn.on {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 1px #22b7ff inset;
    }

    .indicator {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      background: #e5e7eb;
      transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .switch-btn.on .indicator {
      background: #22b7ff;
      transform: translateY(0);
    }

    .switch-btn.off .indicator {
      transform: translateY(18px);
      background: #9ca3af;
    }

    .val-label {
      font-size: 14px;
      font-weight: 700;
      font-family: ui-monospace, monospace;
      color: #9ca3af;
      line-height: 1;
    }

    .switch-btn.on .val-label {
      color: #0284c7;
    }

    .footer-badge {
      font-size: 13px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      border-radius: 6px;
      padding: 4px 8px;
      margin-top: 8px;
      text-align: center;
    }

    .char-preview {
      font-family: ui-monospace, monospace;
      font-weight: 700;
      font-size: 15px;
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="unit-card">
      <div class="header">
        <div class="title">1 Bit</div>
        <div class="subtitle">0 or 1</div>
      </div>
      <div class="switches-grid" style="max-width: 60px;">
        <button class="switch-btn on" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">1</div>
        </button>
      </div>
      <div class="footer-badge">Single State</div>
    </div>

    
    <div class="unit-card">
      <div class="header">
        <div class="title">1 Nibble</div>
        <div class="subtitle">4 Bits</div>
      </div>
      <div class="switches-grid" style="max-width: 100px;">
        <button class="switch-btn on" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">1</div>
        </button>
        <button class="switch-btn off" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">0</div>
        </button>
        <button class="switch-btn on" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">1</div>
        </button>
        <button class="switch-btn off" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">0</div>
        </button>
      </div>
      <div class="footer-badge">Half Byte</div>
    </div>

    
    <div class="unit-card">
      <div class="header">
        <div class="title">1 Byte</div>
        <div class="subtitle">8 Bits</div>
      </div>
      <div class="switches-grid" id="byteGroup">
        
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn on" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">1</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn on" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">1</div></button>
      </div>
      <div class="footer-badge">Stores: <span class="char-preview" id="charDisplay">'A'</span></div>
    </div>
  </div>

  <script>
    function toggleBit(btn) {
      const isOn = btn.classList.toggle('on');
      btn.classList.toggle('off', !isOn);
      btn.querySelector('.val-label').textContent = isOn ? '1' : '0';
    }

    function toggleByteBit(btn) {
      toggleBit(btn);
      updateByteChar();
    }

    function updateByteChar() {
      const btns = document.querySelectorAll('#byteGroup .switch-btn');
      let code = 0;
      btns.forEach((b) => {
        code = (code << 1) | (b.classList.contains('on') ? 1 : 0);
      });

      const display = document.getElementById('charDisplay');
      if (code >= 32 && code <= 126) {
        display.textContent = `'${String.fromCharCode(code)}'`;
      } else {
        display.textContent = `${code}`;
      }
    }
  </script>
</body>
</html>

One byte can represent a single text character like the letter 'A', but real-world files need millions of them.

How do we scale up when dealing with thousands, millions, or trillions of bytes?

In GCSE Computer Science, storage units step up in standard metric multiples of **1,000** (or binary multiples of **1,024** depending on your exam board specification).

The standard sequence from smallest to largest is: **Kilobyte (KB)**, **Megabyte (MB)**, **Gigabyte (GB)**, and **Terabyte (TB)**.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Unit Conversion Ladder</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: #ffffff;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .header-title {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
      text-align: center;
      letter-spacing: -0.01em;
    }

    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      margin-bottom: 2px;
    }

    .toggle-btn {
      flex: 1;
      border: 1.5px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      padding: 7px 8px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .toggle-btn.active-up {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #3b82f6;
    }

    .toggle-btn.active-down {
      background: #f0fdf4;
      color: #15803d;
      border-color: #22c55e;
    }

    .ladder-grid {
      display: grid;
      grid-template-columns: 82px 1fr 82px;
      gap: 2px 8px;
      width: 100%;
      align-items: center;
    }

    /* Rung Rows */
    .rung {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 7px;
      padding: 6px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      min-height: 38px;
    }

    .rung:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .rung.active {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 1.5px #0284c7;
    }

    .unit-name {
      font-weight: 700;
      font-size: 13px;
      color: #0f172a;
      display: flex;
      align-items: baseline;
      gap: 4px;
    }

    .unit-symbol {
      color: #64748b;
      font-size: 11.5px;
      font-weight: 600;
    }

    .unit-val {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11.5px;
      font-weight: 700;
      color: #334155;
      background: #ffffff;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #cbd5e1;
      white-space: nowrap;
    }

    .special-rung {
      background: #faf5ff;
      border-color: #e9d5ff;
    }
    
    .special-rung:hover {
      background: #f3e8ff;
      border-color: #d8b4fe;
    }

    .special-rung.active {
      border-color: #9333ea;
      background: #fdf4ff;
      box-shadow: 0 0 0 1.5px #9333ea;
    }

    .special-rung .unit-val {
      border-color: #d8b4fe;
      color: #6b21a8;
    }

    /* Transition Inter-Rung Rows */
    .transition-row {
      display: contents;
    }

    .badge-cell {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1px 0;
    }

    .spine-cell {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 18px;
    }

    .spine-line {
      width: 2px;
      height: 100%;
      background: #cbd5e1;
      border-radius: 1px;
    }

    /* High contrast badges */
    .badge {
      font-size: 10.5px;
      font-weight: 700;
      border-radius: 5px;
      padding: 2px 5px;
      text-align: center;
      white-space: nowrap;
      transition: opacity 0.2s ease, filter 0.2s ease;
      width: 100%;
      box-sizing: border-box;
    }

    .badge-up {
      color: #1e40af;
      background: #dbeafe;
      border: 1px solid #93c5fd;
    }

    .badge-down {
      color: #14532d;
      background: #dcfce7;
      border: 1px solid #86efac;
    }

    .badge-up-special {
      color: #6b21a8;
      background: #f3e8ff;
      border: 1px solid #d8b4fe;
    }

    .badge-down-special {
      color: #6b21a8;
      background: #f3e8ff;
      border: 1px solid #d8b4fe;
    }

    .dimmed {
      opacity: 0.22;
      filter: grayscale(60%);
    }

    .highlight {
      opacity: 1;
      filter: none;
    }

    /* Info Bar at Bottom */
    .info-box {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 7px;
      padding: 6px 10px;
      font-size: 11.5px;
      color: #334155;
      text-align: center;
      line-height: 1.4;
    }

    .info-box strong {
      color: #0f172a;
    }

    @media (max-width: 380px) {
      .ladder-grid {
        grid-template-columns: 74px 1fr 74px;
        gap: 2px 4px;
      }
      .badge {
        font-size: 9.5px;
        padding: 2px 3px;
      }
      .unit-name {
        font-size: 12px;
      }
      .unit-val {
        font-size: 10.5px;
        padding: 1px 4px;
      }
      .toggle-btn {
        font-size: 11px;
        padding: 6px 4px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="header-title">Data Storage Unit Hierarchy</div>

    
    <div class="controls">
      <button class="toggle-btn active-up" id="btnUp" onclick="setMode('up')">
        <span>↑</span>
        <span>Convert Up (÷)</span>
      </button>
      <button class="toggle-btn" id="btnDown" onclick="setMode('down')">
        <span>↓</span>
        <span>Convert Down (×)</span>
      </button>
    </div>

    
    <div class="ladder-grid">
      
      
      <div></div>
      <div class="rung" onclick="selectRung(5)" id="rung-5">
        <div class="unit-name">Terabyte <span class="unit-symbol">TB</span></div>
        <div class="unit-val">10<sup>12</sup> B</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up" id="up-tb">÷ 1,000 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down dimmed" id="down-tb">↓ × 1,000</div>
      </div>

      
      <div></div>
      <div class="rung" onclick="selectRung(4)" id="rung-4">
        <div class="unit-name">Gigabyte <span class="unit-symbol">GB</span></div>
        <div class="unit-val">10<sup>9</sup> B</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up" id="up-gb">÷ 1,000 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down dimmed" id="down-gb">↓ × 1,000</div>
      </div>

      
      <div></div>
      <div class="rung" onclick="selectRung(3)" id="rung-3">
        <div class="unit-name">Megabyte <span class="unit-symbol">MB</span></div>
        <div class="unit-val">10<sup>6</sup> B</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up" id="up-mb">÷ 1,000 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down dimmed" id="down-mb">↓ × 1,000</div>
      </div>

      
      <div></div>
      <div class="rung" onclick="selectRung(2)" id="rung-2">
        <div class="unit-name">Kilobyte <span class="unit-symbol">KB</span></div>
        <div class="unit-val">10<sup>3</sup> B</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up" id="up-kb">÷ 1,000 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down dimmed" id="down-kb">↓ × 1,000</div>
      </div>

      
      <div></div>
      <div class="rung" onclick="selectRung(1)" id="rung-1">
        <div class="unit-name">Byte <span class="unit-symbol">B</span></div>
        <div class="unit-val">8 bits</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up-special" id="up-b">÷ 8 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down-special dimmed" id="down-b">↓ × 8</div>
      </div>

      
      <div></div>
      <div class="rung special-rung" onclick="selectRung(0)" id="rung-0">
        <div class="unit-name">Bit <span class="unit-symbol">b</span></div>
        <div class="unit-val">0 or 1</div>
      </div>
      <div></div>

    </div>

    
    <div class="info-box" id="infoBox">
      Click a unit or conversion mode above to explore data size steps.
    </div>
  </div>

  <script>
    let currentMode = 'up';
    const unitDetails = [
      "<strong>Bit (b):</strong> The fundamental binary unit (0 or 1). 8 bits = 1 Byte.",
      "<strong>Byte (B):</strong> 8 bits. Standard unit for encoding a single ASCII character.",
      "<strong>Kilobyte (KB):</strong> 1,000 Bytes (10³ B) = 1 KB. (e.g., small text files)",
      "<strong>Megabyte (MB):</strong> 1,000 KB (10⁶ B) = 1 MB. (e.g., MP3 audio tracks)",
      "<strong>Gigabyte (GB):</strong> 1,000 MB (10⁹ B) = 1 GB. (e.g., HD movie file)",
      "<strong>Terabyte (TB):</strong> 1,000 GB (10¹² B) = 1 TB. (e.g., large backup drives)"
    ];

    function setMode(mode) {
      currentMode = mode;
      const btnUp = document.getElementById('btnUp');
      const btnDown = document.getElementById('btnDown');
      const upArrows = document.querySelectorAll('.badge-up, .badge-up-special');
      const downArrows = document.querySelectorAll('.badge-down, .badge-down-special');

      if (mode === 'up') {
        btnUp.className = 'toggle-btn active-up';
        btnDown.className = 'toggle-btn';
        upArrows.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlight'); });
        downArrows.forEach(el => { el.classList.add('dimmed'); el.classList.remove('highlight'); });
      } else {
        btnDown.className = 'toggle-btn active-down';
        btnUp.className = 'toggle-btn';
        downArrows.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlight'); });
        upArrows.forEach(el => { el.classList.add('dimmed'); el.classList.remove('highlight'); });
      }
    }

    function selectRung(index) {
      for (let i = 0; i <= 5; i++) {
        const rung = document.getElementById('rung-' + i);
        if (i === index) {
          rung.classList.add('active');
        } else {
          rung.classList.remove('active');
        }
      }
      const infoBox = document.getElementById('infoBox');
      infoBox.innerHTML = unitDetails[index];
    }

    // Initialize default mode
    setMode('up');
  </script>
</body>
</html>

A handy mnemonic to remember the order is: **K**ids **M**ake **G**iant **T**reats (KB, MB, GB, TB).

What is the exact mathematical rule for converting between any two levels on this ladder?

When converting from a **larger unit to a smaller unit**, you **multiply** because you need more pieces to cover the same amount of data.

When converting from a **smaller unit to a larger unit**, you **divide** because each step packs the data into larger containers.

<!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;
      color: #1e2945;
      background: #ffffff;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    /* Mode switcher */
    .mode-bar {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .mode-btn {
      appearance: none;
      border: 1px solid #d1d5db;
      background: #f8fafc;
      color: #4b5563;
      padding: 8px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .mode-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    }

    /* Unit Ladder Flow */
    .flow-container {
      position: relative;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 18px 10px;
    }

    /* Direction label banners */
    .rule-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 12px;
      transition: all 0.25s ease;
    }

    .banner-mult {
      background: #ecfdf5;
      color: #065f46;
      border: 1px solid #a7f3d0;
    }

    .banner-div {
      background: #eff6ff;
      color: #1e40af;
      border: 1px solid #bfdbfe;
    }

    /* Unit nodes row */
    .units-row {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      align-items: center;
      position: relative;
      gap: 4px;
    }

    .unit-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 4px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      font-weight: 700;
      font-size: 14px;
      color: #1e2945;
      text-align: center;
      min-height: 52px;
      transition: all 0.25s ease;
    }

    .unit-node .sub {
      font-size: 10px;
      font-weight: 500;
      color: #64748b;
      margin-top: 2px;
    }

    .unit-node.highlight {
      border-color: #0284c7;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
    }

    .unit-node.special-byte {
      border-color: #f59e0b;
      background: #fffbeb;
    }

    .unit-node.special-bit {
      border-color: #f59e0b;
      background: #fffbeb;
    }

    /* Arrows display between nodes */
    .arrows-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      padding: 8px 24px;
      gap: 8px;
    }

    .arrow-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
    }

    .op-tag {
      padding: 3px 6px;
      border-radius: 6px;
      font-size: 11px;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .op-mult {
      background: #d1fae5;
      color: #047857;
    }

    .op-div {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .op-special-mult {
      background: #fef3c7;
      color: #b45309;
      box-shadow: 0 0 0 1px #fcd34d;
    }

    .op-special-div {
      background: #fef3c7;
      color: #b45309;
      box-shadow: 0 0 0 1px #fcd34d;
    }

    .arrow-sym {
      font-size: 16px;
      line-height: 1;
      margin: 2px 0;
      color: #64748b;
    }

    /* Special callout card */
    .special-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fffbeb;
      border: 1.5px solid #fde68a;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #92400e;
    }

    .special-badge {
      background: #f59e0b;
      color: #ffffff;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .special-ops {
      display: flex;
      gap: 12px;
      align-items: center;
      font-size: 12px;
    }

    .special-ops span {
      background: #ffffff;
      border: 1px solid #fcd34d;
      padding: 4px 8px;
      border-radius: 6px;
      font-weight: 700;
    }

    /* Live Mini Example */
    .example-strip {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
    }

    .example-title {
      font-weight: 600;
      color: #64748b;
      font-size: 12px;
    }

    .example-math {
      font-weight: 700;
      color: #0f172a;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    @media (max-width: 420px) {
      .unit-node { font-size: 12px; padding: 6px 2px; min-height: 46px; }
      .unit-node .sub { font-size: 9px; }
      .arrow-col { font-size: 10px; }
      .op-tag { font-size: 9px; padding: 2px 4px; }
      .special-box { flex-direction: column; gap: 6px; align-items: flex-start; }
      .special-ops { width: 100%; justify-content: space-between; }
    }
  </style>
</head>
<body>

<div class="diagram">

  
  <div class="mode-bar">
    <button class="mode-btn active" id="btnDown" onclick="setMode('down')">
      <span>Large → Small</span>
      <strong>(× MULTIPLY)</strong>
    </button>
    <button class="mode-btn" id="btnUp" onclick="setMode('up')">
      <span>Small → Large</span>
      <strong>(÷ DIVIDE)</strong>
    </button>
  </div>

  
  <div class="flow-container">
    <div id="ruleBanner" class="rule-banner banner-mult">
      <span>Large Unit → Small Unit:</span>
      <span>MULTIPLY (× 1,000)</span>
    </div>

    
    <div class="units-row">
      <div class="unit-node" id="nodeTB">TB<div class="sub">Terabyte</div></div>
      <div class="unit-node" id="nodeGB">GB<div class="sub">Gigabyte</div></div>
      <div class="unit-node" id="nodeMB">MB<div class="sub">Megabyte</div></div>
      <div class="unit-node" id="nodeKB">KB<div class="sub">Kilobyte</div></div>
      <div class="unit-node special-byte" id="nodeB">Byte<div class="sub">8 bits</div></div>
      <div class="unit-node special-bit" id="nodeBit">bit<div class="sub">0 or 1</div></div>
    </div>

    
    <div class="arrows-row" id="arrowsRow">
      
    </div>
  </div>

  
  <div class="special-box">
    <div style="display: flex; align-items: center; gap: 8px;">
      <span class="special-badge">Special Rule</span>
      <span>Bytes ⇄ Bits: factor of 8</span>
    </div>
    <div class="special-ops">
      <span>Byte → bit: × 8</span>
      <span>bit → Byte: ÷ 8</span>
    </div>
  </div>

  
  <div class="example-strip">
    <span class="example-title" id="exLabel">Worked Example:</span>
    <span class="example-math" id="exMath">2 GB × 1,000 = 2,000 MB</span>
  </div>

</div>

<script>
  let currentMode = 'down';

  function renderArrows() {
    const arrowsRow = document.getElementById('arrowsRow');
    const ruleBanner = document.getElementById('ruleBanner');
    const exMath = document.getElementById('exMath');
    const exLabel = document.getElementById('exLabel');

    if (currentMode === 'down') {
      ruleBanner.className = 'rule-banner banner-mult';
      ruleBanner.innerHTML = '<span>Large → Small:</span> <span>MULTIPLY (× 1,000)</span>';
      
      arrowsRow.innerHTML = `
        <div class="arrow-col">
          <span class="op-tag op-mult">× 1,000</span>
          <span class="arrow-sym">→</span>
        </div>
        <div class="arrow-col">
          <span class="op-tag op-mult">× 1,000</span>
          <span class="arrow-sym">→</span>
        </div>
        <div class="arrow-col">
          <span class="op-tag op-mult">× 1,000</span>
          <span class="arrow-sym">→</span>
        </div>
        <div class="arrow-col">
          <span class="op-tag op-mult">× 1,000</span>
          <span class="arrow-sym">→</span>
        </div>
        <div class="arrow-col">
          <span class="op-tag op-special-mult">× 8</span>
          <span class="arrow-sym" style="color:#f59e0b;">→</span>
        </div>
      `;
      exLabel.textContent = "Large to Small Example:";
      exMath.textContent = "4 MB × 1,000 = 4,000 KB";
    } else {
      ruleBanner.className = 'rule-banner banner-div';
      ruleBanner.innerHTML = '<span>Small → Large:</span> <span>DIVIDE (÷ 1,000)</span>';
      
      arrowsRow.innerHTML = `
        <div class="arrow-col">
          <span class="arrow-sym">←</span>
          <span class="op-tag op-div">÷ 1,000</span>
        </div>
        <div class="arrow-col">
          <span class="arrow-sym">←</span>
          <span class="op-tag op-div">÷ 1,000</span>
        </div>
        <div class="arrow-col">
          <span class="arrow-sym">←</span>
          <span class="op-tag op-div">÷ 1,000</span>
        </div>
        <div class="arrow-col">
          <span class="arrow-sym">←</span>
          <span class="op-tag op-div">÷ 1,000</span>
        </div>
        <div class="arrow-col">
          <span class="arrow-sym" style="color:#f59e0b;">←</span>
          <span class="op-tag op-special-div">÷ 8</span>
        </div>
      `;
      exLabel.textContent = "Small to Large Example:";
      exMath.textContent = "3,000 KB ÷ 1,000 = 3 MB";
    }
  }

  function setMode(mode) {
    currentMode = mode;
    document.getElementById('btnDown').classList.toggle('active', mode === 'down');
    document.getElementById('btnUp').classList.toggle('active', mode === 'up');
    renderArrows();
  }

  // Initial render
  renderArrows();
</script>

</body>
</html>

Let's see how this works with concrete exam-style questions.

## Worked Example 1: Single-Step Conversion

A smartphone video file takes up **4.5 GB** of storage. How many Megabytes (MB) is this file?

We are moving from a larger unit (GB) down one step to a smaller unit (MB), so we multiply by 1,000.

$$4.5\text{ GB} \times 1000 = 4,500\text{ MB}$$

If your exam specification uses binary units (base 2), you multiply by 1,024 instead: $4.5 \times 1024 = 4,608\text{ MB}$.

What if we have to jump across multiple steps all the way down to bits?

## Worked Example 2: Multi-Step Conversion to Bits

An image icon has a file size of **3 KB**. How many individual **bits** of data make up this icon?

Step 1: Convert Kilobytes to Bytes by multiplying by 1,000: $$3\text{ KB} \times 1000 = 3,000\text{ Bytes}$$

Step 2: Convert Bytes to Bits by multiplying by 8: $$3,000\text{ Bytes} \times 8 = 24,000\text{ bits}$$

Always write down both steps in your exam to guarantee full working marks.

What about the reverse direction: calculating how many high-res photos can fit on a hard drive?

## Worked Example 3: Storage Capacity Calculation

You have a **2 TB** external hard drive. How many **50 MB** video clips can it store?

Before dividing, we must convert both quantities into the **same unit**. Let's convert 2 TB into Megabytes.

Step 1: Convert TB to GB, then GB to MB: $$2\text{ TB} \times 1000 = 2,000\text{ GB}$$ $$2,000\text{ GB} \times 1000 = 2,000,000\text{ MB}$$

Step 2: Divide total storage by the file size: $$\frac{2,000,000\text{ MB}}{50\text{ MB}} = 40,000\text{ clips}$$

The drive can hold exactly 40,000 video clips.

A frequent exam mistake is confusing a lowercase **b** (bit) with a capital **B** (byte). For example, 100 MB is 8 times larger than 100 Mb.

Another common error is multiplying by 8 at every step. The factor of **8 only applies between bits and bytes**; prefix steps (KB, MB, GB, TB) scale by 1,000 (or 1,024).

How do programmers write these conversions in real software?

Here is a clean JavaScript function that converts any number of bytes into a human-readable storage string.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Preset selector */
    .presets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }
    .preset-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .preset-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    /* Main grid */
    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 540px) {
      .main-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Code Pane */
    .code-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      line-height: 1.5;
    }
    .code-line {
      display: flex;
      padding: 1px 4px;
      border-radius: 4px;
      transition: background 0.2s;
    }
    .code-line.active {
      background: #e0f2fe;
      box-shadow: inset 3px 0 0 #0284c7;
    }
    .line-num {
      width: 20px;
      color: #94a3b8;
      user-select: none;
      font-size: 11px;
    }
    .kw { color: #2563eb; font-weight: 600; }
    .fn { color: #7c3aed; }
    .str { color: #16a34a; }
    .num { color: #d97706; }
    .op { color: #64748b; }

    /* Trace / Inspector Pane */
    .trace-panel {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .units-strip {
      display: flex;
      gap: 4px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px;
      justify-content: space-between;
    }
    .unit-box {
      flex: 1;
      text-align: center;
      padding: 4px 2px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid transparent;
      transition: all 0.2s;
    }
    .unit-box.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .var-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .var-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-family: monospace;
    }
    .var-label { color: #64748b; font-weight: 600; }
    .var-val {
      font-weight: 700;
      color: #1e2945;
      background: #f1f5f9;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .var-val.highlight {
      background: #fef08a;
      color: #854d0e;
    }

    .output-box {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 700;
      color: #166534;
    }

    /* Stepper controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      transition: background 0.15s;
    }
    .ctrl-btn:hover { background: #f1f5f9; }
    .ctrl-btn:disabled { opacity: 0.4; cursor: default; }
    .step-indicator {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
  </style>
</head>
<body>

  
  <div class="presets">
    <button class="preset-btn active" onclick="loadInput(2500000)">2,500,000 B</button>
    <button class="preset-btn" onclick="loadInput(4000)">4,000 B</button>
    <button class="preset-btn" onclick="loadInput(850)">850 B</button>
    <button class="preset-btn" onclick="loadInput(5000000000)">5,000,000,000 B</button>
  </div>

  
  <div class="main-grid">
    
    <div class="code-panel">
      <div class="code-line" id="l1"><span class="line-num">1</span><span><span class="kw">function</span> <span class="fn">formatBytes</span>(bytes) {</span></div>
      <div class="code-line" id="l2"><span class="line-num">2</span><span>  <span class="kw">const</span> units = [<span class="str">'B'</span>,<span class="str">'KB'</span>,<span class="str">'MB'</span>,<span class="str">'GB'</span>,<span class="str">'TB'</span>];</span></div>
      <div class="code-line" id="l3"><span class="line-num">3</span><span>  <span class="kw">let</span> size = bytes;</span></div>
      <div class="code-line" id="l4"><span class="line-num">4</span><span>  <span class="kw">let</span> unitIndex = <span class="num">0</span>;</span></div>
      <div class="code-line" id="l5"><span class="line-num">5</span><span>  <span class="kw">while</span> (size &gt;= <span class="num">1000</span> &amp;&amp; idx &lt; <span class="num">4</span>) {</span></div>
      <div class="code-line" id="l6"><span class="line-num">6</span><span>    size /= <span class="num">1000</span>;</span></div>
      <div class="code-line" id="l7"><span class="line-num">7</span><span>    unitIndex++;</span></div>
      <div class="code-line" id="l8"><span class="line-num">8</span><span>  }</span></div>
      <div class="code-line" id="l9"><span class="line-num">9</span><span>  <span class="kw">return</span> <span class="str">`${size} ${units[idx]}`</span>;</span></div>
      <div class="code-line" id="l10"><span class="line-num">10</span><span>}</span></div>
    </div>

    
    <div class="trace-panel">
      
      <div class="units-strip">
        <div class="unit-box" id="u0">0: B</div>
        <div class="unit-box" id="u1">1: KB</div>
        <div class="unit-box" id="u2">2: MB</div>
        <div class="unit-box" id="u3">3: GB</div>
        <div class="unit-box" id="u4">4: TB</div>
      </div>

      
      <div class="var-card">
        <div class="var-row">
          <span class="var-label">size</span>
          <span class="var-val" id="v-size">2500000</span>
        </div>
        <div class="var-row">
          <span class="var-label">unitIndex</span>
          <span class="var-val" id="v-idx">0</span>
        </div>
        <div class="var-row">
          <span class="var-label">size &gt;= 1000</span>
          <span class="var-val" id="v-cond">true</span>
        </div>
      </div>

      
      <div class="output-box">
        <span>Result:</span>
        <span id="output-val">...</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn" onclick="stepPrev()">◀ Step</button>
    <div class="step-indicator" id="stepTxt">Step 1 / 4</div>
    <button class="ctrl-btn" id="nextBtn" onclick="stepNext()">Step ▶</button>
  </div>

  <script>
    const UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
    let steps = [];
    let currentStep = 0;

    function buildSteps(bytes) {
      const trace = [];
      let size = bytes;
      let unitIndex = 0;

      // Init
      trace.push({
        line: 'l3',
        size: size,
        unitIndex: 0,
        cond: size >= 1000,
        output: '...'
      });

      // Loop iterations
      while (size >= 1000 && unitIndex < UNITS.length - 1) {
        size /= 1000;
        unitIndex++;
        trace.push({
          line: 'l6',
          size: size,
          unitIndex: unitIndex,
          cond: size >= 1000 && unitIndex < UNITS.length - 1,
          output: '...'
        });
      }

      // Final return
      trace.push({
        line: 'l9',
        size: size,
        unitIndex: unitIndex,
        cond: false,
        output: `${size} ${UNITS[unitIndex]}`
      });

      return trace;
    }

    function renderStep(index) {
      currentStep = index;
      const s = steps[index];

      // Highlight code line
      for (let i = 1; i <= 10; i++) {
        const el = document.getElementById('l' + i);
        if (el) el.classList.remove('active');
      }
      const activeLine = document.getElementById(s.line);
      if (activeLine) activeLine.classList.add('active');

      // Highlight units array
      for (let i = 0; i < 5; i++) {
        const u = document.getElementById('u' + i);
        if (i === s.unitIndex) {
          u.classList.add('active');
        } else {
          u.classList.remove('active');
        }
      }

      // Update Variables
      document.getElementById('v-size').textContent = s.size;
      document.getElementById('v-idx').textContent = `${s.unitIndex} (${UNITS[s.unitIndex]})`;
      
      const condEl = document.getElementById('v-cond');
      condEl.textContent = s.cond ? 'true' : 'false';
      condEl.style.color = s.cond ? '#16a34a' : '#dc2626';

      // Update Output
      document.getElementById('output-val').textContent = s.output;

      // Controls
      document.getElementById('stepTxt').textContent = `Step ${index + 1} / ${steps.length}`;
      document.getElementById('prevBtn').disabled = index === 0;
      document.getElementById('nextBtn').disabled = index === steps.length - 1;
    }

    function loadInput(val) {
      document.querySelectorAll('.preset-btn').forEach(b => {
        b.classList.toggle('active', b.textContent.replace(/,/g, '').startsWith(val.toString()));
      });
      steps = buildSteps(val);
      renderStep(0);
    }

    function stepNext() {
      if (currentStep < steps.length - 1) {
        renderStep(currentStep + 1);
      }
    }

    function stepPrev() {
      if (currentStep > 0) {
        renderStep(currentStep - 1);
      }
    }

    // Initial load
    loadInput(2500000);
  </script>
</body>
</html>

Next time you see a file download or buy a storage drive, test yourself by converting the size into bits in your head!

computer-science

Units of Storage: From Bits to Terabytes. Convert between bits, bytes, kilobytes, megabytes, gigabytes and terabytes.

Units of Data Storage - GCSE Computer Science

Measurements of Storage: KS4 Computer Science

Data Capacity and Storage Units - GCSE Computer Science

For GCSE Key Stage 4, teaching data unit conversion effectively requires emphasizing the bidirectional nature of unit scaling: multiplying by $1{,}000$ when descending the hierarchy and dividing by $1{,}000$ when ascending, with special attention to the transition between bits and bytes ($\times 8$ and $\div 8$). Scaffolding with structured conversion ladders and contextualizing abstract numbers with realistic file storage scenarios (e.g., photo sizes, SSD capacities) prevents formulaic memorization errors.

Units of Storage: From Bits to Terabytes

The Building Blocks: Bits and Bytes

The Storage Ladder