<!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;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      width: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 4px;
      overflow-x: hidden;
    }
    .controls {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
    }
    .tab-btn {
      border: 1px solid #d1d5db;
      background: #f8fafc;
      color: #4b5563;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .tab-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    }
    .shapes-grid {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      gap: 8px;
      width: 100%;
      max-width: 350px;
    }
    .shape-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .svg-wrap {
      width: 100%;
      max-width: 165px;
      aspect-ratio: 1 / 1;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }
    .stick-pentagon {
      stroke: #f59e0b;
      stroke-width: 10;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.25s, opacity 0.25s;
    }
    .stick-pentagon-inner {
      stroke: #fbbf24;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }
    .stick-hexagon {
      stroke: #8b5cf6;
      stroke-width: 10;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.25s, opacity 0.25s;
    }
    .stick-hexagon-inner {
      stroke: #a78bfa;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }
    .corner-pt {
      fill: #0ea5e9;
      stroke: #ffffff;
      stroke-width: 2.5;
      transition: transform 0.25s, fill 0.25s, r 0.25s;
    }
    .corner-label {
      font-size: 10px;
      font-weight: 800;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
      display: none;
    }
    .side-badge {
      fill: #ffffff;
      stroke: #d97706;
      stroke-width: 1.5;
      transition: transform 0.25s;
    }
    .side-badge.hex {
      stroke: #7c3aed;
    }
    .side-num {
      font-size: 10px;
      font-weight: 800;
      fill: #b45309;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .side-num.hex {
      fill: #6d28d9;
    }
    .label-badge {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 8px;
      text-align: center;
      width: 100%;
      max-width: 160px;
      margin-top: 4px;
    }
    .shape-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }
    .shape-desc {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
      margin-top: 1px;
    }
    .highlight-sides .corner-pt {
      opacity: 0.35;
      r: 4;
    }
    .highlight-corners .side-badge,
    .highlight-corners .side-num {
      opacity: 0.2;
    }
    .highlight-corners .stick-pentagon,
    .highlight-corners .stick-hexagon {
      opacity: 0.45;
    }
    .highlight-corners .stick-pentagon-inner,
    .highlight-corners .stick-hexagon-inner {
      opacity: 0.3;
    }
    .highlight-corners .corner-pt {
      r: 7.5;
      fill: #ef4444;
    }
    .highlight-corners .corner-label {
      display: block;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="tab-btn active" id="btnAll" onclick="setMode('all')">👁️ Both</button>
    <button class="tab-btn" id="btnSides" onclick="setMode('sides')">📏 5 & 6 Sides</button>
    <button class="tab-btn" id="btnCorners" onclick="setMode('corners')">📍 Corners</button>
  </div>

  <div class="shapes-grid" id="shapesArea">
    
    <div class="shape-card">
      <div class="svg-wrap">
        <svg viewBox="0 0 160 160">
          
          
          <line x1="24" y1="68" x2="80" y2="18" class="stick-pentagon" />
          <line x1="24" y1="68" x2="80" y2="18" class="stick-pentagon-inner" />
          
          <line x1="80" y1="18" x2="136" y2="68" class="stick-pentagon" />
          <line x1="80" y1="18" x2="136" y2="68" class="stick-pentagon-inner" />
          
          <line x1="136" y1="68" x2="136" y2="138" class="stick-pentagon" />
          <line x1="136" y1="68" x2="136" y2="138" class="stick-pentagon-inner" />
          
          <line x1="136" y1="138" x2="24" y2="138" class="stick-pentagon" />
          <line x1="136" y1="138" x2="24" y2="138" class="stick-pentagon-inner" />
          
          <line x1="24" y1="138" x2="24" y2="68" class="stick-pentagon" />
          <line x1="24" y1="138" x2="24" y2="68" class="stick-pentagon-inner" />

          
          <g>
            <circle cx="46" cy="38" r="8" class="side-badge" />
            <text x="46" y="38" class="side-num">1</text>

            <circle cx="114" cy="38" r="8" class="side-badge" />
            <text x="114" y="38" class="side-num">2</text>

            <circle cx="143" cy="103" r="8" class="side-badge" />
            <text x="143" y="103" class="side-num">3</text>

            <circle cx="80" cy="145" r="8" class="side-badge" />
            <text x="80" y="145" class="side-num">4</text>

            <circle cx="17" cy="103" r="8" class="side-badge" />
            <text x="17" y="103" class="side-num">5</text>
          </g>

          
          <g>
            
            <circle cx="80" cy="18" r="5" class="corner-pt" />
            <text x="80" y="18" class="corner-label">1</text>
            
            <circle cx="136" cy="68" r="5" class="corner-pt" />
            <text x="136" y="68" class="corner-label">2</text>
            
            <circle cx="136" cy="138" r="5" class="corner-pt" />
            <text x="136" y="138" class="corner-label">3</text>
            
            <circle cx="24" cy="138" r="5" class="corner-pt" />
            <text x="24" y="138" class="corner-label">4</text>
            
            <circle cx="24" cy="68" r="5" class="corner-pt" />
            <text x="24" y="68" class="corner-label">5</text>
          </g>
        </svg>
      </div>
      <div class="label-badge">
        <div class="shape-title">Pentagon</div>
        <div class="shape-desc">5 sides, 5 corners</div>
      </div>
    </div>

    
    <div class="shape-card">
      <div class="svg-wrap">
        <svg viewBox="0 0 160 160">
          
          
          <line x1="80" y1="20" x2="132" y2="50" class="stick-hexagon" />
          <line x1="80" y1="20" x2="132" y2="50" class="stick-hexagon-inner" />
          
          <line x1="132" y1="50" x2="132" y2="110" class="stick-hexagon" />
          <line x1="132" y1="50" x2="132" y2="110" class="stick-hexagon-inner" />
          
          <line x1="132" y1="110" x2="80" y2="140" class="stick-hexagon" />
          <line x1="132" y1="110" x2="80" y2="140" class="stick-hexagon-inner" />
          
          <line x1="80" y1="140" x2="28" y2="110" class="stick-hexagon" />
          <line x1="80" y1="140" x2="28" y2="110" class="stick-hexagon-inner" />
          
          <line x1="28" y1="110" x2="28" y2="50" class="stick-hexagon" />
          <line x1="28" y1="110" x2="28" y2="50" class="stick-hexagon-inner" />
          
          <line x1="28" y1="50" x2="80" y2="20" class="stick-hexagon" />
          <line x1="28" y1="50" x2="80" y2="20" class="stick-hexagon-inner" />

          
          <g>
            <circle cx="112" cy="30" r="8" class="side-badge hex" />
            <text x="112" y="30" class="side-num hex">1</text>

            <circle cx="140" cy="80" r="8" class="side-badge hex" />
            <text x="140" y="80" class="side-num hex">2</text>

            <circle cx="112" cy="130" r="8" class="side-badge hex" />
            <text x="112" y="130" class="side-num hex">3</text>

            <circle cx="48" cy="130" r="8" class="side-badge hex" />
            <text x="48" y="130" class="side-num hex">4</text>

            <circle cx="20" cy="80" r="8" class="side-badge hex" />
            <text x="20" y="80" class="side-num hex">5</text>

            <circle cx="48" cy="30" r="8" class="side-badge hex" />
            <text x="48" y="30" class="side-num hex">6</text>
          </g>

          
          <g>
            
            <circle cx="80" cy="20" r="5" class="corner-pt" />
            <text x="80" y="20" class="corner-label">1</text>
            
            <circle cx="132" cy="50" r="5" class="corner-pt" />
            <text x="132" y="50" class="corner-label">2</text>
            
            <circle cx="132" cy="110" r="5" class="corner-pt" />
            <text x="132" y="110" class="corner-label">3</text>
            
            <circle cx="80" cy="140" r="5" class="corner-pt" />
            <text x="80" y="140" class="corner-label">4</text>
            
            <circle cx="28" cy="110" r="5" class="corner-pt" />
            <text x="28" y="110" class="corner-label">5</text>
            
            <circle cx="28" cy="50" r="5" class="corner-pt" />
            <text x="28" y="50" class="corner-label">6</text>
          </g>
        </svg>
      </div>
      <div class="label-badge">
        <div class="shape-title">Hexagon</div>
        <div class="shape-desc">6 sides, 6 corners</div>
      </div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const area = document.getElementById('shapesArea');
      const bAll = document.getElementById('btnAll');
      const bSides = document.getElementById('btnSides');
      const bCorners = document.getElementById('btnCorners');

      bAll.classList.remove('active');
      bSides.classList.remove('active');
      bCorners.classList.remove('active');
      area.classList.remove('highlight-sides', 'highlight-corners');

      if (mode === 'sides') {
        bSides.classList.add('active');
        area.classList.add('highlight-sides');
      } else if (mode === 'corners') {
        bCorners.classList.add('active');
        area.classList.add('highlight-corners');
      } else {
        bAll.classList.add('active');
      }
    }
  </script>
</body>
</html>

Creating Shapes with a Given Number of Sides

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 8px;
    }
    .header-wrap {
      text-align: center;
      margin-bottom: 8px;
    }
    .header {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }
    .sub-header {
      font-size: 11.5px;
      color: #5c6f84;
      margin-top: 2px;
    }
    .cards-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
      max-width: 480px;
    }
    @media (max-width: 390px) {
      .cards-row {
        grid-template-columns: 1fr;
        max-width: 340px;
      }
    }
    .card-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      white-space: nowrap;
    }
    .badge-open {
      background: #ffe3e3;
      color: #e03131;
    }
    .badge-closed {
      background: #d3f9d8;
      color: #2b8a3e;
    }
    .svg-wrap {
      width: 100%;
      height: 116px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .stick {
      stroke-linecap: round;
      stroke-width: 9.5;
      transition: stroke-width 0.35s ease-in-out, filter 0.35s ease-in-out;
    }
    .pin {
      fill: #fcc419;
      stroke: #e67700;
      stroke-width: 2.5;
      transition: transform 0.35s ease-in-out, filter 0.35s ease-in-out;
    }
    .gap-ring {
      fill: none;
      stroke: #e03131;
      stroke-width: 2;
      stroke-dasharray: 4, 3;
      animation: pulse 1.6s infinite ease-in-out;
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 0.85; }
      50% { transform: scale(1.12); opacity: 1; }
    }
    .btn-action {
      font-size: 11.5px;
      font-weight: 600;
      padding: 6px 8px;
      border-radius: 8px;
      border: 1px solid #ced4da;
      background: #f1f3f5;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 100%;
      transition: background 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out;
    }
    .btn-action:active {
      background: #e9ecef;
    }
    .btn-action.active {
      background: #1971c2;
      color: #ffffff;
      border-color: #1864ab;
    }
    .btn-group {
      display: flex;
      gap: 6px;
      width: 100%;
    }
    .btn-group .btn-action {
      flex: 1;
      white-space: nowrap;
    }
    .count-tag {
      font-size: 10px;
      font-weight: 800;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .highlight-stick {
      stroke-width: 13.5;
      filter: drop-shadow(0 0 4px rgba(0,0,0,0.3));
    }
    .highlight-pin {
      transform: scale(1.4);
      filter: drop-shadow(0 0 4px #e67700);
    }
  </style>
</head>
<body>

  <div class="header-wrap">
    <div class="header">What Makes a Polygon?</div>
    <div class="sub-header">Compare an open figure vs. a closed shape</div>
  </div>

  <div class="cards-row">
    
    <div class="card-panel">
      <div class="badge badge-open" id="openBadge">✕ Open (Not a Shape)</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 165 110">
          
          <line x1="30" y1="88" x2="120" y2="88" stroke="#ff6b6b" class="stick" />
          
          
          <line x1="30" y1="88" x2="75" y2="20" stroke="#4dabf7" class="stick" />
          
          
          <g id="swingGroup" style="transform-origin: 75px 20px; transform: rotate(-28deg); transition: transform 380ms ease-in-out;">
            <line x1="75" y1="20" x2="120" y2="88" stroke="#51cf66" class="stick" id="swingStick" />
          </g>

          
          <circle cx="30" cy="88" r="5.5" class="pin" />
          <circle cx="75" cy="20" r="5.5" class="pin" />
          
          <circle id="snapPin" cx="120" cy="88" r="5.5" class="pin" style="opacity: 0; transition: opacity 300ms ease-in-out;" />

          
          <g id="gapIndicator" style="transition: opacity 300ms ease-in-out;">
            <g style="transform-origin: 132px 72px;">
              <circle cx="132" cy="72" r="16" class="gap-ring" />
            </g>
            <rect x="117" y="63" width="30" height="18" rx="5" fill="#ffe3e3" stroke="#fa5252" stroke-width="1.2" />
            <text x="132" y="72" font-size="9" font-weight="800" fill="#c92a2a" text-anchor="middle" dominant-baseline="central" letter-spacing="0.5">GAP!</text>
          </g>
        </svg>
      </div>
      <button class="btn-action" id="snapBtn" onclick="toggleSnap()">Snap Closed ➔</button>
    </div>

    
    <div class="card-panel">
      <div class="badge badge-closed">✓ Closed (Triangle)</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 165 110">
          
          <line id="side1" x1="30" y1="88" x2="120" y2="88" stroke="#ff6b6b" class="stick" />
          <line id="side2" x1="30" y1="88" x2="75" y2="20" stroke="#4dabf7" class="stick" />
          <line id="side3" x1="75" y1="20" x2="120" y2="88" stroke="#51cf66" class="stick" />

          
          <g id="sideLabels" style="display: none;">
            <circle cx="75" cy="88" r="7.5" fill="#e03131" />
            <text x="75" y="88" class="count-tag">1</text>

            <circle cx="48" cy="50" r="7.5" fill="#1c7ed6" />
            <text x="48" y="50" class="count-tag">2</text>

            <circle cx="102" cy="50" r="7.5" fill="#2f9e44" />
            <text x="102" y="50" class="count-tag">3</text>
          </g>

          
          <g id="pin1" style="transform-origin: 30px 88px;"><circle cx="30" cy="88" r="5.5" class="pin" /></g>
          <g id="pin2" style="transform-origin: 75px 20px;"><circle cx="75" cy="20" r="5.5" class="pin" /></g>
          <g id="pin3" style="transform-origin: 120px 88px;"><circle cx="120" cy="88" r="5.5" class="pin" /></g>

          
          <g id="cornerLabels" style="display: none;">
            <circle cx="16" cy="88" r="7.5" fill="#e67700" />
            <text x="16" y="88" class="count-tag">1</text>

            <circle cx="75" cy="8" r="7.5" fill="#e67700" />
            <text x="75" y="8" class="count-tag">2</text>

            <circle cx="134" cy="88" r="7.5" fill="#e67700" />
            <text x="134" y="88" class="count-tag">3</text>
          </g>
        </svg>
      </div>
      <div class="btn-group">
        <button class="btn-action" id="btnSides" onclick="inspectSides()">Sides (3)</button>
        <button class="btn-action" id="btnCorners" onclick="inspectCorners()">Corners (3)</button>
      </div>
    </div>
  </div>

  <script>
    let isSnapped = false;
    function toggleSnap() {
      isSnapped = !isSnapped;
      const swingGroup = document.getElementById('swingGroup');
      const gapIndicator = document.getElementById('gapIndicator');
      const snapBtn = document.getElementById('snapBtn');
      const openBadge = document.getElementById('openBadge');
      const snapPin = document.getElementById('snapPin');

      if (isSnapped) {
        swingGroup.style.transform = 'rotate(0deg)';
        gapIndicator.style.opacity = '0';
        snapPin.style.opacity = '1';
        snapBtn.textContent = 'Open Gap ↺';
        snapBtn.classList.add('active');
        openBadge.className = 'badge badge-closed';
        openBadge.textContent = '✓ Now Closed Shape';
      } else {
        swingGroup.style.transform = 'rotate(-28deg)';
        gapIndicator.style.opacity = '1';
        snapPin.style.opacity = '0';
        snapBtn.textContent = 'Snap Closed ➔';
        snapBtn.classList.remove('active');
        openBadge.className = 'badge badge-open';
        openBadge.textContent = '✕ Open (Not a Shape)';
      }
    }

    let showingSides = false;
    let showingCorners = false;

    function inspectSides() {
      showingSides = !showingSides;
      showingCorners = false;
      updateInspection();
    }

    function inspectCorners() {
      showingCorners = !showingCorners;
      showingSides = false;
      updateInspection();
    }

    function updateInspection() {
      const btnSides = document.getElementById('btnSides');
      const btnCorners = document.getElementById('btnCorners');
      const sideLabels = document.getElementById('sideLabels');
      const cornerLabels = document.getElementById('cornerLabels');

      btnSides.classList.toggle('active', showingSides);
      btnCorners.classList.toggle('active', showingCorners);

      sideLabels.style.display = showingSides ? 'inline' : 'none';
      cornerLabels.style.display = showingCorners ? 'inline' : 'none';

      ['side1', 'side2', 'side3'].forEach(id => {
        document.getElementById(id).classList.toggle('highlight-stick', showingSides);
      });

      ['pin1', 'pin2', 'pin3'].forEach(id => {
        document.getElementById(id).classList.toggle('highlight-pin', showingCorners);
      });
    }
  </script>
</body>
</html>

Sorting Things by Shape: Circles, Squares, and More

Creating and Drawing Flat Shapes

What Makes a Shape? Defining and Non-Defining Attributes

Identifying Solids in Daily Life: Cubes, Cuboids, Cylinders, and More

Composing Two-Dimensional Shapes from Other Shapes

math

Shapes All Around Us

Creating Shapes with a Given Number of Vertices

Building New Shapes from Smaller Shapes

Breaking Shapes Apart in Different Ways

Drawing Polygons on Dot Paper and Grid Paper

Using a Straightedge Ruler to Draw Shapes

Building 3D Structures with Unit Cubes and Solids

Composing, Decomposing, and Drawing Geometric Figures

从长方体表面拓印与观察长方形

从正方体表面拓印正方形

从圆柱底面描画圆形

从三棱柱模型表面找出三角形与长方形

用两个相同的直角三角形拼组新图形

用小正方形拼组长方形与大正方形

用七巧板拼出指定的几何图形

用七巧板创意拼出动物与人物图案

说出复杂组合图形各组成部分的图形名称

用小正方体积木拼搭大正方体

立体积木的创意拼搭与稳定性分析

图形的拼组与立体图形的面

Repérer visuellement des alignements

Trouver le point qui n'est pas aligné avec les autres

Vérifier si trois points sont alignés avec la règle

Placer un point dans l'alignement de deux autres

Bien tenir sa règle plate sans glisser

Tracer un trait droit à la règle entre deux points

Relier une suite de points ordonnés à la règle

Alignements de points et utilisation de la règle

Reproduire un empilement de cubes à partir d'un modèle réel

Reproduire un assemblage de solides d'après une image

Construire un cube en assemblant 6 faces carrées

Construire un pavé droit en assemblant des rectangles

Fabriquer le squelette d'un cube

Fabriquer le squelette d'un pavé droit

Comparer deux assemblages de solides

Construire et assembler des solides

Suivre les lignes du quadrillage à la règle

Tracer un carré sur papier quadrillé

Tracer un rectangle sur papier quadrillé

Tracer un triangle sur papier quadrillé

Construire un carré et un rectangle sur papier pointé

Compléter un triangle sur papier pointé

Reproduire un assemblage de figures (maison, bateau)

Tracer et reproduire des figures sur quadrillage et papier pointé

Vérifier si des points sont alignés à l'aide de la règle

Fabriquer et utiliser un gabarit d'angle droit en papier plié

Vérifier et reconnaître un angle droit avec l'équerre

Coder un angle droit avec le symbole carré

Propriétés du carré : 4 côtés égaux et 4 angles droits

Propriétés du rectangle : côtés opposés égaux et 4 angles droits

Propriétés du triangle rectangle : repérer son angle droit

Comparer et distinguer carré et rectangle

Angles droits, alignements et propriétés des quadrilatères

Repérer des alignements à l'œil nu

Découvrir la règle comme outil à bord droit

Trouver le point qui n'est pas aligné

Bien positionner ses doigts sur la règle pour tracer

Relier deux points à la règle

Prolonger un trait droit à la règle

Relier des points numérotés pour faire apparaître un dessin

Repérer les alignements et manier la règle

Construire un pavé droit avec des faces rectangulaires

Fabriquer le squelette d'un cube avec des tiges et des boules

Fabriquer le squelette d'un pavé avec des tiges et des boules

Associer une vue plane à un assemblage de solides

Tracer des segments en suivant le quadrillage

Reproduire une figure sur papier pointé (géoplan)

Compléter un carré ou un rectangle inachevé

Construire et reproduire des figures planes au CP

Tracer des segments d'une longueur donnée à la règle graduée

Prendre en main le compas et tracer des cercles

Reproduire un triangle rectangle sur quadrillage

Reproduire un carré et un rectangle sur papier quadrillé ou pointé

Construire un triangle rectangle à la règle graduée et à l'équerre

Construire un rectangle et un carré sur papier uni

Assembler des triangles pour former des figures complexes (tangram)

Assembler un carré et des triangles (la maison géométrique)

Rédiger un programme de tracé avec le vocabulaire adéquat

Vérifier et corriger un tracé géométrique

Tracés, reproductions et constructions géométriques aux instruments

Recognizing Circles and Squares

Recognizing Rectangles and Triangles

Describing 2D Shapes: Sides and Corners

Describing Shapes Using Straight, Curved, Flat, and Round

Identifying 2D Shapes in Different Orientations

Identifying 2D Shapes in Different Sizes

Modeling 2D Shapes with Sticks and Clay

Drawing and Making 2D Shapes on Geoboards

Identifying the Sorting Rule for Shapes

Two-Dimensional Shapes

Defining Triangles by Their Three Sides and Vertices

Defining Quadrilaterals: Four Sides and Four Vertices

Comparing Squares and Rectangles by Side Lengths

Recognizing Shapes in Different Sizes and Orientations

Building Shapes with Geoboards and Rubber Bands

Building Shapes with Craft Sticks and Clay Balls

Describing Shapes Using Precise Attribute Words

Guess My 2D Shape: Attribute Riddles

Classifying, Building, and Describing 2D Shapes

Point, segment et droite : vocabulaire fondamental

Reconnaître des points alignés en utilisant la règle

Placer un nouveau point aligné avec deux points donnés

Nommer le cercle/disque, le carré, le rectangle et le triangle

Compter les côtés et les sommets d'un polygone

Décrire le triangle : 3 côtés rectilignes et 3 sommets

Décrire les quadrilatères : carré et rectangle ont 4 côtés et 4 sommets

Décrire le cercle : courbe fermée et centre

Classer les figures planes : polygones et non-polygones

Géométrie plane : vocabulaire, figures fondamentales et tracés à la règle

What Is a Composite Shape?

Composing 2D Shapes to Make New Shapes

Decomposing 2D Composite Shapes

Finding Familiar Shapes Inside 2D Composite Shapes

Building 3D Composite Structures with Blocks

Decomposing 3D Composite Structures

Identifying 3D Shapes Within Built Structures

Understanding Symmetrical Shapes and Matching Halves

Finding the Line of Symmetry in 2D Shapes

Creating Symmetrical Shapes and Patterns

Composite Shapes and Symmetry

Fabriquer et utiliser un gabarit d'angle droit en papier

Vérifier si un triangle est rectangle à l'équerre

Distinguer et comparer le carré et le rectangle

Coder des segments de même longueur avec des traits repères

Distinguer carré, rectangle et losange dans une collection

Propriétés géométriques : angles droits, équerre et égalités de longueurs

OGM.2.GEO.3

Aligned learning resources

Related diagrams