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

Imagine you have 1 whole candy bar, and you slice it into 10 equal pieces. What do you call just 1 of those small pieces?

When we cut 1 whole into **10 equal parts**, each part is called **one tenth**.

You can write one tenth as a fraction, $\frac{1}{10}$, or as a decimal number, **0.1**.

<!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>Tenths as Fractions and Decimals</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      min-height: 100%;
    }
    .diagram-content {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    /* Comparison display */
    .comparison-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
    }
    .val-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 16px;
      min-width: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      transition: border-color 0.2s ease;
    }
    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      font-size: 26px;
      font-weight: 700;
      line-height: 1.1;
      color: #0284c7;
    }
    .fraction .num {
      border-bottom: 2px solid #0284c7;
      padding: 0 4px;
    }
    .fraction .den {
      padding: 0 4px;
    }
    .equals-sign {
      font-size: 32px;
      font-weight: 700;
      color: #64748b;
    }
    .decimal-val {
      font-size: 34px;
      font-weight: 700;
      color: #0284c7;
      line-height: 1;
    }

    /* Interactive 10-bar strip */
    .bar-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .strip {
      display: flex;
      width: 100%;
      height: 48px;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
    }
    .segment {
      flex: 1;
      border-right: 1px solid #e2e8f0;
      background: #f8fafc;
      transition: background 0.15s ease;
      position: relative;
    }
    .segment:last-child {
      border-right: none;
    }
    .segment.filled {
      background: #22b7ff;
    }

    /* Number line */
    .numberline-container {
      width: 100%;
      padding: 10px 10px 0 10px;
      position: relative;
    }
    .nl-track {
      width: 100%;
      height: 4px;
      background: #94a3b8;
      border-radius: 2px;
      position: relative;
    }
    .nl-ticks {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
    }
    .tick {
      width: 2px;
      height: 12px;
      background: #94a3b8;
      transform: translateY(-4px);
    }
    .tick.major {
      height: 18px;
      transform: translateY(-7px);
      background: #475569;
      width: 2px;
    }
    .nl-labels {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
    }
    .nl-marker {
      position: absolute;
      top: -9px;
      width: 22px;
      height: 22px;
      background: #0284c7;
      border: 3px solid #ffffff;
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
      transform: translateX(-50%);
      transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Step buttons */
    .controls {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      margin-top: 4px;
    }
    .btn-step {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      min-width: 38px;
      text-align: center;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .btn-step:active {
      background: #e2e8f0;
    }
    .btn-step.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>
  <div class="diagram-content">
    
    
    <div class="comparison-row">
      <div class="val-card">
        <div class="fraction">
          <span class="num" id="numVal">1</span>
          <span class="den">10</span>
        </div>
      </div>
      <div class="equals-sign">=</div>
      <div class="val-card">
        <div class="decimal-val" id="decVal">0.1</div>
      </div>
    </div>

    
    <div class="bar-container">
      <div class="strip" id="strip" role="slider" aria-valuemin="1" aria-valuemax="10" aria-valuenow="1">
        <div class="segment filled" data-index="1"></div>
        <div class="segment" data-index="2"></div>
        <div class="segment" data-index="3"></div>
        <div class="segment" data-index="4"></div>
        <div class="segment" data-index="5"></div>
        <div class="segment" data-index="6"></div>
        <div class="segment" data-index="7"></div>
        <div class="segment" data-index="8"></div>
        <div class="segment" data-index="9"></div>
        <div class="segment" data-index="10"></div>
      </div>
    </div>

    
    <div class="numberline-container">
      <div class="nl-track">
        <div class="nl-ticks">
          <div class="tick major"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick major"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick"></div>
          <div class="tick major"></div>
        </div>
        <div class="nl-marker" id="nlMarker" style="left: 10%;"></div>
      </div>
      <div class="nl-labels">
        <span>0</span>
        <span>0.5</span>
        <span>1</span>
      </div>
    </div>

    
    <div class="controls" id="btnGroup">
      <button class="btn-step active" data-v="1">1</button>
      <button class="btn-step" data-v="2">2</button>
      <button class="btn-step" data-v="3">3</button>
      <button class="btn-step" data-v="4">4</button>
      <button class="btn-step" data-v="5">5</button>
      <button class="btn-step" data-v="6">6</button>
      <button class="btn-step" data-v="7">7</button>
      <button class="btn-step" data-v="8">8</button>
      <button class="btn-step" data-v="9">9</button>
      <button class="btn-step" data-v="10">10</button>
    </div>

  </div>

  <script>
    let currentTenth = 1;
    const numEl = document.getElementById('numVal');
    const decEl = document.getElementById('decVal');
    const markerEl = document.getElementById('nlMarker');
    const segments = document.querySelectorAll('.segment');
    const buttons = document.querySelectorAll('.btn-step');
    const strip = document.getElementById('strip');

    function setTenths(val) {
      currentTenth = Math.max(1, Math.min(10, val));
      
      // Update Fraction & Decimal values
      numEl.textContent = currentTenth;
      decEl.textContent = currentTenth === 10 ? '1.0' : '0.' + currentTenth;

      // Update Strip Fill
      segments.forEach((seg, idx) => {
        if (idx < currentTenth) {
          seg.classList.add('filled');
        } else {
          seg.classList.remove('filled');
        }
      });

      // Update Numberline Position (0% to 100%)
      markerEl.style.left = (currentTenth * 10) + '%';

      // Update Active Button
      buttons.forEach(btn => {
        if (parseInt(btn.getAttribute('data-v')) === currentTenth) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });

      strip.setAttribute('aria-valuenow', currentTenth);
    }

    // Segment & strip click / tap
    segments.forEach(seg => {
      seg.addEventListener('pointerdown', (e) => {
        const idx = parseInt(seg.getAttribute('data-index'));
        setTenths(idx);
      });
    });

    // Button clicks
    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        const v = parseInt(btn.getAttribute('data-v'));
        setTenths(v);
      });
    });

    // Drag support on strip
    let isDragging = false;
    strip.addEventListener('pointerdown', (e) => {
      isDragging = true;
      handleStripPointer(e);
    });
    window.addEventListener('pointermove', (e) => {
      if (isDragging) handleStripPointer(e);
    });
    window.addEventListener('pointerup', () => {
      isDragging = false;
    });

    function handleStripPointer(e) {
      const rect = strip.getBoundingClientRect();
      const x = Math.max(0, Math.min(rect.width, e.clientX - rect.left));
      const fractionIndex = Math.min(10, Math.max(1, Math.ceil((x / rect.width) * 10)));
      setTenths(fractionIndex);
    }
  </script>
</body>
</html>

How do we write tenths using our normal math place value columns?

The little dot in a decimal is called the **decimal point**. It separates whole numbers on the left from tiny parts on the right.

<!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>Tenths as Fractions and Decimals</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    .display-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 480px;
    }

    .value-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      min-height: 90px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .fraction-view {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      font-size: 28px;
      font-weight: 700;
      line-height: 1;
    }

    .fraction-top {
      color: #0284c7;
      padding-bottom: 3px;
      border-bottom: 2.5px solid #1e2945;
      width: 100%;
      text-align: center;
    }

    .fraction-bottom {
      color: #64748b;
      padding-top: 3px;
      text-align: center;
    }

    .place-table {
      display: flex;
      align-items: flex-end;
      gap: 4px;
    }

    .place-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .place-label {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .place-val {
      font-size: 32px;
      font-weight: 700;
      line-height: 1;
      width: 36px;
      text-align: center;
    }

    .val-ones {
      color: #64748b;
    }

    .val-tenths {
      color: #0284c7;
    }

    .dot-separator {
      font-size: 36px;
      font-weight: 900;
      color: #0284c7;
      line-height: 0.8;
      padding: 0 2px;
    }

    .bar-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .bar-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 3px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 10px;
      height: 64px;
    }

    .bar-segment {
      background: #ffffff;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      color: #94a3b8;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .bar-segment.active {
      background: #22b7ff;
      color: #ffffff;
    }

    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 480px;
    }

    .btn-step {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 20px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }

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

    .btn-step:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    .slider {
      flex: 1;
      height: 8px;
      border-radius: 4px;
      accent-color: #0284c7;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="display-row">
    
    <div class="value-card">
      <div class="fraction-view">
        <span class="fraction-top" id="fracTop">4</span>
        <span class="fraction-bottom">10</span>
      </div>
    </div>

    
    <div class="value-card">
      <div class="place-table">
        <div class="place-col">
          <span class="place-label">Ones</span>
          <span class="place-val val-ones" id="onesVal">0</span>
        </div>
        <span class="dot-separator">.</span>
        <div class="place-col">
          <span class="place-label">Tenths</span>
          <span class="place-val val-tenths" id="tenthsVal">4</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="bar-container">
    <div class="bar-grid" id="barGrid">
      <div class="bar-segment" data-val="1">1</div>
      <div class="bar-segment" data-val="2">2</div>
      <div class="bar-segment" data-val="3">3</div>
      <div class="bar-segment" data-val="4">4</div>
      <div class="bar-segment" data-val="5">5</div>
      <div class="bar-segment" data-val="6">6</div>
      <div class="bar-segment" data-val="7">7</div>
      <div class="bar-segment" data-val="8">8</div>
      <div class="bar-segment" data-val="9">9</div>
      <div class="bar-segment" data-val="10">10</div>
    </div>
  </div>

  
  <div class="controls-row">
    <button class="btn-step" id="btnMinus" aria-label="Decrease">−</button>
    <input type="range" min="0" max="10" value="4" class="slider" id="slider" aria-label="Tenths slider">
    <button class="btn-step" id="btnPlus" aria-label="Increase">+</button>
  </div>

  <script>
    let currentVal = 4;

    const fracTop = document.getElementById('fracTop');
    const onesVal = document.getElementById('onesVal');
    const tenthsVal = document.getElementById('tenthsVal');
    const segments = document.querySelectorAll('.bar-segment');
    const slider = document.getElementById('slider');
    const btnMinus = document.getElementById('btnMinus');
    const btnPlus = document.getElementById('btnPlus');

    function updateView(val) {
      currentVal = Math.max(0, Math.min(10, val));
      
      // Update displays
      fracTop.textContent = currentVal;
      
      if (currentVal === 10) {
        onesVal.textContent = '1';
        tenthsVal.textContent = '0';
      } else {
        onesVal.textContent = '0';
        tenthsVal.textContent = currentVal;
      }

      // Update Bar Segments
      segments.forEach((seg, index) => {
        if (index < currentVal) {
          seg.classList.add('active');
        } else {
          seg.classList.remove('active');
        }
      });

      // Update Slider & Buttons
      slider.value = currentVal;
      btnMinus.disabled = currentVal <= 0;
      btnPlus.disabled = currentVal >= 10;
    }

    // Direct Bar Click
    segments.forEach((seg) => {
      seg.addEventListener('click', () => {
        const val = parseInt(seg.getAttribute('data-val'), 10);
        if (currentVal === val) {
          updateView(val - 1);
        } else {
          updateView(val);
        }
      });
    });

    // Slider Event
    slider.addEventListener('input', (e) => {
      updateView(parseInt(e.target.value, 10));
    });

    // Stepper Buttons
    btnMinus.addEventListener('click', () => updateView(currentVal - 1));
    btnPlus.addEventListener('click', () => updateView(currentVal + 1));

    // Initialize
    updateView(4);
  </script>
</body>
</html>

If you color in 4 parts out of 10, you have 0 whole bars and 4 tenths, which we write as **0.4**.

What if we line up all the tenths in order from 0 to 1?

A **number line** lets us zoom in on the space between 0 and 1.

<!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>Understanding Tenths</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      gap: 12px;
    }

    .main-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      background: #ffffff;
      padding: 12px 24px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      width: 100%;
      max-width: 440px;
      min-height: 72px;
    }

    .val-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 65px;
    }

    .val-label {
      font-size: 11px;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      color: #0284c7;
      line-height: 1;
    }

    .fraction .num {
      border-bottom: 2px solid #0284c7;
      padding-bottom: 2px;
    }

    .fraction .den {
      padding-top: 2px;
    }

    .eq-sign {
      font-size: 22px;
      font-weight: 700;
      color: #94a3b8;
    }

    .decimal-val {
      font-size: 26px;
      font-weight: 800;
      color: #0284c7;
      font-variant-numeric: tabular-nums;
    }

    /* Bar Model (10 tenths strip) */
    .strip-container {
      width: 100%;
      max-width: 460px;
      background: #ffffff;
      padding: 12px 16px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .strip-bar {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      height: 28px;
      border-radius: 6px;
      border: 2px solid #cbd5e1;
      overflow: hidden;
      background: #f1f5f9;
    }

    .strip-cell {
      border-right: 1px solid #cbd5e1;
      transition: background-color 0.25s ease;
      cursor: pointer;
    }

    .strip-cell:last-child {
      border-right: none;
    }

    .strip-cell.filled {
      background-color: #38bdf8;
    }

    .strip-cell.filled.last {
      background-color: #0284c7;
    }

    /* Number Line Canvas Container */
    .line-wrapper {
      width: 100%;
      max-width: 460px;
      background: #ffffff;
      padding: 16px 12px 10px 12px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      position: relative;
    }

    svg.number-line {
      width: 100%;
      height: 100px;
      overflow: visible;
      display: block;
    }

    .tick-hitbox {
      cursor: pointer;
    }

    .tick-label {
      font-size: 11px;
      fill: #64748b;
      font-weight: 600;
      text-anchor: middle;
      pointer-events: none;
    }

    .tick-label.active {
      fill: #0284c7;
      font-weight: 800;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 440px;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s;
      min-width: 44px;
      height: 38px;
    }

    .btn:active {
      background: #e2e8f0;
    }

    .btn-primary {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .btn-primary:active {
      background: #0369a1;
    }

    .hop-dots {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .dot.active {
      background: #0284c7;
    }
  </style>
</head>
<body>

  
  <div class="main-display">
    <div class="val-box">
      <span class="val-label">Fraction</span>
      <div class="fraction" id="fracDisplay">
        <span class="num" id="fracNum">0</span>
        <span class="den">10</span>
      </div>
    </div>
    
    <span class="eq-sign">=</span>

    <div class="val-box">
      <span class="val-label">Decimal</span>
      <span class="decimal-val" id="decDisplay">0.0</span>
    </div>
  </div>

  
  <div class="strip-container">
    <div class="strip-bar" id="stripBar">
      <div class="strip-cell"></div>
      <div class="strip-cell"></div>
      <div class="strip-cell"></div>
      <div class="strip-cell"></div>
      <div class="strip-cell"></div>
      <div class="strip-cell"></div>
      <div class="strip-cell"></div>
      <div class="strip-cell"></div>
      <div class="strip-cell"></div>
      <div class="strip-cell"></div>
    </div>
  </div>

  
  <div class="line-wrapper">
    <svg class="number-line" viewBox="0 0 400 95" id="lineSvg">
      <defs>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#94a3b8"/>
        </marker>
      </defs>

      
      <line x1="20" y1="45" x2="380" y2="45" stroke="#94a3b8" stroke-width="3" marker-end="url(#arrow)" />

      
      <path id="hopArc" fill="none" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="4 3" d="" />

      
      <g id="ticksGroup"></g>

      
      <circle id="posMarker" cx="30" cy="45" r="7" fill="#0284c7" stroke="#ffffff" stroke-width="2.5" />
    </svg>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" aria-label="Previous">◀</button>
    <button class="btn btn-primary" id="playBtn" style="min-width: 80px;">
      <span id="playIcon">▶</span>
    </button>
    <button class="btn" id="nextBtn" aria-label="Next">▶</button>
  </div>

  
  <div class="hop-dots" id="dotsContainer"></div>

  <script>
    const TOTAL_STEPS = 10; // 0 to 10 tenths
    let currentStep = 0;
    let timer = null;

    const fracNum = document.getElementById('fracNum');
    const decDisplay = document.getElementById('decDisplay');
    const stripCells = Array.from(document.querySelectorAll('.strip-cell'));
    const posMarker = document.getElementById('posMarker');
    const hopArc = document.getElementById('hopArc');
    const ticksGroup = document.getElementById('ticksGroup');
    const dotsContainer = document.getElementById('dotsContainer');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    // Number Line geometry
    const startX = 30;
    const endX = 360;
    const lineY = 45;
    const stepWidth = (endX - startX) / 10;

    // Build interactive ticks & dots
    for (let i = 0; i <= 10; i++) {
      const x = startX + i * stepWidth;
      
      // SVG Tick group
      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      g.setAttribute('class', 'tick-hitbox');
      g.addEventListener('click', () => setStep(i));

      // Tick line
      const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      tick.setAttribute('x1', x);
      tick.setAttribute('y1', lineY - 8);
      tick.setAttribute('x2', x);
      tick.setAttribute('y2', lineY + 8);
      tick.setAttribute('stroke', '#64748b');
      tick.setAttribute('stroke-width', i === 0 || i === 10 ? '3' : '1.5');
      g.appendChild(tick);

      // Decimal text below
      const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      label.setAttribute('x', x);
      label.setAttribute('y', lineY + 24);
      label.setAttribute('class', 'tick-label');
      label.id = `label-dec-${i}`;
      label.textContent = (i / 10).toFixed(1);
      g.appendChild(label);

      // Fraction text above
      const fracLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      fracLabel.setAttribute('x', x);
      fracLabel.setAttribute('y', lineY - 14);
      fracLabel.setAttribute('class', 'tick-label');
      fracLabel.id = `label-frac-${i}`;
      fracLabel.textContent = `${i}/10`;
      g.appendChild(fracLabel);

      // Invisible hit target for easy tapping
      const hitRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      hitRect.setAttribute('x', x - 15);
      hitRect.setAttribute('y', 0);
      hitRect.setAttribute('width', 30);
      hitRect.setAttribute('height', 90);
      hitRect.setAttribute('fill', 'transparent');
      g.appendChild(hitRect);

      ticksGroup.appendChild(g);

      // Pagination dot
      const dot = document.createElement('div');
      dot.className = 'dot' + (i === 0 ? ' active' : '');
      dot.addEventListener('click', () => setStep(i));
      dotsContainer.appendChild(dot);
    }

    // Strip cell clicks
    stripCells.forEach((cell, idx) => {
      cell.addEventListener('click', () => setStep(idx + 1));
    });

    function setStep(step) {
      currentStep = Math.max(0, Math.min(10, step));

      // Update Fraction & Decimal readout
      fracNum.textContent = currentStep;
      decDisplay.textContent = (currentStep / 10).toFixed(1);

      // Update Strip Model
      stripCells.forEach((cell, idx) => {
        cell.classList.toggle('filled', idx < currentStep);
        cell.classList.toggle('last', idx === currentStep - 1);
      });

      // Update Number line marker
      const targetX = startX + currentStep * stepWidth;
      posMarker.setAttribute('cx', targetX);

      // Update hop arcs from 0 to current
      if (currentStep > 0) {
        let d = `M ${startX} ${lineY}`;
        for (let i = 1; i <= currentStep; i++) {
          const prevX = startX + (i - 1) * stepWidth;
          const currX = startX + i * stepWidth;
          const midX = (prevX + currX) / 2;
          d += ` Q ${midX} ${lineY - 24} ${currX} ${lineY}`;
        }
        hopArc.setAttribute('d', d);
      } else {
        hopArc.setAttribute('d', '');
      }

      // Highlight active tick labels
      for (let i = 0; i <= 10; i++) {
        const decL = document.getElementById(`label-dec-${i}`);
        const fracL = document.getElementById(`label-frac-${i}`);
        const isActive = i === currentStep;
        if (decL) decL.classList.toggle('active', isActive);
        if (fracL) fracL.classList.toggle('active', isActive);
      }

      // Update dots
      const dots = Array.from(document.querySelectorAll('.dot'));
      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === currentStep);
      });
    }

    function togglePlay() {
      if (timer) {
        pause();
      } else {
        play();
      }
    }

    function play() {
      if (timer) clearInterval(timer);
      playIcon.textContent = '⏸';
      timer = setInterval(() => {
        if (currentStep >= 10) {
          setStep(0);
        } else {
          setStep(currentStep + 1);
        }
      }, 1800);
    }

    function pause() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      playIcon.textContent = '▶';
    }

    playBtn.addEventListener('click', togglePlay);
    prevBtn.addEventListener('click', () => { pause(); setStep(currentStep - 1); });
    nextBtn.addEventListener('click', () => { pause(); setStep(currentStep + 1); });

    // Initialize
    setStep(0);
  </script>
</body>
</html>

Every single hop forward adds one more tenth, all the way until 10 tenths make **1 whole**!

Be careful: some people look at **0.1** and think it means 10, but 0.1 is much smaller than 1.

Whenever you see a decimal like **0.7**, just think of 7 slices out of a 10-piece treat!

math

Understanding Tenths as Fractions and Decimals. Model and represent tenths on place value grids, number lines, and as decimal fractions (0.1).

Decimals as Words and Fractions: Introduction to Tenths

Understanding Tenths as Fractions and Decimals (Curriculum for Excellence / Second Level Maths)

Decimals: Tenths on a Place Value Grid and Number Line

Pedagogical Strategy: Follow the Concrete-Pictorial-Abstract (CPA) progression. Begin with concrete manipulatives (such as Base-10 rods/flats or Cuisenaire rods where a flat is $1$ whole and a rod is $0.1$). Transition to pictorial representations (ten-frames, strip models, dual-scale number lines, and place value charts) before moving to abstract fraction ($\frac{a}{10}$) and decimal notation ($0.a$). Note on CfE alignment: While foundational partitioning starts early, formal decimal fraction notation and standard MNU 2-02a are typically taught within Scottish Curriculum for Excellence Second Level (P5–P7); introduce with strong sensory and visual scaffolding if adapting for younger learners.

Understanding Tenths as Fractions and Decimals

What Is a Tenth?

The Place Value Grid

Tenths on a Number Line