<!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: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .stepper {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 640px;
    }
    .step-btn {
      flex: 1;
      padding: 7px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
    }

    .panels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 640px;
    }
    @media (max-width: 520px) {
      .panels {
        grid-template-columns: 1fr;
        gap: 14px;
      }
    }

    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0 2px;
    }
    .tag {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 999px;
      letter-spacing: 0.2px;
    }
    .tag-up { background: #dcfce7; color: #15803d; }
    .tag-down { background: #fee2e2; color: #b91c1c; }

    .graph-wrap {
      width: 100%;
      aspect-ratio: 4 / 3;
      max-height: 190px;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .math-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 13px;
    }

    .formula-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-weight: 600;
      min-height: 38px;
    }
    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      padding: 0 4px;
    }
    .numerator {
      border-bottom: 1.5px solid #1e293b;
      padding-bottom: 1px;
      width: 100%;
      text-align: center;
    }
    .denominator {
      padding-top: 1px;
      width: 100%;
      text-align: center;
    }

    .highlight-rise { color: #16a34a; font-weight: 700; }
    .highlight-fall { color: #dc2626; font-weight: 700; }
    .highlight-run { color: #0284c7; font-weight: 700; }
    .result-badge {
      font-size: 14px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .res-up { background: #dcfce7; color: #15803d; }
    .res-down { background: #fee2e2; color: #b91c1c; }

    /* Visual toggles per step */
    .fade-item {
      transition: opacity 0.3s ease;
    }
    .dimmed { opacity: 0.15; }
    .hidden { opacity: 0; pointer-events: none; }
  </style>
</head>
<body>

  
  <div class="stepper">
    <button class="step-btn active" onclick="setStep(0)">1. Points</button>
    <button class="step-btn" onclick="setStep(1)">2. Rise &amp; Run</button>
    <button class="step-btn" onclick="setStep(2)">3. Slope Formula</button>
  </div>

  
  <div class="panels">

    
    <div class="panel">
      <div class="panel-header">
        <span style="font-weight:700; font-size:13px; color:#0f172a;">Left Plot</span>
        <span class="tag tag-up">m = +2 (Uphill) ↗</span>
      </div>

      <div class="graph-wrap">
        <svg viewBox="0 0 240 180" aria-label="Positive slope graph">
          <defs>
            <pattern id="gridL" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#e2e8f0" stroke-width="1" />
            </pattern>
          </defs>
          <rect x="20" y="10" width="200" height="150" fill="url(#gridL)" />

          
          <line x1="20" y1="160" x2="220" y2="160" stroke="#94a3b8" stroke-width="1.5" />
          <line x1="20" y1="10" x2="20" y2="160" stroke="#94a3b8" stroke-width="1.5" />

          
          
          <g id="leftTriangle" class="fade-item hidden">
            
            <line x1="60" y1="130" x2="140" y2="130" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="4,3" />
            <text x="100" y="146" fill="#0284c7" font-size="12" font-weight="700" text-anchor="middle">+4 Run</text>

            
            <line x1="140" y1="130" x2="140" y2="50" stroke="#16a34a" stroke-width="2.5" stroke-dasharray="4,3" />
            <text x="148" y="93" fill="#16a34a" font-size="12" font-weight="700" text-anchor="start">+8 Rise</text>
          </g>

          
          <line x1="40" y1="150" x2="160" y2="30" stroke="#15803d" stroke-width="3" stroke-linecap="round" />

          
          
          <circle cx="60" cy="130" r="5" fill="#15803d" stroke="#ffffff" stroke-width="1.5" />
          <text x="54" y="124" fill="#0f172a" font-size="11" font-weight="700" text-anchor="end">(2, 3)</text>

          
          <circle cx="140" cy="50" r="5" fill="#15803d" stroke="#ffffff" stroke-width="1.5" />
          <text x="134" y="44" fill="#0f172a" font-size="11" font-weight="700" text-anchor="end">(6, 11)</text>
        </svg>
      </div>

      <div class="math-card">
        <div class="formula-row" id="leftMath">
          
        </div>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-header">
        <span style="font-weight:700; font-size:13px; color:#0f172a;">Right Plot</span>
        <span class="tag tag-down">m = -2 (Downhill) ↘</span>
      </div>

      <div class="graph-wrap">
        <svg viewBox="0 0 240 180" aria-label="Negative slope graph">
          <defs>
            <pattern id="gridR" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#e2e8f0" stroke-width="1" />
            </pattern>
          </defs>
          <rect x="20" y="10" width="200" height="150" fill="url(#gridR)" />

          
          
          <line x1="20" y1="95" x2="220" y2="95" stroke="#94a3b8" stroke-width="1.5" />
          <line x1="76" y1="10" x2="76" y2="160" stroke="#94a3b8" stroke-width="1.5" />

          
          
          <g id="rightTriangle" class="fade-item hidden">
            
            <line x1="50" y1="35" x2="154" y2="35" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="4,3" />
            <text x="102" y="27" fill="#0284c7" font-size="12" font-weight="700" text-anchor="middle">+4 Run</text>

            
            <line x1="154" y1="35" x2="154" y2="139" stroke="#dc2626" stroke-width="2.5" stroke-dasharray="4,3" />
            <text x="162" y="90" fill="#dc2626" font-size="12" font-weight="700" text-anchor="start">-8 Fall</text>
          </g>

          
          <line x1="37" y1="22" x2="167" y2="152" stroke="#b91c1c" stroke-width="3" stroke-linecap="round" />

          
          
          <circle cx="50" cy="35" r="5" fill="#b91c1c" stroke="#ffffff" stroke-width="1.5" />
          <text x="44" y="48" fill="#0f172a" font-size="11" font-weight="700" text-anchor="end">(-1, 5)</text>

          
          <circle cx="154" cy="139" r="5" fill="#b91c1c" stroke="#ffffff" stroke-width="1.5" />
          <text x="160" y="148" fill="#0f172a" font-size="11" font-weight="700" text-anchor="start">(3, -3)</text>
        </svg>
      </div>

      <div class="math-card">
        <div class="formula-row" id="rightMath">
          
        </div>
      </div>
    </div>

  </div>

  <script>
    let currentStep = 0;

    const leftContent = [
      `<span>Points: <b style="color:#0f172a;">(2, 3)</b> &amp; <b style="color:#0f172a;">(6, 11)</b></span>`,
      `<span><span class="highlight-rise">+8 Rise</span> over <span class="highlight-run">+4 Run</span></span>`,
      `<span>m = </span>
       <div class="fraction">
         <span class="numerator highlight-rise">11 − 3</span>
         <span class="denominator highlight-run">6 − 2</span>
       </div>
       <span>=</span>
       <div class="fraction">
         <span class="numerator highlight-rise">+8</span>
         <span class="denominator highlight-run">+4</span>
       </div>
       <span>=</span>
       <span class="result-badge res-up">+2</span>`
    ];

    const rightContent = [
      `<span>Points: <b style="color:#0f172a;">(-1, 5)</b> &amp; <b style="color:#0f172a;">(3, -3)</b></span>`,
      `<span><span class="highlight-fall">-8 Fall</span> over <span class="highlight-run">+4 Run</span></span>`,
      `<span>m = </span>
       <div class="fraction">
         <span class="numerator highlight-fall">-3 − 5</span>
         <span class="denominator highlight-run">3 − (-1)</span>
       </div>
       <span>=</span>
       <div class="fraction">
         <span class="numerator highlight-fall">-8</span>
         <span class="denominator highlight-run">+4</span>
       </div>
       <span>=</span>
       <span class="result-badge res-down">-2</span>`
    ];

    function setStep(idx) {
      currentStep = idx;

      // Update button states
      const btns = document.querySelectorAll('.step-btn');
      btns.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      // Update slope triangles visibility
      const leftTri = document.getElementById('leftTriangle');
      const rightTri = document.getElementById('rightTriangle');

      if (idx === 0) {
        leftTri.classList.add('hidden');
        rightTri.classList.add('hidden');
      } else {
        leftTri.classList.remove('hidden');
        rightTri.classList.remove('hidden');
      }

      // Update math formulas
      document.getElementById('leftMath').innerHTML = leftContent[idx];
      document.getElementById('rightMath').innerHTML = rightContent[idx];
    }

    // Initialize
    setStep(0);
  </script>
</body>
</html>

Calculating Slope Between Two Points Using the Slope Formula

<!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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 8px;
      min-height: 100vh;
    }

    .slope-comparison {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 600px;
    }

    @media (max-width: 460px) {
      .slope-comparison {
        grid-template-columns: 1fr;
        gap: 18px;
      }
    }

    .slope-column {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
    }

    .badge {
      font-size: 13px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.2px;
    }

    .badge-zero {
      background: #dcfce7;
      color: #15803d;
    }

    .badge-undef {
      background: #fee2e2;
      color: #e63946;
    }

    .graph-container {
      width: 100%;
      aspect-ratio: 4 / 3;
      max-height: 190px;
      position: relative;
    }

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

    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
      stroke-dasharray: 2 2;
    }

    .axis {
      stroke: #64748b;
      stroke-width: 1.5;
    }

    .axis-arrow {
      fill: #64748b;
    }

    .axis-label {
      font-size: 11px;
      font-weight: 600;
      fill: #64748b;
      font-family: inherit;
    }

    .line-zero {
      stroke: #10b981;
      stroke-width: 3.5;
      stroke-linecap: round;
    }

    .line-undef {
      stroke: #e63946;
      stroke-width: 3.5;
      stroke-linecap: round;
    }

    .cliff-fill {
      fill: #fee2e2;
      opacity: 0.55;
    }

    .math-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 600;
      text-align: center;
    }

    .formula-row {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 14px;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      font-size: 13px;
      line-height: 1.1;
    }

    .fraction-top {
      border-bottom: 1.5px solid #1e2945;
      padding: 0 4px 1px 4px;
      font-weight: 700;
    }

    .fraction-bottom {
      padding: 1px 4px 0 4px;
      font-weight: 700;
    }

    .text-zero {
      color: #15803d;
    }

    .text-undef {
      color: #e63946;
    }

    .sub-note {
      font-size: 11.5px;
      color: #e63946;
      font-weight: 600;
    }

    /* Stick figure walking on flat ground: smooth, slow, no flicker */
    .stick-walker {
      animation: walkFlat 5s ease-in-out infinite alternate;
    }

    @keyframes walkFlat {
      0% {
        transform: translate(40px, 40px);
      }
      100% {
        transform: translate(160px, 40px);
      }
    }

    /* Stick figure sheer drop: smooth multi-second cycle without flashing */
    .stick-dropper {
      animation: cliffDrop 5s ease-in-out infinite;
    }

    @keyframes cliffDrop {
      0% {
        transform: translate(108px, 20px);
        opacity: 0;
      }
      15% {
        transform: translate(108px, 20px);
        opacity: 1;
      }
      35% {
        transform: translate(108px, 20px) rotate(0deg);
        opacity: 1;
      }
      65% {
        transform: translate(108px, 125px) rotate(15deg);
        opacity: 1;
      }
      80% {
        transform: translate(108px, 125px) rotate(15deg);
        opacity: 1;
      }
      92%, 100% {
        transform: translate(108px, 125px) rotate(15deg);
        opacity: 0;
      }
    }

    .stick-figure {
      stroke: #1e2945;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .stick-head {
      fill: #1e2945;
      stroke: #1e2945;
    }
  </style>
</head>
<body>

  <div class="slope-comparison">
    
    <div class="slope-column">
      <span class="badge badge-zero">Zero Slope</span>

      <div class="graph-container">
        <svg viewBox="0 0 220 160">
          <defs>
            <marker id="arrow" 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" class="axis-arrow" />
            </marker>
          </defs>

          
          <line x1="30" y1="20" x2="200" y2="20" class="grid-line" />
          <line x1="30" y1="50" x2="200" y2="50" class="grid-line" />
          <line x1="30" y1="80" x2="200" y2="80" class="grid-line" />
          <line x1="30" y1="110" x2="200" y2="110" class="grid-line" />

          <line x1="60" y1="15" x2="60" y2="140" class="grid-line" />
          <line x1="100" y1="15" x2="100" y2="140" class="grid-line" />
          <line x1="140" y1="15" x2="140" y2="140" class="grid-line" />
          <line x1="180" y1="15" x2="180" y2="140" class="grid-line" />

          
          <line x1="30" y1="140" x2="210" y2="140" class="axis" marker-end="url(#arrow)" />
          <line x1="30" y1="140" x2="30" y2="10" class="axis" marker-end="url(#arrow)" />
          
          <text x="204" y="154" class="axis-label">x</text>
          <text x="18" y="16" class="axis-label">y</text>
          <text x="16" y="54" class="axis-label text-zero" font-weight="bold">4</text>

          
          <line x1="30" y1="50" x2="205" y2="50" class="line-zero" />
          <text x="160" y="42" font-size="11" font-weight="bold" fill="#10b981">y = 4</text>

          
          <g class="stick-walker">
            
            <circle cx="0" cy="-22" r="3.5" class="stick-head" />
            
            <line x1="0" y1="-18" x2="0" y2="-8" class="stick-figure" />
            
            <line x1="-5" y1="-14" x2="5" y2="-12" class="stick-figure" />
            
            <line x1="0" y1="-8" x2="-4" y2="0" class="stick-figure" />
            <line x1="0" y1="-8" x2="4" y2="0" class="stick-figure" />
          </g>
        </svg>
      </div>

      <div class="math-section">
        <div class="formula-row">
          <span>m =</span>
          <div class="fraction">
            <span class="fraction-top text-zero">0 (rise)</span>
            <span class="fraction-bottom">run</span>
          </div>
          <span>= <strong class="text-zero">0</strong></span>
        </div>
      </div>
    </div>

    
    <div class="slope-column">
      <span class="badge badge-undef">Undefined Slope</span>

      <div class="graph-container">
        <svg viewBox="0 0 220 160">
          <defs>
            <marker id="arrow2" 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" class="axis-arrow" />
            </marker>
          </defs>

          
          <polygon points="100,15 200,15 200,140 100,140" class="cliff-fill" />

          
          <line x1="30" y1="20" x2="200" y2="20" class="grid-line" />
          <line x1="30" y1="50" x2="200" y2="50" class="grid-line" />
          <line x1="30" y1="80" x2="200" y2="80" class="grid-line" />
          <line x1="30" y1="110" x2="200" y2="110" class="grid-line" />

          <line x1="60" y1="15" x2="60" y2="140" class="grid-line" />
          <line x1="100" y1="15" x2="100" y2="140" class="grid-line" />
          <line x1="140" y1="15" x2="140" y2="140" class="grid-line" />
          <line x1="180" y1="15" x2="180" y2="140" class="grid-line" />

          
          <line x1="30" y1="140" x2="210" y2="140" class="axis" marker-end="url(#arrow2)" />
          <line x1="30" y1="140" x2="30" y2="10" class="axis" marker-end="url(#arrow2)" />
          
          <text x="204" y="154" class="axis-label">x</text>
          <text x="18" y="16" class="axis-label">y</text>
          <text x="96" y="154" class="axis-label text-undef" font-weight="bold">3</text>

          
          <line x1="100" y1="15" x2="100" y2="140" class="line-undef" />
          <text x="107" y="28" font-size="11" font-weight="bold" fill="#e63946">x = 3</text>
          <text x="110" y="58" font-size="9.5" font-weight="600" fill="#e63946" opacity="0.85">SHEER DROP</text>

          
          <g class="stick-dropper">
            
            <circle cx="0" cy="-20" r="3.5" class="stick-head" />
            
            <line x1="0" y1="-16" x2="0" y2="-6" class="stick-figure" />
            
            <line x1="0" y1="-14" x2="-6" y2="-20" class="stick-figure" />
            <line x1="0" y1="-14" x2="6" y2="-18" class="stick-figure" />
            
            <line x1="0" y1="-6" x2="-4" y2="2" class="stick-figure" />
            <line x1="0" y1="-6" x2="4" y2="0" class="stick-figure" />
          </g>
        </svg>
      </div>

      <div class="math-section">
        <div class="formula-row">
          <span>m =</span>
          <div class="fraction">
            <span class="fraction-top">rise</span>
            <span class="fraction-bottom text-undef">0 (run)</span>
          </div>
          <span>= <strong class="text-undef">undefined</strong></span>
        </div>
        <span class="sub-note">(cannot divide by zero)</span>
      </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">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 8px 12px;
    }

    .comparison-grid {
      display: flex;
      flex-direction: row;
      gap: 16px;
      width: 100%;
      max-width: 600px;
      justify-content: center;
      align-items: flex-start;
    }

    .ramp-column {
      flex: 1 1 0;
      min-width: 0;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .header-tag {
      font-size: 13px;
      font-weight: 700;
      padding: 3px 12px;
      border-radius: 6px;
      letter-spacing: 0.2px;
    }

    .tag-a {
      color: #008da8;
      background: #e6f8fc;
    }

    .tag-b {
      color: #d66400;
      background: #fff3e6;
    }

    svg {
      width: 100%;
      height: auto;
      max-width: 250px;
      display: block;
      overflow: visible;
    }

    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1.2;
    }

    .axis-line {
      stroke: #94a3b8;
      stroke-width: 1.5;
    }

    .right-angle {
      fill: none;
      stroke: #94a3b8;
      stroke-width: 1.2;
    }

    .formula-badge {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 4px 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      line-height: 1;
      font-size: 13px;
    }

    .fraction .num {
      border-bottom: 1.5px solid currentColor;
      padding-bottom: 1px;
    }

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

    .val-a { color: #00b4d8; }
    .val-b { color: #f77f00; }

    @media (max-width: 400px) {
      .comparison-grid {
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }
      .ramp-column {
        width: 100%;
        max-width: 260px;
      }
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="ramp-column">
      <div class="header-tag tag-a">Ramp A</div>
      <svg viewBox="0 0 240 190">
        
        <g>
          <line x1="25" y1="25" x2="165" y2="25" class="grid-line" />
          <line x1="25" y1="53" x2="165" y2="53" class="grid-line" />
          <line x1="25" y1="81" x2="165" y2="81" class="grid-line" />
          <line x1="25" y1="109" x2="165" y2="109" class="grid-line" />
          <line x1="25" y1="137" x2="165" y2="137" class="grid-line" />
          
          <line x1="53" y1="25" x2="53" y2="165" class="grid-line" />
          <line x1="81" y1="25" x2="81" y2="165" class="grid-line" />
          <line x1="109" y1="25" x2="109" y2="165" class="grid-line" />
          <line x1="137" y1="25" x2="137" y2="165" class="grid-line" />
        </g>

        
        <line x1="25" y1="25" x2="25" y2="165" class="axis-line" />
        <line x1="25" y1="165" x2="165" y2="165" class="axis-line" />

        
        <polygon points="25,165 165,165 165,137" fill="#00b4d8" fill-opacity="0.15" />

        
        <path d="M 155,165 L 155,155 L 165,155" class="right-angle" />

        
        <line x1="25" y1="165" x2="165" y2="165" stroke="#64748b" stroke-width="2.5" />
        <line x1="165" y1="165" x2="165" y2="137" stroke="#00b4d8" stroke-width="2.5" stroke-dasharray="3,3" />

        
        <line x1="25" y1="165" x2="165" y2="137" stroke="#00b4d8" stroke-width="3.5" stroke-linecap="round" />

        
        <circle cx="25" cy="165" r="4" fill="#00b4d8" />
        <circle cx="165" cy="137" r="4" fill="#00b4d8" />

        
        <text x="95" y="181" text-anchor="middle" font-size="12" font-weight="600" fill="#64748b">Run = 5</text>
        <text x="174" y="155" text-anchor="start" font-size="12" font-weight="700" fill="#00b4d8">Rise = 1</text>
      </svg>
      <div class="formula-badge">
        Slope = 
        <span class="fraction val-a">
          <span class="num">1</span>
          <span class="den">5</span>
        </span>
      </div>
    </div>

    
    <div class="ramp-column">
      <div class="header-tag tag-b">Ramp B</div>
      <svg viewBox="0 0 240 190">
        
        <g>
          <line x1="25" y1="25" x2="165" y2="25" class="grid-line" />
          <line x1="25" y1="53" x2="165" y2="53" class="grid-line" />
          <line x1="25" y1="81" x2="165" y2="81" class="grid-line" />
          <line x1="25" y1="109" x2="165" y2="109" class="grid-line" />
          <line x1="25" y1="137" x2="165" y2="137" class="grid-line" />
          
          <line x1="53" y1="25" x2="53" y2="165" class="grid-line" />
          <line x1="81" y1="25" x2="81" y2="165" class="grid-line" />
          <line x1="109" y1="25" x2="109" y2="165" class="grid-line" />
          <line x1="137" y1="25" x2="137" y2="165" class="grid-line" />
        </g>

        
        <line x1="25" y1="25" x2="25" y2="165" class="axis-line" />
        <line x1="25" y1="165" x2="165" y2="165" class="axis-line" />

        
        <polygon points="25,165 165,165 165,53" fill="#f77f00" fill-opacity="0.15" />

        
        <path d="M 155,165 L 155,155 L 165,155" class="right-angle" />

        
        <line x1="25" y1="165" x2="165" y2="165" stroke="#64748b" stroke-width="2.5" />
        <line x1="165" y1="165" x2="165" y2="53" stroke="#f77f00" stroke-width="2.5" stroke-dasharray="3,3" />

        
        <line x1="25" y1="165" x2="165" y2="53" stroke="#f77f00" stroke-width="3.5" stroke-linecap="round" />

        
        <circle cx="25" cy="165" r="4" fill="#f77f00" />
        <circle cx="165" cy="53" r="4" fill="#f77f00" />

        
        <text x="95" y="181" text-anchor="middle" font-size="12" font-weight="600" fill="#64748b">Run = 5</text>
        <text x="174" y="113" text-anchor="start" font-size="12" font-weight="700" fill="#f77f00">Rise = 4</text>
      </svg>
      <div class="formula-badge">
        Slope = 
        <span class="fraction val-b">
          <span class="num">4</span>
          <span class="den">5</span>
        </span>
      </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">
  <title>Slope Formula Diagram</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      width: 100%;
      min-height: 100vh;
      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: flex-start;
      padding: 12px 12px 8px;
      gap: 10px;
      overflow-x: hidden;
    }

    /* Formula Header */
    .formula-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 16px;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 15px;
      font-weight: 700;
      z-index: 10;
      max-width: 100%;
    }

    .formula-label {
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 4px;
    }

    .numerator {
      border-bottom: 2px solid #1e2945;
      padding-bottom: 2px;
      color: #22b7ff;
      font-size: 14px;
      line-height: 1.1;
    }

    .denominator {
      padding-top: 2px;
      color: #2ec4b6;
      font-size: 14px;
      line-height: 1.1;
    }

    .calc-value {
      background: #f1f5f9;
      padding: 4px 12px;
      border-radius: 8px;
      color: #1e2945;
      font-variant-numeric: tabular-nums;
      font-size: 16px;
      white-space: nowrap;
    }

    /* Graph Container */
    .graph-container {
      width: 100%;
      max-width: 580px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      touch-action: none;
    }

    svg {
      width: 100%;
      height: auto;
      max-height: 480px;
      display: block;
      overflow: visible;
    }

    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1.5;
    }

    .axis {
      stroke: #94a3b8;
      stroke-width: 2;
      stroke-linecap: round;
    }

    .axis-tick {
      font-size: 12px;
      fill: #64748b;
      font-weight: 600;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .axis-title {
      font-size: 14px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
    }

    /* Slope Triangle Elements */
    .tri-fill {
      fill: rgba(34, 183, 255, 0.07);
    }

    .slope-line {
      stroke: #1e2945;
      stroke-width: 3.5;
      stroke-linecap: round;
    }

    .run-line {
      stroke: #2ec4b6;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 6 4;
    }

    .rise-line {
      stroke: #22b7ff;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 6 4;
    }

    .right-angle {
      fill: none;
      stroke: #94a3b8;
      stroke-width: 1.5;
    }

    /* Interactive Points */
    .point-handle {
      cursor: grab;
      touch-action: none;
    }

    .point-handle:active {
      cursor: grabbing;
    }

    .point-pulse {
      fill: none;
      stroke-width: 2;
      opacity: 0.35;
    }

    .p1-color { fill: #2ec4b6; stroke: #2ec4b6; }
    .p2-color { fill: #22b7ff; stroke: #22b7ff; }

    /* SVG Text Badges */
    .tag-rect {
      rx: 6;
      filter: drop-shadow(0 2px 4px rgba(30, 41, 69, 0.12));
    }

    .tag-text {
      font-size: 12px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
      font-family: system-ui, -apple-system, sans-serif;
      pointer-events: none;
    }

    .helper-tip {
      font-size: 12px;
      color: #94a3b8;
      text-align: center;
    }

    @media (max-width: 420px) {
      body {
        padding: 8px 6px;
        gap: 6px;
      }
      .formula-card {
        padding: 6px 10px;
        gap: 6px;
        font-size: 13px;
      }
      .numerator, .denominator {
        font-size: 12px;
      }
      .calc-value {
        font-size: 14px;
        padding: 3px 8px;
      }
    }
  </style>
</head>
<body>

  
  <div class="formula-card">
    <div class="formula-label">
      <span>Slope <i>m</i> =</span>
    </div>
    <div class="fraction">
      <span class="numerator">Rise (y₂ − y₁)</span>
      <span class="denominator">Run (x₂ − x₁)</span>
    </div>
    <span>=</span>
    <div class="fraction">
      <span class="numerator" id="numVal">+4</span>
      <span class="denominator" id="denVal">+5</span>
    </div>
    <span>=</span>
    <span class="calc-value" id="slopeVal">0.80</span>
  </div>

  
  <div class="graph-container">
    <svg id="svg" viewBox="0 0 490 320">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="5" 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="#94a3b8"/>
        </marker>
      </defs>

      
      <g id="grid"></g>
      
      <g id="axes"></g>

      
      <polygon id="triFill" class="tri-fill" />
      <path id="rightAngle" class="right-angle" />
      <line id="runLine" class="run-line" />
      <line id="riseLine" class="rise-line" />
      <line id="slopeLine" class="slope-line" />

      
      <g id="runTag">
        <rect class="tag-rect" x="-58" y="-12" width="116" height="24" fill="#2ec4b6" />
        <text class="tag-text" x="0" y="0" fill="#ffffff">Run = x₂ − x₁</text>
      </g>

      
      <g id="riseTag">
        <rect class="tag-rect" x="-56" y="-12" width="112" height="24" fill="#22b7ff" />
        <text class="tag-text" x="0" y="0" fill="#ffffff">Rise = y₂ − y₁</text>
      </g>

      
      <g id="p1Group" class="point-handle">
        <circle id="p1Pulse" class="point-pulse p1-color" r="14" />
        <circle class="p1-color" r="7" fill="#2ec4b6" />
        <circle r="3" fill="#ffffff" />
        <g id="p1Label">
          <rect class="tag-rect" x="-42" y="-12" width="84" height="24" fill="#1e2945" />
          <text class="tag-text" x="0" y="0" fill="#ffffff" id="p1Text">P₁(1, 1)</text>
        </g>
      </g>

      
      <g id="p2Group" class="point-handle">
        <circle id="p2Pulse" class="point-pulse p2-color" r="14" />
        <circle class="p2-color" r="7" fill="#22b7ff" />
        <circle r="3" fill="#ffffff" />
        <g id="p2Label">
          <rect class="tag-rect" x="-42" y="-12" width="84" height="24" fill="#1e2945" />
          <text class="tag-text" x="0" y="0" fill="#ffffff" id="p2Text">P₂(6, 5)</text>
        </g>
      </g>
    </svg>
  </div>

  <div class="helper-tip">Drag points P₁ and P₂ to explore slope</div>

  <script>
    // Grid Setup: 8 horizontal units by 6 vertical units
    const originX = 55;
    const originY = 270;
    const stepX = 48;
    const stepY = 40;
    const maxX = 8;
    const maxY = 6;

    const gridEl = document.getElementById('grid');
    const axesEl = document.getElementById('axes');

    // Generate Grid and Axis Labels
    for (let x = 0; x <= maxX; x++) {
      const px = originX + x * stepX;
      gridEl.innerHTML += `<line class="grid-line" x1="${px}" y1="${originY - maxY * stepY}" x2="${px}" y2="${originY}" />`;
      axesEl.innerHTML += `<text class="axis-tick" x="${px}" y="${originY + 16}">${x}</text>`;
    }
    for (let y = 0; y <= maxY; y++) {
      const py = originY - y * stepY;
      gridEl.innerHTML += `<line class="grid-line" x1="${originX}" y1="${py}" x2="${originX + maxX * stepX}" y2="${py}" />`;
      if (y > 0) {
        axesEl.innerHTML += `<text class="axis-tick" x="${originX - 16}" y="${py}">${y}</text>`;
      }
    }

    // Axes Lines with Arrow Markers
    axesEl.innerHTML += `
      <line class="axis" x1="${originX}" y1="${originY}" x2="${originX + maxX * stepX + 22}" y2="${originY}" marker-end="url(#arrow)" />
      <line class="axis" x1="${originX}" y1="${originY}" x2="${originX}" y2="${originY - maxY * stepY - 16}" marker-end="url(#arrow)" />
      <text class="axis-title" x="${originX + maxX * stepX + 16}" y="${originY + 20}">x</text>
      <text class="axis-title" x="${originX - 18}" y="${originY - maxY * stepY - 14}">y</text>
    `;

    // Coordinates State
    let p1 = { x: 1, y: 1 };
    let p2 = { x: 6, y: 5 };

    function toSvg(pt) {
      return {
        x: originX + pt.x * stepX,
        y: originY - pt.y * stepY
      };
    }

    function toGrid(svgX, svgY) {
      let gx = Math.round((svgX - originX) / stepX);
      let gy = Math.round((originY - svgY) / stepY);
      gx = Math.max(0, Math.min(maxX, gx));
      gy = Math.max(0, Math.min(maxY, gy));
      return { x: gx, y: gy };
    }

    function update() {
      const s1 = toSvg(p1);
      const s2 = toSvg(p2);
      const sCorner = { x: s2.x, y: s1.y };

      // Slope Line, Run, Rise, and Shaded Triangle
      document.getElementById('slopeLine').setAttribute('x1', s1.x);
      document.getElementById('slopeLine').setAttribute('y1', s1.y);
      document.getElementById('slopeLine').setAttribute('x2', s2.x);
      document.getElementById('slopeLine').setAttribute('y2', s2.y);

      document.getElementById('runLine').setAttribute('x1', s1.x);
      document.getElementById('runLine').setAttribute('y1', s1.y);
      document.getElementById('runLine').setAttribute('x2', sCorner.x);
      document.getElementById('runLine').setAttribute('y2', sCorner.y);

      document.getElementById('riseLine').setAttribute('x1', sCorner.x);
      document.getElementById('riseLine').setAttribute('y1', sCorner.y);
      document.getElementById('riseLine').setAttribute('x2', s2.x);
      document.getElementById('riseLine').setAttribute('y2', s2.y);

      document.getElementById('triFill').setAttribute('points', `${s1.x},${s1.y} ${sCorner.x},${sCorner.y} ${s2.x},${s2.y}`);

      // Right Angle Indicator
      if (p1.x !== p2.x && p1.y !== p2.y) {
        const size = 10;
        const dirX = p2.x >= p1.x ? -1 : 1;
        const dirY = p2.y >= p1.y ? 1 : -1;
        const raD = `M ${sCorner.x + dirX * size} ${sCorner.y} L ${sCorner.x + dirX * size} ${sCorner.y + dirY * size} L ${sCorner.x} ${sCorner.y + dirY * size}`;
        document.getElementById('rightAngle').setAttribute('d', raD);
        document.getElementById('rightAngle').style.display = 'block';
      } else {
        document.getElementById('rightAngle').style.display = 'none';
      }

      // Run Tag Positioning (Centered)
      const runTag = document.getElementById('runTag');
      let runMidX = (s1.x + sCorner.x) / 2;
      let runOffsetY = (p2.y >= p1.y ? 20 : -20);
      if (sCorner.y + runOffsetY > originY + 12) runOffsetY = -20;
      if (sCorner.y + runOffsetY < 20) runOffsetY = 20;
      runTag.setAttribute('transform', `translate(${runMidX}, ${sCorner.y + runOffsetY})`);
      runTag.style.display = (p1.x === p2.x) ? 'none' : 'block';

      // Rise Tag Positioning (Centered)
      const riseTag = document.getElementById('riseTag');
      let riseOffsetX = (p2.x >= p1.x ? 64 : -64);
      if (sCorner.x + riseOffsetX > 430) riseOffsetX = -64;
      if (sCorner.x + riseOffsetX < 60) riseOffsetX = 64;
      const riseMidY = (sCorner.y + s2.y) / 2;
      riseTag.setAttribute('transform', `translate(${sCorner.x + riseOffsetX}, ${riseMidY})`);
      riseTag.style.display = (p1.y === p2.y) ? 'none' : 'block';

      // Point Handles & Badges
      const p1Group = document.getElementById('p1Group');
      p1Group.setAttribute('transform', `translate(${s1.x}, ${s1.y})`);
      document.getElementById('p1Text').textContent = `P₁(${p1.x}, ${p1.y})`;
      const p1Label = document.getElementById('p1Label');
      let p1OffsetY = (p1.y >= p2.y ? 22 : -22);
      if (s1.y + p1OffsetY > originY + 8) p1OffsetY = -22;
      if (s1.y + p1OffsetY < 18) p1OffsetY = 22;
      p1Label.setAttribute('transform', `translate(0, ${p1OffsetY})`);

      const p2Group = document.getElementById('p2Group');
      p2Group.setAttribute('transform', `translate(${s2.x}, ${s2.y})`);
      document.getElementById('p2Text').textContent = `P₂(${p2.x}, ${p2.y})`;
      const p2Label = document.getElementById('p2Label');
      let p2OffsetY = (p2.y >= p1.y ? -22 : 22);
      if (s2.y + p2OffsetY > originY + 8) p2OffsetY = -22;
      if (s2.y + p2OffsetY < 18) p2OffsetY = 22;
      p2Label.setAttribute('transform', `translate(0, ${p2OffsetY})`);

      // Calculations
      const rise = p2.y - p1.y;
      const run = p2.x - p1.x;

      document.getElementById('numVal').textContent = (rise >= 0 ? '+' : '') + rise;
      document.getElementById('denVal').textContent = (run >= 0 ? '+' : '') + run;

      if (run === 0) {
        document.getElementById('slopeVal').textContent = 'Undefined';
      } else {
        const m = rise / run;
        document.getElementById('slopeVal').textContent = Number.isInteger(m) ? m : m.toFixed(2);
      }
    }

    // Pointer Events Interaction
    let activePoint = null;
    const svg = document.getElementById('svg');

    function getSvgCoords(e) {
      const pt = svg.createSVGPoint();
      pt.x = e.clientX;
      pt.y = e.clientY;
      return pt.matrixTransform(svg.getScreenCTM().inverse());
    }

    function setupDrag(elem, ptRef) {
      elem.addEventListener('pointerdown', (e) => {
        activePoint = ptRef;
        elem.setPointerCapture(e.pointerId);
      });

      elem.addEventListener('pointermove', (e) => {
        if (activePoint === ptRef) {
          const coords = getSvgCoords(e);
          const gridPos = toGrid(coords.x, coords.y);
          if (gridPos.x !== ptRef.x || gridPos.y !== ptRef.y) {
            ptRef.x = gridPos.x;
            ptRef.y = gridPos.y;
            update();
          }
        }
      });

      elem.addEventListener('pointerup', (e) => {
        if (activePoint === ptRef) {
          activePoint = null;
          try { elem.releasePointerCapture(e.pointerId); } catch(err) {}
        }
      });

      elem.addEventListener('pointercancel', (e) => {
        if (activePoint === ptRef) {
          activePoint = null;
          try { elem.releasePointerCapture(e.pointerId); } catch(err) {}
        }
      });
    }

    setupDrag(document.getElementById('p1Group'), p1);
    setupDrag(document.getElementById('p2Group'), p2);

    update();
  </script>
</body>
</html>

2つの量の比べ方 — 「差」で見る比べ方と「倍」で見る比べ方

差が同じでも関係がちがう場面 — 元の大きさによる変化の違い

「何倍か」で比べることのよさと必要性

もとにする量と比べられる量の基本

テープ図で「差」と「倍」を並べて表す

身長や体重の伸び方 — 差と倍の2つの視点で比べる

おこづかいの増減 — 差と倍の見方で解釈する

生活の場面で差と倍を使い分ける判断力

二つの量の関係を別の関係と比べる

差と倍の比較のまとめと習熟

math

2つの数量の関係と差と倍の比較 — 減法的比較から乗法的比較へ

伴って変わる2つの数量とは — 身の回りの変化に目を向けよう

時間とともに変わる数量 — 気温・身長・水深の観察

個数と代金の変化 — 買う個数が増えると代金はどうなるか

変わる数量と変わらない数量の見分け方

2つの数量の対応を表に整理する基本手順

表の横の並びから変化のきまりを読み取る

表の縦の並びから2つの数量の対応関係を読み取る

増加と減少のパターン — 一方が増えるともう一方はどうなるか

絵や図から伴って変わる数量の変化を読み取る

伴って変わる数量の基礎マスター — 見分けと表の整理

伴って変わる2つの数量の発見と対応関係

Calculating Rate of Change from Equations

Identifying x-Intercepts from Graphs of Linear Functions

Identifying y-Intercepts from Graphs of Linear Functions

Graphing Linear Functions from Slope-Intercept Form

Graphing Linear Functions from Point-Slope Form

Graphing Linear Functions from Standard Form Using Intercepts

Converting Between Slope-Intercept and Standard Form

Converting from Point-Slope Form to Slope-Intercept Form

Converting from Point-Slope Form to Standard Form

Writing Linear Equations Given Slope and a Point

Writing Linear Equations Given Two Points

Writing Linear Equations from Graphs and Tables

Slopes of Parallel and Perpendicular Lines

Writing Equations of Parallel and Perpendicular Lines

Modeling Direct Variation Relationships

Writing Linear Functions from Data

Linear Functions, Forms, Slopes, and Direct Variation

何倍かを求める割り算の仕組み — （比べられる量）÷（もとにする量）

整数倍の関係を見つけて式に表す

1倍とは何か — もとにする量と同じ大きさの関係

1倍より小さい倍の基礎 — 半分（0.5倍）の関係

小数の倍（1.5倍や2.5倍）の式表現

もとにする量を変えたときの「倍」の変化

主語を入れ替えた倍の比較 — AはBの何倍・BはAの何倍

数直線でつかむ「何倍か」の位置と目盛り

「何倍か」を求める多様な文章題の解決

何倍かの関係のまとめと自己評価

何倍かの関係と乗法的な見方 — 「倍」を基盤とした数量の把握

「和が一定」の関係とは — あわせた数が変わらない場面

和が一定の表から変化のきまりを見つける

和が一定の関係を言葉の式で表す

「差が一定」の関係とは — 年齢や長さの違いが変わらない場面

差が一定の表から変化のきまりを見つける

差が一定の関係を言葉の式で表す

和が一定と差が一定の違いを比べる

和や差が一定の関係から未知の値を求める

生活場面における和と差のきまりの検証

和と差の一定関係マスター — 表と式による考察

表を使った変わり方のきまりの探究 — 和が一定・差が一定

2組の量の関係を比べるとはどういうことか

ゴムの伸び方の比較 — もとの長さと伸びたあとの長さ

植物の成長の比較 — どちらの苗がよりよく育ったか

簡単な場合における比の考え方（2組の倍の比較）

差では同じだが倍ではちがう2組の比較

倍では同じだが差ではちがう2組の比較

2つの割り算の商を並べて比べる手順

絵や写真から2組の数量関係を取り出して比べる

2組の関係比較の基本問題演習

2組の数量関係の比較の総まとめ

2組の数量関係の比較の基礎 — どちらがより伸びたか・増えたか

Writing Equations in Slope-Intercept Form from Slope and y-Intercept

Writing Linear Equations from a Point and Slope

Writing Equations in Point-Slope Form from a Point and Slope

Writing Equations in Point-Slope Form from Two Points

Writing Linear Equations from Two Points in Any Form

Writing Linear Equations from Points and Slopes

一方が2倍・3倍になると他方も2倍・3倍になる関係

1個あたりの数を使った対応のきまり

「積が一定」の関係とは — 面積が決まっている長方形のたてと横

積が一定の表から変化のきまりを見つける

積が一定の関係を言葉の式で表す

一定数ずつ増える関係 — 基準量に加わる変化

4つの変わり方のパターン分類 — 和・差・積・倍

表の規則性を使った遠い値の推定と計算

変わり方のきまりを言葉と理由で説明する活動

倍と積の変わり方マスター — パターンの識別と立式

表を使った変わり方のきまりの探究 — 倍の関係と積が一定

Writing Linear Equations in Standard Form Ax + By = C

Converting from Standard Form to Slope-Intercept Form

Converting from Slope-Intercept Form to Standard Form

Standard Form and Converting Linear Equations

図や式で比を表す

2本のテープ図を並べて関係を比べる

基準のテープを「1」とみたときのいくつ分

2重数直線の基礎 — 数量の直線と「倍」の直線の対応

2重数直線で2組の数量関係を並べて比較する

図から割り算の式を読み取る活動

式からテープ図を正確に描く活動

図を使って友達に比べ方を説明する数学的表現

関係の視覚化の総合演習

テープ図・数直線による関係把握の習熟

テープ図と数直線による関係の視覚化 — 2組の倍の表現法

正方形をつなげたときの棒の本数の変化

正方形の棒の本数のきまりを式で表す — 4＋3×(個数−1)

正三角形をつなげたときの棒の本数の変化

階段状に並べたつみきの段数と総数の変化

階段の段数と周りの長さの変化

正方形に広がるタイルの段数と個数の変化

つなげた机と並ぶ椅子の数の変化

図形のきまりを使って10番目や50番目を求める

図の分け方による複数の式の導出と比較

図形の変わり方パターンマスター — 表・式・図の統合

図形の並びと変わり方の規則性

□や△で数量を表す

伴って変わる2つの数量を□と△で表す

足し算の関係を式にする — ○＝□＋a

引き算の関係を式にする — ○＝a−□ や ○＝□−a

かけ算の関係を式にする — ○＝a×□

□に数を当てはめて△の値を計算する

△の値から逆算して□の値を求める

2段階の計算を含む関係の式 — ○＝a×□＋b

記号の式から具体的な場面や表を再現する

□と△の式マスター — 立式と未知数計算の完全習熟

□と△を使った数量関係の式と未知数の計算

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

Writing Equations in Slope-Intercept Form from a Table

Writing Linear Equations from a Table in Any Form

Writing Linear Equations from Graphs

Writing Linear Equations from a Graph in Any Form

Writing Equations in Slope-Intercept Form from a Verbal Description

Writing Linear Equations from a Verbal Description in Any Form

Choosing the Best Form for a Given Situation

Real-World Applications: Choosing Appropriate Equation Forms

Writing Linear Equations from Tables, Graphs, and Descriptions

2つの量の対応を表に整理する

2組の対応表を並べて比べる工夫

表の縦と横の関係から「倍」を見抜く

表を使った未知の数量の推究

2組の表から変化の性質を比較・分類する

表とテープ図をつなぐ数学的活動

表から言葉で数量関係を説明する

表を使った実生活データの比較分析

表による関係整理のまとめ演習

表と関係分析のマスターチェック

図や表を用いた数量関係の整理 — 2組の対応と規則性の比較

Identifying Direct Proportion in Real-Life Situations

Writing Direct Variation Equations y = kx

Finding the Constant of Variation k

Solving Direct Variation Equations for Unknown Values

Identifying and Writing Direct Variation from Tables

Identifying and Writing Direct Variation from Graphs

Solving Real-World Direct Variation Problems

Distinguishing Direct Variation from Other Linear Relationships

Direct Variation Equations

Writing Linear Equations in Slope-Intercept and Point-Slope Form

2組の関係を割り算の式で並べて表す

掛け算の式で「何倍か」をつなぐ仕組み — （もとにする量）×（倍）＝（比べられる量）

式から2つの関係の違いを読み取る

不等号を使った2組の商の比較式 — （a÷b）＞（c÷d）

□を使った関係の式 — （もとにする量）× □ ＝ （比べられる量）

2組の□の式を立てて倍率を比べる

言葉の式で2組の関係を整理する

式を用いた論理的な説明文の作成

式による関係比較の総合問題演習

式による関係モデル化の習熟

式を用いた数量関係の比較 — 乗法・除法の式と関係のモデル化

折れ線グラフの特徴を知る

棒グラフと折れ線グラフの違いと使い分け

横軸と縦軸の役割と単位の確認

目盛りの読み方 — 1目盛りが表す大きさを正しく捉える

折れ線グラフから読み取る

1日の気温変化の読み取りと考察

1年間の気温と季節の変化の読解

グラフの途中の時点の値の推定 — 点と点をつなぐ直線の意味

OGM.10.FNC.2

Aligned learning resources

Related diagrams