<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .stepper {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
      width: 100%;
      max-width: 460px;
      justify-content: center;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

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

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 460px;
    }

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

    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .panel-header {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }
    .panel-header.left { color: #0369a1; }
    .panel-header.right { color: #4338ca; }

    .expr {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 13px;
      color: #64748b;
      margin-bottom: 8px;
      background: #ffffff;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #e2e8f0;
    }

    .calc-box {
      position: relative;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.4;
      padding: 6px 10px;
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      width: 100%;
      max-width: 170px;
      text-align: right;
    }

    /* Decimal alignment guide line */
    .align-guide {
      position: absolute;
      top: 4px;
      bottom: 4px;
      width: 2px;
      background: rgba(59, 130, 246, 0.45);
      border-radius: 1px;
      pointer-events: none;
      transition: opacity 0.3s;
    }
    .left-guide { left: 88px; }
    .right-guide { left: 88px; }

    .num-row {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      letter-spacing: 2px;
    }

    .op {
      margin-right: auto;
      color: #64748b;
      font-weight: bold;
    }

    .pad-zero {
      background: #bbf7d0;
      color: #15803d;
      border-radius: 3px;
      padding: 0 1px;
      transition: all 0.3s;
    }

    .divider {
      height: 2px;
      background: #1e2945;
      margin: 3px 0;
      opacity: 0.2;
      transition: opacity 0.3s;
    }

    .divider.active {
      opacity: 1;
    }

    .ans-row {
      opacity: 0;
      transform: translateY(-2px);
      transition: opacity 0.3s, transform 0.3s;
    }

    .ans-row.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .final-badge {
      margin-top: 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 15px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 0.3s, transform 0.3s;
    }

    .final-badge.visible {
      opacity: 1;
      transform: scale(1);
    }

    .badge-neg {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fca5a5;
    }

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

    .rule-tag {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 4px;
    }
  </style>
</head>
<body>

  
  <div class="stepper">
    <button class="step-btn active" id="btn1" onclick="setStep(1)">1. Align & Pad</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">2. Compute</button>
    <button class="step-btn" id="btn3" onclick="setStep(3)">3. Sign</button>
  </div>

  <div class="grid">
    
    <div class="panel">
      <div class="panel-header left">Same Signs</div>
      <div class="expr">−14.35 + (−7.8)</div>
      
      <div class="calc-box">
        <div class="align-guide left-guide" id="guide1"></div>
        <div class="num-row"><span>14.35</span></div>
        <div class="num-row"><span class="op">+</span><span>7.8<span class="pad-zero">0</span></span></div>
        <div class="divider" id="div1"></div>
        <div class="num-row ans-row" id="ans1"><span>22.15</span></div>
      </div>

      <div class="rule-tag">Add magnitudes</div>
      <div class="final-badge badge-neg" id="res1">− 22.15</div>
    </div>

    
    <div class="panel">
      <div class="panel-header right">Opposite Signs</div>
      <div class="expr">−8.45 + 12.9</div>

      <div class="calc-box">
        <div class="align-guide right-guide" id="guide2"></div>
        <div class="num-row"><span>12.9<span class="pad-zero">0</span></span></div>
        <div class="num-row"><span class="op">−</span><span>8.45</span></div>
        <div class="divider" id="div2"></div>
        <div class="num-row ans-row" id="ans2"><span>4.45</span></div>
      </div>

      <div class="rule-tag">Subtract magnitudes</div>
      <div class="final-badge badge-pos" id="res2">+ 4.45</div>
    </div>
  </div>

  <script>
    let currentStep = 1;

    function setStep(step) {
      currentStep = step;
      
      // Update buttons
      for (let i = 1; i <= 3; i++) {
        document.getElementById('btn' + i).classList.toggle('active', i === step);
      }

      // Step 1: Align & Pad
      document.getElementById('guide1').style.opacity = step >= 1 ? '1' : '0';
      document.getElementById('guide2').style.opacity = step >= 1 ? '1' : '0';

      // Step 2: Compute
      document.getElementById('div1').classList.toggle('active', step >= 2);
      document.getElementById('div2').classList.toggle('active', step >= 2);
      document.getElementById('ans1').classList.toggle('visible', step >= 2);
      document.getElementById('ans2').classList.toggle('visible', step >= 2);

      // Step 3: Sign resolution
      document.getElementById('res1').classList.toggle('visible', step >= 3);
      document.getElementById('res2').classList.toggle('visible', step >= 3);
    }

    // Auto cycle through steps smoothly
    let timer = setInterval(() => {
      let next = currentStep >= 3 ? 1 : currentStep + 1;
      setStep(next);
    }, 3800);

    // Pause auto-cycle on direct interaction
    document.querySelectorAll('.step-btn').forEach(b => {
      b.addEventListener('click', () => clearInterval(timer));
    });
  </script>
</body>
</html>

Adding and Subtracting Signed Fractions and Decimals

<!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="1:1">
  <title>Signed Fractions Solution Flow</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 10px;
    }

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

    .step-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid #e6e6e6;
      background: #fdfdfd;
      transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
      user-select: none;
    }

    .step-card.active {
      background: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 10px rgba(34, 183, 255, 0.18);
    }

    .badge {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      color: #fff;
      padding: 3px 8px;
      border-radius: 6px;
      flex-shrink: 0;
      text-transform: uppercase;
    }
    .b-1 { background: #3b82f6; }
    .b-2 { background: #8b5cf6; }
    .b-3 { background: #f59e0b; }
    .b-4 { background: #10b981; }

    .step-content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 8px;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      flex-grow: 1;
    }

    /* Math typography */
    .frac {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      font-weight: 700;
      font-size: 14px;
      line-height: 1;
      padding: 0 1px;
    }
    .frac .num {
      border-bottom: 1.5px solid #1e2945;
      padding-bottom: 2px;
      text-align: center;
      width: 100%;
    }
    .frac .den {
      padding-top: 2px;
      text-align: center;
      width: 100%;
    }

    .highlight-rule {
      background: #fef08a;
      padding: 2px 6px;
      border-radius: 4px;
      color: #854d0e;
      font-weight: 700;
    }

    .scale-tag {
      font-size: 11px;
      font-weight: 700;
      color: #d97706;
      background: #fef3c7;
      padding: 1px 5px;
      border-radius: 4px;
      border: 1px solid #fde68a;
    }

    .ans-box {
      background: #ecfdf5;
      border: 1.5px solid #10b981;
      color: #065f46;
      padding: 3px 8px;
      border-radius: 6px;
      font-weight: 800;
    }

    .arrow-flow {
      color: #94a3b8;
      font-weight: 700;
      font-size: 13px;
    }

    /* Bottom stepper controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 460px;
      padding-top: 8px;
    }

    .dots {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #e2e8f0;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.2s ease;
    }

    .dot.active {
      background: #22b7ff;
      transform: scale(1.15);
    }

    .nav-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 4px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
    }
    .nav-btn:hover {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="flow-container">
    
    <div class="step-card active" id="card-0" onclick="goToStep(0)">
      <span class="badge b-1">Step 1</span>
      <div class="step-content">
        <span>-2</span><span class="frac"><span class="num">1</span><span class="den">4</span></span>
        <span class="highlight-rule">- (-</span><span>3</span><span class="frac"><span class="num">5</span><span class="den">6</span></span><span class="highlight-rule">)</span>
        <span class="arrow-flow">➔</span>
        <span>-2</span><span class="frac"><span class="num">1</span><span class="den">4</span></span>
        <span style="color:#2563eb; font-weight:800;">+</span>
        <span>3</span><span class="frac"><span class="num">5</span><span class="den">6</span></span>
      </div>
    </div>

    
    <div class="step-card" id="card-1" onclick="goToStep(1)">
      <span class="badge b-2">Step 2</span>
      <div class="step-content">
        <span>Improper:</span>
        <span>-</span><span class="frac"><span class="num">9</span><span class="den">4</span></span>
        <span style="color:#2563eb;">+</span>
        <span class="frac"><span class="num">23</span><span class="den">6</span></span>
      </div>
    </div>

    
    <div class="step-card" id="card-2" onclick="goToStep(2)">
      <span class="badge b-3">Step 3</span>
      <div class="step-content">
        <span>LCD 12:</span>
        <span>-</span><span class="frac"><span class="num">9 <span class="scale-tag">×3</span></span><span class="den">4 <span class="scale-tag">×3</span></span></span>
        <span style="color:#2563eb;">+</span>
        <span class="frac"><span class="num">23 <span class="scale-tag">×2</span></span><span class="den">6 <span class="scale-tag">×2</span></span></span>
        <span class="arrow-flow">➔</span>
        <span>-</span><span class="frac"><span class="num">27</span><span class="den">12</span></span>
        <span style="color:#2563eb;">+</span>
        <span class="frac"><span class="num">46</span><span class="den">12</span></span>
      </div>
    </div>

    
    <div class="step-card" id="card-3" onclick="goToStep(3)">
      <span class="badge b-4">Step 4</span>
      <div class="step-content">
        <span class="frac"><span class="num">-27 + 46</span><span class="den">12</span></span>
        <span>=</span>
        <span class="frac"><span class="num">19</span><span class="den">12</span></span>
        <span>=</span>
        <div class="ans-box">1 <span class="frac" style="color:#065f46;"><span class="num" style="border-color:#065f46;">7</span><span class="den">12</span></span></div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="nav-btn" onclick="prevStep()">◀ Prev</button>
    <div class="dots">
      <div class="dot active" onclick="goToStep(0)"></div>
      <div class="dot" onclick="goToStep(1)"></div>
      <div class="dot" onclick="goToStep(2)"></div>
      <div class="dot" onclick="goToStep(3)"></div>
    </div>
    <button class="nav-btn" onclick="nextStep()">Next ▶</button>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 4;
    let timer = null;

    function render() {
      for (let i = 0; i < totalSteps; i++) {
        const card = document.getElementById('card-' + i);
        const dot = document.querySelectorAll('.dot')[i];
        if (i === currentStep) {
          card.classList.add('active');
          dot.classList.add('active');
        } else {
          card.classList.remove('active');
          dot.classList.remove('active');
        }
      }
    }

    function goToStep(index) {
      currentStep = index;
      render();
      resetTimer();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % totalSteps;
      render();
      resetTimer();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + totalSteps) % totalSteps;
      render();
      resetTimer();
    }

    function resetTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        currentStep = (currentStep + 1) % totalSteps;
        render();
      }, 4000);
    }

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

<!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: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .main-card {
      width: 100%;
      max-width: 460px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    /* Button Switcher */
    .toggle-row {
      display: flex;
      gap: 8px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 10px;
    }
    .toggle-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
      text-align: center;
      white-space: nowrap;
    }
    .toggle-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Graphic Area */
    .viz-container {
      background: #fafbfc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    svg {
      width: 100%;
      height: 160px;
      overflow: visible;
    }
    .tick-line { stroke: #cbd5e1; stroke-width: 1.5; }
    .axis-line { stroke: #475569; stroke-width: 2; }
    .tick-text { font-size: 11px; fill: #64748b; text-anchor: middle; font-weight: 500; }
    .zero-tick { font-weight: 700; fill: #1e2945; }

    /* Vectors */
    .vec-path {
      stroke-linecap: round;
      transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .vec-head {
      transition: opacity 0.3s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .vec-label {
      font-size: 12px;
      font-weight: 700;
      text-anchor: middle;
      transition: opacity 0.3s ease;
    }

    /* Result Box */
    .calc-box {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 600;
    }
    .step-text {
      display: flex;
      align-items: center;
      gap: 6px;
      font-feature-settings: "tnum";
    }
    .tag {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .neg { color: #ef4444; }
    .pos { color: #2563eb; }
    .sum-badge {
      font-size: 16px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 6px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
    }
  </style>
</head>
<body>

<div class="main-card">
  
  <div class="toggle-row">
    <button id="btn1" class="toggle-btn active" onclick="setMode(1)">Same: (−1.8) + (−4.6)</button>
    <button id="btn2" class="toggle-btn" onclick="setMode(2)">Opposite: (−3.5) + (+5.2)</button>
  </div>

  
  <div class="viz-container">
    <svg id="svg" viewBox="0 0 420 160">
      <defs>
        
        <marker id="arrow-red" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#ef4444"/>
        </marker>
        <marker id="arrow-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#2563eb"/>
        </marker>
        <marker id="arrow-darkred" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#b91c1c"/>
        </marker>
      </defs>

      
      <g id="axis-layer"></g>

      
      <g id="vector-layer"></g>

      
      <g id="point-layer"></g>
    </svg>
  </div>

  
  <div class="calc-box">
    <div class="step-text" id="calcText">
      <span class="neg">(−1.8)</span>
      <span>+</span>
      <span class="neg">(−4.6)</span>
      <span>=</span>
    </div>
    <div id="sumResult" class="sum-badge neg">−6.4</div>
  </div>
</div>

<script>
  const svg = document.getElementById('svg');
  const axisLayer = document.getElementById('axis-layer');
  const vectorLayer = document.getElementById('vector-layer');
  const pointLayer = document.getElementById('point-layer');
  const calcText = document.getElementById('calcText');
  const sumResult = document.getElementById('sumResult');
  const btn1 = document.getElementById('btn1');
  const btn2 = document.getElementById('btn2');

  const configs = {
    1: {
      minX: -8,
      maxX: 2,
      v1: { from: 0, to: -1.8, label: '−1.8', color: '#ef4444', marker: 'arrow-red', y: 55 },
      v2: { from: -1.8, to: -6.4, label: '−4.6', color: '#b91c1c', marker: 'arrow-darkred', y: 30 },
      final: -6.4,
      mathHtml: '<span class="neg">(−1.8)</span> + <span class="neg">(−4.6)</span> =',
      sumClass: 'neg',
      sumVal: '−6.4'
    },
    2: {
      minX: -5,
      maxX: 4,
      v1: { from: 0, to: -3.5, label: '−3.5', color: '#ef4444', marker: 'arrow-red', y: 55 },
      v2: { from: -3.5, to: 1.7, label: '+5.2', color: '#2563eb', marker: 'arrow-blue', y: 30 },
      final: 1.7,
      mathHtml: '<span class="neg">(−3.5)</span> + <span class="pos">(+5.2)</span> =',
      sumClass: 'pos',
      sumVal: '+1.7'
    }
  };

  const margin = 26;
  const svgWidth = 420;
  const axisY = 115;

  function toSvgX(val, minX, maxX) {
    const usableW = svgWidth - 2 * margin;
    return margin + ((val - minX) / (maxX - minX)) * usableW;
  }

  function render(mode) {
    const cfg = configs[mode];
    axisLayer.innerHTML = '';
    vectorLayer.innerHTML = '';
    pointLayer.innerHTML = '';

    // Draw Main Axis Line
    const x0 = toSvgX(cfg.minX, cfg.minX, cfg.maxX);
    const xMax = toSvgX(cfg.maxX, cfg.minX, cfg.maxX);
    
    let axisHtml = `<line x1="${x0 - 10}" y1="${axisY}" x2="${xMax + 10}" y2="${axisY}" class="axis-line" marker-end="url(#arrow-axis)" />`;

    // Draw Ticks & Subticks
    for (let i = cfg.minX; i <= cfg.maxX; i++) {
      const tx = toSvgX(i, cfg.minX, cfg.maxX);
      const isZero = (i === 0);
      axisHtml += `
        <line x1="${tx}" y1="${axisY - (isZero ? 8 : 5)}" x2="${tx}" y2="${axisY + (isZero ? 8 : 5)}" stroke="${isZero ? '#1e2945' : '#94a3b8'}" stroke-width="${isZero ? 2 : 1.5}" />
        <text x="${tx}" y="${axisY + 20}" class="tick-text ${isZero ? 'zero-tick' : ''}">${i}</text>
      `;
    }
    axisLayer.innerHTML = axisHtml;

    // Helper to create vector path
    function createVector(v, delay) {
      const startX = toSvgX(v.from, cfg.minX, cfg.maxX);
      const targetX = toSvgX(v.to, cfg.minX, cfg.maxX);
      const len = Math.abs(targetX - startX);
      const midX = (startX + targetX) / 2;

      // Dropdown guideline from startX
      const guide = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      guide.setAttribute('x1', startX);
      guide.setAttribute('y1', v.y);
      guide.setAttribute('x2', startX);
      guide.setAttribute('y2', axisY);
      guide.setAttribute('stroke', '#cbd5e1');
      guide.setAttribute('stroke-dasharray', '3,3');
      guide.setAttribute('stroke-width', '1');
      vectorLayer.appendChild(guide);

      // Line
      const path = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      path.setAttribute('x1', startX);
      path.setAttribute('y1', v.y);
      path.setAttribute('x2', targetX);
      path.setAttribute('y2', v.y);
      path.setAttribute('stroke', v.color);
      path.setAttribute('stroke-width', '3');
      path.setAttribute('marker-end', `url(#${v.marker})`);
      path.setAttribute('stroke-dasharray', len);
      path.setAttribute('stroke-dashoffset', len);
      path.className = 'vec-path';
      vectorLayer.appendChild(path);

      // Label
      const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      txt.setAttribute('x', midX);
      txt.setAttribute('y', v.y - 8);
      txt.setAttribute('fill', v.color);
      txt.className = 'vec-label';
      txt.textContent = v.label;
      txt.style.opacity = '0';
      vectorLayer.appendChild(txt);

      // Animate
      setTimeout(() => {
        path.style.strokeDashoffset = '0';
        txt.style.opacity = '1';
      }, delay);
    }

    // Run Vector 1 then Vector 2
    createVector(cfg.v1, 50);
    createVector(cfg.v2, 600);

    // Final Landing Point Marker
    setTimeout(() => {
      const finalX = toSvgX(cfg.final, cfg.minX, cfg.maxX);
      
      const finalDrop = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      finalDrop.setAttribute('x1', finalX);
      finalDrop.setAttribute('y1', cfg.v2.y);
      finalDrop.setAttribute('x2', finalX);
      finalDrop.setAttribute('y2', axisY);
      finalDrop.setAttribute('stroke', cfg.v2.color);
      finalDrop.setAttribute('stroke-dasharray', '3,3');
      finalDrop.setAttribute('stroke-width', '1.5');
      pointLayer.appendChild(finalDrop);

      const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      dot.setAttribute('cx', finalX);
      dot.setAttribute('cy', axisY);
      dot.setAttribute('r', '4.5');
      dot.setAttribute('fill', cfg.v2.color);
      dot.setAttribute('stroke', '#ffffff');
      dot.setAttribute('stroke-width', '2');
      pointLayer.appendChild(dot);
    }, 1200);

    // Update Bottom Step Text
    calcText.innerHTML = cfg.mathHtml;
    sumResult.className = `sum-badge ${cfg.sumClass}`;
    sumResult.textContent = cfg.sumVal;
  }

  function setMode(mode) {
    btn1.classList.toggle('active', mode === 1);
    btn2.classList.toggle('active', mode === 2);
    render(mode);
  }

  // Initial Load
  render(1);
</script>

</body>
</html>

Conjuntos numéricos: de los naturales a los reales

Identificación de números irracionales en la vida cotidiana

Expansión decimal periódica y no periódica

Conversión de decimal periódico a fracción generatriz

Representación geométrica de raíces en la recta real

Densidad y completitud de los números reales

math

Estructura y clasificación de los números reales

正数、负数与有理数的系统分类

数轴的三要素与有理数的几何表征

数轴上有理数的大小比较规则

有理数大小比较的分类讨论与实际应用

有理数的意义与数轴比较

Orden y comparación de números reales

Aproximación y redondeo de números irracionales

Valor absoluto y distancia en la recta real

Intervalos en los reales: abiertos, cerrados y semiabiertos

Operaciones de unión e intersección con intervalos

Orden, aproximación e intervalos en la recta real

相反数的几何意义与多重符号化简

绝对值的几何定义与分类化简

利用绝对值比较两个负数的大小

绝对值的非负性与零点方程基础

相反数与绝对值的深度探索

Propiedades algebraicas de la suma y el producto en reales

Números reales y jerarquía de operaciones

Estimación mental y cálculo con reales en situaciones reales

Resolución de problemas cotidianos con números reales

Operaciones y aplicaciones con números reales

Adding and Subtracting Integers Review

Multiplying and Dividing Integers Review

Adding and Subtracting Positive Fractions

Multiplying and Dividing Positive Fractions

Operations with Negative Fractions

Adding and Subtracting Positive Decimals

Multiplying and Dividing Positive Decimals

Operations with Negative Decimals

Mixed Operations with Integers and Rationals

Choosing Efficient Strategies for Rational Operations

Operations with Integers and Rational Numbers

Multiplying and Dividing Signed Fractions and Decimals

Using Properties to Simplify Numeric Expressions

Closure Properties of Rational and Irrational Numbers

Evaluating Multi-Step Expressions with Order of Operations

Solving Real Number Problems Using Digital Tools

Real-World Problem Solving with Combined Real Numbers

Operations, Properties, and Estimation with Real Numbers

小数の足し算の意味 — 合併と増加

繰り上がりのない小数の足し算（暗算）

繰り上がりのある小数の足し算

小数の足し算の筆算 — 位をそろえて計算する

小数の引き算の意味 — 求残と求差

繰り下がりのない小数の引き算（暗算）

繰り下がりのある小数の引き算

整数から小数を引く計算 — 3 - 0.4の筆算

小数の引き算の筆算の習熟

小数の加減の文章問題と見積もり

小数の計算の確かめとまとめ

小数の足し算と引き算 — 0.1をもとにした計算

同号有理数加法法则与数轴直观

异号有理数加法法则与互为相反数相加

有理数加法的交换律与结合律巧算

有理数减法法则与加减转化思想

有理数加减混合运算与省略括号的代数和

有理数的加法与减法运算

分数とは何か — 等分した大きさを表す

分母と分子の意味と書き方

単位分数（分子が1の分数）の概念

単位分数のまとまりで表す

長さを分数で表す — 1mをもとにした分数

水のかさを分数で表す — 1Lをもとにした分数

1になる分数 — 分母と分子が同じ数

図形の塗り分けから分数を読み取る

指示された分数を図に表す作図活動

分数の意味と単位分数のまとめ

分数の意味と単位分数 — 等分した大きさの表現

1億までの数の世界と万の単位の拡張

簡単な暗算の工夫と計算結果の見積もり

0のかけ算 — かける数・かけられる数が0の場合

計算のきまり — かけ算の交換法則・結合法則・分配法則

小数0.1と分数1/10を数直線で結びつける

コンパスと定規による作図と美しい幾何模様づくり

図と式を用いた考え方の説明活動

数学的活動と数・図形・計算の探究 — 学びの深化と統合

有理数乘法法则与符号确定

多个有理数相乘的积的符号规律

有理数乘法的交换律、结合律与分配律

有理数的倒数与除法转化法则

有理数乘除混合运算与化简

有理数的乘法与除法运算

Relación entre potencias fraccionarias y raíces

Propiedades fundamentales de los radicales

Extracción e introducción de factores en un radical

Suma y resta de radicales semejantes

Multiplicación y división de radicales de igual y distinto índice

Racionalización de denominadores monomios

Racionalización de denominadores binomios con el conjugado

Radicación: propiedades, operaciones y racionalización

数直線上の分数の目盛りを読む

分数を数直線上に表す

分母が同じ分数の大小比較

単位分数どうしの大きさの比較

不等号を用いた分数の大小の表し方

1と分数の大小を比べる

複数の同分母分数を大きさ順に並べる

分数の見積もり — 半分（1/2）との比較

同じ大きさを表す分数（1/2と2/4）

分数の大小と数直線の習熟まとめ

分数の大きさと数直線・大小比較

乘方的意义、底数与指数的概念

乘方的符号法则与典型幂的计算

有理数混合运算的层级顺序与规范步骤

有理数混合运算的实际情境应用

有理数的乘方与四则混合运算

同分母分数の足し算の意味 — テープ図での理解

同分母分数の足し算の計算方法 — 分母はそのまま分子を足す

和が1になる分数の足し算

同分母分数の引き算の意味 — テープ図での理解

同分母分数の引き算の計算方法 — 分母はそのまま分子を引く

OGM.9.NS.6

Aligned learning resources

Related diagrams