<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
    }

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

    /* Equation Stage */
    .stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: 16px;
    }

    .equation-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 32px;
      font-weight: 700;
    }

    /* Variable 3D Flip Card */
    .card-box {
      width: 68px;
      height: 68px;
      perspective: 800px;
      position: relative;
    }

    .card-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 14px;
    }

    .card-face {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      font-size: 34px;
      font-weight: 800;
      user-select: none;
    }

    .card-front {
      background: #ffffff;
      color: #0284c7;
      border: 2px solid #38bdf8;
      box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25);
      transition: box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .card-back {
      background: #ecfdf5;
      color: #047857;
      border: 2px solid #34d399;
      box-shadow: 0 4px 14px rgba(52, 211, 153, 0.25);
      transform: rotateY(180deg);
    }

    /* Step-based states */
    .step-1 .card-front {
      box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.35), 0 4px 16px rgba(56, 189, 248, 0.3);
      border-color: #0284c7;
    }

    .step-2 .card-front {
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3), 0 4px 16px rgba(245, 158, 11, 0.2);
      border-color: #d97706;
      color: #b45309;
    }

    .step-3 .card-inner {
      transform: rotateY(180deg);
    }

    .math-symbol {
      color: #64748b;
    }

    .math-val {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      width: 60px;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1e2945;
    }

    /* Step Feedback Callout */
    .callout-container {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .callout-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 18px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .badge-1 {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }

    .badge-2 {
      background: #fef3c7;
      color: #78350f;
      border: 1px solid #fde68a;
    }

    .badge-3 {
      background: #dcfce7;
      color: #14532d;
      border: 1px solid #bbf7d0;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 480px;
    }

    .step-btn {
      padding: 7px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

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

    .play-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
      color: #334155;
      transition: background-color 0.2s, border-color 0.2s;
    }

    .step-btn:focus-visible,
    .play-btn:focus-visible {
      outline: 2px solid #0284c7;
      outline-offset: 2px;
    }

    @media (max-width: 400px) {
      .equation-row {
        font-size: 26px;
        gap: 8px;
      }
      .card-box, .math-val {
        width: 54px;
        height: 58px;
      }
      .card-face {
        font-size: 28px;
      }
      .step-btn {
        padding: 6px 10px;
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="stage" id="stage">
    
    <div class="equation-row">
      <div class="card-box">
        <div class="card-inner">
          <div class="card-face card-front" id="varFace">x</div>
          <div class="card-face card-back">5</div>
        </div>
      </div>
      <span class="math-symbol">+</span>
      <div class="math-val">4</div>
      <span class="math-symbol">=</span>
      <div class="math-val">9</div>
    </div>

    
    <div class="callout-container">
      <div id="callout" class="callout-badge badge-1">
        <span>✦</span>
        <span id="calloutText">Placeholder (Variable)</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" data-step="0">1: Variable</button>
    <button class="step-btn" data-step="1">2: Question</button>
    <button class="step-btn" data-step="2">3: Reveal</button>
    <button class="play-btn" id="playBtn" title="Play / Pause">⏸</button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const stage = document.getElementById('stage');
    const varFace = document.getElementById('varFace');
    const callout = document.getElementById('callout');
    const stepBtns = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');

    const stepsData = [
      {
        cls: 'step-1',
        badgeCls: 'badge-1',
        icon: '✦',
        text: 'Placeholder (Variable)',
        varText: 'x'
      },
      {
        cls: 'step-2',
        badgeCls: 'badge-2',
        icon: '?',
        text: 'What + 4 = 9?',
        varText: '?'
      },
      {
        cls: 'step-3',
        badgeCls: 'badge-3',
        icon: '✓',
        text: '5 + 4 = 9',
        varText: 'x'
      }
    ];

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

    function renderStep(idx) {
      currentStep = idx;
      const data = stepsData[idx];

      // Update stage class
      stage.className = 'stage ' + data.cls;
      varFace.textContent = data.varText;

      // Update badge
      callout.className = 'callout-badge ' + data.badgeCls;
      callout.innerHTML = `<span>${data.icon}</span> <span>${data.text}</span>`;

      // Update buttons
      stepBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
    }

    function nextStep() {
      renderStep((currentStep + 1) % stepsData.length);
    }

    function startAuto() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

    function stopAuto() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playBtn.textContent = '▶';
    }

    // Step button clicks
    stepBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.dataset.step, 10);
        renderStep(step);
        stopAuto();
      });
    });

    // Play/pause toggle
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAuto();
      } else {
        nextStep();
        startAuto();
      }
    });

    // Initial render & autostart
    renderStep(0);
    startAuto();
  </script>
</body>
</html>

Representing Unknown Values with Letters and Symbols

<!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>Balance Scale: Unknown Value</title>
  <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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .main-wrap {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Scale SVG container */
    .scale-container {
      width: 100%;
      position: relative;
      filter: drop-shadow(0 4px 12px rgba(30, 41, 69, 0.08));
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Interactive Box inside SVG / HTML */
    .gift-box-btn {
      cursor: pointer;
      transition: filter 0.2s ease, transform 0.2s ease;
    }
    .gift-box-btn:hover {
      filter: brightness(1.05);
    }
    .gift-box-btn:active {
      transform: scale(0.97);
    }

    /* Equation & Info Card */
    .equation-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 18px;
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      flex-wrap: wrap;
    }

    .box-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      background: #8b5cf6;
      color: #ffffff;
      border-radius: 8px;
      font-size: 20px;
      font-weight: 800;
      box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
      cursor: pointer;
      transition: background 0.25s ease, transform 0.2s ease;
    }
    .box-badge:hover {
      background: #7c3aed;
    }

    .marbles-group {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .marble-mini {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #60a5fa, #2563eb);
      box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
    }

    /* Control button */
    .toggle-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #2563eb;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
      transition: background 0.2s ease, transform 0.1s ease;
    }
    .toggle-btn:hover {
      background: #1d4ed8;
    }
    .toggle-btn:active {
      transform: scale(0.98);
    }

    /* Hidden inside elements transition */
    .hidden-marbles {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .box-lid {
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform-origin: 100px 145px;
    }
    .open-state .box-lid {
      transform: translateY(-24px) rotate(-12deg);
    }
    .open-state .hidden-marbles {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
  </style>
</head>
<body>

<div class="main-wrap">
  
  <div class="scale-container" id="scaleContainer">
    <svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
      <defs>
        
        <radialGradient id="marbleGrad" cx="35%" cy="35%" r="65%">
          <stop offset="0%" stop-color="#93c5fd" />
          <stop offset="40%" stop-color="#3b82f6" />
          <stop offset="100%" stop-color="#1d4ed8" />
        </radialGradient>
        <radialGradient id="goldMarbleGrad" cx="35%" cy="35%" r="65%">
          <stop offset="0%" stop-color="#fef08a" />
          <stop offset="50%" stop-color="#eab308" />
          <stop offset="100%" stop-color="#a16207" />
        </radialGradient>
        
        <linearGradient id="metalGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#64748b" />
          <stop offset="50%" stop-color="#94a3b8" />
          <stop offset="100%" stop-color="#475569" />
        </linearGradient>
        <linearGradient id="beamGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#475569" />
          <stop offset="50%" stop-color="#64748b" />
          <stop offset="100%" stop-color="#334155" />
        </linearGradient>
        
        <filter id="panShadow" x="-10%" y="-10%" width="120%" height="140%">
          <feDropShadow dx="0" dy="3" stdDeviation="3" flood-opacity="0.15" />
        </filter>
      </defs>

      
      
      <path d="M 190 280 L 310 280 L 290 255 L 210 255 Z" fill="url(#metalGrad)" rx="3" />
      
      <rect x="244" y="90" width="12" height="170" rx="3" fill="url(#metalGrad)" />
      
      <circle cx="250" cy="90" r="9" fill="#334155" />
      <circle cx="250" cy="90" r="5" fill="#e2e8f0" />

      
      <rect x="70" y="86" width="360" height="8" rx="4" fill="url(#beamGrad)" />

      
      
      <line x1="85" y1="90" x2="65" y2="200" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3,2" />
      <line x1="175" y1="90" x2="195" y2="200" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3,2" />
      
      <ellipse cx="130" cy="202" rx="72" ry="12" fill="#cbd5e1" filter="url(#panShadow)" />
      <ellipse cx="130" cy="200" rx="70" ry="10" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5" />

      
      
      <line x1="325" y1="90" x2="305" y2="200" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3,2" />
      <line x1="415" y1="90" x2="435" y2="200" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3,2" />
      
      <ellipse cx="370" cy="202" rx="72" ry="12" fill="#cbd5e1" filter="url(#panShadow)" />
      <ellipse cx="370" cy="200" rx="70" ry="10" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5" />

      
      <g id="leftGroup">
        
        <g id="left3Marbles">
          <circle cx="152" cy="192" r="10" fill="url(#marbleGrad)" />
          <circle cx="170" cy="192" r="10" fill="url(#marbleGrad)" />
          <circle cx="161" cy="176" r="10" fill="url(#marbleGrad)" />
        </g>

        
        <g class="hidden-marbles" id="hiddenMarblesGroup" style="opacity: 0; transform: translateY(6px);" pointer-events="none">
          
          <circle cx="90" cy="188" r="9" fill="url(#marbleGrad)" />
          <circle cx="107" cy="188" r="9" fill="url(#marbleGrad)" />
          <circle cx="82" cy="173" r="9" fill="url(#marbleGrad)" />
          <circle cx="99" cy="173" r="9" fill="url(#marbleGrad)" />
          <circle cx="115" cy="173" r="9" fill="url(#marbleGrad)" />
          
          <rect x="83" y="130" width="34" height="18" rx="9" fill="#1e2945" />
          <text x="100" y="143" font-size="12" font-weight="bold" fill="#38bdf8" text-anchor="middle">5</text>
        </g>

        
        <g id="giftBox" class="gift-box-btn" onclick="toggleReveal()">
          
          <rect x="74" y="152" width="52" height="42" rx="5" fill="#8b5cf6" />
          
          <rect x="96" y="152" width="8" height="42" fill="#ec4899" />
          
          <rect x="74" y="170" width="52" height="6" fill="#ec4899" />
          
          <text id="boxQMark" x="100" y="180" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle" dominant-baseline="central" style="filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));">?</text>
          
          <g class="box-lid" id="boxLid">
            <rect x="71" y="145" width="58" height="10" rx="3" fill="#a78bfa" />
            <rect x="96" y="145" width="8" height="10" fill="#f472b6" />
            
            <ellipse cx="94" cy="142" rx="5" ry="3" fill="#f472b6" />
            <ellipse cx="106" cy="142" rx="5" ry="3" fill="#f472b6" />
            <circle cx="100" cy="143" r="2.5" fill="#ec4899" />
          </g>
        </g>
      </g>

      
      <g id="rightMarbles">
        
        <circle cx="337" cy="192" r="10" fill="url(#marbleGrad)" />
        <circle cx="355" cy="192" r="10" fill="url(#marbleGrad)" />
        <circle cx="373" cy="192" r="10" fill="url(#marbleGrad)" />
        <circle cx="391" cy="192" r="10" fill="url(#marbleGrad)" />
        
        <circle cx="346" cy="176" r="10" fill="url(#marbleGrad)" />
        <circle cx="364" cy="176" r="10" fill="url(#marbleGrad)" />
        <circle cx="382" cy="176" r="10" fill="url(#marbleGrad)" />
        
        <circle cx="364" cy="160" r="10" fill="url(#marbleGrad)" />
      </g>

      
      <rect x="224" y="44" width="52" height="22" rx="6" fill="#10b981" />
      <text x="250" y="59" font-size="11" font-weight="800" fill="#ffffff" text-anchor="middle" letter-spacing="0.5">EQUAL =</text>
      
      <polygon points="250,68 245,74 255,74" fill="#10b981" />
    </svg>
  </div>

  
  <div class="equation-card">
    <div class="box-badge" id="equationBox" onclick="toggleReveal()" title="Tap to reveal">?</div>
    <span>+</span>
    <div class="marbles-group">
      <span>3</span>
      <div class="marble-mini"></div>
    </div>
    <span>=</span>
    <div class="marbles-group">
      <span>8</span>
      <div class="marble-mini"></div>
    </div>
  </div>

  
  <button class="toggle-btn" id="toggleBtn" onclick="toggleReveal()">
    <span id="btnIcon">🔍</span>
    <span id="btnText">Peek Inside Box</span>
  </button>
</div>

<script>
  let isOpen = false;

  function toggleReveal() {
    isOpen = !isOpen;
    const container = document.getElementById('scaleContainer');
    const qMark = document.getElementById('boxQMark');
    const eqBox = document.getElementById('equationBox');
    const btnText = document.getElementById('btnText');
    const btnIcon = document.getElementById('btnIcon');

    if (isOpen) {
      container.classList.add('open-state');
      qMark.textContent = '5';
      qMark.setAttribute('fill', '#fef08a');
      eqBox.textContent = '5';
      eqBox.style.background = '#10b981';
      btnText.textContent = 'Close Box';
      btnIcon.textContent = '📦';
    } else {
      container.classList.remove('open-state');
      qMark.textContent = '?';
      qMark.setAttribute('fill', '#ffffff');
      eqBox.textContent = '?';
      eqBox.style.background = '#8b5cf6';
      btnText.textContent = 'Peek Inside Box';
      btnIcon.textContent = '🔍';
    }
  }
</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; }
    body {
      width: 100%;
      min-height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px 12px;
      user-select: none;
    }

    .diagram-grid {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Cards Row */
    .cards-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
    }

    .eq-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    }

    .eq-card:hover, .eq-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
    }

    .symbol-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
      line-height: 1;
    }

    /* Symbol 1: Yellow Square */
    .badge-square {
      width: 26px;
      height: 26px;
      background: #fef08a;
      border: 2px solid #ca8a04;
      border-radius: 6px;
      color: #854d0e;
    }

    /* Symbol 2: Orange Circle */
    .badge-circle {
      width: 26px;
      height: 26px;
      background: #ffedd5;
      border: 2px solid #ea580c;
      border-radius: 50%;
      color: #c2410c;
      font-size: 17px;
    }

    /* Symbol 3: Blue Letter */
    .badge-letter {
      width: 26px;
      height: 26px;
      background: #e0f2fe;
      border: 2px solid #0284c7;
      border-radius: 6px;
      color: #0369a1;
      font-family: "Courier New", Courier, monospace;
      font-weight: 800;
      font-size: 17px;
    }

    .eq-text {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.2px;
      display: flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
    }

    .symbol-inline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      width: 18px;
      height: 18px;
      border-radius: 4px;
    }
    .sq-inline { background: #fef08a; border: 1.5px solid #ca8a04; color: #854d0e; }
    .qc-inline { background: #ffedd5; border: 1.5px solid #ea580c; color: #c2410c; border-radius: 50%; }
    .lt-inline { background: #e0f2fe; border: 1.5px solid #0284c7; color: #0369a1; font-family: monospace; }

    /* SVG Connecting Arrows */
    .connector-svg {
      width: 100%;
      height: 48px;
      display: block;
      overflow: visible;
    }

    .arrow-path {
      fill: none;
      stroke: #16a34a;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke-width 0.25s, opacity 0.25s;
    }

    .arrow-head {
      fill: #16a34a;
      transition: transform 0.25s;
    }

    /* Central Target Bubble */
    .target-bubble {
      background: #dcfce7;
      border: 2px solid #16a34a;
      border-radius: 16px;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 10px rgba(22, 163, 74, 0.12);
      transition: transform 0.25s ease, background 0.25s ease;
    }

    .target-bubble.highlight {
      background: #bbf7d0;
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.22);
    }

    .bubble-label {
      font-size: 15px;
      font-weight: 600;
      color: #14532d;
    }

    .bubble-value {
      font-size: 20px;
      font-weight: 800;
      color: #15803d;
      background: #ffffff;
      padding: 2px 10px;
      border-radius: 8px;
      border: 1.5px solid #86efac;
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="cards-row">
      <div class="eq-card" id="card1">
        <div class="symbol-badge badge-square"></div>
        <div class="eq-text"><span class="symbol-inline sq-inline"></span> + 5 = 12</div>
      </div>
      
      <div class="eq-card" id="card2">
        <div class="symbol-badge badge-circle">?</div>
        <div class="eq-text"><span class="symbol-inline qc-inline">?</span> + 5 = 12</div>
      </div>
      
      <div class="eq-card" id="card3">
        <div class="symbol-badge badge-letter">n</div>
        <div class="eq-text"><span class="symbol-inline lt-inline">n</span> + 5 = 12</div>
      </div>
    </div>

    
    <svg class="connector-svg" viewBox="0 0 300 48" preserveAspectRatio="none">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 1 2 L 7 5 L 1 8 z" fill="#16a34a" />
        </marker>
      </defs>
      
      <path class="arrow-path" id="arrow1" d="M 50,2 C 50,22 135,26 142,42" marker-end="url(#arrow)" />
      
      <path class="arrow-path" id="arrow2" d="M 150,2 L 150,42" marker-end="url(#arrow)" />
      
      <path class="arrow-path" id="arrow3" d="M 250,2 C 250,22 165,26 158,42" marker-end="url(#arrow)" />
    </svg>

    
    <div class="target-bubble" id="targetBubble">
      <span class="bubble-label">Mystery Number =</span>
      <span class="bubble-value" id="valBox">7</span>
    </div>
  </div>

  <script>
    const cards = [
      document.getElementById('card1'),
      document.getElementById('card2'),
      document.getElementById('card3')
    ];
    const arrows = [
      document.getElementById('arrow1'),
      document.getElementById('arrow2'),
      document.getElementById('arrow3')
    ];
    const bubble = document.getElementById('targetBubble');

    let activeIndex = -1;

    function selectCard(idx) {
      if (activeIndex === idx) {
        activeIndex = -1;
      } else {
        activeIndex = idx;
      }

      cards.forEach((c, i) => {
        if (activeIndex === -1) {
          c.classList.remove('active');
          arrows[i].style.opacity = '1';
          arrows[i].style.strokeWidth = '2.5';
        } else if (i === activeIndex) {
          c.classList.add('active');
          arrows[i].style.opacity = '1';
          arrows[i].style.strokeWidth = '3.5';
        } else {
          c.classList.remove('active');
          arrows[i].style.opacity = '0.3';
          arrows[i].style.strokeWidth = '2';
        }
      });

      if (activeIndex !== -1) {
        bubble.classList.add('highlight');
      } else {
        bubble.classList.remove('highlight');
      }
    }

    cards.forEach((card, idx) => {
      card.addEventListener('click', () => selectCard(idx));
    });
  </script>
</body>
</html>

Understanding Multiplication as 'Times As Much'

Solving 'Times As Much' Comparison Word Problems

Finding the Missing Factor in Multiplication Equations

Finding the Missing Product in Multiplication Equations

Finding the Unknown in Division Equations

Representing Multiplication Problems with Arrays and Equations

math

Multiplicative Comparison and Unknown Numbers

Adding Ones to a Three-Digit Number Without Bridging

Adding Ones to a Three-Digit Number Crossing Tens

Subtracting Ones from a Three-Digit Number Without Bridging

Subtracting Ones from a Three-Digit Number Crossing Tens

Adding Multiples of Ten to a Three-Digit Number Without Bridging

Adding Multiples of Ten to a Three-Digit Number Crossing Hundreds

Subtracting Multiples of Ten from a Three-Digit Number

Mentally Adding Hundreds to Three-Digit Numbers

Mentally Subtracting Hundreds from Three-Digit Numbers

Estimating Three-Digit Sums and Differences

Solving Mental Addition and Subtraction Word Problems

Mental Addition and Subtraction (Three-Digit Numbers)

Input-Output Tables: Finding the Rule

Representing Real-World Relationships in Tables

Arithmetic Patterns in Addition and Multiplication

Properties of Operations: Commutative and Associative

Balancing Equations with Multiplication and Division

Patterns, Tables, and Properties of Operations

Representing 4-Digit Numbers With Base-Ten Blocks

Partitioning Two-Digit Numbers in Different Ways

Reading and Writing Four-Digit Numbers

Place Value in Four-Digit Numbers

Writing Four-Digit Numbers in Words

Decomposing Four-Digit Numbers in Multiple Ways

Representing Numbers to 10,000 With Place Value Blocks

Four-Digit Numbers

Order Doesnt Matter When Multiplying

Grouping Factors Differently

Breaking Apart Arrays to Multiply

Breaking Apart for Two-Digit Multiplication

Understanding Division as an Unknown-Factor Problem

Justifying Computations Using Properties of Operations

Properties of Multiplication and Division

Using Place Value to Add Three-Digit Numbers

Column Addition with Three-Digit Numbers (No Regrouping)

Column Addition with Three-Digit Numbers (Regrouping Ones)

Column Addition with Three-Digit Numbers (Regrouping Tens)

Adding Three-Digit Numbers (Regrouping Ones and Tens)

Using Place Value to Subtract Three-Digit Numbers

Column Subtraction with Three-Digit Numbers (No Exchange)

Column Subtraction with Three-Digit Numbers (Single Exchange)

Subtracting Three-Digit Numbers (Regrouping From Hundreds to Ones)

Using Addition to Check Subtraction Within 1,000

Written Column Addition and Subtraction

Finding Unknown Factors in Multiplication Equations

Finding Unknown Dividends and Divisors

Balancing Equations with Three or More Numbers

Solving Equations with Parentheses and Operations

Writing Equations with Variables from Descriptions

Algebraic Equations and Unknown Values

Building the 3 Times Table with Equal Groups

Recalling Multiplication and Division Facts for 3

Building the 4 Times Table by Doubling Twos

Recalling Multiplication and Division Facts for 4

Building the 8 Times Table by Doubling Fours

Recalling Multiplication and Division Facts for 8

Connecting the 2, 4 and 8 Times Tables

Using Inverse Operations to Check Multiplication

Finding Missing Numbers in Multiplication and Division Facts

Solving Word Problems with 3, 4 and 8 Times Tables

Times Tables Fluency Challenge: 3, 4 and 8

Times Tables Mastery: 3, 4, and 8

Solving Times-as-Many Problems

Solving N-to-M Correspondence Word Problems

Two-Step Problems Combining Addition and Multiplication

Two-Step Problems Combining Subtraction and Division

Two-Step Times-as-Many Problems

Interpreting Remainders in Word Problems

Modeling Multi-Step Word Problems with Strip Diagrams

Representing Multi-Step Problems with a Single Equation

Assessing Reasonableness of Answers Using Estimation

Multi-Operation Word Problems and Modeling

Multiplying Multiples of Ten by Single Digits

Multiplying Two-Digit Numbers by Partitioning (Without Regrouping)

Multiplying Two-Digit Numbers by Partitioning (With Regrouping)

Using the Grid Method to Multiply Two-Digit Numbers

Expanded Short Multiplication (Two Digits by One Digit)

Dividing Multiples of Ten by Single Digits

Dividing Two-Digit Numbers by Partitioning into Tens and Ones

Dividing Two-Digit Numbers with Remainders

Using Inverse Operations to Check Written Calculations

Solving Multiplication and Division Calculation Word Problems

Multiplication and Division: Two Digits by One Digit

Dodawanie trzech i więcej liczb

Obliczenia typu 250 + 50, 180 – 30

Własności dodawania – przemienność i łączność

Sprawdzanie dodawania odejmowaniem

Sprawdzanie odejmowania dodawaniem

Szacowanie sum i różnic

Równania z okienkiem – dodawanie i odejmowanie

Zadania tekstowe – dodawanie i odejmowanie

Sprawdzenie – dodawanie i odejmowanie

Sprawność w dodawaniu i odejmowaniu – zastosowania

Understanding Scaling as 'Times as Many' or 'Times as Long'

Solving Integer Scaling Problems with Multiplication

Solving Integer Scaling Problems with Division

Understanding One-to-Many Correspondence Problems

Solving n Objects Connected to m Objects Correspondence Problems

Systematic Listing and Tables for Correspondence Problems

Solving Missing Number Scaling and Rate Problems

Multiplicative Reasoning and Correspondence Investigations

Scaling and Correspondence Problems

Mnożenie jako dodawanie tych samych składników

Tabliczka mnożenia przez 2 i 3

Tabliczka mnożenia przez 4 i 5

Tabliczka mnożenia przez 6 i 7

Tabliczka mnożenia przez 8 i 9

Mnożenie przez 0, 1 i 10

Przemienność mnożenia

Łączność mnożenia – trzy czynniki

Rozdzielność mnożenia względem dodawania

Tabliczka mnożenia i jej właściwości

Mnożenie przez 10 liczb mniejszych od 20

Mnożenie liczb dwucyfrowych przez 2

Mnożenie liczb dwucyfrowych przez 3, 4 i 5

Mnożenie liczb dwucyfrowych przez 6–9

Mnożenie liczb z zerami na końcu

Mnożenie pisemne przez liczbę jednocyfrową

Mnożenie pisemne przez liczbę dwucyfrową – wprowadzenie

Mnożenie pisemne przez liczbę dwucyfrową – ćwiczenia

Mnożenie w pamięci i pisemne

Szacowanie iloczynów

Równania z okienkiem – mnożenie

Równania z okienkiem – dzielenie

Zadania tekstowe – mnożenie

Wiązki między mnożeniem a dodawaniem

Sprawdzenie – mnożenie

Zastosowanie mnożenia w zadaniach

Dzielenie jako podział na równe części

Dzielenie jako wielokrotne odejmowanie

Tabliczka dzielenia przez 2 i 3

Tabliczka dzielenia przez 4 i 5

Tabliczka dzielenia przez 6, 7, 8 i 9

Dzielenie przez 10

Dzielenie z resztą – wprowadzenie

Dzielenie z resztą – ćwiczenia

Sprawdzanie dzielenia mnożeniem

Dzielenie w pamięci i z resztą

Adding Two-Digit Numbers Using Place Value Blocks

Explaining Your Addition Reasoning Using Place Value

Explaining Subtraction Strategies Using Place Value

Adding Three-Digit Numbers Without Regrouping

Subtracting Three-Digit Numbers Without Regrouping

Adding Three-Digit Numbers With Regrouping

Subtracting Three-Digit Numbers With Regrouping

Place Value Strategies for Addition and Subtraction

Dzielenie liczb dwucyfrowych przez jednocyfrowe

Dzielenie pisemne przez liczbę jednocyfrową

Dzielenie liczb z zerami na końcu

Zadania tekstowe – dzielenie

Dzielenie pisemne i zadania tekstowe

Adding Two-Digit Numbers Mentally (With Regrouping)

Subtracting Two-Digit Numbers Mentally (With Regrouping)

Using Addition Facts to Solve Subtraction

Explaining Your Subtraction Reasoning Using Place Value

Addition and Subtraction Fact Families

Finding Unknown Values in Addition Equations

Finding Unknown Values in Subtraction Equations

Inverse Relationships and Finding Unknowns

Liczby trzycyfrowe podzielne przez 5 o trzech różnych cyfrach

Dzielniki liczby – wprowadzenie

Wielokrotności liczby

Podzielność przez 2, 5 i 10

Sprawdzenie – dzielenie i podzielność

Podzielność liczb

Wykorzystywanie nabytych umiejętności do rozwiązywania problemów

Od problemu do rozwiązania

Czytanie zadania – co wiem, co szukam

Rysunek pomocniczy do zadania

Wybór działania do zadania

Strategie rozwiązywania zadań tekstowych

Zadania jednoetapowe – dodawanie i odejmowanie

Zadania jednoetapowe – mnożenie i dzielenie

Zadania dwuetapowe – wprowadzenie

Zadania dwuetapowe – ćwiczenia

Równanie z okienkiem w zadaniu

Zadania tekstowe jedno- i dwuetapowe

Układanie własnych zadań tekstowych

Łamigłówki matematyczne

Zadania z danymi z tabeli i wykresu

Zadania nietypowe i logiczne

Sprawdzenie – rozwiązywanie zadań

Tworzenie zadań i zadania nietypowe

Pole figury – wprowadzenie na siatce

Pole prostokąta i kwadratu

Pole figur złożonych z kwadratów

Szacowanie pola figur

Jednostki pola – cm² i m²

Porównywanie obwodów i pól

Pola figur

OGM.4.OA.5

Aligned learning resources

Related diagrams