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

    .container {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Model Card Section */
    .model-section {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 14px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .bracket-container {
      width: 100%;
      height: 24px;
      position: relative;
      margin-bottom: 6px;
    }

    .bracket-svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .total-badge {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: #2563eb;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: 12px;
      letter-spacing: 0.3px;
    }

    .bar-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 100%;
      height: 52px;
      border: 2px solid #2563eb;
      border-radius: 8px;
      overflow: hidden;
      background: #ffffff;
    }

    .bar-segment {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      border-right: 2px solid #93c5fd;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .bar-segment:last-child {
      border-right: none;
    }

    /* Unsolved state styling */
    .unsolved .bar-segment {
      color: #94a3b8;
      background: #ffffff;
    }
    .unsolved .bar-segment.target {
      background: #eff6ff;
      color: #2563eb;
    }

    /* Solved state styling */
    .solved .bar-grid {
      border-color: #059669;
    }
    .solved .bar-segment {
      border-right-color: #a7f3d0;
      background: #ecfdf5;
      color: #059669;
    }
    .solved .total-badge {
      background: #059669;
    }

    .sub-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 8px;
      text-align: center;
    }

    /* Flow Indicator */
    .flow-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .math-sentence {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .part-total { color: #1e2945; }
    .part-op { color: #64748b; }
    .part-groups { color: #2563eb; }
    .part-result { color: #059669; }

    /* Interactive Switch */
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .btn-step:hover {
      background: #e2e8f0;
    }

    .btn-step.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .btn-step.active.green {
      background: #059669;
      border-color: #059669;
    }
  </style>
</head>
<body>
  <div class="container">
    
    
    <div id="modelCard" class="model-section unsolved">
      <div class="bracket-container">
        <svg class="bracket-svg" viewBox="0 0 400 20" preserveAspectRatio="none">
          <path d="M 4,16 L 4,6 Q 4,2 10,2 L 190,2 Q 196,2 200,0 Q 204,2 210,2 L 390,2 Q 396,2 396,6 L 396,16" 
                fill="none" stroke="#2563eb" stroke-width="2" id="bracketPath" />
        </svg>
        <span class="total-badge" id="totalBadge">Total: 20</span>
      </div>

      <div class="bar-grid">
        <div class="bar-segment target" id="seg1">?</div>
        <div class="bar-segment" id="seg2">?</div>
        <div class="bar-segment" id="seg3">?</div>
        <div class="bar-segment" id="seg4">?</div>
      </div>

      <div class="sub-label" id="statusLabel">4 equal groups • Group size = ?</div>
    </div>

    
    <div class="flow-row">
      <div class="math-sentence">
        <span class="part-total">20</span>
        <span class="part-op">÷</span>
        <span class="part-groups">4</span>
        <span class="part-op">=</span>
        <span class="part-result" id="eqResult">?</span>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn-step active" id="btnQuestion" onclick="setState(false)">
        <span>1</span> Question
      </button>
      <button class="btn-step" id="btnSolved" onclick="setState(true)">
        <span>2</span> Solved
      </button>
    </div>

  </div>

  <script>
    function setState(solved) {
      const card = document.getElementById('modelCard');
      const totalBadge = document.getElementById('totalBadge');
      const bracketPath = document.getElementById('bracketPath');
      const statusLabel = document.getElementById('statusLabel');
      const eqResult = document.getElementById('eqResult');
      const btnQ = document.getElementById('btnQuestion');
      const btnS = document.getElementById('btnSolved');

      const segs = [
        document.getElementById('seg1'),
        document.getElementById('seg2'),
        document.getElementById('seg3'),
        document.getElementById('seg4')
      ];

      if (solved) {
        card.classList.remove('unsolved');
        card.classList.add('solved');
        bracketPath.setAttribute('stroke', '#059669');
        segs.forEach(s => s.textContent = '5');
        statusLabel.textContent = '4 equal groups • Each segment = 5';
        eqResult.textContent = '5';
        btnQ.className = 'btn-step';
        btnS.className = 'btn-step active green';
      } else {
        card.classList.remove('solved');
        card.classList.add('unsolved');
        bracketPath.setAttribute('stroke', '#2563eb');
        segs[0].textContent = '?';
        segs[1].textContent = '?';
        segs[2].textContent = '?';
        segs[3].textContent = '?';
        statusLabel.textContent = '4 equal groups • Group size = ?';
        eqResult.textContent = '?';
        btnQ.className = 'btn-step active';
        btnS.className = 'btn-step';
      }
    }
  </script>
</body>
</html>

Division as Fair Sharing (Partitive Division)

Division as Equal Grouping (Measurement Division)

Modeling Division on a Number Line

Representing Division with Array and Area Models

Representing Division with Strip Diagrams

Writing Division Number Sentences from Contexts

Understanding the Meaning of Remainders

math

Understanding Division Models and Sharing

Dodawanie w pamięci – liczby jednocyfrowe

Odejmowanie w pamięci – liczby jednocyfrowe

Dodawanie i odejmowanie wielokrotności 10

Dodawanie i odejmowanie wielokrotności 100

Dodawanie liczb dwucyfrowych bez przejścia

Odejmowanie liczb dwucyfrowych bez przejścia

Dodawanie liczb dwucyfrowych z przejściem

Odejmowanie liczb dwucyfrowych z przejściem

Dodawanie i odejmowanie w pamięci

Propiedades asociativa y conmutativa de la multiplicación

Multiplicación de tres o más factores

Estimación de productos mediante redondeo

Problemas multiplicativos de grupos iguales y arreglos

Problemas multiplicativos de comparación: tantas veces más

Problemas multiplicativos de combinatoria y cartesiano

Duplicar y partir a la mitad como estrategia mental

Detección y corrección de errores en la multiplicación

Problemas multiplicativos de dos pasos con dinero y cantidades

Cálculo mental y problemas multiplicativos

Solving Times-as-Many Problems

Solving N-to-M Correspondence Word Problems

Two-Step Problems Combining Addition and Multiplication

Two-Step Problems Combining Subtraction and Division

Two-Step Times-as-Many Problems

Interpreting Remainders in Word Problems

Modeling Multi-Step Word Problems with Strip Diagrams

Representing Multi-Step Problems with a Single Equation

Assessing Reasonableness of Answers Using Estimation

Multi-Operation Word Problems and Modeling

Multiplying Multiples of Ten by Single Digits

Multiplying Two-Digit Numbers by Partitioning (Without Regrouping)

Multiplying Two-Digit Numbers by Partitioning (With Regrouping)

Using the Grid Method to Multiply Two-Digit Numbers

Expanded Short Multiplication (Two Digits by One Digit)

Dividing Multiples of Ten by Single Digits

Dividing Two-Digit Numbers by Partitioning into Tens and Ones

Dividing Two-Digit Numbers with Remainders

Using Inverse Operations to Check Written Calculations

Solving Multiplication and Division Calculation Word Problems

Multiplication and Division: Two Digits by One Digit

Dodawanie trzech i więcej liczb

Obliczenia typu 250 + 50, 180 – 30

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

Sprawdzanie dodawania odejmowaniem

Sprawdzanie odejmowania dodawaniem

Szacowanie sum i różnic

Równania z okienkiem – dodawanie i odejmowanie

Zadania tekstowe – dodawanie i odejmowanie

Sprawdzenie – dodawanie i odejmowanie

Sprawność w dodawaniu i odejmowaniu – zastosowania

What Is Division? Sharing Equally

Division as Equal Grouping

Using Arrays to Understand Division

Using Area Models to Understand Division

Relating Division to Multiplication

Building Division Fact Families

Understanding Division Concepts

Division Facts for 2, 5, and 10

Division Facts for 3, 4, and 6

Division Facts for 7, 8, and 9

Even and Odd Numbers with Divisibility Rules

Finding Unknown Factors in Multiplication

Mixed Division Facts Practice (0–10)

Balancing Multiplication and Division Equations

Division Facts and Fluency

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

Tabliczka mnożenia przez 2 i 3

Tabliczka mnożenia przez 4 i 5

Tabliczka mnożenia przez 6 i 7

Tabliczka mnożenia przez 8 i 9

Mnożenie przez 0, 1 i 10

Przemienność mnożenia

Łączność mnożenia – trzy czynniki

Rozdzielność mnożenia względem dodawania

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

Solving Multiplication Word Problems with Equal Groups

Solving Division Word Problems with Equal Groups

One-Step Multiplication Word Problems

One-Step Division Word Problems

Two-Step Problems with Multiplication and Division

Using a Problem-Solving Model for Multiplication and Division

Strip Diagrams for Two-Step Multiplication and Division Problems

Real-World Multiplication and Division Problems

Solving One-Step and Two-Step Multiplication and Division Word Problems

Szacowanie iloczynów

Równania z okienkiem – mnożenie

Równania z okienkiem – dzielenie

Zadania tekstowe – mnożenie

Wiązki między mnożeniem a dodawaniem

Sprawdzenie – mnożenie

Zastosowanie mnożenia w zadaniach

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

Dzielenie jako wielokrotne odejmowanie

Tabliczka dzielenia przez 2 i 3

Tabliczka dzielenia przez 4 i 5

Tabliczka dzielenia przez 6, 7, 8 i 9

Dzielenie przez 10

Dzielenie z resztą – wprowadzenie

Dzielenie z resztą – ćwiczenia

Sprawdzanie dzielenia mnożeniem

Dzielenie w pamięci i z resztą

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

Od problemu do rozwiązania

Czytanie zadania – co wiem, co szukam

Rysunek pomocniczy do zadania

Wybór działania do zadania

Strategie rozwiązywania zadań tekstowych

Representing Multiplication Problems with Arrays and Equations

Using Place Value to Multiply by Multiples of 10

Using Known Facts to Find Unknown Products

Using Multiplication to Solve Division

Using Division to Solve Multiplication

Solving Multiplication and Division Problems with Equations

Understanding Multiplication as Equal Groups

Understanding Division as Sharing Equally

Understanding Division as Grouping

Understanding Multiplication and Division

Finding Missing Factors in Multiplication

Finding Missing Values in Division

Representing Multiplication with Arrays

Representing Division with Arrays

Representing Multiplication with Number Sentences

Representing Division with Number Sentences

Multiplying One-Digit by Two-Digit Numbers

Dividing Two-Digit Numbers by One-Digit Numbers

Multiplication and Division Word Problems

Representing and Applying Multiplication and Division

Multiplication and Division Fact Families

Using Doubling to Multiply

Using Halving to Divide

Multiplying by Multiples of 10

Connecting Multiplication and Division

Choosing Multiplication and Division Strategies

Commutative Property of Multiplication

Associative Property of Multiplication

Introduction to the Distributive Property

Solving Multiplication and Division Problems with Diagrams

Strategies and Properties of Multiplication and 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

Determining Objects in Each Group When Sharing Equally

Division: How Many Groups vs How Many in Each Group

Applying Even and Odd Divisibility Rules to Larger Numbers

Using Multiplication to Find Quotients

Finding Quotients Using Fact Families

Division Concepts, Even/Odd Rules, and Fact Families

OGM.4.OA.2

OGM.4.OA.2

Aligned learning resources

Related diagrams