<!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: center;
      width: 100%;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .diagram-area {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Ball rolling bounce animation */
    @keyframes gentleBounce {
      0%, 100% {
        transform: translateY(0px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
      }
      50% {
        transform: translateY(-24px) rotate(180deg);
        animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
      }
    }

    @keyframes shadowScale {
      0%, 100% {
        transform: scaleX(1);
        opacity: 0.25;
      }
      50% {
        transform: scaleX(0.75);
        opacity: 0.12;
      }
    }

    .bouncing-ball {
      transform-origin: 200px 240px;
      animation: gentleBounce 2.8s infinite;
      cursor: pointer;
    }

    .ball-shadow {
      transform-origin: 200px 260px;
      animation: shadowScale 2.8s infinite;
    }

    /* Subtle pulse for BELOW badge */
    @keyframes badgePulse {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(3px); }
    }

    .indicator-group {
      animation: badgePulse 2.8s ease-in-out infinite;
    }

    .interactive-hint {
      margin-top: 6px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      background: rgba(22, 163, 74, 0.1);
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid rgba(22, 163, 74, 0.25);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>
  <div class="diagram-area">
    <svg viewBox="0 0 400 300" aria-label="Visual demonstration of the word BELOW">
      <defs>
        
        <linearGradient id="tableTopGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#c89666" />
          <stop offset="100%" stop-color="#a47144" />
        </linearGradient>
        <linearGradient id="tableLegGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#8d5b32" />
          <stop offset="100%" stop-color="#b47d4c" />
        </linearGradient>
        
        <radialGradient id="redBallGrad" cx="35%" cy="35%" r="65%">
          <stop offset="0%" stop-color="#ff6b6b" />
          <stop offset="60%" stop-color="#ef4444" />
          <stop offset="100%" stop-color="#991b1b" />
        </radialGradient>
        
        <filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#16a34a" flood-opacity="0.25" />
        </filter>
      </defs>

      
      <line x1="30" y1="262" x2="370" y2="262" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round" />

      
      <rect x="95" y="118" width="14" height="144" rx="4" fill="#7c4a24" />
      <rect x="291" y="118" width="14" height="144" rx="4" fill="#7c4a24" />

      
      <ellipse class="ball-shadow" cx="200" cy="260" rx="26" ry="7" fill="#1e2945" />

      
      <g class="bouncing-ball" id="ball">
        
        <circle cx="200" cy="236" r="24" fill="url(#redBallGrad)" />
        
        <path d="M 184 219 Q 200 236 184 253" stroke="#fca5a5" stroke-width="3.5" fill="none" opacity="0.6" stroke-linecap="round" />
        <path d="M 200 212 Q 216 236 200 260" stroke="#fecaca" stroke-width="4" fill="none" opacity="0.7" stroke-linecap="round" />
        <path d="M 216 219 Q 232 236 216 253" stroke="#fca5a5" stroke-width="3.5" fill="none" opacity="0.6" stroke-linecap="round" />
        
        <ellipse cx="192" cy="225" rx="6" ry="4" fill="#ffffff" opacity="0.55" transform="rotate(-30 192 225)" />
      </g>

      
      <rect x="75" y="118" width="18" height="144" rx="4" fill="url(#tableLegGrad)" />
      <rect x="307" y="118" width="18" height="144" rx="4" fill="url(#tableLegGrad)" />

      
      <rect x="75" y="115" width="250" height="14" rx="3" fill="#8d5b32" />

      
      <rect x="50" y="98" width="300" height="20" rx="6" fill="url(#tableTopGrad)" stroke="#8d5b32" stroke-width="1.5" />
      <rect x="54" y="101" width="292" height="4" rx="2" fill="#e0b288" opacity="0.7" />

      
      <text x="200" y="85" text-anchor="middle" font-size="14" font-weight="700" fill="#64748b" letter-spacing="1">TABLE</text>

      
      <g class="indicator-group" filter="url(#softGlow)">
        
        <path d="M 200 132 L 200 182" stroke="#16a34a" stroke-width="5" stroke-linecap="round" />
        <polygon points="191,180 209,180 200,195" fill="#16a34a" />

        
        <rect x="155" y="132" width="90" height="28" rx="14" fill="#16a34a" />
        <text x="200" y="151" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="800" letter-spacing="1.5">BELOW</text>
      </g>
    </svg>

    <div class="interactive-hint">
      <span>●</span> The ball is <strong>below</strong> the table
    </div>
  </div>
</body>
</html>

Using Position Words: Above, Below, and Beside

<!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 {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #f8fafc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      user-select: none;
    }

    .scene-container {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 320px;
      background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 70%, #f1f5f9 100%);
      border-radius: 16px;
      border: 2px solid #e2e8f0;
      overflow: hidden;
    }

    /* Floor Line */
    .floor {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 70px;
      background: #eef2f6;
      border-top: 2px solid #e2e8f0;
    }

    /* Table */
    .table-wrapper {
      position: absolute;
      left: 18%;
      bottom: 50px;
      width: 46%;
      height: 110px;
      pointer-events: none;
      z-index: 5;
    }

    .table-top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 16px;
      background: #b47a46;
      border-radius: 8px;
      box-shadow: 0 3px 0 #8d5b2d, 0 6px 12px rgba(0,0,0,0.06);
    }

    .table-leg {
      position: absolute;
      top: 16px;
      width: 12px;
      height: 94px;
      background: #9d6837;
      border-radius: 0 0 4px 4px;
    }

    .table-leg.left { left: 14px; }
    .table-leg.right { right: 14px; }

    /* Interactive Item Positions */
    .item-card {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      padding: 6px;
      border-radius: 12px;
      transition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    }

    .item-card:hover {
      background-color: rgba(255, 255, 255, 0.85);
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.2);
    }

    .item-card.active {
      background-color: #ffffff;
      box-shadow: 0 0 0 2px #22b7ff, 0 6px 16px rgba(34, 183, 255, 0.25);
    }

    /* Badge */
    .badge {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.8px;
      padding: 3px 10px;
      border-radius: 20px;
      margin-top: 4px;
      color: #ffffff;
      transition: filter 0.25s ease;
    }

    /* Position 1: ABOVE */
    .pos-above {
      top: 16px;
      left: calc(41% - 44px);
    }
    .pos-above .badge {
      background: #3b82f6;
    }

    /* Position 2: BELOW */
    .pos-below {
      bottom: 24px;
      left: calc(41% - 38px);
      z-index: 6;
    }
    .pos-below .badge {
      background: #ef4444;
    }

    /* Position 3: BESIDE */
    .pos-beside {
      bottom: 34px;
      left: calc(75% - 34px);
    }
    .pos-beside .badge {
      background: #10b981;
    }

    /* Visual Elements */
    .balloon-icon {
      font-size: 40px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    }

    .ball-icon {
      font-size: 32px;
      line-height: 1;
      filter: drop-shadow(0 3px 4px rgba(0,0,0,0.15));
    }

    .bear-icon {
      font-size: 44px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
    }

    /* Button Nav Bar */
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
    }

    .nav-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .nav-btn.active-above {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 0 0 1px #3b82f6;
    }

    .nav-btn.active-beside {
      background: #ecfdf5;
      border-color: #10b981;
      color: #047857;
      box-shadow: 0 0 0 1px #10b981;
    }

    .nav-btn.active-below {
      background: #fef2f2;
      border-color: #ef4444;
      color: #b91c1c;
      box-shadow: 0 0 0 1px #ef4444;
    }
  </style>
</head>
<body>

  <div class="scene-container" id="scene">
    
    <div class="floor"></div>

    
    <div class="item-card pos-above active" id="itemAbove" onclick="selectPos('above')">
      <div class="balloon-icon">⭐</div>
      <div class="badge">ABOVE</div>
    </div>

    
    <div class="table-wrapper">
      <div class="table-top"></div>
      <div class="table-leg left"></div>
      <div class="table-leg right"></div>
    </div>

    
    <div class="item-card pos-below" id="itemBelow" onclick="selectPos('below')">
      <div class="ball-icon">🔴</div>
      <div class="badge">BELOW</div>
    </div>

    
    <div class="item-card pos-beside" id="itemBeside" onclick="selectPos('beside')">
      <div class="bear-icon">🧸</div>
      <div class="badge">BESIDE</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="nav-btn active-above" id="btnAbove" onclick="selectPos('above')">⭐ Above</button>
    <button class="nav-btn" id="btnBeside" onclick="selectPos('beside')">🧸 Beside</button>
    <button class="nav-btn" id="btnBelow" onclick="selectPos('below')">🔴 Below</button>
  </div>

  <script>
    const positions = ['above', 'beside', 'below'];

    function selectPos(pos) {
      positions.forEach(p => {
        const capitalized = p.charAt(0).toUpperCase() + p.slice(1);
        const item = document.getElementById('item' + capitalized);
        const btn = document.getElementById('btn' + capitalized);
        
        if (p === pos) {
          item.classList.add('active');
          btn.className = 'nav-btn active-' + p;
        } else {
          item.classList.remove('active');
          btn.className = 'nav-btn';
        }
      });
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spatial Concept: Above</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .scene-container {
      width: 100%;
      max-width: 350px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: relative;
    }

    /* Floating Gold Balloon */
    .balloon-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      animation: floatBalloon 3s ease-in-out infinite alternate;
      z-index: 3;
      transition: filter 0.2s ease;
    }

    .balloon-wrapper:hover {
      filter: brightness(1.08);
    }

    @keyframes floatBalloon {
      0% {
        transform: translateY(0px);
      }
      100% {
        transform: translateY(-10px);
      }
    }

    .balloon {
      width: 68px;
      height: 82px;
      background: radial-gradient(circle at 35% 28%, #fef08a 0%, #facc15 35%, #eab308 70%, #ca8a04 100%);
      border-radius: 50% 50% 50% 50% / 44% 44% 56% 56%;
      position: relative;
      box-shadow: 0 6px 16px rgba(202, 138, 4, 0.3);
    }

    .balloon::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 6px solid #ca8a04;
    }

    .balloon-shine {
      position: absolute;
      top: 12px;
      left: 14px;
      width: 14px;
      height: 24px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 50%;
      transform: rotate(-28deg);
    }

    .string {
      width: 2px;
      height: 26px;
      background: #94a3b8;
      margin-top: 2px;
    }

    /* Spatial Indicator / Arrow & Badge */
    .indicator-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      z-index: 2;
      cursor: pointer;
    }

    .arrow-up {
      width: 0;
      height: 0;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-bottom: 12px solid #0284c7;
    }

    .arrow-shaft {
      width: 4px;
      height: 14px;
      background: #0284c7;
      border-radius: 2px;
    }

    .badge-above {
      background: #0284c7;
      color: #ffffff;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 1.5px;
      padding: 5px 16px;
      border-radius: 16px;
      box-shadow: 0 3px 8px rgba(2, 132, 199, 0.3);
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .badge-above:hover {
      background: #0369a1;
      box-shadow: 0 4px 12px rgba(3, 105, 161, 0.35);
    }

    /* Wooden Table */
    .table-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 200px;
      z-index: 1;
      margin-top: 2px;
    }

    .tabletop {
      width: 100%;
      height: 14px;
      background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
      border-radius: 7px;
      box-shadow: 0 3px 6px rgba(180, 83, 9, 0.25);
    }

    .table-legs-row {
      display: flex;
      justify-content: space-between;
      width: 80%;
      height: 44px;
    }

    .table-leg {
      width: 10px;
      height: 100%;
      background: linear-gradient(180deg, #b45309 0%, #92400e 100%);
      border-radius: 0 0 3px 3px;
    }

    /* Floor Shadow directly under table feet */
    .table-shadow {
      width: 190px;
      height: 8px;
      background: radial-gradient(ellipse at center, rgba(148, 163, 184, 0.5) 0%, rgba(248, 250, 252, 0) 72%);
      margin-top: 1px;
    }

    /* Clearly separated label */
    .table-label {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      margin-top: 8px;
      letter-spacing: 0.5px;
    }

    /* Interactive Explanation Banner */
    .info-caption {
      font-size: 13px;
      font-weight: 500;
      color: #475569;
      text-align: center;
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      color: #0369a1;
      padding: 6px 14px;
      border-radius: 8px;
      margin-top: 4px;
      max-width: 290px;
      line-height: 1.3;
    }
  </style>
</head>
<body>

  <div class="scene-container">
    
    <div class="balloon-wrapper" id="balloonEl" title="Click me!">
      <div class="balloon">
        <div class="balloon-shine"></div>
      </div>
      <div class="string"></div>
    </div>

    
    <div class="indicator-area" id="indicatorEl" title="Click to learn more">
      <div class="arrow-up"></div>
      <div class="arrow-shaft"></div>
      <div class="badge-above">ABOVE</div>
    </div>

    
    <div class="table-wrapper">
      <div class="tabletop"></div>
      <div class="table-legs-row">
        <div class="table-leg"></div>
        <div class="table-leg"></div>
      </div>
      <div class="table-shadow"></div>
      <div class="table-label">Table</div>
    </div>

    
    <div class="info-caption" id="captionText">
      The golden balloon is <strong>above</strong> the table.
    </div>
  </div>

  <script>
    const balloon = document.getElementById('balloonEl');
    const indicator = document.getElementById('indicatorEl');
    const caption = document.getElementById('captionText');

    const phrases = [
      "The golden balloon is <strong>above</strong> the table.",
      "Higher up! 'Above' means at a higher place.",
      "Look up: the balloon floats right over the table!"
    ];
    let phraseIndex = 0;

    function triggerInteraction() {
      phraseIndex = (phraseIndex + 1) % phrases.length;
      caption.innerHTML = phrases[phraseIndex];
    }

    balloon.addEventListener('click', triggerInteraction);
    indicator.addEventListener('click', triggerInteraction);
  </script>
</body>
</html>

Exploring Personal Space and Body Orientation

Using Over, Under, Above, and Below

Using In Front Of and Behind

Using Inside, Outside, and Between

Using Next To, Beside, and Near

Distinguishing Left and Right from Own Viewpoint

Distinguishing Left and Right from Another Viewpoint

math

Foundational Positional Language and Direction

Understanding Above and Below

Understanding Top, Middle, and Bottom

Describing Positions In Front Of and Behind

Describing Positions Inside and Outside

Using Beside, Next To, and Between

Describing Movement Over, Under, and Through

Moving Forward and Backward

Exploring Left and Right Turns

Following a Multi-Step Path on a Grid

Programming Simple Routes with Programmable Toys

Position, Direction, and Spatial Movement

Using Position Words: In Front, Behind, and Between

Using Position Words: Inside, Outside, and Under

Using Left and Right Directions

Moving Forward, Backward, Left, and Right

Navigating Pathways and Grid Maps

Positional Language, Spatial Directions, and Navigation

Using Spatial Terms to Describe Shapes

Comparing Relative Distances: Near, Far, Closer, Further

Describing Positions in a Line: First, Middle, Last

Identifying Objects from Different Perspectives

Following Multi-Step Positional Instructions

Describing Layouts of Familiar Environments

Creating Physical Models of Immediate Spaces

Solving Spatial Position Puzzles

Spatial Reasoning, Perspectives, and Layouts

Giving Straight-Line Movement Directions

Giving Turn Instructions: Left and Right

Following a Sequence of Movement Steps

Recording Routes Using Symbols and Arrows

Navigating Simple Mazes and Obstacle Courses

Introducing the Four Cardinal Compass Directions

Navigating Using Cardinal Directions

Introducing the Eight-Point Compass

Directions, Turns, and Compass Basics

Reading Simple Pictorial Maps

Drawing Bird's-Eye View Maps of the Classroom

Tracking Paths on Square Grid Boards

Comparing Shortest and Alternate Routes

Writing Step-by-Step Treasure Hunt Clues

Troubleshooting and Debugging Incorrect Directions

Simple Maps, Grids, and Route Planning

Reading Alphanumeric Grid References

Plotting Items Using Alphanumeric Grids

Identifying Grid Intersections: Points vs Squares

Introducing the First Quadrant Coordinate Plane

Reading Coordinates in the First Quadrant

Plotting Points in the First Quadrant

Connecting Coordinates to Draw Geometric Shapes

Introduction to Grids and First Quadrant Coordinates

Reading Everyday Safety and Community Signs

Using Classroom Visual Schedules to Plan the Day

Interpreting Weather Charts to Make Clothing Choices

Using Visual Lunch Menus and Choice Boards

Using Signposts and Pictorial Maps to Find Locations

Making Fair Decisions Using Survey Charts

Signs, Charts, and Daily Decision Making

Understanding the Three Rules of Three-Figure Bearings

Measuring Three-Figure Bearings with a Protractor

Drawing Journeys Using Bearings and Distances

Calculating Back Bearings and Return Journeys

Interpreting Map Scales as Ratios and Words

Calculating Real-World Distances from Scale Drawings

Calculating Drawing Lengths from Real-World Measurements

Creating an Accurate Scale Floor Plan of a Room

Solving Navigation Problems Using Scale and Bearings

Triangulating a Position Using Two Known Bearings

Bearings, Maps, and Scale Drawings

Introducing Negative Numbers on Coordinate Axes

The Four Quadrants of the Coordinate Plane

Reading Points Across All Four Quadrants

Plotting Points in All Four Quadrants

Finding Missing Vertices of Rectangles on the Plane

Calculating Horizontal and Vertical Distances on Grids

Solving Problems with Shape Vertices on the Coordinate Plane

The Four-Quadrant Coordinate Plane and Coordinate Geometry

Identifying Left and Right From Own Perspective

Understanding Clockwise and Counterclockwise Turns

Exploring Half Turns and Full Turns

Connecting Quarter Turns to Right Angles

Positional Language, Turns, and Angles

Understanding What a Scale Means

Reading Simple Unit Scales on Maps

Using Bar Scales and Rulers to Find Distances

Creating and Interpreting Scaled Maps with Grid References

Drawing Simple Scale Plans on Squared Paper

Reading and Creating Scale Drawings and Maps

Understanding Scale Factors in Shape Enlargement

Enlarging Shapes on a Grid by Integer Scale Factors

Identifying Corresponding Sides and Angles in Enlargements

Calculating Scale Factors Between Similar Shapes

Enlarging Shapes from a Centre of Enlargement

Analysing How Perimeter Changes Under Enlargement

Analysing How Area Changes Under Enlargement

Fractional Scale Factors and Reductions

Solving Real-World Scale and Model Problems

Geometric Enlargements and Similar Shapes

Reviewing Coordinates in the First Quadrant

Introducing the Four-Quadrant Cartesian Coordinate System

Plotting Points with Positive and Negative Coordinates

Plotting Coordinates with Decimals and Fractions

Drawing 2D Polygons from Coordinate Vertex Lists

Finding Missing Vertices of Rectangles, Parallelograms, and Squares

Finding Midpoints of Line Segments on a Coordinate Grid

Mastering the Four-Quadrant Coordinate Plane

Following a Sequence of Directional Instructions

Giving Clear Verbal Directions to a Partner

Recording Routes Using Directional Arrows and Symbols

Programming Simple Routes With Programmable Toys

Identifying North, South, East, and West

Navigating, Recording, and Programming Routes

Understanding Rows and Columns

Locating Items in a 2x2 Grid

Reading Letter and Number Grid Coordinates

Placing Objects at Specific Grid References

Reading Pictorial Treasure Maps

Using Grid Systems in Classroom Cubbies and Seating

Playing Simple Grid Reference Games

Creating Your Own Grid Map With Symbols

Describing Moves Between Grid Squares

Grid References and Everyday Maps

Translating Shapes on a Coordinate Plane Using Vectors

Reflecting Shapes Across the X-Axis and Y-Axis

Reflecting Shapes Across Diagonal Lines Like y = x

Rotating Shapes About the Origin by 90 and 180 Degrees

Transformations on the Coordinate Plane

The Four Cardinal Points and Right-Angle Turns

The Eight-Point Compass and 45-Degree Angles

The Sixteen-Point Compass and 22.5-Degree Divisions

Following and Giving Multi-Step Compass Route Directions

Programming Robot Movements with Precise Angles and Distances

Coding Geometric Shapes with Turtle Graphics and Turn Angles

Introduction to Three-Figure Bearings from North

Measuring Three-Figure Bearings on a Map with a Protractor

Drawing Paths Using Specified Bearings and Lengths

Calculating Back Bearings for Return Journeys

Simulating Search and Rescue Routes Using Digital Mapping

Compass Directions, Bearings, and Routes

Understanding Why and Where Scale Is Used

Interpreting Simple Grid Scale: One Square Equals One Unit

Reading and Using Word Scales Such as 1 cm to 10 m

Calculating Actual Distances from Map Measurements

Calculating Drawing Lengths Given Actual Real-World Sizes

Interpreting Ratio Scales: 1:100, 1:500, and 1:1000

Reading and Interpreting Architectural Floor Plans

Drawing an Accurate Scale Plan of a Bedroom or Classroom

Interpreting Graphic Bar Scales on Hiking and Topographic Maps

Interpreting Scale Models of Vehicles and Buildings

Comparing Different Map Scales: Large-Scale vs. Small-Scale Maps

Scale Drawings, Maps, and Plans

Naming and Navigating the Four Quadrants and Axes

Plotting Points with Positive and Negative Integers

Plotting Points with Fractional and Decimal Coordinates

Calculating Horizontal and Vertical Distances Between Points

Finding Midpoints of Horizontal and Vertical Segments

Finding the Midpoint of Any Line Segment in Four Quadrants

Finding an Endpoint Given One Endpoint and the Midpoint

Plotting and Classifying 2D Polygons in Four Quadrants

Finding Missing Vertices of Rectangles, Parallelograms, and Rhombuses

Calculating Areas of Shapes Plotted on a Coordinate Grid

Solving Coordinate Geometry Puzzles and Game Boards

The Four-Quadrant Coordinate System

Understanding Grid Coordinates: (x, y) Ordered Pairs

Plotting and Reading Points in the First Quadrant

Drawing Polygons by Joining Coordinate Vertices in Quadrant One

Finding Missing Vertices of Rectangles and Squares on a Grid

Extending to Four Quadrants: Positive and Negative Axes

Plotting Coordinates with Negative Numbers in All Four Quadrants

Plotting and Classifying Shapes Across the Four Quadrants

Translating Shapes on a Coordinate Grid: Left, Right, Up, Down

Reflecting Shapes Across the X-Axis and Y-Axis on Grids

Plotting Points with Half-Unit and Decimal Coordinates

Coordinate Geometry Mystery Picture Challenges

The Coordinate System and Grid Navigation

Translating Shapes Using Column Vectors

Determining the Translation Vector Between Original and Image

Reflecting Points and Shapes Across the x-Axis and y-Axis

Reflecting Shapes Across Vertical and Horizontal Mirror Lines

Reflecting Shapes Across Diagonal Lines y = x and y = -x

Identifying the Equation of a Mirror Line from a Reflection

Rotating Shapes About the Origin by 90, 180, and 270 Degrees

Rotating Shapes About Any Given Center of Rotation

Finding the Center and Angle of Rotation from Diagrams

Translations, Reflections, and Rotations on Coordinate Grids

Enlarging Shapes from the Origin with Positive Scale Factors

Enlarging Shapes from Any Given Center of Enlargement

Enlarging Shapes with Fractional Scale Factors

Enlarging Shapes with Negative Scale Factors

Enlargements and Advanced Transformations

OGM.1.G.1

Aligned learning resources

Related diagrams