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 playing a game where you lose $2$ points every time you touch a spike. What happens to your score if you hit $3$ spikes in a row?

Each spike gives you **$-2$ points**. Touching 3 spikes means you add that loss 3 times: $(-2) + (-2) + (-2)$.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 14px;
      user-select: none;
    }

    /* Spike Cards */
    .spikes-row {
      display: flex;
      gap: 10px;
      justify-content: center;
      width: 100%;
      max-width: 440px;
    }

    .spike-card {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      opacity: 0.35;
      transform: translateY(0);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .spike-card.active {
      opacity: 1;
      border-color: #ef4444;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
      background: #fff5f5;
    }

    .spike-icon {
      font-size: 22px;
      line-height: 1;
    }

    .spike-val {
      font-weight: 700;
      font-size: 15px;
      color: #ef4444;
    }

    /* Math Formula Display */
    .formula-box {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 16px;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      width: 100%;
      max-width: 440px;
    }

    /* Number Line */
    .svg-container {
      width: 100%;
      max-width: 480px;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .axis-line {
      stroke: #94a3b8;
      stroke-width: 2.5;
      stroke-linecap: round;
    }

    .tick {
      stroke: #94a3b8;
      stroke-width: 2;
    }

    .tick-label {
      font-family: system-ui, sans-serif;
      font-size: 13px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
      dominant-baseline: hanging;
    }

    .tick-label.highlight {
      fill: #ef4444;
      font-weight: 800;
    }

    .jump-arc {
      fill: none;
      stroke: #ef4444;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 240;
      stroke-dashoffset: 240;
      transition: stroke-dashoffset 0.5s ease, opacity 0.3s ease;
      opacity: 0;
    }

    .jump-arc.visible {
      stroke-dashoffset: 0;
      opacity: 1;
    }

    .jump-label {
      font-family: system-ui, sans-serif;
      font-size: 13px;
      font-weight: 700;
      fill: #ef4444;
      text-anchor: middle;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .jump-label.visible {
      opacity: 1;
    }

    .pos-dot {
      fill: #ef4444;
      stroke: #ffffff;
      stroke-width: 2.5;
      transition: cx 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
    }

    .step-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .step-btn:hover {
      border-color: #22b7ff;
      color: #0284c7;
    }

    .step-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }
  </style>
</head>
<body>

  
  <div class="spikes-row">
    <div class="spike-card active" id="card1" onclick="setCount(1)">
      <span class="spike-icon">💥</span>
      <span class="spike-val">-2</span>
    </div>
    <div class="spike-card" id="card2" onclick="setCount(2)">
      <span class="spike-icon">💥</span>
      <span class="spike-val">-2</span>
    </div>
    <div class="spike-card" id="card3" onclick="setCount(3)">
      <span class="spike-icon">💥</span>
      <span class="spike-val">-2</span>
    </div>
  </div>

  
  <div class="formula-box" id="formula"></div>

  
  <div class="svg-container">
    <svg viewBox="0 0 460 130">
      
      <defs>
        <marker id="arrow-left" viewBox="0 0 10 10" refX="2" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 8 1 L 2 5 L 8 9" fill="none" stroke="#ef4444" stroke-width="2.2" stroke-linecap="round"/>
        </marker>
      </defs>

      
      <line x1="20" y1="95" x2="440" y2="95" class="axis-line"/>

      
      
      <line x1="410" y1="90" x2="410" y2="100" class="tick"/>
      <text x="410" y="106" class="tick-label" id="lbl-0">0</text>

      <line x1="355" y1="91" x2="355" y2="99" class="tick"/>
      <text x="355" y="106" class="tick-label">-1</text>

      <line x1="300" y1="90" x2="300" y2="100" class="tick"/>
      <text x="300" y="106" class="tick-label" id="lbl-2">-2</text>

      <line x1="245" y1="91" x2="245" y2="99" class="tick"/>
      <text x="245" y="106" class="tick-label">-3</text>

      <line x1="190" y1="90" x2="190" y2="100" class="tick"/>
      <text x="190" y="106" class="tick-label" id="lbl-4">-4</text>

      <line x1="135" y1="91" x2="135" y2="99" class="tick"/>
      <text x="135" y="106" class="tick-label">-5</text>

      <line x1="80" y1="90" x2="80" y2="100" class="tick"/>
      <text x="80" y="106" class="tick-label" id="lbl-6">-6</text>

      
      
      <path id="arc1" d="M 408 85 Q 355 25 304 85" class="jump-arc" marker-end="url(#arrow-left)"/>
      <text id="txt1" x="355" y="32" class="jump-label">-2</text>

      
      <path id="arc2" d="M 298 85 Q 245 25 194 85" class="jump-arc" marker-end="url(#arrow-left)"/>
      <text id="txt2" x="245" y="32" class="jump-label">-2</text>

      
      <path id="arc3" d="M 188 85 Q 135 25 84 85" class="jump-arc" marker-end="url(#arrow-left)"/>
      <text id="txt3" x="135" y="32" class="jump-label">-2</text>

      
      <circle id="dot" cx="300" cy="95" r="5" class="pos-dot"/>
    </svg>
  </div>

  
  <div class="controls">
    <button class="step-btn active" id="btn1" onclick="setCount(1)">1 Spike</button>
    <button class="step-btn" id="btn2" onclick="setCount(2)">2 Spikes</button>
    <button class="step-btn" id="btn3" onclick="setCount(3)">3 Spikes</button>
  </div>

  <script>
    const dotCoords = { 1: 300, 2: 190, 3: 80 };
    const formulas = {
      1: "1 \\times (-2) = -2",
      2: "2 \\times (-2) = -4",
      3: "3 \\times (-2) = -6"
    };

    let current = 1;

    function renderMath(latex) {
      const el = document.getElementById('formula');
      if (window.katex) {
        katex.render(latex, el, { throwOnError: false });
      } else {
        el.textContent = latex.replace(/\\times/g, '×').replace(/\\/g, '');
      }
    }

    function setCount(n) {
      current = n;

      // Update Spike Cards
      for (let i = 1; i <= 3; i++) {
        const card = document.getElementById('card' + i);
        const btn = document.getElementById('btn' + i);
        const arc = document.getElementById('arc' + i);
        const txt = document.getElementById('txt' + i);

        if (i <= n) {
          card.classList.add('active');
          arc.classList.add('visible');
          txt.classList.add('visible');
        } else {
          card.classList.remove('active');
          arc.classList.remove('visible');
          txt.classList.remove('visible');
        }

        if (i === n) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      }

      // Move marker dot
      document.getElementById('dot').setAttribute('cx', dotCoords[n]);

      // Highlight labels
      document.getElementById('lbl-2').classList.toggle('highlight', n === 1);
      document.getElementById('lbl-4').classList.toggle('highlight', n === 2);
      document.getElementById('lbl-6').classList.toggle('highlight', n === 3);

      // Render formula
      renderMath(formulas[n]);
    }

    window.addEventListener('DOMContentLoaded', () => {
      setCount(3);
    });
  </script>
</body>
</html>

How can we write this fast addition as a multiplication problem?

**Multiplication** is a shortcut for adding equal groups. So $3 \times (-2)$ means 3 groups of $-2$.

<!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>Multiplying Positive and Negative Integers</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
  <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body {
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .main-view {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    
    /* Equation display */
    .equation-bar {
      font-size: 22px;
      font-weight: 600;
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      padding: 8px 18px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      border: 1px solid #e6e6e6;
    }

    /* Groups container */
    .groups-area {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      min-height: 90px;
      align-items: center;
      width: 100%;
    }
    .group-box {
      background: #ffffff;
      border: 2px dashed #cbd5e1;
      border-radius: 12px;
      padding: 8px 12px;
      display: flex;
      gap: 6px;
      align-items: center;
      animation: popIn 0.3s ease forwards;
    }
    @keyframes popIn {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1); }
    }
    .chip {
      width: 32px;
      height: 32px;
      background: #fee2e2;
      border: 1.5px solid #ef4444;
      color: #b91c1c;
      font-weight: 700;
      font-size: 15px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Number line */
    .number-line-container {
      width: 100%;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e6e6e6;
      padding: 10px 14px 6px 14px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    svg {
      width: 100%;
      height: 70px;
      display: block;
      overflow: visible;
    }
    .axis-line { stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; }
    .tick { stroke: #94a3b8; stroke-width: 1.5; }
    .tick-label { fill: #64748b; font-size: 11px; text-anchor: middle; font-weight: 500; }
    .tick-label.active { fill: #ef4444; font-weight: 700; font-size: 12px; }
    .jump-arc {
      fill: none;
      stroke: #ef4444;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      animation: drawArc 0.4s ease forwards;
    }
    @keyframes drawArc {
      to { stroke-dashoffset: 0; }
    }
    .target-dot {
      fill: #ef4444;
      animation: popIn 0.3s ease forwards;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #ffffff;
      padding: 6px 12px;
      border-radius: 30px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }
    .btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid #d1d5db;
      background: #f8fafc;
      color: #1e2945;
      font-size: 18px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.15s, opacity 0.15s;
    }
    .btn:hover { background: #e2e8f0; }
    .btn:disabled { opacity: 0.3; cursor: default; }
    .step-indicator {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      min-width: 70px;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="main-view">
    <div id="equation" class="equation-bar"></div>
    
    <div id="groups" class="groups-area"></div>

    <div class="number-line-container">
      <svg id="numLineSvg" viewBox="0 0 360 70"></svg>
    </div>

    <div class="controls">
      <button class="btn" id="btnMinus" aria-label="Decrease groups">−</button>
      <div class="step-indicator" id="groupCountText"></div>
      <button class="btn" id="btnPlus" aria-label="Increase groups">+</button>
    </div>
  </div>

  <script>
    let groups = 3;
    const valuePerGroup = -2;
    const minGroups = 1;
    const maxGroups = 4;

    const eqEl = document.getElementById('equation');
    const groupsEl = document.getElementById('groups');
    const groupCountText = document.getElementById('groupCountText');
    const btnMinus = document.getElementById('btnMinus');
    const btnPlus = document.getElementById('btnPlus');
    const svg = document.getElementById('numLineSvg');

    function renderMath() {
      const product = groups * valuePerGroup;
      const additionParts = Array(groups).fill('(-2)').join(' + ');
      const expr = `${groups} \\times (-2) = ${additionParts} = ${product}`;
      katex.render(expr, eqEl, { throwOnError: false });
    }

    function renderGroups() {
      groupsEl.innerHTML = '';
      for (let i = 0; i < groups; i++) {
        const box = document.createElement('div');
        box.className = 'group-box';
        box.innerHTML = `
          <div class="chip">−1</div>
          <div class="chip">−1</div>
        `;
        groupsEl.appendChild(box);
      }
      groupCountText.textContent = `${groups} × (−2)`;
    }

    function renderNumberLine() {
      svg.innerHTML = '';

      const minXVal = -8;
      const maxXVal = 1;
      const leftPad = 25;
      const rightPad = 25;
      const svgWidth = 360;
      const yAxis = 48;

      const getX = (val) => {
        const t = (val - minXVal) / (maxXVal - minXVal);
        return leftPad + t * (svgWidth - leftPad - rightPad);
      };

      // Base line
      const axis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      axis.setAttribute('x1', leftPad - 10);
      axis.setAttribute('y1', yAxis);
      axis.setAttribute('x2', svgWidth - rightPad + 10);
      axis.setAttribute('y2', yAxis);
      axis.setAttribute('class', 'axis-line');
      svg.appendChild(axis);

      const product = groups * valuePerGroup;

      // Ticks & Labels
      for (let v = minXVal; v <= maxXVal; v++) {
        const x = getX(v);
        
        const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        tick.setAttribute('x1', x);
        tick.setAttribute('y1', yAxis - 4);
        tick.setAttribute('x2', x);
        tick.setAttribute('y2', yAxis + 4);
        tick.setAttribute('class', 'tick');
        svg.appendChild(tick);

        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', x);
        text.setAttribute('y', yAxis + 16);
        text.setAttribute('class', `tick-label ${v === product ? 'active' : ''}`);
        text.textContent = v;
        svg.appendChild(text);
      }

      // Jumps
      for (let i = 0; i < groups; i++) {
        const startVal = i * valuePerGroup;
        const endVal = (i + 1) * valuePerGroup;
        const x1 = getX(startVal);
        const x2 = getX(endVal);
        const midX = (x1 + x2) / 2;
        const arcY = yAxis - 22;

        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', `M ${x1} ${yAxis - 2} Q ${midX} ${arcY} ${x2} ${yAxis - 2}`);
        path.setAttribute('class', 'jump-arc');
        path.style.animationDelay = `${i * 0.1}s`;
        svg.appendChild(path);
      }

      // End circle
      const finalX = getX(product);
      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      circle.setAttribute('cx', finalX);
      circle.setAttribute('cy', yAxis);
      circle.setAttribute('r', '4.5');
      circle.setAttribute('class', 'target-dot');
      svg.appendChild(circle);
    }

    function update() {
      btnMinus.disabled = groups <= minGroups;
      btnPlus.disabled = groups >= maxGroups;
      renderMath();
      renderGroups();
      renderNumberLine();
    }

    btnMinus.addEventListener('click', () => {
      if (groups > minGroups) {
        groups--;
        update();
      }
    });

    btnPlus.addEventListener('click', () => {
      if (groups < maxGroups) {
        groups++;
        update();
      }
    });

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

Does this work every single time you multiply a positive number and a negative number?

Look at what happens when we count down by groups of $3$. Each time the multiplier drops by 1, the total drops by $3$.

<!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>Pattern of Multiplying Integers</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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 580px;
    }

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

    /* Pattern Ladder */
    .ladder {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .row-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 12px;
      border-radius: 8px;
      background: #f8f9fa;
      border: 1px solid #e5e7eb;
      font-size: 15px;
      font-weight: 600;
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .row-item.active {
      background: #eef2ff;
      border-color: #4f46e5;
      box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
      transform: scale(1.02);
    }

    .row-item.neg .prod {
      color: #dc2626;
    }
    .row-item.zero .prod {
      color: #4b5563;
    }
    .row-item.pos .prod {
      color: #4f46e5;
    }

    .delta {
      font-size: 12px;
      color: #dc2626;
      background: #fee2e2;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 700;
    }

    /* Visualizer Box */
    .vis-panel {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 16px;
    }

    .active-calc {
      text-align: center;
      padding: 12px 8px;
      border-radius: 8px;
      background: #f8f9fa;
    }

    .active-expr {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: 0.5px;
    }

    .active-expr .multiplier {
      color: #4f46e5;
    }
    .active-expr .multiplier.neg {
      color: #dc2626;
    }

    .active-expr .ans {
      display: inline-block;
      min-width: 48px;
      padding: 2px 8px;
      border-radius: 6px;
      color: #ffffff;
      background: #4f46e5;
      transition: background-color 0.25s ease;
    }
    .active-expr .ans.neg {
      background: #dc2626;
    }
    .active-expr .ans.zero {
      background: #6b7280;
    }

    /* Number Line */
    .numline-container {
      margin-top: 16px;
      position: relative;
      height: 70px;
      width: 100%;
    }

    svg.numline-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

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

    .btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s ease;
    }

    .btn:hover {
      background: #f3f4f6;
      border-color: #9ca3af;
    }

    .btn-play {
      background: #4f46e5;
      border-color: #4f46e5;
      color: #ffffff;
    }
    .btn-play:hover {
      background: #4338ca;
      border-color: #4338ca;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="ladder" id="ladder">
      <div class="row-item pos" data-step="0">
        <span>+3 × 3 = <span class="prod">+9</span></span>
        <span class="delta">−3</span>
      </div>
      <div class="row-item pos" data-step="1">
        <span>+2 × 3 = <span class="prod">+6</span></span>
        <span class="delta">−3</span>
      </div>
      <div class="row-item pos" data-step="2">
        <span>+1 × 3 = <span class="prod">+3</span></span>
        <span class="delta">−3</span>
      </div>
      <div class="row-item zero" data-step="3">
        <span>&nbsp; 0 × 3 = <span class="prod">&nbsp;0</span></span>
        <span class="delta">−3</span>
      </div>
      <div class="row-item neg" data-step="4">
        <span>−1 × 3 = <span class="prod">−3</span></span>
        <span class="delta">−3</span>
      </div>
      <div class="row-item neg" data-step="5">
        <span>−2 × 3 = <span class="prod">−6</span></span>
        <span class="delta">−3</span>
      </div>
      <div class="row-item neg" data-step="6">
        <span>−3 × 3 = <span class="prod">−9</span></span>
        <span class="delta">−3</span>
      </div>
    </div>

    
    <div class="vis-panel">
      <div class="active-calc">
        <div class="active-expr" id="exprDisplay">
          <span class="multiplier" id="multiVal">+3</span> × 3 = <span class="ans" id="ansVal">+9</span>
        </div>
      </div>

      
      <div class="numline-container">
        <svg class="numline-svg" viewBox="0 0 240 70" preserveAspectRatio="xMidYMid meet">
          
          <line x1="20" y1="42" x2="220" y2="42" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" />
          
          
          
          <g font-size="10" font-weight="600" text-anchor="middle" fill="#6b7280">
            <line x1="25" y1="38" x2="25" y2="46" stroke="#9ca3af" stroke-width="2"/>
            <text x="25" y="58">-9</text>

            <line x1="56.7" y1="38" x2="56.7" y2="46" stroke="#9ca3af" stroke-width="2"/>
            <text x="56.7" y="58">-6</text>

            <line x1="88.3" y1="38" x2="88.3" y2="46" stroke="#9ca3af" stroke-width="2"/>
            <text x="88.3" y="58">-3</text>

            <line x1="120" y1="35" x2="120" y2="49" stroke="#1e2945" stroke-width="2"/>
            <text x="120" y="58" fill="#1e2945" font-weight="700">0</text>

            <line x1="151.7" y1="38" x2="151.7" y2="46" stroke="#9ca3af" stroke-width="2"/>
            <text x="151.7" y="58">+3</text>

            <line x1="183.3" y1="38" x2="183.3" y2="46" stroke="#9ca3af" stroke-width="2"/>
            <text x="183.3" y="58">+6</text>

            <line x1="215" y1="38" x2="215" y2="46" stroke="#9ca3af" stroke-width="2"/>
            <text x="215" y="58">+9</text>
          </g>

          
          <path id="jumpArc" d="" fill="none" stroke="#dc2626" stroke-width="2" stroke-dasharray="3,3" opacity="0"/>
          <text id="jumpText" x="0" y="14" fill="#dc2626" font-size="11" font-weight="bold" text-anchor="middle" opacity="0">−3</text>

          
          <circle id="markerDot" cx="215" cy="42" r="6" fill="#4f46e5" />
        </svg>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn">←</button>
    <button class="btn btn-play" id="playBtn">⏸ Pause</button>
    <button class="btn" id="nextBtn">→</button>
  </div>

  <script>
    const stepsData = [
      { m: "+3", p: "+9", pos: 215, type: "pos" },
      { m: "+2", p: "+6", pos: 183.3, type: "pos" },
      { m: "+1", p: "+3", pos: 151.7, type: "pos" },
      { m: "0",  p: "0",  pos: 120,   type: "zero" },
      { m: "−1", p: "−3", pos: 88.3,  type: "neg" },
      { m: "−2", p: "−6", pos: 56.7,  type: "neg" },
      { m: "−3", p: "−9", pos: 25,    type: "neg" }
    ];

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

    const rows = document.querySelectorAll('.row-item');
    const multiVal = document.getElementById('multiVal');
    const ansVal = document.getElementById('ansVal');
    const markerDot = document.getElementById('markerDot');
    const jumpArc = document.getElementById('jumpArc');
    const jumpText = document.getElementById('jumpText');
    const playBtn = document.getElementById('playBtn');

    function updateStep(index, animateJump = true) {
      const prev = currentStep;
      currentStep = index;
      const data = stepsData[currentStep];

      // Update rows
      rows.forEach((r, i) => {
        r.classList.toggle('active', i === currentStep);
      });

      // Update formula display
      multiVal.textContent = data.m;
      multiVal.className = 'multiplier ' + (data.type === 'neg' ? 'neg' : '');
      
      ansVal.textContent = data.p;
      ansVal.className = 'ans ' + data.type;

      // Update Number Line Jump
      const prevPos = stepsData[prev].pos;
      const targetPos = data.pos;

      markerDot.setAttribute('cx', targetPos);
      markerDot.setAttribute('fill', data.type === 'neg' ? '#dc2626' : (data.type === 'zero' ? '#4b5563' : '#4f46e5'));

      if (animateJump && prev !== currentStep) {
        const midX = (prevPos + targetPos) / 2;
        jumpArc.setAttribute('d', `M ${prevPos} 36 Q ${midX} 16 ${targetPos} 36`);
        jumpArc.setAttribute('opacity', '1');
        jumpText.setAttribute('x', midX);
        jumpText.setAttribute('opacity', '1');

        setTimeout(() => {
          jumpArc.setAttribute('opacity', '0');
          jumpText.setAttribute('opacity', '0');
        }, 1200);
      } else {
        jumpArc.setAttribute('opacity', '0');
        jumpText.setAttribute('opacity', '0');
      }
    }

    function next() {
      const nextIdx = (currentStep + 1) % stepsData.length;
      updateStep(nextIdx, true);
    }

    function prev() {
      const prevIdx = (currentStep - 1 + stepsData.length) % stepsData.length;
      updateStep(prevIdx, true);
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(next, 3000);
      playBtn.textContent = '⏸ Pause';
      playBtn.classList.add('btn-play');
      isPlaying = true;
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      timer = null;
      playBtn.textContent = '▶ Play';
      playBtn.classList.remove('btn-play');
      isPlaying = false;
    }

    function togglePlay() {
      if (isPlaying) {
        stopTimer();
      } else {
        next();
        startTimer();
      }
    }

    // Attach row clicks
    rows.forEach((row, i) => {
      row.addEventListener('click', () => {
        stopTimer();
        updateStep(i, true);
      });
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      stopTimer();
      prev();
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      stopTimer();
      next();
    });

    playBtn.addEventListener('click', togglePlay);

    // Initialize
    updateStep(0, false);
    startTimer();
  </script>
</body>
</html>

Whenever you multiply a **positive** number by a **negative** number, your product is always **negative**.

A common mistake is thinking the minus sign disappears. Remember: putting together groups of losses always leaves you with a bigger loss!

math

Multiplying Positive and Negative Integers. Multiply a positive integer by a negative integer using repeated addition and pattern rules.

Multiplying and Dividing Negative Numbers - CfE Third Level Maths

Multiplying Positive and Negative Numbers

Multiply Integers: Number Line and Pattern Models

Although the prompt header references Early Level (P1), standard MNU 3-04a and integer multiplication are pedagogically situated within Curriculum for Excellence Third Level (Lower Secondary / S1–S3). Effective instruction bridges concrete arithmetic (repeated addition, two-colour counters) with visual models (number line directional hops) and pattern deduction (decreasing arithmetic sequences) before introducing formal sign rules.

Multiplying Positive and Negative Integers

Losing Points Repeatedly

Multiplication is Grouping

The Step-Down Pattern