<!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="460:420">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      overflow: hidden;
    }
    .svg-container {
      width: 100%;
      max-width: 460px;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      user-select: none;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
    }
    .axis {
      stroke: #64748b;
      stroke-width: 2;
      stroke-linecap: round;
    }
    .tick-label {
      font-size: 13px;
      fill: #64748b;
      font-weight: 500;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    .axis-label {
      font-size: 15px;
      font-weight: 700;
      fill: #334155;
      font-style: italic;
    }
    .point-label {
      font-size: 14px;
      font-weight: 700;
      fill: #0f172a;
    }
    .badge-bg {
      filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.08));
    }
    .badge-text-blue {
      font-size: 13px;
      font-weight: 700;
      fill: #2563eb;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .badge-text-green {
      font-size: 13px;
      font-weight: 700;
      fill: #16a34a;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .badge-text-red {
      font-size: 13px;
      font-weight: 700;
      fill: #dc2626;
      text-anchor: middle;
      dominant-baseline: central;
    }
  </style>
</head>
<body>

<div class="svg-container">
  <svg viewBox="0 0 460 420" role="img" aria-label="Coordinate plane showing right triangle formed by points A(1, 2) and B(5, 5) to calculate distance">
    <defs>
      
      <marker id="arrow-x" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#64748b"/>
      </marker>
      <marker id="arrow-y" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#64748b"/>
      </marker>
    </defs>

    
    
    <g class="grid-line">
      <line x1="65" y1="360" x2="65" y2="25" />
      <line x1="120" y1="360" x2="120" y2="25" />
      <line x1="175" y1="360" x2="175" y2="25" />
      <line x1="230" y1="360" x2="230" y2="25" />
      <line x1="285" y1="360" x2="285" y2="25" />
      <line x1="340" y1="360" x2="340" y2="25" />
      <line x1="395" y1="360" x2="395" y2="25" />

      
      <line x1="65" y1="360" x2="425" y2="360" />
      <line x1="65" y1="305" x2="425" y2="305" />
      <line x1="65" y1="250" x2="425" y2="250" />
      <line x1="65" y1="195" x2="425" y2="195" />
      <line x1="65" y1="140" x2="425" y2="140" />
      <line x1="65" y1="85" x2="425" y2="85" />
      <line x1="65" y1="30" x2="425" y2="30" />
    </g>

    
    
    <line class="axis" x1="50" y1="360" x2="432" y2="360" marker-end="url(#arrow-x)" />
    
    <line class="axis" x1="65" y1="375" x2="65" y2="18" marker-end="url(#arrow-y)" />

    
    <text class="axis-label" x="438" y="365">x</text>
    <text class="axis-label" x="65" y="12" text-anchor="middle">y</text>

    
    
    <text class="tick-label" x="52" y="375">0</text>
    <text class="tick-label" x="120" y="378">1</text>
    <text class="tick-label" x="175" y="378">2</text>
    <text class="tick-label" x="230" y="378">3</text>
    <text class="tick-label" x="285" y="378">4</text>
    <text class="tick-label" x="340" y="378">5</text>
    <text class="tick-label" x="395" y="378">6</text>

    
    <text class="tick-label" x="48" y="305">1</text>
    <text class="tick-label" x="48" y="250">2</text>
    <text class="tick-label" x="48" y="195">3</text>
    <text class="tick-label" x="48" y="140">4</text>
    <text class="tick-label" x="48" y="85">5</text>
    <text class="tick-label" x="48" y="30">6</text>

    
    <polygon points="120,250 340,250 340,85" fill="#3b82f6" fill-opacity="0.1" />

    
    <path d="M 326 250 L 326 236 L 340 236" fill="none" stroke="#64748b" stroke-width="1.75" />

    
    
    <line x1="120" y1="250" x2="340" y2="250" stroke="#2563eb" stroke-width="3" stroke-dasharray="6,4" />

    
    <line x1="340" y1="250" x2="340" y2="85" stroke="#16a34a" stroke-width="3" stroke-dasharray="6,4" />

    
    <line x1="120" y1="250" x2="340" y2="85" stroke="#dc2626" stroke-width="3.5" stroke-linecap="round" />

    
    <circle cx="120" cy="250" r="5" fill="#0f172a" />
    <circle cx="340" cy="85" r="5" fill="#0f172a" />

    
    <text class="point-label" x="110" y="236" text-anchor="end">A(1, 2)</text>
    <text class="point-label" x="350" y="76" text-anchor="start">B(5, 5)</text>

    
    
    <g transform="translate(230, 280)">
      <rect class="badge-bg" x="-58" y="-13" width="116" height="26" rx="13" fill="#ffffff" stroke="#2563eb" stroke-width="1.5" />
      <text class="badge-text-blue" x="0" y="0">|x₂ − x₁| = 4</text>
    </g>

    
    <g transform="translate(398, 168)">
      <rect class="badge-bg" x="-54" y="-13" width="108" height="26" rx="13" fill="#ffffff" stroke="#16a34a" stroke-width="1.5" />
      <text class="badge-text-green" x="0" y="0">|y₂ − y₁| = 3</text>
    </g>

    
    <g transform="translate(216, 152) rotate(-36.87)">
      <rect class="badge-bg" x="-60" y="-14" width="120" height="28" rx="14" fill="#ffffff" stroke="#dc2626" stroke-width="1.75" />
      <text class="badge-text-red" x="0" y="0">d (hypotenuse)</text>
    </g>
  </svg>
</div>

</body>
</html>

Calculating Distances Between Points on a Coordinate Plane

直方体を知る — 長方形（または正方形）で囲まれた立体

立方体を知る — 合同な正方形だけで囲まれた立体

直方体と立方体の構成要素 — 面・辺・頂点の数と特徴の比較

直方体を作る

math

直方体と立方体の特徴と構成要素

Finding the Gradient of a Line Segment

Gradient Formula from Two Points

Types of Gradient: Positive, Negative, Zero and Undefined

Finding the Midpoint of a Line Segment

Midpoint Formula from Two Points

Finding Distance Between Two Points Using Pythagoras

Distance Formula Between Two Points

Applying Gradient, Midpoint and Distance to Problems

Coordinate Geometry: Gradient, Midpoint and Distance

面と面の垂直 — 隣り合う面の交わり方

面と面の平行・垂直

直線と面の平行・垂直

空間における直線と直線の垂直・平行とねじれの位置の気づき

身の回りを図形的に見る

直方体における直線と面の位置関係

見取図の仕組みとかき方 — 見える辺と見えない辺（点線）

方眼紙を使った直方体と立方体の見取図の作図

立方体の展開図 — 11種類の展開図と向かい合う面の見つけ方

直方体の展開図の作図 — 合同な3組の長方形の配置

展開図における辺と頂点の対応関係の探究

立体の見取図と展開図の作図と探究

平面上の位置を数で表す

方眼や地図を使った位置の特定と宝探し問題

空間における位置の表し方 — 横・縦・高さの3つの組

位置の表し方の活用 — 座席表・チェス盤・空間ゲーム

平面と空間における位置の表し方

Interpretación geométrica de la multiplicación algebraica

Cuadrado de la suma y de la diferencia de un binomio

Producto de la suma por la diferencia de dos cantidades

Producto de dos binomios con un término común

Cubo de la suma y de la diferencia de un binomio

Triángulo de Pascal y teorema del binomio

Productos notables y teorema del binomio

Rigid Plane Motions: Translations, Reflections, and Rotations

Line Symmetry, Rotational Symmetry, and Point Symmetry

Translations, Reflections, and Rotations on the Coordinate Plane

Homothetic Dilations and Scale Factors from a Center

Compositions of Transformations and Glide Reflections

Transformations, Symmetries, and Dilations in the Plane

Midpoint and Internal Division Section Formulas

Conditions for Parallel and Perpendicular Lines Using Slopes

Computing Areas of Triangles Using Coordinates

Proving Points Lie on a Circle Using Coordinates

Three-Figure Bearings and Distance Coordinates in Navigation

Orthographic Projections: Plans, Front, and Side Elevations

Analyzing Nets and Surface Topologies of 3D Polyhedra

Coordinate Geometry, Bearings, and Spatial Representations

Factorización de suma y diferencia de potencias iguales impares

Factorización por evaluación y regla de Ruffini

Estrategia general para la combinación de casos de factorización

Aplicación de la factorización al cálculo de áreas y volúmenes

Factorización avanzada y aplicaciones

Concepto de relación y definición formal de función

Geometría analítica: plano cartesiano

Dominio, codominio y rango de una función

Representación gráfica de funciones

Fundamentos de funciones y plano cartesiano

Razón de cambio constante y concepto de pendiente

Clasificación de pendientes: positiva, negativa, cero e indefinida

Función lineal directa y proporcionalidad (y = mx)

Función afín y ecuación pendiente-intercepto (y = mx + b)

Ecuación punto-pendiente de la recta

Ecuación de la recta que pasa por dos puntos

Forma general de la ecuación de la recta (Ax + By + C = 0)

Rectas paralelas y perpendiculares: criterio de pendientes

Interceptos con los ejes coordenados

Modelado de costos, tarifas y planes de pago con funciones afines

Función lineal y afín: ecuaciones de la recta

投影的概念：投影线、投影面与投影物

平行投影与正投影的性质与特征

中心投影的性质：点光源下的影子长短与盲区分析

三视图的概念：主视图、左视图与俯视图的投影原理

直棱柱与正棱锥的三视图规范绘制（含可见轮廓与虚线）

圆柱、圆锥与球的三视图规范绘制

简单组合体与小正方体搭建物的三视图分析与判断

由三视图描述还原几何体并计算表面积与体积

工程制图、零件加工与建筑设计中的视图实际应用

投影与三视图的认识与绘制

正方体的 11 种平面展开图辨析与“相对面”判别规律

直棱柱的侧面展开图与全表面展开图

圆柱的侧面展开图与长宽对应关系推算

圆锥的侧面展开图：扇形圆心角、母线与底面半径关系

根据展开图设计、裁剪与粘合制作立体几何体实体模型

利用展开图解决立体表面两点间“最短路径”蚂蚁爬行问题

包装盒设计、钣金加工与工业制造中的展开图用料优化

立体图形的展开图、模型制作与空间重构

平面上确定位置的方法与有序数对的概念

平面直角坐标系的概念：x轴、y轴、原点与四个象限

点的坐标确定与由坐标描点（横坐标与纵坐标）

各象限及坐标轴上点的坐标正负符号特征规律

平行于坐标轴的直线上点的坐标特征与距离公式

在实际生活情境中建立适当的平面直角坐标系描述物体位置

给定正方形等几何图形的坐标系选择与顶点坐标表达

运用方位角和距离刻画两个物体的相对位置（极坐标初步）

坐标平面内几何图形面积的计算：割补法与铅垂高模型

平面直角坐标系的建立与位置确定

关于 x 轴和 y 轴对称的点的坐标变化规律

关于原点对称（中心对称）的点的坐标变化规律

以坐标轴为对称轴的多边形对称图形绘制与顶点坐标变换

沿单一坐标轴方向平移时点的坐标变化规律（“左减右加，上加下减”）

多边形沿坐标轴方向平移一定距离后图形的顶点坐标确定

多边形依次沿两个坐标轴方向平移后的复合平移关系与顶点坐标

以原点为位似中心时坐标按倍数放缩与位似图形的生成

图形与坐标单元体系总结与尺规作图前瞻衔接

图形的运动与坐标变换规律

Conceptos de congruencia y figuras geométricas congruentes

Criterios de congruencia de triángulos: LAL, ALA, LLL y LLA

Demostraciones geométricas básicas con triángulos congruentes

Concepto de semejanza y razón de proporcionalidad

Criterios de semejanza de triángulos: AA, LLL y LAL

Teorema de Tales: segmentos proporcionales entre paralelas

Aplicaciones del teorema de Tales: medición indirecta de alturas

Congruencia y semejanza de triángulos con el teorema de Tales

Teorema de Pitágoras: demostración geométrica y algebraica

Cálculo de hipotenusa y catetos en triángulos rectángulos

Recíproco del teorema de Pitágoras y clasificación de triángulos

Resolución de problemas contextualizados con Pitágoras

Teoremas de las alturas y del cateto en el triángulo rectángulo

Razones trigonométricas en el triángulo rectángulo: seno, coseno y tangente

Cálculo de lados y ángulos usando trigonometría

Problemas de ángulos de elevación y de depresión

Geometría del triángulo rectángulo: Pitágoras, relaciones métricas y trigonometría

OGM.10.GEO.8

Aligned learning resources

Related diagrams