<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

    /* Preset selector bar */
    .tester-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      flex-wrap: wrap;
    }
    .tester-label {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .presets {
      display: flex;
      gap: 6px;
    }
    .chip {
      padding: 4px 10px;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .chip:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }
    .chip.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    /* Cards container */
    .cards-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .pill-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      border-radius: 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      gap: 8px;
      transition: all 0.25s ease;
    }
    .pill-card.passed {
      background: #f0fdf4;
      border-color: #86efac;
    }

    /* Left badge */
    .badge {
      min-width: 48px;
      height: 34px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 15px;
      flex-shrink: 0;
    }
    .b-2 { background: #e0f2fe; color: #0369a1; }
    .b-3 { background: #f3e8ff; color: #7e22ce; }
    .b-5 { background: #dcfce7; color: #15803d; }
    .b-11 { background: #fef3c7; color: #b45309; }

    /* Middle rule */
    .rule-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }
    .rule-title {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
    }
    .rule-formula {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Right visual check */
    .eval-box {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      background: #ffffff;
      padding: 4px 10px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      flex-shrink: 0;
    }
    .pill-card.passed .eval-box {
      border-color: #bbf7d0;
      background: #ffffff;
    }

    .digit-hl {
      display: inline-block;
      padding: 1px 4px;
      border-radius: 4px;
      background: #e2e8f0;
      color: #0f172a;
    }
    .pill-card.passed .digit-hl {
      background: #dcfce7;
      color: #166534;
    }

    .tag-result {
      font-size: 12px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 6px;
    }
    .tag-yes { background: #22c55e; color: #ffffff; }
    .tag-no { background: #f1f5f9; color: #94a3b8; }

    @media (max-width: 400px) {
      .pill-card { padding: 6px 8px; gap: 6px; }
      .badge { min-width: 42px; font-size: 13px; height: 30px; }
      .rule-formula { font-size: 12px; }
      .eval-box { font-size: 12px; padding: 3px 6px; }
    }
  </style>
</head>
<body>

  <div class="tester-row">
    <span class="tester-label">Test 3-Digit Number:</span>
    <div class="presets">
      <button class="chip active" onclick="setNumber(134)">134</button>
      <button class="chip" onclick="setNumber(141)">141</button>
      <button class="chip" onclick="setNumber(205)">205</button>
      <button class="chip" onclick="setNumber(143)">143</button>
      <button class="chip" onclick="setNumber(111)">111 ✦</button>
    </div>
  </div>

  <div class="cards-grid">
    
    <div class="pill-card" id="card-2">
      <div class="badge b-2">÷ 2</div>
      <div class="rule-box">
        <span class="rule-title">Check Last Digit</span>
        <span class="rule-formula">0, 2, 4, 6, 8 (Even)</span>
      </div>
      <div class="eval-box" id="eval-2"></div>
    </div>

    
    <div class="pill-card" id="card-3">
      <div class="badge b-3">÷ 3</div>
      <div class="rule-box">
        <span class="rule-title">Sum of Digits</span>
        <span class="rule-formula">d₁ + d₂ + d₃ = Multiple of 3</span>
      </div>
      <div class="eval-box" id="eval-3"></div>
    </div>

    
    <div class="pill-card" id="card-5">
      <div class="badge b-5">÷ 5</div>
      <div class="rule-box">
        <span class="rule-title">Check Last Digit</span>
        <span class="rule-formula">Ends in 0 or 5</span>
      </div>
      <div class="eval-box" id="eval-5"></div>
    </div>

    
    <div class="pill-card" id="card-11">
      <div class="badge b-11">÷ 11</div>
      <div class="rule-box">
        <span class="rule-title">Alternating Sum</span>
        <span class="rule-formula">(d₁ + d₃) − d₂ = 0 or 11</span>
      </div>
      <div class="eval-box" id="eval-11"></div>
    </div>
  </div>

  <script>
    function setNumber(n) {
      const s = String(n).padStart(3, '0');
      const d1 = parseInt(s[0], 10);
      const d2 = parseInt(s[1], 10);
      const d3 = parseInt(s[2], 10);

      // Update active chip
      const chips = document.querySelectorAll('.chip');
      chips.forEach(c => {
        if (c.textContent.startsWith(String(n))) {
          c.classList.add('active');
        } else {
          c.classList.remove('active');
        }
      });

      // 1. Test 2
      const pass2 = (d3 % 2 === 0);
      document.getElementById('card-2').className = 'pill-card ' + (pass2 ? 'passed' : '');
      document.getElementById('eval-2').innerHTML = `
        <span>${d1}${d2}<span class="digit-hl">${d3}</span></span>
        <span class="tag-result ${pass2 ? 'tag-yes' : 'tag-no'}">${pass2 ? '✓' : '✗'}</span>
      `;

      // 2. Test 3
      const sum3 = d1 + d2 + d3;
      const pass3 = (sum3 % 3 === 0);
      document.getElementById('card-3').className = 'pill-card ' + (pass3 ? 'passed' : '');
      document.getElementById('eval-3').innerHTML = `
        <span>${d1}+${d2}+${d3}=<span class="digit-hl">${sum3}</span></span>
        <span class="tag-result ${pass3 ? 'tag-yes' : 'tag-no'}">${pass3 ? '✓' : '✗'}</span>
      `;

      // 3. Test 5
      const pass5 = (d3 === 0 || d3 === 5);
      document.getElementById('card-5').className = 'pill-card ' + (pass5 ? 'passed' : '');
      document.getElementById('eval-5').innerHTML = `
        <span>${d1}${d2}<span class="digit-hl">${d3}</span></span>
        <span class="tag-result ${pass5 ? 'tag-yes' : 'tag-no'}">${pass5 ? '✓' : '✗'}</span>
      `;

      // 4. Test 11
      const alt11 = (d1 + d3) - d2;
      const pass11 = (alt11 === 0 || alt11 === 11 || alt11 === -11);
      document.getElementById('card-11').className = 'pill-card ' + (pass11 ? 'passed' : '');
      document.getElementById('eval-11').innerHTML = `
        <span>(${d1}+${d3})−${d2}=<span class="digit-hl">${alt11}</span></span>
        <span class="tag-result ${pass11 ? 'tag-yes' : 'tag-no'}">${pass11 ? '✓' : '✗'}</span>
      `;
    }

    // Initial render
    setNumber(134);
  </script>
</body>
</html>

Identifying Prime and Composite Numbers Beyond 100

<!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: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 10px 12px;
      user-select: none;
    }
    .header {
      text-align: center;
      margin-bottom: 4px;
    }
    .title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }
    .subtitle {
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
    }
    .svg-container {
      width: 100%;
      max-width: 600px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .pair-btn-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-top: 4px;
      width: 100%;
      max-width: 580px;
    }
    .pair-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .pair-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2,132,199,0.3);
    }
    .pair-arc {
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      transition: opacity 0.3s ease, stroke-width 0.3s ease;
      opacity: 0.85;
    }
    .pair-arc.dimmed {
      opacity: 0.12;
      stroke-width: 2;
    }
    .pair-arc.highlighted {
      opacity: 1;
      stroke-width: 4.5;
    }
    .num-node circle {
      transition: r 0.2s ease, fill 0.2s ease;
    }
    .num-node text {
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
      font-family: inherit;
    }
    .num-node.active circle {
      r: 16;
      stroke-width: 2.5;
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">Factors of 100 &amp; Square Root Cutoff</div>
    <div class="subtitle">Every factor pair has at least one partner &le; 10</div>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 580 230">
      <defs>
        
        <linearGradient id="testZoneGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.12"/>
          <stop offset="100%" stop-color="#0284c7" stop-opacity="0.22"/>
        </linearGradient>
        <linearGradient id="mirrorZoneGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#94a3b8" stop-opacity="0.12"/>
          <stop offset="100%" stop-color="#cbd5e1" stop-opacity="0.05"/>
        </linearGradient>
      </defs>

      
      <rect x="25" y="14" width="225" height="198" rx="8" fill="url(#testZoneGrad)" />
      
      <rect x="250" y="14" width="305" height="198" rx="8" fill="url(#mirrorZoneGrad)" />

      
      <text x="137" y="32" fill="#0369a1" font-size="12" font-weight="700" text-anchor="middle">TEST ZONE (&le; &radic;100)</text>
      <text x="402" y="32" fill="#64748b" font-size="12" font-weight="600" text-anchor="middle">MIRRORED PARTNERS (&gt; 10)</text>

      
      
      <path id="arc-0" class="pair-arc" d="M 45 178 C 45 38, 535 38, 535 178" stroke="#8b5cf6" />
      
      <path id="arc-1" class="pair-arc" d="M 85 178 C 85 68, 455 68, 455 178" stroke="#3b82f6" />
      
      <path id="arc-2" class="pair-arc" d="M 135 178 C 135 96, 375 96, 375 178" stroke="#06b6d4" />
      
      <path id="arc-3" class="pair-arc" d="M 180 178 C 180 122, 315 122, 315 178" stroke="#10b981" />
      
      <path id="arc-4" class="pair-arc" d="M 250 178 C 220 128, 280 128, 250 178" stroke="#f59e0b" />

      
      <line x1="30" y1="180" x2="550" y2="180" stroke="#94a3b8" stroke-width="3" stroke-linecap="round" />

      
      <line x1="250" y1="36" x2="250" y2="198" stroke="#ef4444" stroke-width="2.5" stroke-dasharray="5,4" />
      
      
      <g transform="translate(250, 48)">
        <rect x="-48" y="-12" width="96" height="22" rx="4" fill="#ef4444" />
        <text x="0" y="3" fill="#ffffff" font-size="11" font-weight="800" text-anchor="middle">&radic;100 = 10 CUTOFF</text>
      </g>

      
      
      <g id="node-1" class="num-node" transform="translate(45, 180)">
        <circle r="13" fill="#ffffff" stroke="#8b5cf6" stroke-width="2" />
        <text y="0.5" fill="#4c1d95">1</text>
      </g>

      
      <g id="node-2" class="num-node" transform="translate(85, 180)">
        <circle r="13" fill="#ffffff" stroke="#3b82f6" stroke-width="2" />
        <text y="0.5" fill="#1e3a8a">2</text>
      </g>

      
      <g id="node-4" class="num-node" transform="translate(135, 180)">
        <circle r="13" fill="#ffffff" stroke="#06b6d4" stroke-width="2" />
        <text y="0.5" fill="#155e75">4</text>
      </g>

      
      <g id="node-5" class="num-node" transform="translate(180, 180)">
        <circle r="13" fill="#ffffff" stroke="#10b981" stroke-width="2" />
        <text y="0.5" fill="#065f46">5</text>
      </g>

      
      <g id="node-10" class="num-node" transform="translate(250, 180)">
        <circle r="15" fill="#fef3c7" stroke="#f59e0b" stroke-width="2.5" />
        <text y="0.5" fill="#b45309">10</text>
      </g>

      
      <g id="node-20" class="num-node" transform="translate(315, 180)">
        <circle r="13" fill="#ffffff" stroke="#10b981" stroke-width="2" />
        <text y="0.5" fill="#065f46">20</text>
      </g>

      
      <g id="node-25" class="num-node" transform="translate(375, 180)">
        <circle r="13" fill="#ffffff" stroke="#06b6d4" stroke-width="2" />
        <text y="0.5" fill="#155e75">25</text>
      </g>

      
      <g id="node-50" class="num-node" transform="translate(455, 180)">
        <circle r="13" fill="#ffffff" stroke="#3b82f6" stroke-width="2" />
        <text y="0.5" fill="#1e3a8a">50</text>
      </g>

      
      <g id="node-100" class="num-node" transform="translate(535, 180)">
        <circle r="13" fill="#ffffff" stroke="#8b5cf6" stroke-width="2" />
        <text y="0.5" fill="#4c1d95">100</text>
      </g>

      
      <text x="290" y="218" fill="#475569" font-size="11.5" font-weight="600" text-anchor="middle">
        Only test divisors up to 10 — larger partners are already found!
      </text>
    </svg>
  </div>

  
  <div class="pair-btn-row">
    <button class="pair-btn active" data-pair="all">Show All</button>
    <button class="pair-btn" data-pair="0">1 &times; 100</button>
    <button class="pair-btn" data-pair="1">2 &times; 50</button>
    <button class="pair-btn" data-pair="2">4 &times; 25</button>
    <button class="pair-btn" data-pair="3">5 &times; 20</button>
    <button class="pair-btn" data-pair="4">10 &times; 10</button>
  </div>

  <script>
    const pairNodes = [
      [1, 100],
      [2, 50],
      [4, 25],
      [5, 20],
      [10, 10]
    ];

    const buttons = document.querySelectorAll('.pair-btn');
    const arcs = [0, 1, 2, 3, 4].map(i => document.getElementById(`arc-${i}`));
    const allNodeIds = [1, 2, 4, 5, 10, 20, 25, 50, 100];
    const nodeElements = {};
    allNodeIds.forEach(id => {
      nodeElements[id] = document.getElementById(`node-${id}`);
    });

    function setPair(selected) {
      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.pair === selected);
      });

      if (selected === 'all') {
        arcs.forEach(arc => {
          arc.classList.remove('dimmed', 'highlighted');
        });
        allNodeIds.forEach(id => {
          nodeElements[id].classList.remove('active');
        });
      } else {
        const idx = parseInt(selected, 10);
        arcs.forEach((arc, i) => {
          if (i === idx) {
            arc.classList.remove('dimmed');
            arc.classList.add('highlighted');
          } else {
            arc.classList.remove('highlighted');
            arc.classList.add('dimmed');
          }
        });

        const activePair = pairNodes[idx];
        allNodeIds.forEach(id => {
          if (activePair.includes(id)) {
            nodeElements[id].classList.add('active');
          } else {
            nodeElements[id].classList.remove('active');
          }
        });
      }
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        setPair(btn.dataset.pair);
      });
    });
  </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;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: #ffffff;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 100%;
      user-select: none;
    }

    /* Top Summary Bar */
    .header-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #ffffff;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      color: #0f172a;
    }

    .pill-highlight {
      background: #eff6ff;
      border-color: #93c5fd;
      color: #1d4ed8;
    }

    /* Checklist Grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      flex: 1;
    }

    @media (max-width: 440px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 5px;
      }
      .header-bar {
        font-size: 12px;
        padding: 5px 8px;
      }
    }

    .item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      opacity: 0.4;
      transition: opacity 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
      cursor: pointer;
    }

    .item.passed {
      opacity: 1;
      background: #ffffff;
      border-color: #cbd5e1;
    }

    .item.current {
      opacity: 1;
      background: #f0f9ff;
      border-color: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
    }

    .item-left {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 24px;
      border-radius: 5px;
      background: #e2e8f0;
      color: #334155;
      font-size: 12px;
      font-weight: 700;
    }

    .item.current .badge {
      background: #0284c7;
      color: #ffffff;
    }

    .rule-text {
      color: #475569;
      font-size: 12px;
      font-weight: 500;
    }

    .status-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
      background: #e2e8f0;
    }

    .item.passed .status-icon,
    .item.current .status-icon {
      background: #fee2e2;
      color: #dc2626;
    }

    /* Bottom Result Banner */
    .banner {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.3s ease;
      opacity: 0.5;
    }

    .banner.active {
      opacity: 1;
      background: #ecfdf5;
      border-color: #86efac;
    }

    .banner-text {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .banner.active .banner-text {
      color: #047857;
    }

    .prime-tag {
      font-size: 12px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 4px;
      background: #cbd5e1;
      color: #475569;
      letter-spacing: 0.5px;
    }

    .banner.active .prime-tag {
      background: #10b981;
      color: #ffffff;
    }

    /* Playback bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-top: 2px;
    }

    .btn-group {
      display: flex;
      gap: 6px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .ctrl-btn:active {
      background: #f1f5f9;
    }

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

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

    .dot.active {
      background: #0284c7;
      transform: scale(1.15);
    }
  </style>
</head>
<body>

  
  <div class="header-bar">
    <div class="pill"><strong>Test:</strong> 173</div>
    <div class="pill">√173 ≈ 13.15</div>
    <div class="pill pill-highlight">Primes ≤ 13: 2, 3, 5, 7, 11, 13</div>
  </div>

  
  <div class="grid" id="auditGrid">
    <div class="item" onclick="setStep(0)">
      <div class="item-left">
        <span class="badge">÷ 2</span>
        <span class="rule-text">Last digit 3 (odd)</span>
      </div>
      <span class="status-icon">✗</span>
    </div>

    <div class="item" onclick="setStep(1)">
      <div class="item-left">
        <span class="badge">÷ 3</span>
        <span class="rule-text">1 + 7 + 3 = 11</span>
      </div>
      <span class="status-icon">✗</span>
    </div>

    <div class="item" onclick="setStep(2)">
      <div class="item-left">
        <span class="badge">÷ 5</span>
        <span class="rule-text">Ends in 3</span>
      </div>
      <span class="status-icon">✗</span>
    </div>

    <div class="item" onclick="setStep(3)">
      <div class="item-left">
        <span class="badge">÷ 7</span>
        <span class="rule-text">173 ÷ 7 = 24 R 5</span>
      </div>
      <span class="status-icon">✗</span>
    </div>

    <div class="item" onclick="setStep(4)">
      <div class="item-left">
        <span class="badge">÷ 11</span>
        <span class="rule-text">173 ÷ 11 = 15 R 8</span>
      </div>
      <span class="status-icon">✗</span>
    </div>

    <div class="item" onclick="setStep(5)">
      <div class="item-left">
        <span class="badge">÷ 13</span>
        <span class="rule-text">173 ÷ 13 = 13 R 4</span>
      </div>
      <span class="status-icon">✗</span>
    </div>
  </div>

  
  <div class="banner" id="resultBanner">
    <div class="banner-text">All primes ≤ √173 failed → no factors exist</div>
    <div class="prime-tag">173 IS PRIME</div>
  </div>

  
  <div class="controls">
    <div class="btn-group">
      <button class="ctrl-btn" onclick="prevStep()">◀ Prev</button>
      <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">▶ Play</button>
      <button class="ctrl-btn" onclick="nextStep()">Next ▶</button>
    </div>
    <div class="step-dots" id="dots">
      <div class="dot" onclick="setStep(0)"></div>
      <div class="dot" onclick="setStep(1)"></div>
      <div class="dot" onclick="setStep(2)"></div>
      <div class="dot" onclick="setStep(3)"></div>
      <div class="dot" onclick="setStep(4)"></div>
      <div class="dot" onclick="setStep(5)"></div>
    </div>
  </div>

  <script>
    const items = document.querySelectorAll('.item');
    const dots = document.querySelectorAll('.dot');
    const banner = document.getElementById('resultBanner');
    const playBtn = document.getElementById('playBtn');

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

    function render() {
      items.forEach((el, i) => {
        el.classList.remove('current', 'passed');
        if (i < currentStep) {
          el.classList.add('passed');
        } else if (i === currentStep) {
          el.classList.add('current');
        }
      });

      dots.forEach((d, i) => {
        d.classList.toggle('active', i === currentStep);
      });

      if (currentStep >= items.length - 1) {
        banner.classList.add('active');
      } else {
        banner.classList.remove('active');
      }
    }

    function setStep(index) {
      currentStep = Math.max(0, Math.min(index, items.length - 1));
      render();
    }

    function nextStep() {
      if (currentStep < items.length - 1) {
        setStep(currentStep + 1);
      } else {
        setStep(0);
      }
    }

    function prevStep() {
      if (currentStep > 0) {
        setStep(currentStep - 1);
      } else {
        setStep(items.length - 1);
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      playBtn.innerHTML = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) {
        if (currentStep >= items.length - 1) setStep(0);
        timer = setInterval(() => {
          if (currentStep < items.length - 1) {
            setStep(currentStep + 1);
          } else {
            togglePlay();
          }
        }, 1200);
      } else {
        clearInterval(timer);
      }
    }

    // Initial state
    setStep(0);
  </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 {
      background-color: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }
    @media (max-width: 480px) {
      .grid-container {
        grid-template-columns: 1fr;
      }
    }
    .num-card {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      margin-bottom: 12px;
    }
    .tag-prime {
      background: #eef2ff;
      color: #4f46e5;
    }
    .tag-composite {
      background: #ecfdf5;
      color: #059669;
    }
    .vis-box {
      width: 100%;
      height: 90px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px dashed #cbd5e1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .dim-label {
      font-size: 11px;
      font-weight: 600;
      fill: #64748b;
    }
    .dim-sub {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      margin-top: 10px;
      margin-bottom: 2px;
    }
    .factors {
      font-size: 13px;
      color: #64748b;
      font-weight: 500;
    }
    .lock-icon {
      font-size: 14px;
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="num-card">
      <div class="tag tag-prime">
        <span>Prime: 101</span>
        <span class="lock-icon">🔒</span>
      </div>

      <div class="vis-box">
        <svg viewBox="0 0 200 60">
          
          <line x1="20" y1="12" x2="180" y2="12" stroke="#94a3b8" stroke-width="1" />
          <path d="M20,9 L20,15 M180,9 L180,15" stroke="#94a3b8" stroke-width="1" />
          <text x="100" y="8" text-anchor="middle" class="dim-label">101</text>

          
          <line x1="12" y1="28" x2="12" y2="34" stroke="#94a3b8" stroke-width="1" />
          <path d="M9,28 L15,28 M9,34 L15,34" stroke="#94a3b8" stroke-width="1" />
          <text x="6" y="34" text-anchor="end" class="dim-label">1</text>

          
          <rect x="20" y="28" width="160" height="6" rx="2" fill="#4f46e5" />
          
          <line x1="60" y1="28" x2="60" y2="34" stroke="#ffffff" stroke-width="0.75" opacity="0.6" />
          <line x1="100" y1="28" x2="100" y2="34" stroke="#ffffff" stroke-width="0.75" opacity="0.6" />
          <line x1="140" y1="28" x2="140" y2="34" stroke="#ffffff" stroke-width="0.75" opacity="0.6" />
        </svg>
      </div>

      <div class="dim-sub">1 × 101</div>
      <div class="factors">Factors: only 1 and 101</div>
    </div>

    
    <div class="num-card">
      <div class="tag tag-composite">
        <span>Composite: 111</span>
        <span>✨</span>
      </div>

      <div class="vis-box">
        <svg viewBox="0 0 200 60">
          
          <line x1="20" y1="10" x2="180" y2="10" stroke="#94a3b8" stroke-width="1" />
          <path d="M20,7 L20,13 M180,7 L180,13" stroke="#94a3b8" stroke-width="1" />
          <text x="100" y="7" text-anchor="middle" class="dim-label">37</text>

          
          <line x1="12" y1="18" x2="12" y2="48" stroke="#94a3b8" stroke-width="1" />
          <path d="M9,18 L15,18 M9,48 L15,48" stroke="#94a3b8" stroke-width="1" />
          <text x="6" y="36" text-anchor="end" class="dim-label">3</text>

          
          <rect x="20" y="18" width="160" height="8" rx="1.5" fill="#10b981" />
          <rect x="20" y="28" width="160" height="8" rx="1.5" fill="#059669" />
          <rect x="20" y="38" width="160" height="8" rx="1.5" fill="#047857" />

          
          <line x1="60" y1="18" x2="60" y2="46" stroke="#ffffff" stroke-width="0.75" opacity="0.4" />
          <line x1="100" y1="18" x2="100" y2="46" stroke="#ffffff" stroke-width="0.75" opacity="0.4" />
          <line x1="140" y1="18" x2="140" y2="46" stroke="#ffffff" stroke-width="0.75" opacity="0.4" />
        </svg>
      </div>

      <div class="dim-sub">3 × 37</div>
      <div class="factors">Factors: 1, 3, 37, 111</div>
    </div>
  </div>

</body>
</html>

Los números enteros en la vida cotidiana

Representación de enteros en la recta numérica

El opuesto de un número entero

Concepto de valor absoluto

Comparación y orden de enteros con la recta numérica

Ordenamiento de conjuntos de números enteros

Medidas relativas: temperatura y altitud

Distancia entre dos puntos en la recta numérica

Desigualdades simples con enteros en la recta

Resolución de problemas con medidas relativas de enteros

Razonabilidad de resultados con enteros y estimación

math

Números enteros: Concepto, orden y valor absoluto

Constructing Factor Trees and Continuous Division Models

Writing Prime Factorizations in Index Notation

Finding Greatest Common Factors Using Prime Powers

Finding Least Common Multiples Using Prime Powers

Understanding Powers of Ten and Place Value Structure

Representing Whole Numbers in Expanded Form with Powers of Ten

Representing Decimals in Expanded Form with Negative Powers of Ten

Solving Real-World Problems with Expanded Notation

Prime Factorization, Index Notation, and Expanded Powers of Ten

Adición de enteros con el mismo signo

Adición de enteros con signos diferentes

Propiedades de la adición de enteros

Sustracción de enteros como suma del opuesto

Práctica fluida de sumas y restas de enteros

Multiplicación de enteros y regla de signos

Propiedades de la multiplicación en enteros

División exacta de números enteros

Operaciones combinadas con enteros y jerarquía

Resolución de problemas aditivos y multiplicativos con enteros

Uso de la calculadora para verificar operaciones con enteros

Operaciones con números enteros

Reviewing Prime Numbers

Finding Prime Factors of Numbers

Writing Prime Factorisation with Exponent Notation

Prime Factorisation of Larger Numbers

Using Prime Factorisation to Find All Factors

Prime Factorisation with Exponents

Expanded Notation with Powers of 10

Writing Numbers in Expanded Form Using Powers of 10

Converting Expanded Notation to Standard Form

Comparing Numbers Using Expanded Notation

Concepto de número racional y representación fraccionaria

Fracciones propias, impropias y números mixtos

Fracciones equivalentes por amplificación y simplificación

Fracción irreducible y simplificación máxima

Ubicación de fracciones positivas y negativas en la recta

Comparación de fracciones con distinto denominador

Densidad de los números racionales

Fracciones como operadores de cantidades y medidas

Problemas de comparación y medición con fracciones

Números racionales: Fracciones y equivalencia

Adición y sustracción de fracciones homogéneas

Adición y sustracción de fracciones heterogéneas con mcm

Suma y resta de números mixtos

Multiplicación de fracciones y modelo de área

Simplificación cruzada en la multiplicación de fracciones

Multiplicación con números mixtos y enteros

Adición, sustracción y multiplicación de fracciones y números mixtos

Concepto de inverso multiplicativo o recíproco

División de fracciones por el método del recíproco

División con fracciones y números mixtos

Operaciones combinadas con fracciones y jerarquía

Problemas verbales aditivos con fracciones en medidas

Problemas verbales multiplicativos y de división con fracciones

División, operaciones combinadas y problemas con fracciones

Estructura posicional y descomposición polinomial decimal

Conversión entre fracciones y decimales exactos

Decimales periódicos puros y mixtos

Comparación y orden de números decimales en la recta

Redondeo y truncamiento de números decimales

Representación y propiedades de los números decimales

Adición y sustracción alineada de decimales

Multiplicación de números decimales

Multiplicación y división de decimales por potencias de 10

División de decimales entre enteros

División entre números decimales

Problemas contextuales con decimales y dinero

Estimación frente a cálculo exacto con decimales

Operaciones y problemas con números decimales

Concepto de potenciación con enteros

Potencias con base negativa y regla de los signos

Producto de potencias de igual base

Cociente de potencias de igual base y exponente cero

Potencia de una potencia

Potencia de un producto y de un cociente

Potenciación con enteros y sus propiedades

Raíces cuadradas exactas y estimadas

Raíces cúbicas exactas

Propiedades de la radicación: raíz de un producto y cociente

Orden de operaciones con potencias y raíces

Notación científica introductoria y grandes números

Resolución de problemas de crecimiento exponencial y geométrico

Radicación, operaciones combinadas y aplicaciones

Múltiplos y divisores de un número natural

Criterios de divisibilidad por 2, 3, 5 y 10

Criterios de divisibilidad por 4, 6, 9 y 11

Números primos, compuestos y la criba de Eratóstenes

Descomposición en factores primos: árbol y división sucesiva

Cálculo del máximo común divisor (MCD)

Cálculo del mínimo común múltiplo (mcm)

Resolución de problemas verbales con MCD

Resolución de problemas verbales con mcm

Teoría de números: Divisibilidad, MCD y mcm

Concepto de proporcionalidad inversa

Tablas y gráficas de proporcionalidad inversa

Regla de tres simple inversa

Comparación entre proporcionalidad directa e inversa

Concepto de porcentaje y equivalencias fracción-decimal

Cálculo del porcentaje de una cantidad

Hallar la cantidad total a partir de un porcentaje

Porcentaje de aumento y descuento comercial

Cálculo de impuestos (IVA) y propinas

Interés simple: fórmula y aplicaciones

Variación porcentual: incremento y decremento

Proporcionalidad inversa, porcentajes y finanzas

De lenguaje común a lenguaje algebraico

Partes de una expresión algebraica: términos, coeficientes y variables

Evaluación de expresiones algebraicas con enteros y racionales

Identificación y reducción de términos semejantes

Propiedad distributiva para expandir expresiones

Factorización por factor común monomio

Simplificación de expresiones con propiedad distributiva y términos semejantes

OGM.8.NO.1

Aligned learning resources

Related diagrams