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 app on your phone treats player scores, shop prices, and toggle switches differently, even though your computer stores all of them as binary bits.

A **data type** is a classification that tells the computer what kind of value a piece of data is, how much memory to allocate for it, and what operations can be performed with it.

<!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>Core Data Types</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: transparent;
    color: #1e2945;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 620px;
  }

  @media (max-width: 480px) {
    .grid {
      grid-template-columns: 1fr;
      gap: 10px;
    }
  }

  .type-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #eef2f6;
    user-select: none;
  }

  .title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
  }

  .c-int { color: #2563eb; }
  .c-real { color: #059669; }
  .c-bool { color: #7c3aed; }

  .visual-box {
    height: 90px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
  }

  /* Integer Blocks */
  .blocks-row {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 130px;
    min-height: 48px;
  }

  .block-unit {
    width: 20px;
    height: 20px;
    background: #3b82f6;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(37,99,235,0.25);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* Real Ruler/Fill */
  .ruler-container {
    width: 100%;
    max-width: 130px;
    height: 22px;
    background: #e2e8f0;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
  }

  .ruler-fill {
    height: 100%;
    background: #10b981;
    width: 65%;
    transition: width 0.15s ease;
  }

  .ruler-marks {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
    pointer-events: none;
  }

  .ruler-mark {
    width: 1px;
    height: 6px;
    background: rgba(0,0,0,0.2);
  }

  /* Boolean Switch Visual */
  .light-orb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #ede9fe;
    color: #7c3aed;
    box-shadow: 0 0 0 rgba(124, 58, 237, 0);
    transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
  }

  .light-orb.active {
    background: #7c3aed;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.45);
  }

  /* Controls */
  .val-display {
    font-size: 20px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
    margin-bottom: 8px;
    min-height: 26px;
  }

  .stepper {
    display: flex;
    gap: 8px;
  }

  .btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    color: #1e2945;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn:active {
    background: #e2e8f0;
  }

  .slider {
    width: 100%;
    max-width: 130px;
    accent-color: #059669;
    cursor: pointer;
  }

  .switch {
    width: 52px;
    height: 28px;
    background: #cbd5e1;
    border-radius: 14px;
    padding: 3px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
  }

  .switch.active {
    background: #7c3aed;
  }

  .switch-thumb {
    width: 22px;
    height: 22px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transform: translateX(0);
    transition: transform 0.2s ease;
  }

  .switch.active .switch-thumb {
    transform: translateX(24px);
  }
</style>
</head>
<body>

<div class="grid">
  
  <div class="type-card">
    <div class="title c-int">Integer</div>
    <div class="visual-box">
      <div class="blocks-row" id="intBlocks"></div>
    </div>
    <div class="val-display c-int" id="intVal">4</div>
    <div class="stepper">
      <button class="btn" id="intDec" aria-label="Decrease">−</button>
      <button class="btn" id="intInc" aria-label="Increase">+</button>
    </div>
  </div>

  
  <div class="type-card">
    <div class="title c-real">Real</div>
    <div class="visual-box">
      <div class="ruler-container">
        <div class="ruler-fill" id="realFill"></div>
        <div class="ruler-marks">
          <div class="ruler-mark"></div>
          <div class="ruler-mark"></div>
          <div class="ruler-mark"></div>
          <div class="ruler-mark"></div>
          <div class="ruler-mark"></div>
        </div>
      </div>
    </div>
    <div class="val-display c-real" id="realVal">6.5</div>
    <input type="range" class="slider" id="realSlider" min="0" max="10" step="0.25" value="6.5">
  </div>

  
  <div class="type-card">
    <div class="title c-bool">Boolean</div>
    <div class="visual-box">
      <div class="light-orb active" id="boolOrb">✦</div>
    </div>
    <div class="val-display c-bool" id="boolVal">True</div>
    <div class="switch active" id="boolSwitch" role="button" aria-label="Toggle Boolean">
      <div class="switch-thumb"></div>
    </div>
  </div>
</div>

<script>
  // Integer State
  let intCount = 4;
  const intValEl = document.getElementById('intVal');
  const intBlocksEl = document.getElementById('intBlocks');

  function renderInt() {
    intValEl.textContent = intCount;
    intBlocksEl.innerHTML = '';
    for (let i = 0; i < intCount; i++) {
      const b = document.createElement('div');
      b.className = 'block-unit';
      intBlocksEl.appendChild(b);
    }
  }

  document.getElementById('intInc').onclick = () => {
    if (intCount < 8) { intCount++; renderInt(); }
  };
  document.getElementById('intDec').onclick = () => {
    if (intCount > 0) { intCount--; renderInt(); }
  };
  renderInt();

  // Real State
  const realSlider = document.getElementById('realSlider');
  const realValEl = document.getElementById('realVal');
  const realFill = document.getElementById('realFill');

  realSlider.oninput = (e) => {
    const val = parseFloat(e.target.value);
    realValEl.textContent = val.toFixed(val % 1 === 0 ? 1 : 2);
    realFill.style.width = (val * 10) + '%';
  };

  // Boolean State
  let boolState = true;
  const boolSwitch = document.getElementById('boolSwitch');
  const boolOrb = document.getElementById('boolOrb');
  const boolValEl = document.getElementById('boolVal');

  boolSwitch.onclick = () => {
    boolState = !boolState;
    boolSwitch.classList.toggle('active', boolState);
    boolOrb.classList.toggle('active', boolState);
    boolValEl.textContent = boolState ? 'True' : 'False';
  };
</script>
</body>
</html>

How do you decide between counting whole items and measuring exact quantities?

An **integer** is any positive or negative whole number, including zero, that has no fractional or decimal part.

You use integers whenever you are counting discrete items that cannot be split, such as `playerScore = 150`, `livesRemaining = 3`, or `studentID = 1042`.

What happens when a value falls in between two whole numbers?

A **real** number (frequently referred to as a **float** or floating-point number) is any number that contains a fractional part indicated by a decimal point.

You select the real data type for continuous measurements or financial quantities, such as `itemPrice = 19.99`, `runnerSpeed = 8.45`, or `discountRate = 0.15`.

Not every piece of data is numeric—how does a computer store a simple yes-or-no state?

A **Boolean** is a data type that can only ever store one of two distinct values: **true** or **false**.

In the 1840s, mathematician George Boole developed an algebraic system based on truth values, which later became the fundamental logic underpinning all digital circuit design.

Booleans act like on/off switches for program logic, such as checking `isGameOver = false`, `hasKey = true`, or `soundEnabled = true`.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  body {
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 12px;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 620px;
  }
  @media (max-width: 520px) {
    .grid { grid-template-columns: 1fr; }
  }
  .type-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 220px;
  }
  .type-badge {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
  }
  .badge-int { background: #e0f2fe; color: #0284c7; }
  .badge-real { background: #fef3c7; color: #d97706; }
  .badge-bool { background: #dcfce7; color: #16a34a; }

  .visual-area {
    height: 90px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Integer Blocks */
  .int-stack {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 70px;
  }
  .int-block {
    width: 16px;
    background: #0284c7;
    border-radius: 3px;
    transition: height 0.25s ease, opacity 0.25s ease;
  }

  /* Real Gauge */
  .gauge-track {
    width: 24px;
    height: 80px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }
  .gauge-fill {
    width: 100%;
    background: #f59e0b;
    border-radius: 0 0 10px 10px;
    transition: height 0.15s ease;
  }
  .gauge-mark {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px dashed #94a3b8;
  }

  /* Boolean Switch */
  .switch-btn {
    width: 72px;
    height: 40px;
    border-radius: 24px;
    background: #e2e8f0;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 4px;
    transition: background 0.25s ease;
  }
  .switch-btn.active {
    background: #22c55e;
  }
  .switch-knob {
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }
  .switch-btn.active .switch-knob {
    transform: translateX(32px);
  }

  /* Output code display */
  .code-tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 14px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 4px 8px;
    border-radius: 6px;
    color: #0f172a;
    font-weight: 600;
  }

  /* Controls */
  .control-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .btn-sm {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 16px;
    font-weight: bold;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn-sm:active { background: #f1f5f9; }
  input[type="range"] {
    width: 80px;
    accent-color: #f59e0b;
  }
</style>
</head>
<body>

<div class="grid">
  
  <div class="type-card">
    <span class="type-badge badge-int">Integer</span>
    <div class="visual-area">
      <div class="int-stack" id="intBlocks"></div>
    </div>
    <div class="code-tag" id="intVal">coins = 4</div>
    <div class="control-row">
      <button class="btn-sm" id="intMinus">−</button>
      <button class="btn-sm" id="intPlus">+</button>
    </div>
  </div>

  
  <div class="type-card">
    <span class="type-badge badge-real">Real</span>
    <div class="visual-area">
      <div class="gauge-track">
        <div class="gauge-mark"></div>
        <div class="gauge-fill" id="realFill" style="height: 65%;"></div>
      </div>
    </div>
    <div class="code-tag" id="realVal">temp = 6.5</div>
    <div class="control-row">
      <input type="range" id="realSlider" min="0" max="10" step="0.5" value="6.5">
    </div>
  </div>

  
  <div class="type-card">
    <span class="type-badge badge-bool">Boolean</span>
    <div class="visual-area">
      <button class="switch-btn active" id="boolToggle" aria-label="Toggle Boolean">
        <div class="switch-knob" id="boolIcon">✓</div>
      </button>
    </div>
    <div class="code-tag" id="boolVal">isKey = True</div>
    <div class="control-row">
      <button class="btn-sm" style="width: auto; padding: 0 10px; font-size: 12px;" id="boolFlipBtn">Toggle</button>
    </div>
  </div>
</div>

<script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
<script>
  // Integer State
  let intCount = 4;
  const maxInt = 6;
  const minInt = 1;
  const intBlocks = document.getElementById('intBlocks');
  const intVal = document.getElementById('intVal');

  function renderInt() {
    intBlocks.innerHTML = '';
    for (let i = 1; i <= intCount; i++) {
      const b = document.createElement('div');
      b.className = 'int-block';
      b.style.height = (i * 11) + 'px';
      intBlocks.appendChild(b);
    }
    intVal.textContent = 'coins = ' + intCount;
  }
  renderInt();

  document.getElementById('intPlus').onclick = () => {
    if (intCount < maxInt) { intCount++; renderInt(); }
  };
  document.getElementById('intMinus').onclick = () => {
    if (intCount > minInt) { intCount--; renderInt(); }
  };

  // Real State
  const realSlider = document.getElementById('realSlider');
  const realFill = document.getElementById('realFill');
  const realVal = document.getElementById('realVal');

  function updateReal() {
    const val = parseFloat(realSlider.value).toFixed(1);
    realFill.style.height = (val * 10) + '%';
    realVal.textContent = 'temp = ' + val;
  }
  realSlider.oninput = updateReal;

  // Boolean State
  let boolState = true;
  const boolToggle = document.getElementById('boolToggle');
  const boolVal = document.getElementById('boolVal');
  const boolIcon = document.getElementById('boolIcon');

  function toggleBool() {
    boolState = !boolState;
    if (boolState) {
      boolToggle.classList.add('active');
      boolIcon.textContent = '✓';
      boolVal.textContent = 'isKey = True';
    } else {
      boolToggle.classList.remove('active');
      boolIcon.textContent = '✕';
      boolVal.textContent = 'isKey = False';
    }
  }

  boolToggle.onclick = toggleBool;
  document.getElementById('boolFlipBtn').onclick = toggleBool;
</script>
</body>
</html>

Let's see how these core data types appear when written in actual code.

In JavaScript, you create variables using `let` or `const`, and the computer recognizes the data type from the value you assign.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }
    .nav-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
      width: 100%;
      max-width: 440px;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      border-color: #94a3b8;
    }
    .tab-btn[data-type="int"].active { border-bottom: 3px solid #2563eb; }
    .tab-btn[data-type="real"].active { border-bottom: 3px solid #059669; }
    .tab-btn[data-type="bool"].active { border-bottom: 3px solid #d97706; }

    .stage {
      width: 100%;
      max-width: 440px;
      height: 240px;
      position: relative;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
    }

    .code-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 15px;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .kw { color: #2563eb; font-weight: 600; }
    .ident { color: #0f172a; }
    .val-int { color: #2563eb; font-weight: 700; }
    .val-real { color: #059669; font-weight: 700; }
    .val-bool { color: #d97706; font-weight: 700; }

    .chip {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
      text-transform: uppercase;
    }
    .chip-int { background: #dbeafe; color: #1d4ed8; }
    .chip-real { background: #d1fae5; color: #047857; }
    .chip-bool { background: #fef3c7; color: #b45309; }

    .view-panel {
      position: absolute;
      top: 66px;
      left: 14px;
      right: 14px;
      bottom: 14px;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .view-panel.active {
      display: flex;
    }

    /* Integer Visualization */
    .int-grid {
      display: flex;
      gap: 6px;
      align-items: center;
      justify-content: center;
      min-height: 50px;
    }
    .int-cube {
      width: 32px;
      height: 32px;
      background: #3b82f6;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 700;
      font-size: 14px;
    }

    /* Real Visualization */
    .ruler-wrap {
      width: 100%;
      max-width: 340px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px 16px;
    }
    .ruler-track {
      position: relative;
      height: 12px;
      background: #e2e8f0;
      border-radius: 6px;
      overflow: visible;
    }
    .ruler-fill {
      position: absolute;
      height: 100%;
      background: #10b981;
      border-radius: 6px;
      left: 0;
      top: 0;
    }
    .ruler-needle {
      position: absolute;
      top: -8px;
      width: 3px;
      height: 28px;
      background: #047857;
      border-radius: 2px;
      transform: translateX(-50%);
    }
    .ruler-marks {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    /* Boolean Visualization */
    .bool-switch {
      width: 110px;
      height: 54px;
      background: #cbd5e1;
      border-radius: 27px;
      padding: 5px;
      cursor: pointer;
      position: relative;
      transition: background 0.25s ease;
    }
    .bool-switch.true {
      background: #f59e0b;
    }
    .switch-knob {
      width: 44px;
      height: 44px;
      background: #ffffff;
      border-radius: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      color: #64748b;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      transform: translateX(0);
      transition: transform 0.25s ease, color 0.25s ease;
    }
    .bool-switch.true .switch-knob {
      transform: translateX(56px);
      color: #b45309;
    }

    .ctrl-row {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .btn-step {
      padding: 6px 14px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
    }
    .btn-step:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" data-type="int">Integer</button>
    <button class="tab-btn" data-type="real">Real</button>
    <button class="tab-btn" data-type="bool">Boolean</button>
  </div>

  <div class="stage">
    <div class="code-box">
      <div>
        <span class="kw">let</span> <span class="ident">x</span> = <span id="codeVal" class="val-int">5</span>;
      </div>
      <span id="typeChip" class="chip chip-int">INTEGER</span>
    </div>

    
    <div class="view-panel active" id="view-int">
      <div class="int-grid" id="intGrid"></div>
      <div class="ctrl-row">
        <button class="btn-step" id="intMinus">− 1</button>
        <button class="btn-step" id="intPlus">+ 1</button>
      </div>
    </div>

    
    <div class="view-panel" id="view-real">
      <div class="ruler-wrap">
        <div class="ruler-track">
          <div class="ruler-fill" id="rulerFill" style="width: 75%;"></div>
          <div class="ruler-needle" id="rulerNeedle" style="left: 75%;"></div>
        </div>
        <div class="ruler-marks">
          <span>0.0</span>
          <span>1.0</span>
          <span>2.0</span>
          <span>3.0</span>
          <span>4.0</span>
        </div>
      </div>
      <div class="ctrl-row">
        <button class="btn-step" id="realMinus">− 0.25</button>
        <button class="btn-step" id="realPlus">+ 0.25</button>
      </div>
    </div>

    
    <div class="view-panel" id="view-bool">
      <div class="bool-switch true" id="boolToggle">
        <div class="switch-knob" id="knobText">1</div>
      </div>
      <div class="ctrl-row">
        <button class="btn-step" id="boolFlip">Toggle (NOT)</button>
      </div>
    </div>
  </div>

  <script>
    let currentType = 'int';
    let intVal = 5;
    let realVal = 3.0;
    let boolVal = true;

    const codeVal = document.getElementById('codeVal');
    const typeChip = document.getElementById('typeChip');
    const tabs = document.querySelectorAll('.tab-btn');
    const panels = {
      int: document.getElementById('view-int'),
      real: document.getElementById('view-real'),
      bool: document.getElementById('view-bool')
    };

    function updateInteger() {
      codeVal.textContent = intVal;
      codeVal.className = 'val-int';
      typeChip.textContent = 'INTEGER';
      typeChip.className = 'chip chip-int';

      const grid = document.getElementById('intGrid');
      grid.innerHTML = '';
      for (let i = 1; i <= intVal; i++) {
        const cube = document.createElement('div');
        cube.className = 'int-cube';
        cube.textContent = i;
        grid.appendChild(cube);
      }
    }

    function updateReal() {
      codeVal.textContent = realVal.toFixed(2);
      codeVal.className = 'val-real';
      typeChip.textContent = 'REAL';
      typeChip.className = 'chip chip-real';

      const pct = (realVal / 4.0) * 100;
      document.getElementById('rulerFill').style.width = pct + '%';
      document.getElementById('rulerNeedle').style.left = pct + '%';
    }

    function updateBool() {
      codeVal.textContent = boolVal ? 'true' : 'false';
      codeVal.className = 'val-bool';
      typeChip.textContent = 'BOOLEAN';
      typeChip.className = 'chip chip-bool';

      const sw = document.getElementById('boolToggle');
      const knob = document.getElementById('knobText');
      if (boolVal) {
        sw.classList.add('true');
        knob.textContent = '1';
      } else {
        sw.classList.remove('true');
        knob.textContent = '0';
      }
    }

    function switchTab(type) {
      currentType = type;
      tabs.forEach(t => t.classList.toggle('active', t.dataset.type === type));
      Object.keys(panels).forEach(k => panels[k].classList.toggle('active', k === type));
      if (type === 'int') updateInteger();
      if (type === 'real') updateReal();
      if (type === 'bool') updateBool();
    }

    tabs.forEach(t => t.addEventListener('click', () => switchTab(t.dataset.type)));

    document.getElementById('intMinus').addEventListener('click', () => {
      if (intVal > 1) { intVal--; updateInteger(); }
    });
    document.getElementById('intPlus').addEventListener('click', () => {
      if (intVal < 8) { intVal++; updateInteger(); }
    });

    document.getElementById('realMinus').addEventListener('click', () => {
      if (realVal > 0.25) { realVal -= 0.25; updateReal(); }
    });
    document.getElementById('realPlus').addEventListener('click', () => {
      if (realVal < 4.0) { realVal += 0.25; updateReal(); }
    });

    const toggleBool = () => { boolVal = !boolVal; updateBool(); };
    document.getElementById('boolToggle').addEventListener('click', toggleBool);
    document.getElementById('boolFlip').addEventListener('click', toggleBool);

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

A common mistake is storing discrete counts—like the number of players or inventory slots—as a **real** data type.

Using a real number for an item count uses unnecessary memory and can introduce small floating-point precision errors (like `2.9999999` instead of `3`).

Whenever you encounter a new variable in an exam, ask yourself: *Is it a true/false condition, a continuous measurement with decimals, or an exact whole count?*

computer-science

Integer, Real, Boolean: Core Data Types. Identify integer, real and Boolean data types and choose the correct type for a given value.

GCSE Data Types: Integer, Real, Boolean, Character and String

Common Data Types and Variables in Key Stage 4 Computer Science

GCSE Computer Science: Data Types and Representation

When teaching this lesson to Key Stage 4 students, anchor theoretical concepts in tangible problem domains (e.g., game engines, e-commerce checkout systems, smart environmental controllers). Use diagnostic entry cards comparing mathematical numbers ($12$) and computer representations ($12$ vs $12.0$ vs $'12'$). Emphasize early on why computers require rigid typing (memory layout and processor instruction sets) to bridge the gap between abstract problem solving (CS-1) and concrete data representation (CS-5).

Integer, Real, Boolean: Core Data Types

Integers: Whole Numbers

Real: Decimal Numbers

Boolean: True or False