<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>One-to-One Object Display</title>
  <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: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px 8px;
      min-height: 100%;
      user-select: none;
    }

    /* View Switcher */
    .controls {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 360px;
      justify-content: center;
      margin-bottom: 12px;
    }
    .toggle-btn {
      flex: 1;
      padding: 9px 12px;
      font-size: 13px;
      font-weight: 600;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .toggle-btn:hover {
      background: #f1f5f9;
    }
    .toggle-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    /* Stage */
    .stage-wrapper {
      position: relative;
      width: 100%;
      max-width: 360px;
      aspect-ratio: 1 / 1;
      background: transparent;
      overflow: visible;
    }

    /* Grid lines */
    .grid-line {
      position: absolute;
      background: #e2e8f0;
      transition: all 0.4s ease;
      pointer-events: none;
    }
    .grid-line.h {
      left: 18%;
      right: 4%;
      height: 1px;
    }
    .grid-line.v {
      top: 16%;
      bottom: 20%;
      width: 1px;
    }

    /* Baselines */
    .baseline {
      position: absolute;
      background: #0f172a;
      border-radius: 2px;
      transition: all 0.4s ease;
      z-index: 5;
    }
    .baseline-label {
      position: absolute;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: #475569;
      background: #e2e8f0;
      padding: 2px 6px;
      border-radius: 4px;
      transition: all 0.4s ease;
      z-index: 6;
      white-space: nowrap;
    }

    /* Guide Numbers */
    .num-guide {
      position: absolute;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translate(-50%, -50%);
      transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 4;
    }

    /* Category Labels */
    .cat-label {
      position: absolute;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 6;
      transform: translate(-50%, -50%);
    }

    /* Fruit Tokens */
    .token {
      position: absolute;
      width: 11.5%;
      aspect-ratio: 1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      transform: translate(-50%, -50%);
      transition: top 0.45s cubic-bezier(0.34, 1.25, 0.64, 1),
                  left 0.45s cubic-bezier(0.34, 1.25, 0.64, 1),
                  background-color 0.3s;
      z-index: 10;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }
    .token.apple { background: #fee2e2; border: 1.5px solid #fca5a5; }
    .token.banana { background: #fef3c7; border: 1.5px solid #fde047; }
    .token.orange { background: #ffedd5; border: 1.5px solid #fdba74; }
  </style>
</head>
<body>

  
  <div class="controls">
    <button id="btnCols" class="toggle-btn active" onclick="setView('cols')">
      <span>↕</span> Columns (Up &amp; Down)
    </button>
    <button id="btnRows" class="toggle-btn" onclick="setView('rows')">
      <span>↔</span> Rows (Side to Side)
    </button>
  </div>

  
  <div class="stage-wrapper" id="stage">
    
    <div class="grid-line h" style="top: 20%;"></div>
    <div class="grid-line h" style="top: 32%;"></div>
    <div class="grid-line h" style="top: 44%;"></div>
    <div class="grid-line h" style="top: 56%;"></div>
    <div class="grid-line h" style="top: 68%;"></div>

    <div class="grid-line v" style="left: 32%;"></div>
    <div class="grid-line v" style="left: 45%;"></div>
    <div class="grid-line v" style="left: 58%;"></div>
    <div class="grid-line v" style="left: 71%;"></div>
    <div class="grid-line v" style="left: 84%;"></div>

    
    <div id="baselineBar" class="baseline"></div>
    <div id="baselineText" class="baseline-label">Baseline</div>

    
    <div id="n1" class="num-guide">1</div>
    <div id="n2" class="num-guide">2</div>
    <div id="n3" class="num-guide">3</div>
    <div id="n4" class="num-guide">4</div>
    <div id="n5" class="num-guide">5</div>

    
    <div id="catA" class="cat-label">🍎</div>
    <div id="catB" class="cat-label">🍌</div>
    <div id="catO" class="cat-label">🍊</div>

    
    <div class="token apple" id="a1">🍎</div>
    <div class="token apple" id="a2">🍎</div>
    <div class="token apple" id="a3">🍎</div>
    <div class="token apple" id="a4">🍎</div>

    
    <div class="token banana" id="b1">🍌</div>
    <div class="token banana" id="b2">🍌</div>

    
    <div class="token orange" id="o1">🍊</div>
    <div class="token orange" id="o2">🍊</div>
    <div class="token orange" id="o3">🍊</div>
    <div class="token orange" id="o4">🍊</div>
    <div class="token orange" id="o5">🍊</div>
  </div>

  <script>
    const posData = {
      cols: {
        baseline: { top: '80%', left: '18%', width: '78%', height: '3px' },
        baselineLabel: { top: '80%', left: '8%', transform: 'translate(-50%, -50%)' },
        numbers: [
          { left: '8%', top: '68%' },
          { left: '8%', top: '56%' },
          { left: '8%', top: '44%' },
          { left: '8%', top: '32%' },
          { left: '8%', top: '20%' }
        ],
        cats: [
          { left: '32%', top: '91%' },
          { left: '58%', top: '91%' },
          { left: '84%', top: '91%' }
        ],
        tokens: {
          a1: { left: '32%', top: '68%' },
          a2: { left: '32%', top: '56%' },
          a3: { left: '32%', top: '44%' },
          a4: { left: '32%', top: '32%' },
          b1: { left: '58%', top: '68%' },
          b2: { left: '58%', top: '56%' },
          o1: { left: '84%', top: '68%' },
          o2: { left: '84%', top: '56%' },
          o3: { left: '84%', top: '44%' },
          o4: { left: '84%', top: '32%' },
          o5: { left: '84%', top: '20%' }
        }
      },
      rows: {
        baseline: { top: '16%', left: '20%', width: '3px', height: '68%' },
        baselineLabel: { top: '9%', left: '20%', transform: 'translate(-50%, 0)' },
        numbers: [
          { left: '32%', top: '92%' },
          { left: '45%', top: '92%' },
          { left: '58%', top: '92%' },
          { left: '71%', top: '92%' },
          { left: '84%', top: '92%' }
        ],
        cats: [
          { left: '10%', top: '28%' },
          { left: '10%', top: '50%' },
          { left: '10%', top: '72%' }
        ],
        tokens: {
          a1: { left: '32%', top: '28%' },
          a2: { left: '45%', top: '28%' },
          a3: { left: '58%', top: '28%' },
          a4: { left: '71%', top: '28%' },
          b1: { left: '32%', top: '50%' },
          b2: { left: '45%', top: '50%' },
          o1: { left: '32%', top: '72%' },
          o2: { left: '45%', top: '72%' },
          o3: { left: '58%', top: '72%' },
          o4: { left: '71%', top: '72%' },
          o5: { left: '84%', top: '72%' }
        }
      }
    };

    function setView(mode) {
      document.getElementById('btnCols').classList.toggle('active', mode === 'cols');
      document.getElementById('btnRows').classList.toggle('active', mode === 'rows');

      const data = posData[mode];

      // Update Baseline
      const bl = document.getElementById('baselineBar');
      bl.style.top = data.baseline.top;
      bl.style.left = data.baseline.left;
      bl.style.width = data.baseline.width;
      bl.style.height = data.baseline.height;

      const blTxt = document.getElementById('baselineText');
      blTxt.style.top = data.baselineLabel.top;
      blTxt.style.left = data.baselineLabel.left;
      blTxt.style.transform = data.baselineLabel.transform;

      // Update Numbers
      for (let i = 1; i <= 5; i++) {
        const el = document.getElementById('n' + i);
        el.style.left = data.numbers[i - 1].left;
        el.style.top = data.numbers[i - 1].top;
      }

      // Update Categories
      const catIds = ['catA', 'catB', 'catO'];
      catIds.forEach((id, idx) => {
        const el = document.getElementById(id);
        el.style.left = data.cats[idx].left;
        el.style.top = data.cats[idx].top;
      });

      // Update Tokens
      Object.keys(data.tokens).forEach(id => {
        const el = document.getElementById(id);
        el.style.left = data.tokens[id].left;
        el.style.top = data.tokens[id].top;
      });
    }

    // Initialize in column view
    setView('cols');
  </script>
</body>
</html>

Building One-to-One Object Displays

<!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, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding: 12px;
      user-select: none;
    }

    .nav-bar {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
    }

    .btn-step {
      flex: 1;
      padding: 8px 12px;
      border-radius: 8px;
      border: 2px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }

    .btn-step.active {
      border-color: #22b7ff;
      background: #e0f2fe;
      color: #0369a1;
      box-shadow: 0 2px 4px rgba(34, 183, 255, 0.15);
    }

    .canvas-wrap {
      width: 100%;
      max-width: 480px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .cube-red { fill: #ef4444; }
    .cube-blue { fill: #3b82f6; }
    
    .match-line {
      stroke: #10b981;
      stroke-width: 2.5;
      stroke-dasharray: 5, 4;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .match-badge {
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .extra-group {
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .cube-extra {
      transition: opacity 0.3s ease;
    }

    /* State classes */
    .step-1 .match-line,
    .step-1 .match-badge {
      opacity: 1;
    }
    .step-1 .cube-extra {
      opacity: 0.4;
    }

    .step-2 .match-line {
      opacity: 0.6;
    }
    .step-2 .match-badge {
      opacity: 0.6;
    }
    .step-2 .cube-extra {
      opacity: 1;
    }
    .step-2 .extra-group {
      opacity: 1;
    }

    .legend-text {
      font-size: 13px;
      font-weight: 700;
      fill: #475569;
    }
  </style>
</head>
<body class="step-1">

  <div class="nav-bar">
    <button id="btn1" class="btn-step active" onclick="setStep(1)">Step 1: Match Pairs</button>
    <button id="btn2" class="btn-step" onclick="setStep(2)">Step 2: Count Extras</button>
  </div>

  <div class="canvas-wrap">
    <svg viewBox="0 0 460 260" preserveAspectRatio="xMidYMid meet">
      
      <text x="65" y="77" text-anchor="end" class="legend-text" fill="#ef4444">6 Red</text>
      <text x="65" y="187" text-anchor="end" class="legend-text" fill="#3b82f6">4 Blue</text>

      
      <g id="matchLines">
        <line class="match-line" x1="102" y1="96" x2="102" y2="164" />
        <line class="match-line" x1="158" y1="96" x2="158" y2="164" />
        <line class="match-line" x1="214" y1="96" x2="214" y2="164" />
        <line class="match-line" x1="270" y1="96" x2="270" y2="164" />
      </g>

      
      <g class="match-badge" transform="translate(186, 130)">
        <rect x="-56" y="-12" width="112" height="24" rx="12" fill="#ecfdf5" stroke="#10b981" stroke-width="1.5"/>
        <text x="0" y="4" text-anchor="middle" font-size="11" font-weight="700" fill="#047857">Equal Match (4)</text>
      </g>

      
      
      <rect x="80" y="52" width="44" height="44" rx="8" class="cube-red" />
      
      <rect x="136" y="52" width="44" height="44" rx="8" class="cube-red" />
      
      <rect x="192" y="52" width="44" height="44" rx="8" class="cube-red" />
      
      <rect x="248" y="52" width="44" height="44" rx="8" class="cube-red" />
      
      <rect x="304" y="52" width="44" height="44" rx="8" class="cube-red cube-extra" />
      
      <rect x="360" y="52" width="44" height="44" rx="8" class="cube-red cube-extra" />

      
      <rect x="80" y="164" width="44" height="44" rx="8" class="cube-blue" />
      <rect x="136" y="164" width="44" height="44" rx="8" class="cube-blue" />
      <rect x="192" y="164" width="44" height="44" rx="8" class="cube-blue" />
      <rect x="248" y="164" width="44" height="44" rx="8" class="cube-blue" />

      
      <g class="extra-group">
        
        <rect x="296" y="44" width="116" height="60" rx="10" 
              fill="#fef9c3" fill-opacity="0.25" stroke="#eab308" stroke-width="2.5" stroke-dasharray="6,4" />

        
        <path d="M 304 112 C 304 122, 350 120, 354 134 C 358 120, 404 122, 404 112" 
              fill="none" stroke="#ca8a04" stroke-width="2" stroke-linecap="round" />

        
        <g transform="translate(354, 162)">
          <rect x="-80" y="-14" width="160" height="40" rx="8" fill="#fef08a" stroke="#ca8a04" stroke-width="1.5" />
          <text x="0" y="2" text-anchor="middle" font-size="12" font-weight="800" fill="#854d0e">2 Extra Red Cubes</text>
          <text x="0" y="18" text-anchor="middle" font-size="11" font-weight="600" fill="#a16207">6 − 4 = 2 more</text>
        </g>
      </g>
    </svg>
  </div>

  <script>
    function setStep(step) {
      document.body.className = 'step-' + step;
      document.getElementById('btn1').classList.toggle('active', step === 1);
      document.getElementById('btn2').classList.toggle('active', step === 2);
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Organized Object Display vs Messy Pile</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: transparent;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px 10px;
      min-height: auto;
      overflow-x: hidden;
    }
    
    /* Toggle Controls */
    .controls {
      display: flex;
      gap: 6px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 20px;
      z-index: 10;
      margin-bottom: 6px;
    }
    .toggle-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    .toggle-btn:hover {
      color: #0f172a;
    }
    .toggle-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }

    /* Main Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 255px;
      overflow: hidden;
      margin: 0 auto;
    }

    /* Grid & Baseline (Display mode) */
    .grid-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.35s ease;
    }
    .grid-layer.visible {
      opacity: 1;
    }
    .grid-line {
      position: absolute;
      left: 10%;
      right: 10%;
      border-bottom: 1px dashed #cbd5e1;
    }
    .baseline {
      position: absolute;
      bottom: 44px;
      left: 6%;
      right: 6%;
      height: 3px;
      background: #0f172a;
      border-radius: 2px;
    }
    .baseline-label {
      position: absolute;
      right: 8%;
      bottom: 26px;
      font-size: 11px;
      font-weight: 800;
      color: #334155;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

    /* Column Footers */
    .col-labels {
      position: absolute;
      bottom: 8px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-around;
      padding: 0 6%;
      opacity: 0;
      transform: translateY(4px);
      transition: all 0.35s ease;
    }
    .col-labels.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .col-tag {
      font-size: 13px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .tag-red { color: #b91c1c; }
    .tag-blue { color: #1d4ed8; }
    .tag-yellow { color: #b45309; }

    /* Buttons / Items */
    .item {
      position: absolute;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.6s cubic-bezier(0.34, 1.35, 0.64, 1);
      will-change: transform, left, top, bottom;
    }

    /* Shapes */
    .shape-circle {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #dc2626;
      border: 1px solid #b91c1c;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18), 0 2px 4px rgba(220,38,38,0.3);
      position: relative;
    }
    .shape-circle::after {
      content: '';
      position: absolute;
      inset: 5px;
      border: 1.5px solid rgba(255,255,255,0.7);
      border-radius: 50%;
    }

    .shape-square {
      width: 25px;
      height: 25px;
      border-radius: 5px;
      background: #2563eb;
      border: 1px solid #1d4ed8;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18), 0 2px 4px rgba(37,99,235,0.3);
      position: relative;
    }
    .shape-square::after {
      content: '';
      position: absolute;
      inset: 4px;
      border: 1.5px solid rgba(255,255,255,0.7);
      border-radius: 3px;
    }

    .shape-star {
      width: 30px;
      height: 30px;
      filter: drop-shadow(0 2px 3px rgba(180,83,9,0.4));
    }
    .shape-star svg {
      width: 100%;
      height: 100%;
      fill: #f59e0b;
      stroke: #d97706;
      stroke-width: 1px;
      stroke-linejoin: round;
    }

    /* Mode Title */
    .mode-title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      text-align: center;
      margin-top: 4px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="toggle-btn active" id="btnMessy">Messy Pile</button>
    <button class="toggle-btn" id="btnDisplay">Object Display</button>
  </div>

  
  <div class="stage" id="stage">
    
    <div class="grid-layer" id="gridLayer">
      <div class="grid-line" style="bottom: 74px;"></div>
      <div class="grid-line" style="bottom: 104px;"></div>
      <div class="grid-line" style="bottom: 134px;"></div>
      <div class="grid-line" style="bottom: 164px;"></div>
      <div class="grid-line" style="bottom: 194px;"></div>
      <div class="grid-line" style="bottom: 224px;"></div>
      <div class="baseline"></div>
      <div class="baseline-label">Baseline</div>
    </div>

    
    
    <div class="item" id="r0"><div class="shape-circle"></div></div>
    <div class="item" id="r1"><div class="shape-circle"></div></div>
    <div class="item" id="r2"><div class="shape-circle"></div></div>
    <div class="item" id="r3"><div class="shape-circle"></div></div>
    <div class="item" id="r4"><div class="shape-circle"></div></div>

    
    <div class="item" id="b0"><div class="shape-square"></div></div>
    <div class="item" id="b1"><div class="shape-square"></div></div>
    <div class="item" id="b2"><div class="shape-square"></div></div>

    
    <div class="item" id="y0"><div class="shape-star"><svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg></div></div>
    <div class="item" id="y1"><div class="shape-star"><svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg></div></div>
    <div class="item" id="y2"><div class="shape-star"><svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg></div></div>
    <div class="item" id="y3"><div class="shape-star"><svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg></div></div>
    <div class="item" id="y4"><div class="shape-star"><svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg></div></div>
    <div class="item" id="y5"><div class="shape-star"><svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg></div></div>

    
    <div class="col-labels" id="colLabels">
      <div class="col-tag tag-red">● 5 Circles</div>
      <div class="col-tag tag-blue">■ 3 Squares</div>
      <div class="col-tag tag-yellow">★ 6 Stars</div>
    </div>
  </div>

  <div class="mode-title" id="modeTitle">Messy Pile (Hard to Count)</div>

  <script>
    const messyPositions = [
      // 5 Red Circles
      { left: '46%', top: '38%', rot: 22 },
      { left: '28%', top: '56%', rot: -35 },
      { left: '60%', top: '22%', rot: 15 },
      { left: '38%', top: '68%', rot: -18 },
      { left: '52%', top: '74%', rot: 40 },
      // 3 Blue Squares
      { left: '25%', top: '30%', rot: -28 },
      { left: '64%', top: '52%', rot: 32 },
      { left: '44%', top: '20%', rot: 12 },
      // 6 Yellow Stars
      { left: '34%', top: '42%', rot: -15 },
      { left: '58%', top: '36%', rot: 45 },
      { left: '22%', top: '70%', rot: 20 },
      { left: '70%', top: '32%', rot: -40 },
      { left: '48%', top: '54%', rot: 8 },
      { left: '66%', top: '68%', rot: -25 }
    ];

    const displayPositions = [
      // Column 1: Red (x = 22%) - 5 items from bottom up
      { left: '22%', bottom: '48px', rot: 0 },
      { left: '22%', bottom: '78px', rot: 0 },
      { left: '22%', bottom: '108px', rot: 0 },
      { left: '22%', bottom: '138px', rot: 0 },
      { left: '22%', bottom: '168px', rot: 0 },
      // Column 2: Blue (x = 50%) - 3 items from bottom up
      { left: '50%', bottom: '48px', rot: 0 },
      { left: '50%', bottom: '78px', rot: 0 },
      { left: '50%', bottom: '108px', rot: 0 },
      // Column 3: Yellow (x = 78%) - 6 items from bottom up
      { left: '78%', bottom: '48px', rot: 0 },
      { left: '78%', bottom: '78px', rot: 0 },
      { left: '78%', bottom: '108px', rot: 0 },
      { left: '78%', bottom: '138px', rot: 0 },
      { left: '78%', bottom: '168px', rot: 0 },
      { left: '78%', bottom: '198px', rot: 0 }
    ];

    const itemIds = [
      'r0','r1','r2','r3','r4',
      'b0','b1','b2',
      'y0','y1','y2','y3','y4','y5'
    ];

    const btnMessy = document.getElementById('btnMessy');
    const btnDisplay = document.getElementById('btnDisplay');
    const gridLayer = document.getElementById('gridLayer');
    const colLabels = document.getElementById('colLabels');
    const modeTitle = document.getElementById('modeTitle');

    function applyLayout(mode) {
      const isDisplay = mode === 'display';

      itemIds.forEach((id, i) => {
        const el = document.getElementById(id);
        if (isDisplay) {
          const pos = displayPositions[i];
          el.style.top = 'auto';
          el.style.bottom = pos.bottom;
          el.style.left = pos.left;
          el.style.transform = `translateX(-50%) rotate(${pos.rot}deg)`;
        } else {
          const pos = messyPositions[i];
          el.style.bottom = 'auto';
          el.style.top = pos.top;
          el.style.left = pos.left;
          el.style.transform = `translate(-50%, -50%) rotate(${pos.rot}deg)`;
        }
      });

      if (isDisplay) {
        gridLayer.classList.add('visible');
        colLabels.classList.add('visible');
        btnDisplay.classList.add('active');
        btnMessy.classList.remove('active');
        modeTitle.textContent = '1-to-1 Object Display (Easy to Compare)';
      } else {
        gridLayer.classList.remove('visible');
        colLabels.classList.remove('visible');
        btnMessy.classList.add('active');
        btnDisplay.classList.remove('active');
        modeTitle.textContent = 'Messy Pile (Hard to Count)';
      }
    }

    btnMessy.addEventListener('click', () => applyLayout('messy'));
    btnDisplay.addEventListener('click', () => applyLayout('display'));

    // Initial state
    applyLayout('messy');
  </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 {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 10px;
      gap: 8px;
    }
    .panel {
      flex: 1;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      padding: 8px 12px;
    }
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
      z-index: 2;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 20px;
      letter-spacing: 0.2px;
    }
    .badge-error {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fca5a5;
    }
    .badge-success {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
    }
    .stage {
      flex: 1;
      position: relative;
      width: 100%;
      min-height: 110px;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .count-label {
      font-size: 11px;
      font-weight: 700;
      text-anchor: middle;
      font-family: system-ui, sans-serif;
    }
    .count-green { fill: #047857; }
    .count-purple { fill: #6d28d9; }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1.2;
      stroke-dasharray: 4 3;
    }
    .baseline {
      stroke: #475569;
      stroke-width: 2.5;
      stroke-linecap: round;
    }
    .guide-arrow {
      stroke: #ef4444;
      stroke-width: 1.5;
      stroke-dasharray: 3 2;
    }
    .toggle-row {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
    .btn-toggle {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      font-size: 11px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.2s ease;
    }
    .btn-toggle:active {
      background: #f1f5f9;
    }
    .btn-toggle.active {
      background: #3b82f6;
      border-color: #2563eb;
      color: #ffffff;
    }
  </style>
</head>
<body>

  
  <div class="panel">
    <div class="panel-header">
      <span class="badge badge-error">✕ Unequal Spacing Tricks Eyes!</span>
      <span style="font-size:11px; color:#64748b; font-weight:600;">Looks taller (3 &gt; 5)</span>
    </div>
    <div class="stage">
      <svg viewBox="0 0 320 120" preserveAspectRatio="xMidYMid meet">
        
        <line x1="20" y1="105" x2="300" y2="105" class="baseline" />

        
        <line x1="95" y1="18" x2="225" y2="18" class="guide-arrow" />
        <path d="M 95,18 L 100,15 M 95,18 L 100,21" stroke="#ef4444" stroke-width="1.5" />
        <path d="M 225,18 L 220,15 M 225,18 L 220,21" stroke="#ef4444" stroke-width="1.5" />
        <text x="160" y="14" font-size="9" fill="#ef4444" font-weight="700" text-anchor="middle">Fake Height</text>

        
        <g id="mistake-triangles">
          
          <polygon points="95,76 83,96 107,96" fill="#10b981" stroke="#047857" stroke-width="1.5" />
          
          <polygon points="95,41 83,61 107,61" fill="#10b981" stroke="#047857" stroke-width="1.5" />
          
          <polygon points="95,6 83,26 107,26" fill="#10b981" stroke="#047857" stroke-width="1.5" />
        </g>
        <text x="95" y="117" class="count-label count-green">3 Triangles</text>

        
        <g id="mistake-circles">
          
          <circle cx="225" cy="94" r="9" fill="#8b5cf6" stroke="#6d28d9" stroke-width="1.5" />
          <circle cx="225" cy="78" r="9" fill="#8b5cf6" stroke="#6d28d9" stroke-width="1.5" />
          <circle cx="225" cy="62" r="9" fill="#8b5cf6" stroke="#6d28d9" stroke-width="1.5" />
          <circle cx="225" cy="46" r="9" fill="#8b5cf6" stroke="#6d28d9" stroke-width="1.5" />
          <circle cx="225" cy="30" r="9" fill="#8b5cf6" stroke="#6d28d9" stroke-width="1.5" />
        </g>
        <text x="225" y="117" class="count-label count-purple">5 Circles</text>
      </svg>
    </div>
  </div>

  
  <div class="panel">
    <div class="panel-header">
      <span class="badge badge-success">✓ 1-to-1 Equal Grid Baseline</span>
      <span style="font-size:11px; color:#15803d; font-weight:600;">True height (5 &gt; 3)</span>
    </div>
    <div class="stage">
      <svg viewBox="0 0 320 120" preserveAspectRatio="xMidYMid meet">
        
        <g id="correct-grid">
          <line x1="20" y1="105" x2="300" y2="105" class="baseline" />
          <line x1="20" y1="87" x2="300" y2="87" class="grid-line" />
          <line x1="20" y1="69" x2="300" y2="69" class="grid-line" />
          <line x1="20" y1="51" x2="300" y2="51" class="grid-line" />
          <line x1="20" y1="33" x2="300" y2="33" class="grid-line" />
          <line x1="20" y1="15" x2="300" y2="15" class="grid-line" />

          
          <text x="35" y="100" font-size="8" fill="#94a3b8" font-weight="700">1</text>
          <text x="35" y="82" font-size="8" fill="#94a3b8" font-weight="700">2</text>
          <text x="35" y="64" font-size="8" fill="#94a3b8" font-weight="700">3</text>
          <text x="35" y="46" font-size="8" fill="#94a3b8" font-weight="700">4</text>
          <text x="35" y="28" font-size="8" fill="#94a3b8" font-weight="700">5</text>
        </g>

        
        <g id="correct-triangles">
          <polygon points="95,89 85,103 105,103" fill="#10b981" stroke="#047857" stroke-width="1.5" />
          <polygon points="95,71 85,85 105,85" fill="#10b981" stroke="#047857" stroke-width="1.5" />
          <polygon points="95,53 85,67 105,67" fill="#10b981" stroke="#047857" stroke-width="1.5" />
        </g>
        <text x="95" y="117" class="count-label count-green">3 Triangles</text>

        
        <g id="correct-circles">
          <circle cx="225" cy="96" r="8" fill="#8b5cf6" stroke="#6d28d9" stroke-width="1.5" />
          <circle cx="225" cy="78" r="8" fill="#8b5cf6" stroke="#6d28d9" stroke-width="1.5" />
          <circle cx="225" cy="60" r="8" fill="#8b5cf6" stroke="#6d28d9" stroke-width="1.5" />
          <circle cx="225" cy="42" r="8" fill="#8b5cf6" stroke="#6d28d9" stroke-width="1.5" />
          <circle cx="225" cy="24" r="8" fill="#8b5cf6" stroke="#6d28d9" stroke-width="1.5" />
        </g>
        <text x="225" y="117" class="count-label count-purple">5 Circles</text>

        
        <line x1="95" y1="51" x2="225" y2="51" stroke="#10b981" stroke-width="1.2" stroke-dasharray="3 3" opacity="0.6" />
      </svg>
    </div>
  </div>

  
  <div class="toggle-row">
    <button class="btn-toggle active" id="btnOverlay" onclick="toggleConnectors()">
      <span>✦</span> Compare Heights
    </button>
  </div>

  <script>
    let showGuide = true;
    function toggleConnectors() {
      showGuide = !showGuide;
      const btn = document.getElementById('btnOverlay');
      const arrow = document.querySelector('.guide-arrow');
      const arrowText = document.querySelector('.guide-arrow + text + text, .guide-arrow ~ text');
      
      if (showGuide) {
        btn.classList.add('active');
        document.querySelectorAll('.guide-arrow, .guide-arrow ~ path, .guide-arrow ~ text').forEach(el => el.style.opacity = '1');
      } else {
        btn.classList.remove('active');
        document.querySelectorAll('.guide-arrow, .guide-arrow ~ path, .guide-arrow ~ text').forEach(el => el.style.opacity = '0');
      }
    }
  </script>
</body>
</html>

Sorting Objects Into Categories

Using Tally Marks and T-Charts to Organize Data

Making Picture Graphs From Data

Making Bar-Type Graphs From Data

Answering Questions About Picture and Bar Graphs

math

Organizing and Interpreting Data

Reading Horizontal Object Graphs Using Cubes

Making Picture Graphs with Symbols

Answering Questions: How Many in Each Category?

Reading Vertical Bar Graphs

Reading Horizontal Bar Graphs

Making Simple Bar Graphs

Finding the Total in Picture and Bar Graphs

Answering How Many More and How Many Fewer from Graphs

Solving Two-Step Problems Using Graphs

Answering Questions About Graphs

Picture Graphs and Bar Graphs: Representing and Interpreting Data

收集数据的常见方法：举手表决与无记名投票

收集数据的常见方法：现场观察与测量记录

用画“正”字法记录动态数据

不同记数符号的比较与优选

整理原始数据并编制单式统计表

认识统计表的表头、项目与“合计”栏

从单式统计表中提取和分析信息

体会数据蕴含的信息与规律

根据统计结果提出合理化建议

数据的收集、记录与单式统计表

分段整理数据的方法（如成绩分段）

分段统计表的制作与解读

设计简单的问卷调查表

数据收集中的真实性与可靠性

小组统计调查实践活动

数据收集与统计表单元综合测评

数据的分段整理与小调查实践

认识条形统计图的结构与优势

认识1格表示1个单位的条形统计图

绘制1格表示1个单位的条形统计图

认识1格表示2个单位的条形统计图

绘制1格表示2个单位的条形统计图

认识1格表示5或10个单位的条形统计图

根据数据范围合理确定1格代表的数量

横向单式条形统计图的认识与画法

竖向与横向条形统计图的对比与选择

单式条形统计图的认识与绘制

从条形统计图中获取数据信息并计算

根据条形统计图进行简单预测与推断

读懂生活媒体中的简单条形统计图

辨析条形统计图中的常见错误与误导

条形统计图与统计表的相互转化

条形统计图应用：校园体育与健康调查

条形统计图应用：节能减排与环保统计

单式条形统计图画法规范与易错点梳理

单式条形统计图单元能力测评

条形统计图的数据分析与综合应用

认识复式统计表的必要性与结构

复式统计表复杂表头的认识与填写

整理并制作男女生分类复式统计表

从复式统计表中提取信息并进行横纵比较

认识复式条形统计图与图例的作用

竖向复式条形统计图的读图方法

绘制竖向复式条形统计图

横向复式条形统计图的认识与画法

复式条形统计图中的对比分析与发现

复式统计表与复式条形统计图基础

堆叠式条形统计图的初步认识

复式条形图应用：城乡居民收入与支出对比

复式条形图应用：两队各项比赛成绩综合对比

读懂媒体新闻中的复式条形统计图

复式统计表与复式条形统计图的相互转换

根据复式条形统计图进行趋势预测与决策

复式条形统计图常见制图错误剖析

复式统计图表综合实践小课题

复式统计表与条形图单元能力测评

复式条形统计图的高阶应用与数据分析

体会平均数的产生：移多补少

平均数的计算公式：总数÷总份数

平均数的范围：介于最大数与最小数之间

平均数的统计意义：表征一组数据的集中趋势

人数不同时用平均数比较两组水平

计算平均成绩与平均身高

已知平均数和份数求总数

已知平均数求其中某个未知数

平均数的认识与基础运算

平均数的敏感性：极端值对平均数的影响

裁判打分中去掉最高分与最低分的原理

平均数的现实误区：平均水深与安全隐患

基准数法快速求平均数

平均数应用：家庭每月用水用电评估

平均数应用：农作物亩产量抽样估算

平均数与条形统计图的结合分析

加权平均数的初步感知

平均数实际应用综合案例研讨

平均数单元综合能力测评

平均数的统计特性与实际应用

认识单式折线统计图及其特点

读懂单式折线统计图中的数据与趋势

折线统计图中的点位置与数值对应

单式折线统计图的规范画法步骤

条形统计图与折线统计图的对比与选择

折线斜率与变化快慢的关系

单式折线图应用：一天24小时气温连续变化

单式折线图应用：儿童7至12岁生长发育身高曲线

单式折线统计图的认识与应用

认识复式折线统计图与图例

读懂复式折线统计图中的双线趋势

绘制复式折线统计图

复式折线图应用：南北两地各月平均气温对比

复式折线图应用：冷饮与热饮销量季度走势分析

读懂媒体中的经济与科技折线统计图

折线统计图中的坐标截断（折线波浪线）与尺度放缩

根据折线统计图作出科学预测与决策

复式统计表与复式折线统计图的相互转化

折线统计图常见画图误区辨析

折线统计图动态数据实践探究小课题

单式与复式折线图单元综合测评

复式折线统计图与动态趋势进阶分析

认识扇形统计图及其结构

扇形统计图的特点与优势

百分数的统计意义探究

读懂扇形统计图中的百分比信息

已知总量和百分比求部分量

已知部分量和百分比求总量

已知两项数量差与百分比差求总量

扇形圆心角与百分比的对应计算

扇形统计图的画法步骤与制作

扇形统计图的认识、计算与绘制

扇形图应用：人体营养成分与平衡膳食宝塔

扇形图应用：地球表面海洋与陆地面积构成

扇形图应用：家庭月支出结构与恩格尔系数

扇形图应用：校园图书借阅类别分布统计

扇形统计图与条形统计图的联合解读

扇形统计图与统计表的相互转化

扇形统计图的实际应用与图表联读

不能单凭扇形大小比较两个不同总体的部分量

读懂媒体中的百分比与扇形统计图

扇形统计图常见制图错误剖析

扇形统计图设计与生活调查实践小课题

扇形统计图与百分数统计单元能力测评

扇形统计图的批判辨析与调查实践

三大统计图的功能与特点总结

根据数据特点和分析目的选择最佳统计图

同一组数据用不同统计图表达的效果对比

从报纸和杂志中获取并整理数据

从电视和互联网中获取并整理数据

解读媒体中的复合统计图表

识别媒体中的视觉误导统计图

统计图表的综合选择与媒体图表批判性解读

数据分析：我国人口年龄结构与社会发展变化

数据分析：科技创新与中国高铁网络飞速发展

数据分析：绿色环保与植树造林成效统计

合理述说数据分析的结论与论据支撑

根据统计分析结果提出可行决策建议

现实主题数据分析与科学决策

统计调查的抽样初步概念与代表性

统计指标的综合应用：图表、百分数与平均数的结合

数据安全与个人信息保护意识

学校或社区主题统计调查项目实践

数据分析报告的规范撰写与展示

统计图表综合选择与数据分析能力测评

统计调查项目实践与数据报告撰写

Assessing the Accuracy of Statistical Claims in Media

Making Sense of Numbers: Interpreting Quantitative Data in Media

Identifying Bias in Statistical Reports

Evaluating Sampling Methods in Media Claims

Analysing Misleading Graphs and Statistics

Ethical Considerations in Statistical Reporting

Analysing Statistical Claims in the Media

Constructing Boxplots from Data

Interpreting Boxplots: Median, Quartiles and IQR

Comparing Distributions Using Boxplots

Describing the Shape of Distributions

Identifying Outliers in Data Distributions

Comparing Centre and Spread of Distributions

Discussing Distributions in Context

Comparing Data Distributions

Constructing Scatterplots from Bivariate Data

Describing Association: Direction and Strength

Distinguishing Linear and Non-Linear Associations

Identifying Relationships Between Given Data

Using Linear Models to Solve Problems

Using Fitted Functions to Solve Real-World Problems

Scatterplots and Bivariate Numerical Data

Constructing Two-Way Tables from Data

Interpreting Two-Way Tables

Identifying Association Between Categorical Variables

Planning a Statistical Investigation with Bivariate Data

Conducting a Bivariate Data Investigation

Evaluating and Reporting Findings from Bivariate Investigations

Categorical Data and Bivariate Investigations

Making Picture Graphs

Making Bar Graphs

Reading Picture Graphs

Reading Bar Graphs

Solving Problems Using a Bar Graph

Comparing Data Using Frequencies

Representing and Interpreting Data

OGM.2.DAT.2

Aligned learning resources

Related diagrams