Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine building a $30^\circ$ skateboard ramp that is 10 feet long, and an architect building a massive $30^\circ$ bridge ramp that is 1,000 feet long.

Even though one ramp is 100 times larger, the ratio of their heights to their ramp lengths is completely identical.

How can two completely different sized triangles share the exact same proportion?

In any right-angled triangle, every side has a name based on its position relative to a reference angle, which we often label with the Greek letter **theta** ($\theta$).

The **hypotenuse** is always the longest side across from the $90^\circ$ square corner, the **opposite** side sits directly across from angle $\theta$, and the **adjacent** side is next to $\theta$.

<!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">
  <title>Understanding Sine as a Ratio</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 10px;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      flex-wrap: wrap;
    }
    .btn {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }
    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 4px 12px;
    }
    input[type="range"] {
      width: 110px;
      accent-color: #22b7ff;
      cursor: pointer;
    }
    .diagram-area {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 250px;
      background: #ffffff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .ratio-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 16px;
      font-size: 16px;
      font-weight: 700;
    }
    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      font-size: 14px;
      line-height: 1.1;
    }
    .fraction .num {
      color: #ff6b6b;
      border-bottom: 2px solid #1e2945;
      padding-bottom: 2px;
      width: 100%;
      text-align: center;
    }
    .fraction .den {
      color: #0284c7;
      padding-top: 2px;
      width: 100%;
      text-align: center;
    }
    .hyp-color { color: #0284c7; }
    .opp-color { color: #ff6b6b; }
    .adj-color { color: #64748b; }
    .res-val {
      font-size: 20px;
      color: #0284c7;
      min-width: 48px;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btn30" onclick="setAngle(30)">30°</button>
    <button class="btn" id="btn45" onclick="setAngle(45)">45°</button>
    <button class="btn" id="btn60" onclick="setAngle(60)">60°</button>
    <div class="slider-wrap">
      <span style="font-size: 13px; font-weight: 600; color: #64748b;">θ</span>
      <input type="range" id="angleSlider" min="15" max="75" value="30" oninput="setAngle(this.value)">
    </div>
  </div>

  <div class="diagram-area">
    <svg id="triangleSvg" viewBox="0 0 380 230">
      
      <polygon id="rightAngle" points="0,0 0,0 0,0 0,0" fill="none" stroke="#94a3b8" stroke-width="1.5" />
      
      
      <polygon id="triFill" points="0,0 0,0 0,0" fill="#f0f9ff" opacity="0.6" />
      
      
      <line id="adjLine" stroke="#94a3b8" stroke-width="3" stroke-linecap="round" />
      
      <line id="oppLine" stroke="#ff6b6b" stroke-width="4" stroke-linecap="round" />
      
      <line id="hypLine" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />

      
      <path id="angleArc" fill="none" stroke="#22b7ff" stroke-width="2.5" />
      <text id="thetaLabel" font-size="14" font-weight="700" fill="#0284c7" text-anchor="middle">θ</text>

      
      <text id="hypLabel" font-size="13" font-weight="700" fill="#0284c7" text-anchor="middle">Hypotenuse</text>
      <text id="oppLabel" font-size="13" font-weight="700" fill="#ff6b6b" text-anchor="start">Opposite</text>
      <text id="adjLabel" font-size="13" font-weight="600" fill="#64748b" text-anchor="middle">Adjacent</text>
    </svg>
  </div>

  <div class="ratio-card">
    <span>sin(<span id="angleText">30°</span>) =</span>
    <div class="fraction">
      <span class="num" id="oppVal">Opposite (0.50)</span>
      <span class="den" id="hypVal">Hypotenuse (1.0)</span>
    </div>
    <span>=</span>
    <span class="res-val" id="ratioResult">0.50</span>
  </div>

  <script>
    const hypLength = 190;
    const originX = 55;
    const originY = 195;

    function setAngle(val) {
      const deg = parseFloat(val);
      document.getElementById('angleSlider').value = deg;
      
      // Update buttons
      ['btn30', 'btn45', 'btn60'].forEach(id => {
        const btn = document.getElementById(id);
        btn.classList.toggle('active', parseInt(btn.textContent) === deg);
      });

      const rad = deg * (Math.PI / 180);
      const opp = hypLength * Math.sin(rad);
      const adj = hypLength * Math.cos(rad);

      const cornerX = originX + adj;
      const cornerY = originY;
      const topX = cornerX;
      const topY = originY - opp;

      // Triangle fill
      document.getElementById('triFill').setAttribute('points', `${originX},${originY} ${cornerX},${cornerY} ${topX},${topY}`);

      // Adjacent Line
      const adjLine = document.getElementById('adjLine');
      adjLine.setAttribute('x1', originX);
      adjLine.setAttribute('y1', originY);
      adjLine.setAttribute('x2', cornerX);
      adjLine.setAttribute('y2', cornerY);

      // Opposite Line
      const oppLine = document.getElementById('oppLine');
      oppLine.setAttribute('x1', cornerX);
      oppLine.setAttribute('y1', cornerY);
      oppLine.setAttribute('x2', topX);
      oppLine.setAttribute('y2', topY);

      // Hypotenuse Line
      const hypLine = document.getElementById('hypLine');
      hypLine.setAttribute('x1', originX);
      hypLine.setAttribute('y1', originY);
      hypLine.setAttribute('x2', topX);
      hypLine.setAttribute('y2', topY);

      // Right angle square
      const sq = 12;
      document.getElementById('rightAngle').setAttribute('points', 
        `${cornerX - sq},${cornerY} ${cornerX - sq},${cornerY - sq} ${cornerX},${cornerY - sq} ${cornerX},${cornerY}`
      );

      // Theta Arc
      const arcR = 32;
      const arcEndX = originX + arcR * Math.cos(rad);
      const arcEndY = originY - arcR * Math.sin(rad);
      document.getElementById('angleArc').setAttribute('d', 
        `M ${originX + arcR} ${originY} A ${arcR} ${arcR} 0 0 0 ${arcEndX} ${arcEndY}`
      );
      
      const lblRad = rad / 2;
      document.getElementById('thetaLabel').setAttribute('x', originX + (arcR + 14) * Math.cos(lblRad));
      document.getElementById('thetaLabel').setAttribute('y', originY - (arcR + 14) * Math.sin(lblRad) + 4);
      document.getElementById('thetaLabel').textContent = `${Math.round(deg)}°`;

      // Labels positioning
      const midHypX = (originX + topX) / 2 - 14 * Math.sin(rad);
      const midHypY = (originY + topY) / 2 - 14 * Math.cos(rad);
      const hypLabel = document.getElementById('hypLabel');
      hypLabel.setAttribute('x', midHypX);
      hypLabel.setAttribute('y', midHypY);
      hypLabel.setAttribute('transform', `rotate(${-deg}, ${midHypX}, ${midHypY})`);

      const oppLabel = document.getElementById('oppLabel');
      oppLabel.setAttribute('x', cornerX + 8);
      oppLabel.setAttribute('y', (cornerY + topY) / 2 + 5);

      const adjLabel = document.getElementById('adjLabel');
      adjLabel.setAttribute('x', (originX + cornerX) / 2);
      adjLabel.setAttribute('y', originY + 18);

      // Math ratio display
      const sinVal = Math.sin(rad);
      document.getElementById('angleText').textContent = `${Math.round(deg)}°`;
      document.getElementById('oppVal').textContent = `${sinVal.toFixed(2)}`;
      document.getElementById('hypVal').textContent = `1.00`;
      document.getElementById('ratioResult').textContent = sinVal.toFixed(2);
    }

    setAngle(30);
  </script>
</body>
</html>

Now that we know the names of the sides, how do we compare the opposite height to the hypotenuse length?

The **sine** of an angle (abbreviated as $\sin$) is simply a fraction comparing the length of the opposite side to the length of the hypotenuse.

$$\sin(\theta) = \frac{\text{Opposite}}{\text{Hypotenuse}}$$

Around 500 CE, Indian mathematician Aryabhata studied lengths of half-chords in circles called *jya-ardha*, which later evolved through Arabic and Latin translations into our modern word **sine**.

Why doesn't this fraction change when a triangle gets bigger or smaller?

When two right triangles share the same angle $\theta$, all three of their interior angles must be identical because the angles in any triangle always add up to $180^\circ$.

Triangles with identical angles are **similar**, which means every side of the larger triangle is scaled up by the exact same multiplier $k$.

<!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">
  <title>Sine Ratio and Similarity</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 8px 12px;
      user-select: none;
      -webkit-user-select: none;
    }
    .main-area {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 250px;
      overflow: visible;
    }
    .math-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 16px;
      font-size: 15px;
      font-weight: 600;
    }
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 14px;
      line-height: 1.1;
    }
    .frac-num {
      border-bottom: 1.5px solid #1e2945;
      padding-bottom: 2px;
    }
    .frac-den {
      padding-top: 2px;
    }
    .k-val {
      color: #0284c7;
      font-weight: 700;
    }
    .opp-val {
      color: #10b981;
    }
    .hyp-val {
      color: #22b7ff;
    }
    .res-val {
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 8px;
      border-radius: 6px;
    }
    .controls {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }
    .scale-row {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 12px;
    }
    .scale-label {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      white-space: nowrap;
    }
    input[type="range"] {
      flex: 1;
      height: 6px;
      accent-color: #22b7ff;
      cursor: pointer;
    }
    .btn-group {
      display: flex;
      gap: 6px;
    }
    .btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="main-area">
    <svg viewBox="0 0 460 250" id="triSvg">
      
      <polygon id="ghostTri" points="50,220 170,220 170,130" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3,3" />
      <text x="110" y="215" font-size="11" fill="#94a3b8" text-anchor="middle">k = 1</text>

      
      <polygon id="triPoly" points="50,220 170,220 170,130" fill="rgba(34, 183, 255, 0.08)" stroke="#1e2945" stroke-width="2.5" stroke-linejoin="round" />

      
      <path id="rightAngle" d="M 155,220 L 155,205 L 170,205" fill="none" stroke="#64748b" stroke-width="1.5" />

      
      <path d="M 75,220 A 25 25 0 0 0 71.6,203.8" fill="none" stroke="#f59e0b" stroke-width="2.5" />
      <text x="82" y="214" font-size="14" font-weight="700" fill="#d97706">θ</text>

      
      <text id="hypLabel" x="100" y="165" font-size="13" font-weight="700" fill="#0284c7" text-anchor="middle" transform="rotate(-36.87 100 165)">5 × 1.0</text>

      
      <text id="oppLabel" x="180" y="175" font-size="13" font-weight="700" fill="#059669" text-anchor="start">3 × 1.0</text>
    </svg>

    <div class="math-bar">
      <span>sin(θ) =</span>
      <div class="frac">
        <span class="frac-num"><span class="opp-val" id="eqOpp">3</span> × <span class="k-val" id="eqK1">1.0</span></span>
        <span class="frac-den"><span class="hyp-val" id="eqHyp">5</span> × <span class="k-val" id="eqK2">1.0</span></span>
      </div>
      <span>=</span>
      <div class="frac">
        <span class="frac-num opp-val">3</span>
        <span class="frac-den hyp-val">5</span>
      </div>
      <span>=</span>
      <span class="res-val">0.60</span>
    </div>
  </div>

  <div class="controls">
    <div class="scale-row">
      <span class="scale-label">Scale k:</span>
      <input type="range" id="kSlider" min="1.0" max="2.4" step="0.1" value="1.0">
      <div class="btn-group">
        <button class="btn active" data-k="1.0">1×</button>
        <button class="btn" data-k="1.5">1.5×</button>
        <button class="btn" data-k="2.0">2×</button>
      </div>
    </div>
  </div>

  <script>
    const slider = document.getElementById('kSlider');
    const buttons = document.querySelectorAll('.btn');
    const triPoly = document.getElementById('triPoly');
    const rightAngle = document.getElementById('rightAngle');
    const hypLabel = document.getElementById('hypLabel');
    const oppLabel = document.getElementById('oppLabel');
    const eqOpp = document.getElementById('eqOpp');
    const eqHyp = document.getElementById('eqHyp');
    const eqK1 = document.getElementById('eqK1');
    const eqK2 = document.getElementById('eqK2');

    const baseX = 50;
    const baseY = 220;
    const baseW = 120;
    const baseH = 90;

    function update(k) {
      const w = baseW * k;
      const h = baseH * k;
      const rightX = baseX + w;
      const topY = baseY - h;

      // Update Triangle Path
      triPoly.setAttribute('points', `${baseX},${baseY} ${rightX},${baseY} ${rightX},${topY}`);

      // Update Right Angle
      rightAngle.setAttribute('d', `M ${rightX - 15},${baseY} L ${rightX - 15},${baseY - 15} L ${rightX},${baseY - 15}`);

      // Hypotenuse Label Position (midpoint)
      const midX = baseX + w / 2;
      const midY = baseY - h / 2;
      hypLabel.setAttribute('x', midX - 8);
      hypLabel.setAttribute('y', midY - 8);
      hypLabel.setAttribute('transform', `rotate(-36.87 ${midX - 8} ${midY - 8})`);
      hypLabel.textContent = `5 × ${k.toFixed(1)}`;

      // Opposite Label Position
      oppLabel.setAttribute('x', rightX + 8);
      oppLabel.setAttribute('y', baseY - h / 2 + 5);
      oppLabel.textContent = `3 × ${k.toFixed(1)}`;

      // Math Bar Values
      const oppVal = (3 * k).toFixed(1).replace('.0', '');
      const hypVal = (5 * k).toFixed(1).replace('.0', '');
      eqOpp.textContent = oppVal;
      eqHyp.textContent = hypVal;
      eqK1.textContent = `(${k.toFixed(1)})`;
      eqK2.textContent = `(${k.toFixed(1)})`;

      slider.value = k;
      buttons.forEach(b => {
        if (parseFloat(b.dataset.k) === parseFloat(k)) {
          b.classList.add('active');
        } else {
          b.classList.remove('active');
        }
      });
    }

    slider.addEventListener('input', (e) => {
      update(parseFloat(e.target.value));
    });

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        update(parseFloat(btn.dataset.k));
      });
    });

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

When you write the sine fraction for the enlarged triangle, the scale factor cancels out completely: $$\frac{k \times \text{Opposite}}{k \times \text{Hypotenuse}} = \frac{\text{Opposite}}{\text{Hypotenuse}}$$

Let's put this into practice with a concrete example to see the numbers in action.

Triangle A has an angle of $30^\circ$, an opposite side of $4\text{ cm}$, and a hypotenuse of $8\text{ cm}$.

Triangle B is an enormous version with the same $30^\circ$ angle, an opposite side of $25\text{ m}$, and a hypotenuse of $50\text{ m}$.

Both calculations give $0.5$, proving that the value of $\sin(30^\circ)$ depends only on the angle, not on how big the triangle is drawn.

What is the most common mistake students make when finding the sine ratio?

A common mistake is assuming the vertical side is always 'opposite' and the horizontal base is always 'adjacent'.

The labels change depending on which acute angle you are looking from — if you switch your focus to the top angle, the bottom base becomes the new opposite side.

<!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">
  <title>Sine as a Ratio</title>
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
    }

    body {
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: #1e2945;
      min-height: 100%;
    }

    .controls {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 380px;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .tab-btn.active {
      background: #eff6ff;
      border-color: #22b7ff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.2);
    }

    .stage {
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

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

    .formula-bar {
      margin-top: 10px;
      padding: 8px 16px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      min-height: 48px;
    }

    /* SVG transitions */
    .side-line {
      stroke-width: 5;
      stroke-linecap: round;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }

    .side-text {
      font-size: 13px;
      font-weight: 700;
      transition: fill 0.3s ease;
    }

    .angle-arc {
      fill: none;
      stroke-width: 3.5;
      transition: stroke 0.3s ease, opacity 0.3s ease;
    }

    .sight-line {
      stroke: #f59e0b;
      stroke-width: 2.5;
      stroke-dasharray: 5 4;
      transition: all 0.35s ease;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="tab-btn active" id="btnA" onclick="setAngle('A')">
      <span>Focus: ∠A</span>
    </button>
    <button class="tab-btn" id="btnB" onclick="setAngle('B')">
      <span>Focus: ∠B</span>
    </button>
  </div>

  <div class="stage">
    <svg viewBox="0 0 340 230">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 1 1 L 9 5 L 1 9 z" fill="#f59e0b" />
        </marker>
      </defs>

      
      <path d="M 260 190 L 260 170 L 280 170" fill="none" stroke="#cbd5e1" stroke-width="2.5" />

      
      
      <line x1="50" y1="190" x2="280" y2="40" stroke="#8b5cf6" stroke-width="4.5" stroke-linecap="round" />
      
      
      <line id="sideAC" class="side-line" x1="50" y1="190" x2="280" y2="190" stroke="#e2e8f0" />
      
      
      <line id="sideBC" class="side-line" x1="280" y1="190" x2="280" y2="40" stroke="#0284c7" />

      
      <line id="sightLine" class="sight-line" x1="68" y1="178" x2="270" y2="115" marker-end="url(#arrow)" />

      
      
      <path id="arcA" class="angle-arc" d="M 85 190 A 35 35 0 0 0 79 171" stroke="#0284c7" />
      
      
      <path id="arcB" class="angle-arc" d="M 280 75 A 35 35 0 0 1 260 53" stroke="#cbd5e1" opacity="0.4" />

      
      <text x="32" y="196" font-size="15" font-weight="800" fill="#1e2945">A</text>
      <text x="282" y="32" font-size="15" font-weight="800" fill="#1e2945">B</text>
      <text x="290" y="202" font-size="13" font-weight="600" fill="#94a3b8">C</text>

      
      
      <g transform="translate(155, 105) rotate(-33)">
        <rect x="-42" y="-12" width="84" height="20" rx="6" fill="#f5f3ff" />
        <text x="0" y="2" text-anchor="middle" font-size="11" font-weight="700" fill="#7c3aed">Hypotenuse</text>
      </g>

      
      <g id="groupAC" transform="translate(165, 212)">
        <text id="labelAC" class="side-text" x="0" y="0" text-anchor="middle" fill="#94a3b8">Adjacent</text>
      </g>

      
      <g id="groupBC" transform="translate(300, 115) rotate(90)">
        <text id="labelBC" class="side-text" x="0" y="0" text-anchor="middle" fill="#0284c7">Opposite</text>
      </g>
    </svg>

    <div class="formula-bar" id="formulaContainer"></div>
  </div>

  <script>
    function renderFormula(angle) {
      const container = document.getElementById('formulaContainer');
      const opp = angle === 'A' ? '\\text{BC (Opposite)}' : '\\text{AC (Opposite)}';
      const tex = `\\sin(${angle}) = \\frac{${opp}}{\\text{AB (Hypotenuse)}}`;
      
      if (window.katex) {
        katex.render(tex, container, { throwOnError: false });
      } else {
        container.textContent = `sin(${angle}) = Opposite / Hypotenuse`;
      }
    }

    function setAngle(target) {
      const btnA = document.getElementById('btnA');
      const btnB = document.getElementById('btnB');
      const arcA = document.getElementById('arcA');
      const arcB = document.getElementById('arcB');
      const sideAC = document.getElementById('sideAC');
      const sideBC = document.getElementById('sideBC');
      const labelAC = document.getElementById('labelAC');
      const labelBC = document.getElementById('labelBC');
      const sight = document.getElementById('sightLine');

      if (target === 'A') {
        btnA.classList.add('active');
        btnB.classList.remove('active');

        arcA.setAttribute('stroke', '#0284c7');
        arcA.style.opacity = '1';
        arcB.setAttribute('stroke', '#cbd5e1');
        arcB.style.opacity = '0.4';

        sideBC.setAttribute('stroke', '#0284c7');
        sideAC.setAttribute('stroke', '#e2e8f0');

        labelBC.textContent = 'Opposite';
        labelBC.setAttribute('fill', '#0284c7');

        labelAC.textContent = 'Adjacent';
        labelAC.setAttribute('fill', '#94a3b8');

        // Arrow from A to BC
        sight.setAttribute('x1', '68');
        sight.setAttribute('y1', '178');
        sight.setAttribute('x2', '270');
        sight.setAttribute('y2', '115');
      } else {
        btnB.classList.add('active');
        btnA.classList.remove('active');

        arcB.setAttribute('stroke', '#0284c7');
        arcB.style.opacity = '1';
        arcA.setAttribute('stroke', '#cbd5e1');
        arcA.style.opacity = '0.4';

        sideAC.setAttribute('stroke', '#0284c7');
        sideBC.setAttribute('stroke', '#e2e8f0');

        labelAC.textContent = 'Opposite';
        labelAC.setAttribute('fill', '#0284c7');

        labelBC.textContent = 'Adjacent';
        labelBC.setAttribute('fill', '#94a3b8');

        // Arrow from B to AC
        sight.setAttribute('x1', '266');
        sight.setAttribute('y1', '60');
        sight.setAttribute('x2', '165');
        sight.setAttribute('y2', '180');
      }

      renderFormula(target);
    }

    // Initialize
    window.addEventListener('load', () => {
      setAngle('A');
    });
  </script>
</body>
</html>

Whenever you set up a sine ratio, always place your finger on your chosen angle first and look directly across the triangle to find its true opposite side.

math

Understanding Sine as a Ratio. Define sine as the ratio of opposite to hypotenuse and recognise it is constant for a given angle.

Triangle Similarity and the Trigonometric Ratios

Year 9 Maths: Trigonometric Ratios (AC9M9SP01 Alignment)

Similarity, Proportionality, and Trigonometric Foundations

Pedagogical Sequence for AC9M9SP01: Begin with a guided inquiry lesson where students measure side lengths of nested $30^\circ$-$60^\circ$-$90^\circ$ and $45^\circ$-$45^\circ$-$90^\circ$ triangles drawn on grid paper or via dynamic geometry software (e.g., GeoGebra). Have students calculate $\frac{\text{opposite}}{\text{hypotenuse}}$ for different-sized triangles and observe that the quotient is invariant for a constant angle. Bridge this discovery directly to the formal definition of sine and similarity proofs ($AA$), explicitly dispelling the notion of 'sine' as an isolated operation and rooting it in geometric proportion.

Understanding Sine as a Ratio

Naming the Sides

The Sine Ratio