<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Baseline Comparison</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: center;
      min-height: 100vh;
      padding: 16px 12px;
      user-select: none;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      width: 100%;
      max-width: 520px;
      align-items: start;
    }

    @media (max-width: 500px) {
      .comparison-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 280px;
      }
    }

    .panel {
      background: transparent;
      border: none;
      padding: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .badge {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
    }

    .badge-wrong {
      background: #fee2e2;
      color: #dc2626;
    }

    .badge-correct {
      background: #dcfce7;
      color: #16a34a;
    }

    .stage {
      position: relative;
      width: 100%;
      height: 190px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 18px;
      padding-bottom: 22px;
    }

    .baseline {
      position: absolute;
      bottom: 22px;
      left: 4px;
      right: 4px;
      height: 3px;
      background: #94a3b8;
      border-radius: 2px;
    }

    .baseline-label {
      position: absolute;
      bottom: 4px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .baseline.wrong-baseline {
      border-bottom: 2px dashed #f87171;
      background: transparent;
      height: 0;
    }

    .column {
      position: relative;
      width: 38px;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      z-index: 2;
    }

    .cube {
      width: 34px;
      height: 34px;
      border-radius: 6px;
      position: relative;
      margin-top: -2px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
      border: 1.5px solid rgba(0, 0, 0, 0.12);
    }

    .cube::after {
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .cube.red {
      background: #ef4444;
    }

    .cube.blue {
      background: #3b82f6;
    }

    .floating-group {
      position: absolute;
      bottom: 72px;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      transition: bottom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .count-tag {
      position: absolute;
      top: -20px;
      font-size: 13px;
      font-weight: 800;
      border-radius: 4px;
      padding: 1px 4px;
    }

    .count-red { color: #dc2626; }
    .count-blue { color: #2563eb; }

    .air-gap {
      position: absolute;
      bottom: 0;
      width: 2px;
      height: 68px;
      border-left: 2px dashed #f87171;
      left: 50%;
      transform: translateX(-50%);
      transition: opacity 0.3s ease;
    }

    .btn-container {
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 6px;
    }

    .tap-hint {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      padding: 5px 12px;
      background: #f1f5f9;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .tap-hint:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="panel" id="wrongPanel">
      <div class="badge badge-wrong">✕ Unfair / Wrong</div>
      
      <div class="stage">
        <div class="baseline wrong-baseline"></div>
        <div class="baseline-label">No baseline</div>

        
        <div class="column">
          <div class="count-tag count-red">4</div>
          <div class="cube red"></div>
          <div class="cube red"></div>
          <div class="cube red"></div>
          <div class="cube red"></div>
        </div>

        
        <div class="column" style="height: 100%;">
          <div class="air-gap" id="airGap"></div>
          <div class="floating-group" id="floatingBlue">
            <div class="count-tag count-blue">2</div>
            <div class="cube blue"></div>
            <div class="cube blue"></div>
          </div>
        </div>
      </div>
      
      <div class="btn-container">
        <button class="tap-hint" id="dropBtn" type="button">Tap to test baseline</button>
      </div>
    </div>

    
    <div class="panel">
      <div class="badge badge-correct">✓ Fair / Correct</div>
      
      <div class="stage">
        <div class="baseline"></div>
        <div class="baseline-label">Same baseline</div>

        
        <div class="column">
          <div class="count-tag count-red">4</div>
          <div class="cube red"></div>
          <div class="cube red"></div>
          <div class="cube red"></div>
          <div class="cube red"></div>
        </div>

        
        <div class="column">
          <div class="count-tag count-blue">2</div>
          <div class="cube blue"></div>
          <div class="cube blue"></div>
        </div>
      </div>

      <div class="btn-container"></div>
    </div>
  </div>

  <script>
    const dropBtn = document.getElementById('dropBtn');
    const floatingBlue = document.getElementById('floatingBlue');
    const airGap = document.getElementById('airGap');
    let isDropped = false;

    dropBtn.addEventListener('click', () => {
      isDropped = !isDropped;
      if (isDropped) {
        floatingBlue.style.bottom = '0px';
        airGap.style.opacity = '0';
        dropBtn.textContent = '↺ Reset float';
      } else {
        floatingBlue.style.bottom = '72px';
        airGap.style.opacity = '1';
        dropBtn.textContent = 'Tap to test baseline';
      }
    });
  </script>
</body>
</html>

Making a Real-Object Graph with Cubes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cube Graph Comparison</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      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: 8px 12px;
      user-select: none;
    }
    .graph-wrap {
      width: 100%;
      max-width: 440px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .tower-group {
      cursor: pointer;
      transition: opacity 0.25s ease, filter 0.25s ease;
    }
    .tower-group:hover, .tower-group.active {
      filter: brightness(1.05) drop-shadow(0 4px 6px rgba(0,0,0,0.12));
    }
    .callout {
      transition: opacity 0.3s ease;
    }
    .btn-row {
      display: flex;
      gap: 8px;
      margin-top: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .pill {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 5px 12px;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .pill.active, .pill:hover {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="graph-wrap">
    <svg viewBox="0 35 440 275" aria-label="Cube Graph comparing Red, Blue, and Green columns">
      <defs>
        
        <pattern id="gridPattern" width="20" height="14" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 14" fill="none" stroke="#cbd5e1" stroke-width="0.8" />
        </pattern>
        
        <marker id="arrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#059669" />
        </marker>
      </defs>

      
      <polygon points="30,260 90,205 390,205 330,260" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="1.5" />
      <polygon points="30,260 90,205 390,205 330,260" fill="url(#gridPattern)" />
      
      <polygon points="30,260 330,260 330,268 30,268" fill="#94a3b8" />

      
      <g id="guideLine" class="callout">
        <line x1="120" y1="134" x2="304" y2="134" stroke="#059669" stroke-width="2" stroke-dasharray="4 3" marker-end="url(#arrow)" />
        <rect x="154" y="122" width="126" height="20" rx="10" fill="#ecfdf5" stroke="#10b981" stroke-width="1.2" />
        <text x="217" y="136" fill="#047857" font-size="10.5" font-weight="700" text-anchor="middle">+1 more green cube</text>
      </g>

      
      <g id="colRed" class="tower-group" onclick="selectCol('red')" tabindex="0" role="button" aria-label="Red Tower with 4 cubes">
        
        <g transform="translate(90, 218)">
          <polygon points="0,-8 14,-15 44,-15 30,-8" fill="#fca5a5" />
          <ellipse cx="22" cy="-11.5" rx="5" ry="2.2" fill="#ef4444" opacity="0.6"/>
          <polygon points="0,-8 30,-8 30,20 0,20" fill="#ef4444" />
          <polygon points="30,-8 44,-15 44,13 30,20" fill="#dc2626" />
        </g>
        
        <g transform="translate(90, 190)">
          <polygon points="0,-8 14,-15 44,-15 30,-8" fill="#fca5a5" />
          <ellipse cx="22" cy="-11.5" rx="5" ry="2.2" fill="#ef4444" opacity="0.6"/>
          <polygon points="0,-8 30,-8 30,20 0,20" fill="#ef4444" />
          <polygon points="30,-8 44,-15 44,13 30,20" fill="#dc2626" />
        </g>
        
        <g transform="translate(90, 162)">
          <polygon points="0,-8 14,-15 44,-15 30,-8" fill="#fca5a5" />
          <ellipse cx="22" cy="-11.5" rx="5" ry="2.2" fill="#ef4444" opacity="0.6"/>
          <polygon points="0,-8 30,-8 30,20 0,20" fill="#ef4444" />
          <polygon points="30,-8 44,-15 44,13 30,20" fill="#dc2626" />
        </g>
        
        <g transform="translate(90, 134)">
          <polygon points="0,-8 14,-15 44,-15 30,-8" fill="#fecaca" />
          <ellipse cx="22" cy="-11.5" rx="6" ry="2.6" fill="#ef4444" />
          <polygon points="0,-8 30,-8 30,20 0,20" fill="#ef4444" />
          <polygon points="30,-8 44,-15 44,13 30,20" fill="#dc2626" />
        </g>
        
        <rect x="75" y="276" width="60" height="24" rx="6" fill="#fee2e2" stroke="#f87171" stroke-width="1.2" />
        <text x="105" y="292" fill="#991b1b" font-size="12" font-weight="700" text-anchor="middle">Red (4)</text>
      </g>

      
      <g id="colBlue" class="tower-group" onclick="selectCol('blue')" tabindex="0" role="button" aria-label="Blue Tower with 2 cubes">
        
        <g transform="translate(195, 218)">
          <polygon points="0,-8 14,-15 44,-15 30,-8" fill="#93c5fd" />
          <ellipse cx="22" cy="-11.5" rx="5" ry="2.2" fill="#3b82f6" opacity="0.6"/>
          <polygon points="0,-8 30,-8 30,20 0,20" fill="#3b82f6" />
          <polygon points="30,-8 44,-15 44,13 30,20" fill="#2563eb" />
        </g>
        
        <g transform="translate(195, 190)">
          <polygon points="0,-8 14,-15 44,-15 30,-8" fill="#bfdbfe" />
          <ellipse cx="22" cy="-11.5" rx="6" ry="2.6" fill="#3b82f6" />
          <polygon points="0,-8 30,-8 30,20 0,20" fill="#3b82f6" />
          <polygon points="30,-8 44,-15 44,13 30,20" fill="#2563eb" />
        </g>
        
        <rect x="180" y="276" width="60" height="24" rx="6" fill="#dbeafe" stroke="#60a5fa" stroke-width="1.2" />
        <text x="210" y="292" fill="#1e40af" font-size="12" font-weight="700" text-anchor="middle">Blue (2)</text>
      </g>

      
      <g id="fewestBadge" class="callout">
        <line x1="217" y1="171" x2="217" y2="178" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="2 2" />
        <polygon points="217,181 214,175 220,175" fill="#2563eb" />
        <rect x="146" y="149" width="142" height="22" rx="11" fill="#eff6ff" stroke="#3b82f6" stroke-width="1.5" />
        <text x="217" y="164" fill="#1d4ed8" font-size="11.5" font-weight="700" text-anchor="middle">Shortest = Fewest (2)</text>
      </g>

      
      <g id="colGreen" class="tower-group" onclick="selectCol('green')" tabindex="0" role="button" aria-label="Green Tower with 5 cubes">
        
        <g transform="translate(300, 218)">
          <polygon points="0,-8 14,-15 44,-15 30,-8" fill="#86efac" />
          <ellipse cx="22" cy="-11.5" rx="5" ry="2.2" fill="#22c55e" opacity="0.6"/>
          <polygon points="0,-8 30,-8 30,20 0,20" fill="#22c55e" />
          <polygon points="30,-8 44,-15 44,13 30,20" fill="#16a34a" />
        </g>
        
        <g transform="translate(300, 190)">
          <polygon points="0,-8 14,-15 44,-15 30,-8" fill="#86efac" />
          <ellipse cx="22" cy="-11.5" rx="5" ry="2.2" fill="#22c55e" opacity="0.6"/>
          <polygon points="0,-8 30,-8 30,20 0,20" fill="#22c55e" />
          <polygon points="30,-8 44,-15 44,13 30,20" fill="#16a34a" />
        </g>
        
        <g transform="translate(300, 162)">
          <polygon points="0,-8 14,-15 44,-15 30,-8" fill="#86efac" />
          <ellipse cx="22" cy="-11.5" rx="5" ry="2.2" fill="#22c55e" opacity="0.6"/>
          <polygon points="0,-8 30,-8 30,20 0,20" fill="#22c55e" />
          <polygon points="30,-8 44,-15 44,13 30,20" fill="#16a34a" />
        </g>
        
        <g transform="translate(300, 134)">
          <polygon points="0,-8 14,-15 44,-15 30,-8" fill="#86efac" />
          <ellipse cx="22" cy="-11.5" rx="5" ry="2.2" fill="#22c55e" opacity="0.6"/>
          <polygon points="0,-8 30,-8 30,20 0,20" fill="#22c55e" />
          <polygon points="30,-8 44,-15 44,13 30,20" fill="#16a34a" />
        </g>
        
        <g transform="translate(300, 106)">
          <polygon points="0,-8 14,-15 44,-15 30,-8" fill="#bbf7d0" />
          <ellipse cx="22" cy="-11.5" rx="6" ry="2.6" fill="#22c55e" />
          <polygon points="0,-8 30,-8 30,20 0,20" fill="#22c55e" />
          <polygon points="30,-8 44,-15 44,13 30,20" fill="#16a34a" />
        </g>
        
        <rect x="285" y="276" width="60" height="24" rx="6" fill="#dcfce7" stroke="#4ade80" stroke-width="1.2" />
        <text x="315" y="292" fill="#15803d" font-size="12" font-weight="700" text-anchor="middle">Green (5)</text>
      </g>

      
      <g id="mostBadge" class="callout">
        
        <path d="M 322,96 L 322,76" fill="none" stroke="#d97706" stroke-width="1.5" stroke-dasharray="2 2" />
        <polygon points="322,98 318,92 326,92" fill="#d97706" />
        
        <rect x="236" y="46" width="168" height="28" rx="14" fill="#fef3c7" stroke="#f59e0b" stroke-width="1.5" />
        <text x="320" y="65" fill="#b45309" font-size="13" font-weight="700" text-anchor="middle">👑 Tallest = Most (5)</text>
      </g>

    </svg>
  </div>

  <div class="btn-row">
    <button class="pill active" id="btnAll" onclick="setMode('all')">Show All</button>
    <button class="pill" id="btnCompare" onclick="setMode('compare')">Compare</button>
    <button class="pill" id="btnExtremes" onclick="setMode('extremes')">Most vs Fewest</button>
  </div>

  <script>
    function setMode(mode) {
      document.querySelectorAll('.pill').forEach(p => p.classList.remove('active'));
      const guide = document.getElementById('guideLine');
      const most = document.getElementById('mostBadge');
      const fewest = document.getElementById('fewestBadge');
      
      if (mode === 'all') {
        document.getElementById('btnAll').classList.add('active');
        guide.style.opacity = '1';
        most.style.opacity = '1';
        fewest.style.opacity = '1';
      } else if (mode === 'compare') {
        document.getElementById('btnCompare').classList.add('active');
        guide.style.opacity = '1';
        most.style.opacity = '0.15';
        fewest.style.opacity = '0.15';
      } else if (mode === 'extremes') {
        document.getElementById('btnExtremes').classList.add('active');
        guide.style.opacity = '0.15';
        most.style.opacity = '1';
        fewest.style.opacity = '1';
      }
    }

    function selectCol(color) {
      const col = document.getElementById('col' + color.charAt(0).toUpperCase() + color.slice(1));
      col.classList.toggle('active');
    }
  </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: system-ui, -apple-system, sans-serif; }
    body {
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-grid {
      display: flex;
      flex-direction: row;
      gap: 14px;
      width: 100%;
      max-width: 640px;
      justify-content: center;
    }

    .panel {
      flex: 1;
      min-width: 150px;
      background: #f8fafc;
      border-radius: 16px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #e2e8f0;
    }

    .panel-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
      margin-bottom: 2px;
    }

    .panel-sub {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 8px;
    }

    .stage {
      width: 100%;
      height: 230px;
      position: relative;
      border-radius: 12px;
      overflow: hidden;
    }

    /* Left Messy Area */
    .pile-bg {
      background: #f1f5f9;
      border: 2px dashed #cbd5e1;
      border-radius: 12px;
    }

    /* Right Mat Area */
    .mat-bg {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .columns-grid {
      display: flex;
      height: 100%;
      width: 100%;
      align-items: flex-end;
      padding-bottom: 30px;
    }

    .col-track {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      position: relative;
      border-right: 1px dashed #e2e8f0;
    }

    .col-track:last-child {
      border-right: none;
    }

    .baseline {
      position: absolute;
      bottom: 28px;
      left: 0;
      right: 0;
      height: 3px;
      background: #1e2945;
      z-index: 2;
    }

    .col-labels {
      position: absolute;
      bottom: 4px;
      left: 0;
      right: 0;
      display: flex;
      z-index: 3;
    }

    .col-label {
      flex: 1;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
    }
    .lbl-red { color: #e11d48; }
    .lbl-blue { color: #2563eb; }
    .lbl-green { color: #059669; }

    /* SVG 3D Cube Styling */
    .cube {
      width: 28px;
      height: 28px;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
      transition: transform 0.4s ease;
    }

    /* Messy scattered positions */
    .scattered {
      position: absolute;
    }

    /* Stacked Mat items */
    .stacked-cube {
      margin-bottom: -4px;
      z-index: 1;
    }

    .btn-toggle {
      margin-top: 10px;
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s, box-shadow 0.2s;
    }
    .btn-toggle:hover {
      background: #f1f5f9;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .btn-toggle:active {
      transform: translateY(1px);
    }

    @media (max-width: 440px) {
      .panel-title { font-size: 13px; }
      .panel-sub { font-size: 11px; }
      .col-label { font-size: 12px; }
      .cube { width: 24px; height: 24px; }
      .stage { height: 200px; }
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="panel">
      <div class="panel-title">Messy Pile</div>
      <div class="panel-sub">Hard to compare!</div>
      <div class="stage pile-bg" id="messyPile">
        
        
        <div class="scattered" style="top:25%; left:18%; transform: rotate(18deg);">
          <svg class="cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#fda4af"/><polygon points="0,8 12,8 12,28 0,28" fill="#f43f5e"/><polygon points="12,8 32,8 32,28 12,28" fill="#e11d48"/><circle cx="19" cy="5" r="3" fill="#fecdd3"/></svg>
        </div>
        <div class="scattered" style="top:42%; left:42%; transform: rotate(-25deg);">
          <svg class="cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#fda4af"/><polygon points="0,8 12,8 12,28 0,28" fill="#f43f5e"/><polygon points="12,8 32,8 32,28 12,28" fill="#e11d48"/><circle cx="19" cy="5" r="3" fill="#fecdd3"/></svg>
        </div>
        <div class="scattered" style="top:60%; left:15%; transform: rotate(40deg);">
          <svg class="cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#fda4af"/><polygon points="0,8 12,8 12,28 0,28" fill="#f43f5e"/><polygon points="12,8 32,8 32,28 12,28" fill="#e11d48"/><circle cx="19" cy="5" r="3" fill="#fecdd3"/></svg>
        </div>
        <div class="scattered" style="top:68%; left:58%; transform: rotate(-12deg);">
          <svg class="cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#fda4af"/><polygon points="0,8 12,8 12,28 0,28" fill="#f43f5e"/><polygon points="12,8 32,8 32,28 12,28" fill="#e11d48"/><circle cx="19" cy="5" r="3" fill="#fecdd3"/></svg>
        </div>

        
        <div class="scattered" style="top:18%; left:60%; transform: rotate(32deg);">
          <svg class="cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#93c5fd"/><polygon points="0,8 12,8 12,28 0,28" fill="#3b82f6"/><polygon points="12,8 32,8 32,28 12,28" fill="#1d4ed8"/><circle cx="19" cy="5" r="3" fill="#bfdbfe"/></svg>
        </div>
        <div class="scattered" style="top:48%; left:68%; transform: rotate(-35deg);">
          <svg class="cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#93c5fd"/><polygon points="0,8 12,8 12,28 0,28" fill="#3b82f6"/><polygon points="12,8 32,8 32,28 12,28" fill="#1d4ed8"/><circle cx="19" cy="5" r="3" fill="#bfdbfe"/></svg>
        </div>

        
        <div class="scattered" style="top:15%; left:38%; transform: rotate(-15deg);">
          <svg class="cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#6ee7b7"/><polygon points="0,8 12,8 12,28 0,28" fill="#10b981"/><polygon points="12,8 32,8 32,28 12,28" fill="#047857"/><circle cx="19" cy="5" r="3" fill="#a7f3d0"/></svg>
        </div>
        <div class="scattered" style="top:32%; left:12%; transform: rotate(-45deg);">
          <svg class="cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#6ee7b7"/><polygon points="0,8 12,8 12,28 0,28" fill="#10b981"/><polygon points="12,8 32,8 32,28 12,28" fill="#047857"/><circle cx="19" cy="5" r="3" fill="#a7f3d0"/></svg>
        </div>
        <div class="scattered" style="top:40%; left:28%; transform: rotate(20deg);">
          <svg class="cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#6ee7b7"/><polygon points="0,8 12,8 12,28 0,28" fill="#10b981"/><polygon points="12,8 32,8 32,28 12,28" fill="#047857"/><circle cx="19" cy="5" r="3" fill="#a7f3d0"/></svg>
        </div>
        <div class="scattered" style="top:62%; left:38%; transform: rotate(-8deg);">
          <svg class="cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#6ee7b7"/><polygon points="0,8 12,8 12,28 0,28" fill="#10b981"/><polygon points="12,8 32,8 32,28 12,28" fill="#047857"/><circle cx="19" cy="5" r="3" fill="#a7f3d0"/></svg>
        </div>
        <div class="scattered" style="top:72%; left:22%; transform: rotate(28deg);">
          <svg class="cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#6ee7b7"/><polygon points="0,8 12,8 12,28 0,28" fill="#10b981"/><polygon points="12,8 32,8 32,28 12,28" fill="#047857"/><circle cx="19" cy="5" r="3" fill="#a7f3d0"/></svg>
        </div>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-title">Graphing Mat</div>
      <div class="panel-sub" id="matSub">Easy to count!</div>
      <div class="stage mat-bg">
        <div class="baseline"></div>
        <div class="columns-grid">
          
          <div class="col-track" id="redCol">
            
          </div>
          
          <div class="col-track" id="blueCol">
            
          </div>
          
          <div class="col-track" id="greenCol">
            
          </div>
        </div>
        <div class="col-labels">
          <div class="col-label lbl-red">Red</div>
          <div class="col-label lbl-blue">Blue</div>
          <div class="col-label lbl-green">Green</div>
        </div>
      </div>
    </div>
  </div>

  <button class="btn-toggle" id="toggleBtn" onclick="toggleSort()">Toggle Graph ✦</button>

  <script>
    const redSvg = '<svg class="cube stacked-cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#fda4af"/><polygon points="0,8 12,8 12,28 0,28" fill="#f43f5e"/><polygon points="12,8 32,8 32,28 12,28" fill="#e11d48"/><circle cx="19" cy="5" r="3" fill="#fecdd3"/></svg>';
    const blueSvg = '<svg class="cube stacked-cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#93c5fd"/><polygon points="0,8 12,8 12,28 0,28" fill="#3b82f6"/><polygon points="12,8 32,8 32,28 12,28" fill="#1d4ed8"/><circle cx="19" cy="5" r="3" fill="#bfdbfe"/></svg>';
    const greenSvg = '<svg class="cube stacked-cube" viewBox="0 0 32 32"><polygon points="6,2 26,2 32,8 12,8" fill="#6ee7b7"/><polygon points="0,8 12,8 12,28 0,28" fill="#10b981"/><polygon points="12,8 32,8 32,28 12,28" fill="#047857"/><circle cx="19" cy="5" r="3" fill="#a7f3d0"/></svg>';

    let filled = true;

    function renderMat(show) {
      document.getElementById('redCol').innerHTML = show ? redSvg.repeat(4) : '';
      document.getElementById('blueCol').innerHTML = show ? blueSvg.repeat(2) : '';
      document.getElementById('greenCol').innerHTML = show ? greenSvg.repeat(5) : '';
      document.getElementById('matSub').textContent = show ? 'Easy to count!' : 'Ready for cubes';
    }

    function toggleSort() {
      filled = !filled;
      renderMat(filled);
    }

    // Initial render
    renderMat(true);
  </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>Cubes on Baseline</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px 16px;
      user-select: none;
    }

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

    /* Stage Area */
    .stage {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .columns-container {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      width: 100%;
      height: 195px;
      padding: 0 12px;
    }

    .column {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      width: 60px;
      height: 100%;
      justify-content: flex-start;
      gap: 3px;
    }

    /* Snap Cube Styling */
    .cube {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(-14px) scale(0.9);
      transition: opacity 0.35s ease, transform 0.35s ease;
      box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.12);
      flex-shrink: 0;
    }

    /* Center connector stud */
    .cube::after {
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255,255,255,0.3);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
    }

    .cube.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .cube.red { background: linear-gradient(135deg, #f87171, #dc2626); }
    .cube.blue { background: linear-gradient(135deg, #60a5fa, #2563eb); }
    .cube.green { background: linear-gradient(135deg, #4ade80, #16a34a); }

    /* Baseline Section */
    .baseline-section {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 2px;
    }

    .baseline-bar {
      width: 100%;
      height: 8px;
      background: linear-gradient(90deg, #fbbf24, #d97706, #fbbf24);
      border-radius: 4px;
      box-shadow: 0 0 10px rgba(217, 119, 6, 0.5), 0 2px 4px rgba(0,0,0,0.1);
    }

    .baseline-label-tag {
      margin-top: 6px;
      background: #fef3c7;
      color: #78350f;
      border: 1.5px solid #d97706;
      border-radius: 12px;
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.2px;
      box-shadow: 0 1px 3px rgba(180, 83, 9, 0.15);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    /* Column Headers at Bottom */
    .labels-row {
      display: flex;
      justify-content: space-around;
      width: 100%;
      margin-top: 8px;
      padding: 0 12px;
    }

    .col-label {
      width: 60px;
      text-align: center;
      font-weight: 700;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .col-label.red { color: #b91c1c; }
    .col-label.blue { color: #1d4ed8; }
    .col-label.green { color: #15803d; }

    .count-badge {
      display: inline-block;
      font-size: 12px;
      font-weight: 800;
      background: #e2e8f0;
      color: #475569;
      padding: 1px 8px;
      border-radius: 10px;
      transition: background 0.3s, color 0.3s;
      min-width: 24px;
    }

    .count-badge.active-red { background: #fee2e2; color: #991b1b; }
    .count-badge.active-blue { background: #dbeafe; color: #1e40af; }
    .count-badge.active-green { background: #dcfce7; color: #166534; }

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

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 13px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .btn:active {
      background: #e2e8f0;
    }

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

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.25s, transform 0.25s;
    }

    .dot.active {
      background: #2563eb;
    }

    @media (max-width: 360px) {
      .cube {
        width: 32px;
        height: 32px;
      }
      .columns-container {
        height: 175px;
      }
      .col-label {
        font-size: 12px;
      }
      .btn {
        padding: 4px 10px;
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="main-container">
    
    <div class="stage">
      <div class="columns-container">
        
        <div class="column" id="col-red">
          <div class="cube red" data-step="2"></div>
          <div class="cube red" data-step="2"></div>
          <div class="cube red" data-step="2"></div>
          <div class="cube red" data-step="2"></div>
        </div>

        
        <div class="column" id="col-blue">
          <div class="cube blue" data-step="1"></div>
          <div class="cube blue" data-step="1"></div>
        </div>

        
        <div class="column" id="col-green">
          <div class="cube green" data-step="3"></div>
          <div class="cube green" data-step="3"></div>
          <div class="cube green" data-step="3"></div>
          <div class="cube green" data-step="3"></div>
          <div class="cube green" data-step="3"></div>
        </div>
      </div>

      
      <div class="baseline-section">
        <div class="baseline-bar"></div>
        <div class="baseline-label-tag">✦ Baseline (Start Here)</div>
      </div>

      
      <div class="labels-row">
        <div class="col-label red">
          <span>Red</span>
          <span class="count-badge" id="badge-red">0</span>
        </div>
        <div class="col-label blue">
          <span>Blue</span>
          <span class="count-badge" id="badge-blue">0</span>
        </div>
        <div class="col-label green">
          <span>Green</span>
          <span class="count-badge" id="badge-green">0</span>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn" id="prevBtn" aria-label="Previous step">◀</button>
      <div class="dots" role="tablist" aria-label="Step indicators">
        <div class="dot active" data-idx="0" role="tab" aria-label="Step 0"></div>
        <div class="dot" data-idx="1" role="tab" aria-label="Step 1"></div>
        <div class="dot" data-idx="2" role="tab" aria-label="Step 2"></div>
        <div class="dot" data-idx="3" role="tab" aria-label="Step 3"></div>
      </div>
      <button class="btn" id="nextBtn" aria-label="Next step">▶</button>
      <button class="btn" id="playBtn" aria-label="Play or pause animation" style="margin-left: 2px;">⏸</button>
    </div>
  </div>

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

    const cubes = document.querySelectorAll('.cube');
    const dots = document.querySelectorAll('.dot');
    const badgeRed = document.getElementById('badge-red');
    const badgeBlue = document.getElementById('badge-blue');
    const badgeGreen = document.getElementById('badge-green');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function updateView() {
      // Update Cubes Visibility
      cubes.forEach(cube => {
        const reqStep = parseInt(cube.getAttribute('data-step'), 10);
        if (currentStep >= reqStep) {
          cube.classList.add('visible');
        } else {
          cube.classList.remove('visible');
        }
      });

      // Update Counts & Badges
      if (currentStep >= 1) {
        badgeBlue.textContent = '2';
        badgeBlue.className = 'count-badge active-blue';
      } else {
        badgeBlue.textContent = '0';
        badgeBlue.className = 'count-badge';
      }

      if (currentStep >= 2) {
        badgeRed.textContent = '4';
        badgeRed.className = 'count-badge active-red';
      } else {
        badgeRed.textContent = '0';
        badgeRed.className = 'count-badge';
      }

      if (currentStep >= 3) {
        badgeGreen.textContent = '5';
        badgeGreen.className = 'count-badge active-green';
      } else {
        badgeGreen.textContent = '0';
        badgeGreen.className = 'count-badge';
      }

      // Update Dots
      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === currentStep);
      });
    }

    function setStep(step) {
      currentStep = (step + totalSteps) % totalSteps;
      updateView();
    }

    function nextStep() {
      setStep(currentStep + 1);
    }

    function prevStep() {
      setStep(currentStep - 1);
    }

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

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

    // Event Listeners
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopTimer();
      } else {
        nextStep();
        startTimer();
      }
    });

    nextBtn.addEventListener('click', () => {
      stopTimer();
      nextStep();
    });

    prevBtn.addEventListener('click', () => {
      stopTimer();
      prevStep();
    });

    dots.forEach(dot => {
      dot.addEventListener('click', (e) => {
        stopTimer();
        const idx = parseInt(e.target.getAttribute('data-idx'), 10);
        setStep(idx);
      });
    });

    // Initialize
    updateView();
    startTimer();
  </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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .question-banner {
      background: #eff6ff;
      border: 2px solid #93c5fd;
      border-radius: 16px;
      padding: 12px 18px;
      text-align: center;
      width: 100%;
      max-width: 480px;
    }

    .question-tag {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #2563eb;
      margin-bottom: 2px;
    }

    .question-text {
      font-size: 18px;
      font-weight: 800;
      color: #1e2945;
    }

    .cards-stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      margin: 16px 0;
      padding-bottom: 48px;
    }

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

    .fruit-card {
      background: #fff;
      border-radius: 18px;
      padding: 14px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      user-select: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
      position: relative;
      min-height: 120px;
    }

    .card-apple {
      border: 3px solid #fca5a5;
      background: #fef2f2;
    }
    .card-apple.active {
      box-shadow: 0 0 0 4px #ef4444, 0 10px 20px rgba(239, 68, 68, 0.18);
      background: #fee2e2;
    }

    .card-banana {
      border: 3px solid #fde047;
      background: #fefce8;
    }
    .card-banana.active {
      box-shadow: 0 0 0 4px #eab308, 0 10px 20px rgba(234, 179, 8, 0.18);
      background: #fef9c3;
    }

    .card-orange {
      border: 3px solid #fdba74;
      background: #fff7ed;
    }
    .card-orange.active {
      box-shadow: 0 0 0 4px #f97316, 0 10px 20px rgba(249, 115, 22, 0.18);
      background: #ffedd5;
    }

    .emoji {
      font-size: 38px;
      line-height: 1;
    }

    .fruit-label {
      font-size: 16px;
      font-weight: 800;
      color: #1e2945;
    }

    .check-badge {
      font-size: 13px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 12px;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .card-apple .check-badge { background: #ef4444; color: #fff; }
    .card-banana .check-badge { background: #ca8a04; color: #fff; }
    .card-orange .check-badge { background: #ea580c; color: #fff; }

    .fruit-card.active .check-badge {
      opacity: 1;
      transform: translateY(0);
    }

    .pointer-hand {
      position: absolute;
      bottom: 0;
      font-size: 32px;
      line-height: 1;
      transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .rule-pill {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .stepper-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

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

    .dot.active {
      background: #2563eb;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <div class="question-banner">
    <div class="question-tag">Ask Friends</div>
    <div class="question-text">"What is your favorite snack fruit?"</div>
  </div>

  <div class="cards-stage">
    <div class="cards-row">
      <div class="fruit-card card-apple active" id="card-0" onclick="setChoice(0)">
        <span class="emoji">🍎</span>
        <span class="fruit-label">Apple</span>
        <span class="check-badge">✓ Pick</span>
      </div>

      <div class="fruit-card card-banana" id="card-1" onclick="setChoice(1)">
        <span class="emoji">🍌</span>
        <span class="fruit-label">Banana</span>
        <span class="check-badge">✓ Pick</span>
      </div>

      <div class="fruit-card card-orange" id="card-2" onclick="setChoice(2)">
        <span class="emoji">🍊</span>
        <span class="fruit-label">Orange</span>
        <span class="check-badge">✓ Pick</span>
      </div>
    </div>

    <div class="pointer-hand" id="pointer">👆</div>
  </div>

  <div class="rule-pill">
    <span>1 Friend = 1 Choice</span>
  </div>

  <div class="stepper-controls">
    <div class="dot active" onclick="setChoice(0)"></div>
    <div class="dot" onclick="setChoice(1)"></div>
    <div class="dot" onclick="setChoice(2)"></div>
  </div>

  <script>
    let currentIndex = 0;
    let timer = null;

    const cards = [
      document.getElementById('card-0'),
      document.getElementById('card-1'),
      document.getElementById('card-2')
    ];
    const dots = document.querySelectorAll('.dot');
    const pointer = document.getElementById('pointer');

    const positions = ['16.66%', '50%', '83.33%'];

    function updateView(index) {
      currentIndex = index;
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === index);
      });
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });
      pointer.style.left = positions[index];
    }

    function setChoice(index) {
      updateView(index);
      resetAutoPlay();
    }

    function nextChoice() {
      const nextIndex = (currentIndex + 1) % 3;
      updateView(nextIndex);
    }

    function resetAutoPlay() {
      clearInterval(timer);
      timer = setInterval(nextChoice, 3000);
    }

    // Initialize pointer position and auto-step
    updateView(0);
    timer = setInterval(nextChoice, 3000);
  </script>
</body>
</html>

Asking Simple Questions to Gather Information

<!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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 12px;
    }

    .flow-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .step-card {
      width: 100%;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
      cursor: pointer;
      user-select: none;
    }

    .step-card.active {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 4px 10px rgba(0, 0, 0, 0.06);
    }

    .step-header {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 130px;
    }

    .icon-badge {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .s1 .icon-badge { background: #fef3c7; }
    .s2 .icon-badge { background: #dbeafe; }
    .s3 .icon-badge { background: #dcfce7; }

    .step-title {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
      line-height: 1.2;
    }

    .step-num {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .step-body {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .tag {
      background: #fef08a;
      color: #854d0e;
      font-weight: 700;
      font-size: 13px;
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid #fde047;
      white-space: nowrap;
    }

    .question-box {
      background: #eff6ff;
      color: #1e40af;
      font-weight: 600;
      font-size: 13px;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid #bfdbfe;
      text-align: right;
    }

    .options-group {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .opt-btn {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      color: #1e2945;
      font-size: 12px;
      font-weight: 600;
      padding: 5px 8px;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s;
      white-space: nowrap;
    }

    .opt-btn.selected {
      background: #10b981;
      color: #ffffff;
      border-color: #059669;
    }

    .arrow {
      color: #94a3b8;
      font-size: 16px;
      line-height: 1;
      height: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @media (max-width: 420px) {
      .step-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
      }
      .step-body {
        width: 100%;
        justify-content: flex-start;
      }
      .question-box {
        text-align: left;
      }
      .options-group {
        justify-content: flex-start;
        width: 100%;
      }
    }
  </style>
</head>
<body>

  <div class="flow-container">
    
    <div class="step-card s1 active" id="card1" onclick="selectStep(1)">
      <div class="step-header">
        <div class="icon-badge">💡</div>
        <div>
          <div class="step-num">Step 1</div>
          <div class="step-title">Pick a Topic</div>
        </div>
      </div>
      <div class="step-body">
        <span class="tag">Recess Games</span>
      </div>
    </div>

    <div class="arrow">↓</div>

    
    <div class="step-card s2" id="card2" onclick="selectStep(2)">
      <div class="step-header">
        <div class="icon-badge">✏️</div>
        <div>
          <div class="step-num">Step 2</div>
          <div class="step-title">Ask Question</div>
        </div>
      </div>
      <div class="step-body">
        <div class="question-box">Favorite recess game?</div>
      </div>
    </div>

    <div class="arrow">↓</div>

    
    <div class="step-card s3" id="card3" onclick="selectStep(3)">
      <div class="step-header">
        <div class="icon-badge">🗳️</div>
        <div>
          <div class="step-num">Step 3</div>
          <div class="step-title">Give Choices</div>
        </div>
      </div>
      <div class="step-body">
        <div class="options-group">
          <button class="opt-btn" onclick="toggleOption(this, event)">Tag 🏃</button>
          <button class="opt-btn selected" onclick="toggleOption(this, event)">Swings 🎠</button>
          <button class="opt-btn" onclick="toggleOption(this, event)">Soccer ⚽</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    function selectStep(num) {
      document.querySelectorAll('.step-card').forEach((card, idx) => {
        card.classList.toggle('active', idx + 1 === num);
      });
    }

    function toggleOption(btn, e) {
      e.stopPropagation();
      document.querySelectorAll('.opt-btn').forEach(b => b.classList.remove('selected'));
      btn.classList.add('selected');
      selectStep(3);
    }
  </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: system-ui, -apple-system, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Top: Child & Question Bubble */
    .asker-row {
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: 480px;
      width: 100%;
      justify-content: center;
    }

    .child-avatar {
      position: relative;
      font-size: 44px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .clipboard-badge {
      position: absolute;
      bottom: -4px;
      right: -6px;
      font-size: 20px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }

    .speech-bubble {
      background: #ffffff;
      border: 2px solid #e0e7ff;
      border-radius: 18px;
      padding: 10px 16px;
      font-size: 17px;
      font-weight: 700;
      color: #3730a3;
      position: relative;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
      text-align: center;
    }

    .speech-bubble::before {
      content: "";
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
      border-width: 6px 10px 6px 0;
      border-style: solid;
      border-color: transparent #e0e7ff transparent transparent;
    }

    .speech-bubble::after {
      content: "";
      position: absolute;
      left: -7px;
      top: 50%;
      transform: translateY(-50%);
      border-width: 5px 8px 5px 0;
      border-style: solid;
      border-color: transparent #ffffff transparent transparent;
    }

    /* Choice Cards Container */
    .cards-row {
      display: flex;
      gap: 16px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

    .choice-card {
      flex: 1;
      background: #ffffff;
      border: 2.5px solid #f1f5f9;
      border-radius: 20px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

    .choice-card.dog-card {
      background: #fffbf0;
      border-color: #fde68a;
    }

    .choice-card.cat-card {
      background: #fdf2f8;
      border-color: #fbcfe8;
    }

    .choice-card.selected.dog-card {
      border-color: #f59e0b;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25), 0 8px 16px rgba(245, 158, 11, 0.12);
      background: #fef3c7;
    }

    .choice-card.selected.cat-card {
      border-color: #ec4899;
      box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.25), 0 8px 16px rgba(236, 72, 153, 0.12);
      background: #fce7f3;
    }

    .pet-emoji {
      font-size: 52px;
      line-height: 1.1;
    }

    .pet-label {
      font-size: 20px;
      font-weight: 800;
      color: #334155;
      letter-spacing: 0.5px;
    }

    /* Checkbox */
    .checkbox-box {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      border: 2.5px solid #cbd5e1;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: transparent;
      margin-top: 4px;
      transition: all 0.2s ease;
    }

    .choice-card.selected.dog-card .checkbox-box {
      background: #f59e0b;
      border-color: #d97706;
      color: #ffffff;
    }

    .choice-card.selected.cat-card .checkbox-box {
      background: #ec4899;
      border-color: #db2777;
      color: #ffffff;
    }

    /* Bottom Prompt */
    .prompt-text {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="asker-row">
    <div class="child-avatar">
      🧑‍🦱
      <span class="clipboard-badge">📋</span>
    </div>
    <div class="speech-bubble">
      Which pet do you like better?
    </div>
  </div>

  <div class="cards-row">
    <div class="choice-card dog-card" id="card-dog" onclick="selectCard('dog')">
      <div class="pet-emoji">🐶</div>
      <div class="pet-label">Dog</div>
      <div class="checkbox-box" id="check-dog">✓</div>
    </div>

    <div class="choice-card cat-card" id="card-cat" onclick="selectCard('cat')">
      <div class="pet-emoji">🐱</div>
      <div class="pet-label">Cat</div>
      <div class="checkbox-box" id="check-cat">✓</div>
    </div>
  </div>

  <div class="prompt-text" id="status-text">
    Tap to collect an answer!
  </div>

  <script>
    let currentSelection = null;

    function selectCard(type) {
      const dogCard = document.getElementById('card-dog');
      const catCard = document.getElementById('card-cat');
      const statusText = document.getElementById('status-text');

      if (currentSelection === type) {
        // Deselect if tapped again
        dogCard.classList.remove('selected');
        catCard.classList.remove('selected');
        currentSelection = null;
        statusText.textContent = 'Tap to collect an answer!';
      } else {
        dogCard.classList.toggle('selected', type === 'dog');
        catCard.classList.toggle('selected', type === 'cat');
        currentSelection = type;
        const name = type === 'dog' ? 'Dog' : 'Cat';
        statusText.textContent = 'Recorded 1 vote for ' + name + ' 📋✓';
      }
    }
  </script>
</body>
</html>

OGM.1.MD.6

Aligned learning resources

Related diagrams