<!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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 10px 8px;
      user-select: none;
    }

    /* Header & Controls */
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 520px;
      padding: 0 4px 6px;
    }
    .math-title {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .btn-step.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    /* Main Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: center;
    }

    /* Chocolate Bar Styles */
    .choco-bar {
      display: flex;
      background: #5d4037;
      border-radius: 4px;
      padding: 2px;
      gap: 2px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
      transition: all 0.4s ease;
    }
    .choco-seg {
      width: 24px;
      height: 32px;
      background: #795548;
      border-radius: 2px;
      box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2), inset -1px -1px 0 rgba(0,0,0,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.9);
      font-size: 11px;
      font-weight: 700;
    }

    .top-pool {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    /* Sliced Pieces Container */
    .sliced-group {
      display: flex;
      gap: 6px;
      background: transparent;
      padding: 0;
      box-shadow: none;
    }
    .sliced-group .choco-bar {
      padding: 1px;
    }

    /* Plates Section */
    .plates-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
    }
    .plate-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-height: 140px;
      position: relative;
    }
    .plate-card.highlight {
      border-color: #22b7ff;
      background: #f0f9ff;
    }
    .plate-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
    .plate-dishes {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-height: 72px;
      justify-content: center;
    }
    .plate-result {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      opacity: 0;
      transform: translateY(4px);
      transition: all 0.3s ease;
    }
    .plate-result.show {
      opacity: 1;
      transform: translateY(0);
    }

    .fade-item {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .hidden {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.85);
      position: absolute;
    }

    /* Stepper Progress Indicator */
    .stepper-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }
    .step-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .step-dot.active {
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.4);
    }
    .step-desc {
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      text-align: center;
      min-height: 22px;
    }
  </style>
</head>
<body>

  
  <div class="header">
    <div class="math-title">
      <span>5 ÷ 3</span>
      <span style="color:#94a3b8; font-weight:400;">=</span>
      <span style="color:#0284c7;">5/3</span>
      <span style="color:#94a3b8; font-weight:400;">=</span>
      <span style="color:#0284c7;">1 ⅔</span>
    </div>
    <div class="controls">
      <button class="btn-step" id="prevBtn">◀</button>
      <button class="btn-step" id="playBtn">⏸</button>
      <button class="btn-step" id="nextBtn">▶</button>
    </div>
  </div>

  
  <div class="stage">
    
    <div class="top-pool" id="topPool">
      
    </div>

    
    <div class="plates-container">
      <div class="plate-card" id="plate0">
        <span class="plate-label">Plate 1</span>
        <div class="plate-dishes" id="dish0"></div>
        <div class="plate-result" id="res0">1 + ⅔ = 1 ⅔</div>
      </div>
      <div class="plate-card" id="plate1">
        <span class="plate-label">Plate 2</span>
        <div class="plate-dishes" id="dish1"></div>
        <div class="plate-result" id="res1">1 + ⅔ = 1 ⅔</div>
      </div>
      <div class="plate-card" id="plate2">
        <span class="plate-label">Plate 3</span>
        <div class="plate-dishes" id="dish2"></div>
        <div class="plate-result" id="res2">1 + ⅔ = 1 ⅔</div>
      </div>
    </div>
  </div>

  
  <div class="step-desc" id="stepText">5 whole bars to share</div>
  <div class="stepper-nav">
    <div class="step-dot active" data-step="0">1</div>
    <div class="step-dot" data-step="1">2</div>
    <div class="step-dot" data-step="2">3</div>
    <div class="step-dot" data-step="3">4</div>
  </div>

  <script>
    const wholeBarHTML = () => `
      <div class="choco-bar">
        <div class="choco-seg"></div>
        <div class="choco-seg"></div>
        <div class="choco-seg"></div>
      </div>`;

    const pieceHTML = () => `
      <div class="choco-bar">
        <div class="choco-seg">⅓</div>
      </div>`;

    const twoPiecesHTML = () => `
      <div class="sliced-group">
        <div class="choco-bar"><div class="choco-seg">⅓</div></div>
        <div class="choco-bar"><div class="choco-seg">⅓</div></div>
      </div>`;

    const stepInfo = [
      { text: "5 whole chocolate bars", plates: [[], [], []], topType: "5wholes" },
      { text: "Give 1 whole to each plate", plates: [["w"], ["w"], ["w"]], topType: "2wholes" },
      { text: "Cut remaining 2 bars into 6 thirds", plates: [["w"], ["w"], ["w"]], topType: "6pieces" },
      { text: "Each plate gets 1 ⅔ = 5/3 bars", plates: [["w", "2p"], ["w", "2p"], ["w", "2p"]], topType: "empty" }
    ];

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

    const topPool = document.getElementById("topPool");
    const dishes = [document.getElementById("dish0"), document.getElementById("dish1"), document.getElementById("dish2")];
    const results = [document.getElementById("res0"), document.getElementById("res1"), document.getElementById("res2")];
    const dots = document.querySelectorAll(".step-dot");
    const stepText = document.getElementById("stepText");
    const playBtn = document.getElementById("playBtn");

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

      // Update text
      stepText.textContent = data.text;

      // Update dots
      dots.forEach((dot, i) => {
        dot.classList.toggle("active", i === idx);
      });

      // Render Top Pool
      topPool.innerHTML = "";
      if (data.topType === "5wholes") {
        for (let i = 0; i < 5; i++) topPool.innerHTML += wholeBarHTML();
      } else if (data.topType === "2wholes") {
        for (let i = 0; i < 2; i++) topPool.innerHTML += wholeBarHTML();
      } else if (data.topType === "6pieces") {
        const group = document.createElement("div");
        group.className = "sliced-group";
        for (let i = 0; i < 6; i++) group.innerHTML += pieceHTML();
        topPool.appendChild(group);
      }

      // Render Dishes
      for (let p = 0; p < 3; p++) {
        dishes[p].innerHTML = "";
        const plateItems = data.plates[p];
        plateItems.forEach(item => {
          if (item === "w") dishes[p].innerHTML += wholeBarHTML();
          if (item === "2p") dishes[p].innerHTML += twoPiecesHTML();
        });

        // Show/hide final result
        if (idx === 3) {
          results[p].classList.add("show");
          document.getElementById("plate" + p).classList.add("highlight");
        } else {
          results[p].classList.remove("show");
          document.getElementById("plate" + p).classList.remove("highlight");
        }
      }
    }

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

    function prevStep() {
      renderStep((currentStep - 1 + stepInfo.length) % stepInfo.length);
    }

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

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

    // Event listeners
    document.getElementById("nextBtn").addEventListener("click", () => {
      nextStep();
      stopAutoPlay();
    });

    document.getElementById("prevBtn").addEventListener("click", () => {
      prevStep();
      stopAutoPlay();
    });

    playBtn.addEventListener("click", () => {
      if (isPlaying) stopAutoPlay();
      else {
        nextStep();
        startAutoPlay();
      }
    });

    dots.forEach(dot => {
      dot.addEventListener("click", () => {
        renderStep(parseInt(dot.dataset.step, 10));
        stopAutoPlay();
      });
    });

    // Initial Start
    renderStep(0);
    startAutoPlay();
  </script>
</body>
</html>

Interpreting Fractions as Equal Sharing and Division Quotients

<!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: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
    }

    /* Warning Badge */
    .warning-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #b91c1c;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
    }

    /* Comparison Grid */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    .card-panel {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      gap: 10px;
    }

    .panel-header {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .panel-title {
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
    }

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

    .visual-area {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 120px;
      gap: 6px;
    }

    .result-badge {
      width: 100%;
      padding: 8px 6px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .badge-less {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
    }

    .badge-more {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #15803d;
    }

    /* SVG Styling */
    svg {
      display: block;
      max-width: 100%;
      height: auto;
    }

    .cookie-base { fill: #e6a15c; stroke: #c27b38; stroke-width: 1.5; }
    .cookie-cut { stroke: #ffffff; stroke-width: 2; stroke-dasharray: 2,2; }
    .chip { fill: #6e401f; }
    .piece-active { fill: #38bdf8; stroke: #0284c7; stroke-width: 1.5; }
    .piece-half { fill: #4ade80; stroke: #16a34a; stroke-width: 1.5; }
    .whole-active { fill: #86efac; stroke: #16a34a; stroke-width: 1.5; }

    @media (max-width: 400px) {
      body { padding: 8px; gap: 8px; }
      .warning-bar { font-size: 12px; padding: 6px 8px; }
      .panel-title { font-size: 16px; }
      .panel-sub { font-size: 11px; }
      .result-badge { font-size: 12px; padding: 6px 4px; }
    }
  </style>
</head>
<body>

  
  <div class="warning-bar">
    <span>⚠️</span>
    <span>Order matters: <em>a ÷ b ≠ b ÷ a</em></span>
  </div>

  
  <div class="comparison-grid">

    
    <div class="card-panel">
      <div class="panel-header">
        <div class="panel-title">2 ÷ 5</div>
        <div class="panel-sub">2 cookies ÷ 5 friends</div>
      </div>

      <div class="visual-area">
        <svg viewBox="0 0 170 85" width="160">
          
          <g transform="translate(42, 42)">
            
            
            <path d="M 0 0 L 0 -36 A 36 36 0 0 1 34.2 -11.1 Z" class="piece-active" />
            
            <path d="M 0 0 L 34.2 -11.1 A 36 36 0 0 1 21.2 29.1 Z" class="cookie-base" />
            <path d="M 0 0 L 21.2 29.1 A 36 36 0 0 1 -21.2 29.1 Z" class="cookie-base" />
            <path d="M 0 0 L -21.2 29.1 A 36 36 0 0 1 -34.2 -11.1 Z" class="cookie-base" />
            <path d="M 0 0 L -34.2 -11.1 A 36 36 0 0 1 0 -36 Z" class="cookie-base" />
            
            <line x1="0" y1="0" x2="0" y2="-36" class="cookie-cut" />
            <line x1="0" y1="0" x2="34.2" y2="-11.1" class="cookie-cut" />
            <line x1="0" y1="0" x2="21.2" y2="29.1" class="cookie-cut" />
            <line x1="0" y1="0" x2="-21.2" y2="29.1" class="cookie-cut" />
            <line x1="0" y1="0" x2="-34.2" y2="-11.1" class="cookie-cut" />
            
            <circle cx="12" cy="-18" r="2.5" class="chip" />
            <circle cx="-12" cy="14" r="2.5" class="chip" />
            <circle cx="15" cy="12" r="2" class="chip" />
            <text x="12" y="-23" font-size="9" font-weight="bold" fill="#0369a1">⅕</text>
          </g>

          
          <g transform="translate(128, 42)">
            
            <path d="M 0 0 L 0 -36 A 36 36 0 0 1 34.2 -11.1 Z" class="piece-active" />
            
            <path d="M 0 0 L 34.2 -11.1 A 36 36 0 0 1 21.2 29.1 Z" class="cookie-base" />
            <path d="M 0 0 L 21.2 29.1 A 36 36 0 0 1 -21.2 29.1 Z" class="cookie-base" />
            <path d="M 0 0 L -21.2 29.1 A 36 36 0 0 1 -34.2 -11.1 Z" class="cookie-base" />
            <path d="M 0 0 L -34.2 -11.1 A 36 36 0 0 1 0 -36 Z" class="cookie-base" />
            
            <line x1="0" y1="0" x2="0" y2="-36" class="cookie-cut" />
            <line x1="0" y1="0" x2="34.2" y2="-11.1" class="cookie-cut" />
            <line x1="0" y1="0" x2="21.2" y2="29.1" class="cookie-cut" />
            <line x1="0" y1="0" x2="-21.2" y2="29.1" class="cookie-cut" />
            <line x1="0" y1="0" x2="-34.2" y2="-11.1" class="cookie-cut" />
            
            <circle cx="12" cy="-18" r="2.5" class="chip" />
            <circle cx="-15" cy="5" r="2.5" class="chip" />
            <circle cx="2" cy="18" r="2" class="chip" />
            <text x="12" y="-23" font-size="9" font-weight="bold" fill="#0369a1">⅕</text>
          </g>
        </svg>
      </div>

      <div class="result-badge badge-less">
        Each gets <strong>²/₅</strong> (&lt; 1 whole)
      </div>
    </div>

    
    <div class="card-panel">
      <div class="panel-header">
        <div class="panel-title">5 ÷ 2</div>
        <div class="panel-sub">5 cookies ÷ 2 friends</div>
      </div>

      <div class="visual-area">
        <svg viewBox="0 0 170 85" width="160">
          
          
          <g transform="translate(32, 42)">
            <circle cx="0" cy="0" r="24" class="whole-active" />
            <circle cx="-6" cy="-8" r="2.5" class="chip" />
            <circle cx="8" cy="-4" r="2.5" class="chip" />
            <circle cx="-4" cy="10" r="2.5" class="chip" />
            <circle cx="9" cy="8" r="2" class="chip" />
            <text x="0" y="4" font-size="11" font-weight="bold" fill="#15803d" text-anchor="middle">1</text>
          </g>

          
          <g transform="translate(86, 42)">
            <circle cx="0" cy="0" r="24" class="whole-active" />
            <circle cx="-7" cy="-6" r="2.5" class="chip" />
            <circle cx="6" cy="-8" r="2.5" class="chip" />
            <circle cx="4" cy="9" r="2.5" class="chip" />
            <circle cx="-6" cy="8" r="2" class="chip" />
            <text x="0" y="4" font-size="11" font-weight="bold" fill="#15803d" text-anchor="middle">1</text>
          </g>

          
          <g transform="translate(138, 42)">
            
            <path d="M 0 -24 A 24 24 0 0 0 0 24 Z" class="piece-half" />
            
            <path d="M 0 -24 A 24 24 0 0 1 0 24 Z" fill="none" stroke="#94a3b8" stroke-dasharray="2,2" />
            <line x1="0" y1="-24" x2="0" y2="24" class="cookie-cut" />
            <circle cx="-8" cy="-6" r="2" class="chip" />
            <circle cx="-9" cy="8" r="2" class="chip" />
            <text x="-9" y="4" font-size="10" font-weight="bold" fill="#15803d" text-anchor="middle">½</text>
          </g>
        </svg>
      </div>

      <div class="result-badge badge-more">
        Each gets <strong>⁵/₂ = 2 ½</strong> (&gt; 1 whole)
      </div>
    </div>

  </div>

</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="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    /* Stepper Navigation */
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      max-width: 360px;
      justify-content: center;
    }
    .step-btn {
      flex: 1;
      padding: 6px 4px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    }
    .play-btn {
      padding: 6px 10px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
    }

    /* Main Visual Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 360px;
      height: 250px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

    /* Pizza Row */
    .pizza-row {
      display: flex;
      justify-content: space-around;
      width: 100%;
      transition: transform 0.4s ease, opacity 0.4s ease;
    }
    .pizza-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .pizza-label {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
    }

    /* Slices & SVG styling */
    .slice {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
      cursor: pointer;
    }
    .cut-line {
      stroke: #ffffff;
      stroke-width: 2.5;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .quarter-text {
      font-size: 9px;
      font-weight: 700;
      fill: #1e2945;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      text-anchor: middle;
      dominant-baseline: central;
    }

    /* Plate for Step 3 */
    .plate-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      opacity: 0;
      transform: translateY(12px) scale(0.92);
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: none;
    }
    .plate-container.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .plate-label {
      font-size: 13px;
      font-weight: 700;
      color: #0369a1;
      background: #e0f2fe;
      padding: 3px 10px;
      border-radius: 12px;
      border: 1px solid #bae6fd;
    }

    /* Bottom Mathematical Summary */
    .summary-card {
      width: 100%;
      max-width: 360px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      text-align: center;
    }
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      font-size: 13px;
      line-height: 1;
      text-align: center;
    }
    .frac .top { border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
    .frac .bot { padding-top: 1px; }
    .badge {
      background: #dbeafe;
      color: #1d4ed8;
      padding: 2px 6px;
      border-radius: 6px;
      font-size: 13px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">1. Whole</button>
    <button class="step-btn" onclick="setStep(1)">2. Slice (¼)</button>
    <button class="step-btn" onclick="setStep(2)">3. Share (¾)</button>
    <button class="play-btn" id="playBtn" onclick="togglePlay()">⏸</button>
  </div>

  
  <div class="stage">
    
    <div class="pizza-row" id="pizzaRow">
      
      <div class="pizza-item">
        <svg width="86" height="86" viewBox="0 0 86 86" id="p1">
          <circle cx="43" cy="43" r="41" fill="#e2a048" />
          
          
          <path id="p1_s1" class="slice" d="M 43 43 L 43 5 A 38 38 0 0 1 81 43 Z" fill="#38bdf8" />
          <path id="p1_s2" class="slice" d="M 43 43 L 81 43 A 38 38 0 0 1 43 81 Z" fill="#fde047" />
          <path id="p1_s3" class="slice" d="M 43 43 L 43 81 A 38 38 0 0 1 5 43 Z" fill="#fde047" />
          <path id="p1_s4" class="slice" d="M 43 43 L 5 43 A 38 38 0 0 1 43 5 Z" fill="#fde047" />
          
          <line x1="43" y1="5" x2="43" y2="81" class="cut-line" />
          <line x1="5" y1="43" x2="81" y2="43" class="cut-line" />
          
          <text x="61" y="25" class="quarter-text">¼</text>
          <text x="61" y="61" class="quarter-text">¼</text>
          <text x="25" y="61" class="quarter-text">¼</text>
          <text x="25" y="25" class="quarter-text">¼</text>
        </svg>
        <span class="pizza-label">Pizza 1</span>
      </div>

      
      <div class="pizza-item">
        <svg width="86" height="86" viewBox="0 0 86 86" id="p2">
          <circle cx="43" cy="43" r="41" fill="#e2a048" />
          
          <path id="p2_s1" class="slice" d="M 43 43 L 43 5 A 38 38 0 0 1 81 43 Z" fill="#38bdf8" />
          <path id="p2_s2" class="slice" d="M 43 43 L 81 43 A 38 38 0 0 1 43 81 Z" fill="#fde047" />
          <path id="p2_s3" class="slice" d="M 43 43 L 43 81 A 38 38 0 0 1 5 43 Z" fill="#fde047" />
          <path id="p2_s4" class="slice" d="M 43 43 L 5 43 A 38 38 0 0 1 43 5 Z" fill="#fde047" />
          <line x1="43" y1="5" x2="43" y2="81" class="cut-line" />
          <line x1="5" y1="43" x2="81" y2="43" class="cut-line" />
          <text x="61" y="25" class="quarter-text">¼</text>
          <text x="61" y="61" class="quarter-text">¼</text>
          <text x="25" y="61" class="quarter-text">¼</text>
          <text x="25" y="25" class="quarter-text">¼</text>
        </svg>
        <span class="pizza-label">Pizza 2</span>
      </div>

      
      <div class="pizza-item">
        <svg width="86" height="86" viewBox="0 0 86 86" id="p3">
          <circle cx="43" cy="43" r="41" fill="#e2a048" />
          
          <path id="p3_s1" class="slice" d="M 43 43 L 43 5 A 38 38 0 0 1 81 43 Z" fill="#38bdf8" />
          <path id="p3_s2" class="slice" d="M 43 43 L 81 43 A 38 38 0 0 1 43 81 Z" fill="#fde047" />
          <path id="p3_s3" class="slice" d="M 43 43 L 43 81 A 38 38 0 0 1 5 43 Z" fill="#fde047" />
          <path id="p3_s4" class="slice" d="M 43 43 L 5 43 A 38 38 0 0 1 43 5 Z" fill="#fde047" />
          <line x1="43" y1="5" x2="43" y2="81" class="cut-line" />
          <line x1="5" y1="43" x2="81" y2="43" class="cut-line" />
          <text x="61" y="25" class="quarter-text">¼</text>
          <text x="61" y="61" class="quarter-text">¼</text>
          <text x="25" y="61" class="quarter-text">¼</text>
          <text x="25" y="25" class="quarter-text">¼</text>
        </svg>
        <span class="pizza-label">Pizza 3</span>
      </div>
    </div>

    
    <div class="plate-container" id="plateContainer">
      <svg width="90" height="90" viewBox="0 0 90 90">
        
        <circle cx="45" cy="45" r="43" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="2" />
        
        <path d="M 45 45 L 45 9 A 36 36 0 0 1 81 45 Z" fill="#38bdf8" stroke="#ffffff" stroke-width="1.5" />
        <path d="M 45 45 L 81 45 A 36 36 0 0 1 45 81 Z" fill="#38bdf8" stroke="#ffffff" stroke-width="1.5" />
        <path d="M 45 45 L 45 81 A 36 36 0 0 1 9 45 Z" fill="#38bdf8" stroke="#ffffff" stroke-width="1.5" />
        
        <path d="M 45 45 L 9 45 A 36 36 0 0 1 45 9 Z" fill="none" stroke="#94a3b8" stroke-dasharray="3,3" stroke-width="1.5" />
        
        <text x="61" y="28" font-size="10" font-weight="700" fill="#0369a1" text-anchor="middle">¼</text>
        <text x="61" y="62" font-size="10" font-weight="700" fill="#0369a1" text-anchor="middle">¼</text>
        <text x="28" y="62" font-size="10" font-weight="700" fill="#0369a1" text-anchor="middle">¼</text>
      </svg>
      <div class="plate-label">1 Share = 3 quarters (¾)</div>
    </div>
  </div>

  
  <div class="summary-card" id="summaryCard">
    <span>3 wholes ÷ 4 shares = </span>
    <span class="badge">
      <span class="frac"><span class="top">3</span><span class="bot">4</span></span> each
    </span>
  </div>

  <script>
    let curStep = 0;
    let timer = null;
    let isPlaying = true;

    function applyState(step) {
      curStep = step;

      // Update buttons
      document.querySelectorAll('.step-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === step);
      });

      const cutLines = document.querySelectorAll('.cut-line');
      const qTexts = document.querySelectorAll('.quarter-text');
      const pRow = document.getElementById('pizzaRow');
      const plate = document.getElementById('plateContainer');
      const s1 = document.getElementById('p1_s1');
      const s2 = document.getElementById('p2_s1');
      const s3 = document.getElementById('p3_s1');
      const summary = document.getElementById('summaryCard');

      if (step === 0) {
        // Whole pizzas
        cutLines.forEach(l => l.style.opacity = '0');
        qTexts.forEach(t => t.style.opacity = '0');
        pRow.style.transform = 'translateY(40px) scale(1.08)';
        plate.classList.remove('visible');

        // Slices default color
        ['p1_s1', 'p2_s1', 'p3_s1'].forEach(id => {
          const el = document.getElementById(id);
          el.setAttribute('fill', '#fde047');
          el.style.transform = 'none';
          el.style.opacity = '1';
        });

        summary.innerHTML = '3 whole pizzas to share among 4 people';
      } 
      else if (step === 1) {
        // Sliced into 4 quarters
        cutLines.forEach(l => l.style.opacity = '1');
        qTexts.forEach(t => t.style.opacity = '1');
        pRow.style.transform = 'translateY(40px) scale(1.08)';
        plate.classList.remove('visible');

        // Highlight 1 quarter on each pizza
        ['p1_s1', 'p2_s1', 'p3_s1'].forEach(id => {
          const el = document.getElementById(id);
          el.setAttribute('fill', '#38bdf8');
          el.style.transform = 'translate(2px, -2px)';
          el.style.opacity = '1';
        });

        summary.innerHTML = 'Cut each into 4 equal quarters (¼)';
      } 
      else if (step === 2) {
        // Share 1 quarter from each
        cutLines.forEach(l => l.style.opacity = '1');
        qTexts.forEach(t => t.style.opacity = '1');
        pRow.style.transform = 'translateY(0px) scale(0.92)';
        plate.classList.add('visible');

        // Fade moved slices from top pizzas
        [s1, s2, s3].forEach(el => {
          el.setAttribute('fill', '#38bdf8');
          el.style.transform = 'translate(4px, -4px)';
          el.style.opacity = '0.2';
        });

        summary.innerHTML = `<span>3 wholes ÷ 4 shares = </span><span class="badge"><span class="frac"><span class="top">3</span><span class="bot">4</span></span> each</span>`;
      }
    }

    function setStep(step) {
      applyState(step);
      resetTimer();
    }

    function nextStep() {
      applyState((curStep + 1) % 3);
    }

    function resetTimer() {
      if (timer) clearInterval(timer);
      if (isPlaying) {
        timer = setInterval(nextStep, 3400);
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        nextStep();
        resetTimer();
      } else {
        if (timer) clearInterval(timer);
      }
    }

    // Initialize
    applyState(0);
    resetTimer();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Division to Fraction Notation</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

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

    /* Equation Section */
    .equation-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }

    .math-block {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 18px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      font-size: 32px;
      font-weight: 700;
      min-height: 90px;
    }

    /* Fraction Formatting */
    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      line-height: 1;
      padding: 0 4px;
    }

    .fraction .num {
      padding-bottom: 4px;
    }

    .fraction .bar {
      width: 100%;
      height: 3px;
      background: #1e293b;
      border-radius: 2px;
    }

    .fraction .den {
      padding-top: 4px;
    }

    /* Color Coding */
    .val-a {
      color: #2563eb;
      transition: all 0.25s ease;
    }

    .val-b {
      color: #059669;
      transition: all 0.25s ease;
    }

    .op {
      color: #475569;
      margin: 0 6px;
    }

    /* Arrow Connector */
    .arrow-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      text-align: center;
    }

    .arrow-icon {
      font-size: 26px;
      color: #64748b;
      line-height: 1;
    }

    .arrow-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #475569;
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 6px;
      white-space: nowrap;
    }

    /* Role Legend Cards */
    .legend-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .legend-card {
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      line-height: 1.25;
    }

    .card-a {
      background: #eff6ff;
      border: 1.5px solid #bfdbfe;
      color: #1d4ed8;
    }

    .card-b {
      background: #ecfdf5;
      border: 1.5px solid #a7f3d0;
      color: #047857;
    }

    .legend-symbol {
      font-size: 20px;
      font-weight: 800;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: #ffffff;
      flex-shrink: 0;
    }

    .card-a .legend-symbol {
      color: #2563eb;
      box-shadow: 0 1px 3px rgba(37, 99, 235, 0.15);
    }

    .card-b .legend-symbol {
      color: #059669;
      box-shadow: 0 1px 3px rgba(5, 150, 105, 0.15);
    }

    /* Concrete Example Box */
    .example-panel {
      width: 100%;
      background: #ffffff;
      border: 2px dashed #cbd5e1;
      border-radius: 14px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .example-equation {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 26px;
      font-weight: 700;
    }

    .selector-row {
      display: flex;
      gap: 8px;
    }

    .preset-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .preset-btn.active {
      background: #1e293b;
      color: #ffffff;
      border-color: #1e293b;
    }

    @media (max-width: 440px) {
      .math-block {
        font-size: 26px;
        padding: 8px 12px;
      }
      .arrow-label {
        font-size: 9px;
        padding: 2px 6px;
      }
      .arrow-icon {
        font-size: 20px;
      }
      .legend-grid {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .example-equation {
        font-size: 22px;
      }
    }
  </style>
</head>
<body>

  <div class="main-container">
    
    
    <div class="equation-row">
      
      <div class="math-block">
        <span class="val-a var-a">a</span>
        <span class="op">÷</span>
        <span class="val-b var-b">b</span>
      </div>

      
      <div class="arrow-container">
        <span class="arrow-icon">⟷</span>
        <span class="arrow-label">means the exact same as</span>
      </div>

      
      <div class="math-block">
        <div class="fraction">
          <span class="val-a var-a num">a</span>
          <span class="bar"></span>
          <span class="val-b var-b den">b</span>
        </div>
      </div>
    </div>

    
    <div class="legend-grid">
      <div class="legend-card card-a">
        <div class="legend-symbol" id="symbolA">a</div>
        <div>
          Items being shared<br>
          <span style="font-weight: 400; font-size: 12px;">(Numerator)</span>
        </div>
      </div>

      <div class="legend-card card-b">
        <div class="legend-symbol" id="symbolB">b</div>
        <div>
          Number of equal groups<br>
          <span style="font-weight: 400; font-size: 12px;">(Denominator)</span>
        </div>
      </div>
    </div>

    
    <div class="example-panel">
      <div class="example-equation">
        <span class="val-a" id="numVal">3</span>
        <span class="op">÷</span>
        <span class="val-b" id="denVal">4</span>
        <span class="op">=</span>
        <div class="fraction">
          <span class="val-a num" id="fracNum">3</span>
          <span class="bar"></span>
          <span class="val-b den" id="fracDen">4</span>
        </div>
      </div>

      
      <div class="selector-row">
        <button class="preset-btn active" onclick="setValues(3, 4, this)">3 ÷ 4</button>
        <button class="preset-btn" onclick="setValues(1, 2, this)">1 ÷ 2</button>
        <button class="preset-btn" onclick="setValues(2, 5, this)">2 ÷ 5</button>
        <button class="preset-btn" onclick="setValues(5, 6, this)">5 ÷ 6</button>
      </div>
    </div>

  </div>

  <script>
    function setValues(a, b, btn) {
      document.querySelectorAll('.preset-btn').forEach(el => el.classList.remove('active'));
      btn.classList.add('active');

      document.getElementById('numVal').textContent = a;
      document.getElementById('denVal').textContent = b;
      document.getElementById('fracNum').textContent = a;
      document.getElementById('fracDen').textContent = b;
      document.getElementById('symbolA').textContent = a;
      document.getElementById('symbolB').textContent = b;
    }
  </script>
</body>
</html>

Representing Fractions as Measures on a Number Line

Interpreting Fractions as Parts of a Set and Part-Whole Relations

Understanding Fractions as Ratios and Rates

Converting Fractions to Terminating Decimals Using Long Division

Identifying and Representing Repeating Recurring Decimals

Converting Terminating and Recurring Decimals to Fractions

Writing Percentages as Fractions with Denominator 100 and Decimals

Converting Between Fractions, Decimals, and Percentages Fluently

Using Equivalent Forms to Solve Real-World Problems

math

Fraction Meanings, Quotients, and Rational Number Conversions

Liczby całkowite na osi liczbowej

Dodawanie liczb całkowitych

Odejmowanie liczb całkowitych

Mnożenie liczb całkowitych

Dzielenie liczb całkowitych

Kolejność działań z liczbami całkowitymi

Liczby całkowite – działania i porządkowanie

Dodawanie i odejmowanie ułamków zwykłych

Mnożenie ułamków zwykłych

Dzielenie ułamków zwykłych

Dodawanie i odejmowanie ułamków dziesiętnych

Mnożenie i dzielenie ułamków dziesiętnych

Zamiana ułamków zwykłych na dziesiętne i odwrotnie

Działania łączne na ułamkach

Wartość bezwzględna liczby

Zastosowania liczb całkowitych w zadaniach

Ułamki zwykłe i dziesiętne – działania i zastosowania

Understanding Percentages as Parts Per Hundred and the Complete Whole

Mastering Benchmark Percentages and Their Fraction Equivalents

Calculating 10%, 5%, and 1% Mentally

Finding Percentages of Quantities Using Fractions

Finding Percentages of Quantities Using Decimals

Calculating Percentages Greater Than 100%

Solving Real-World Percent Problems: Discounts, Sales Tax, and Tips

Multi-Step Real-World Problems with Fractions, Decimals, and Percents

Percentages: Foundations, Benchmarks, and Practical Applications

Fracciones como relación parte-todo en regiones continuas

Fracciones como subconjunto de una colección discreta

Fracción como medida e intervalo en la recta numérica

Fracción como cociente: reparto de objetos entre personas

Fracción como operador: calcular la fracción de un número

Interpretaciones de la fracción

Fracciones propias, impropias y fracciones iguales a la unidad

Números mixtos y conversión a fracciones impropias

Fracciones equivalentes mediante modelos visuales

Obtención de fracciones equivalentes por complificación y amplificación

Simplificación de fracciones y fracción irreductible

Tipos de fracciones y equivalencia

Comparación de fracciones con igual denominador o igual numerador

Comparación de fracciones usando puntos de referencia (0, 1/2, 1)

Comparación y ordenamiento con distinto denominador mediante m.c.m.

Medidas relativas en recetas, escalas y porciones

Resolución de desafíos de razonamiento con fracciones

Comparación y aplicación de fracciones

Co to jest jednomian

Współczynnik liczbowy jednomianu

Jednomiany podobne – rozpoznawanie

Porządkowanie jednomianów

Dodawanie jednomianów podobnych

Odejmowanie jednomianów podobnych

Redukcja wyrazów podobnych – proste przypadki

Jednomiany i redukcja wyrazów podobnych

Suma de fracciones con igual denominador y modelos visuales

Resta de fracciones con igual denominador

Suma y resta de números mixtos con igual denominador

Suma de fracciones con distinto denominador usando fracciones equivalentes

Resta de fracciones con distinto denominador

Suma y resta de números mixtos con distinto denominador

Problemas verbales aditivos con fracciones y medidas

Suma y resta de fracciones y números mixtos

Co to jest suma algebraiczna

Dodawanie sum algebraicznych

Odejmowanie sum algebraicznych

Redukcja wyrazów podobnych w sumach algebraicznych

Dodawanie i odejmowanie sum – zadania łączne

Opuszczanie nawiasów przed znakiem plus

Opuszczanie nawiasów przed znakiem minus

Sumy algebraiczne z wieloma zmiennymi

Dodawanie i odejmowanie sum algebraicznych

Multiplicación de una fracción por un número natural

Multiplicación de fracción por fracción con modelo de área

Simplificación cruzada antes de multiplicar fracciones

La multiplicación como escalamiento o cambio de tamaño

División de fracciones unitarias entre un número natural

División de un número natural entre una fracción unitaria

División general de fracciones: el inverso multiplicativo

Problemas verbales multiplicativos y de división con fracciones

Operaciones combinadas con fracciones y jerarquía

Multiplicación y división de fracciones

Fracciones decimales: décimos, centésimos y milésimos

Notación decimal: la coma o punto decimal y sus posiciones

Descomposición expandida de números decimales

Representación de decimales en la recta numérica

Decimales equivalentes: el rol del cero a la derecha

Comparación y orden de números decimales

Redondeo de decimales al entero, décima y centésima más cercana

Números decimales: notación, valor posicional y operaciones básicas

Conversión de fracciones a decimales por amplificación y división

Conversión de decimales finitos a fracciones simplificadas

Concepto de porcentaje como fracción con denominador 100

Tríada de equivalencias: fracción, decimal y porcentaje

Porcentajes comunes (10%, 25%, 50% y 75%) en la vida diaria

Cálculo mental de porcentajes sencillos de una cantidad

Interpretación de descuentos e intereses en anuncios comerciales

Resolución de problemas integrando fracciones, decimales y porcentajes

Equivalencias entre fracciones, decimales y porcentajes

Mnożenie dwumianu przez dwumian – wprowadzenie

Mnożenie dwumianu przez dwumian – metoda

Mnożenie dwumianu przez dwumian z redukcją wyrazów podobnych

Wzór (a+b)(a−b) – różnica kwadratów

Wzór (a+b)² – kwadrat sumy

Wzór (a−b)² – kwadrat różnicy

Zastosowanie wzorów skróconego mnożenia w zadaniach

Przekształcanie wyrażeń – zadania łączne

Wyrażenia algebraiczne w geometrii

Sprawdzenie umiejętności – sumy algebraiczne

Mnożenie dwumianów, wzory skróconego mnożenia i zadania łączne

Suma de números decimales alineando la coma

Resta de números decimales con igual y distinta cantidad de cifras

Estimación de sumas y restas decimales para el consumo diario

Multiplicación de un decimal por un número natural

Multiplicación entre dos números decimales

Multiplicación de decimales por 10, 100 y 1.000

Suma, resta y multiplicación de decimales

Reading and Writing Decimals as Fractions with Tenths and Hundredths

Simplifying Fraction Equivalents of Decimals

Understanding Thousandths as Equal Parts of a Whole

Relating Thousandths to Tenths and Hundredths

Writing Thousandths as Fractions and Decimals

Partitioning Numbers with Up to Three Decimal Places

Decimals: Tenths, Hundredths, and Thousandths

División de un número decimal entre un número natural

División entre enteros con cociente decimal

División de decimales entre 10, 100 y 1.000

División entre dos números decimales: transformación del divisor

División de números decimales

Cálculo de precios unitarios y comparación de ofertas

Elaboración y cuadre de presupuestos personales y escolares

Problemas multietapa con dinero, cambio y facturación

Evaluación de la razonabilidad de resultados con decimales

Operaciones combinadas con números decimales

Aplicaciones con decimales y operaciones combinadas

Understanding Fractions as Division

Writing Division as Fractions

Converting Between Fractions and Division

Sharing Equally: Fraction Results

Division Word Problems With Fraction Answers

Whole Number Quotients With Remainders as Fractions

Interpreting Remainders as Fractions

Mixed Number Quotients in Context

Estimating Fraction Division Results

Multi-Step Fraction Division Word Problems

Fractions as Division

Concepto de razón como comparación por cociente

Razones equivalentes y simplificación de razones

Tablas de razones y patrones de escalamiento

Tasas unitarias en la vida cotidiana: velocidad y rendimiento

Concepto de proporción y la propiedad fundamental

Proporcionalidad directa: identificación y constante de proporcionalidad

Regla de tres simple directa en la resolución de problemas

Representación gráfica de la proporcionalidad directa

Razones, tasas y proporcionalidad directa

Concepto de proporcionalidad inversa: cuando una crece, la otra disminuye

Regla de tres simple inversa: tiempo, obreros y velocidad

Situaciones de producto de medidas: combinación de dimensiones

Escalas en mapas y planos arquitectónicos

Porcentaje calculado como proporción directa

Modelado y análisis de dependencia en tablas y gráficos

Proporcionalidad inversa y aplicaciones

Prawdopodobieństwo zdarzeń – wprowadzenie

Prawdopodobieństwo zdarzeń złożonych

Statystyka – średnia arytmetyczna i mediana

Odczytywanie i interpretacja danych z wykresów

Zadania mieszane – powtórzenie całego materiału

Sprawdzenie końcowe – zadania z całego materiału

Statystyka, prawdopodobieństwo i powtórzenie końcowe

OGM.6.NF.1

OGM.6.NF.1

Aligned learning resources

Related diagrams