Update index.html

Segment area calculator

Author: Gmac4247

index.html

@@ -3042,71 +3042,42 @@ <h3 itemprop="eduQuestionType" style="margin:7px">Area of a Circle Segment</h3>
   <label for="parent-radius">Circle Radius:</label>
   <input id="parent-radius" type="number" value="0" step="any">
 
-  <script>
-    function segmentArea(length, height, angle, radius) {
-      return angle * radius ** 2 - (radius - height) * length / 2;
-    }
-
-    function updateSegmentArea() {
-      const length = parseFloat(document.getElementById('chord-length').value);
-      const height = parseFloat(document.getElementById('segment-height').value);
-      let radius = parseFloat(document.getElementById('parent-radius').value);
-
-      if (isNaN(height) || isNaN(length) || isNaN(radius)) {
-        document.getElementById('segment-area').innerText = '';
-        return;
-      }
-
-      // Case 1: height and radius known
-      if (height > 0 && radius > 0) {
-        if (height > radius) {
-          document.getElementById('segment-area').innerText =
-            'The height of a circle segment is shorter than the parent radius.';
-          return;
-        }
-
-        const ratio = (radius - height) / radius;
-        const angle = Acos(ratio);
-        const length = 2 * Math.sqrt(radius ** 2 - (radius - height) ** 2);
-        const area = segmentArea(length, height, angle, radius);
-     
-        document.getElementById('segment-area').innerText =
-          `Area: ${area.toFixed(5)} square units`;
-      }
-
-      // Case 2: height and chord known
-      else if (height > 0 && length > 0) {
-        const ratio = 2 * height / length;
-
-        if (ratio <= 0) {
-          document.getElementById('segment-area').innerText = '';
-          return;
-        }
+<script>
+function segmentArea(length, height, angle, radius) {
+  // Sector area minus triangle area
+  return angle * radius ** 2 - (radius - height) * length / 2;
+}
 
-        if (ratio < 0.11 || ratio > 1) {
-          document.getElementById('segment-area').innerText = 'This ratio is out of range';
-          return;
-        }
+function calculateSegmentArea(height, radius = null, length = null) {
+  let angle, area;
+
+  if (radius) {
+    // Case 1: height + radius → derive chord length
+    const ratio = (radius - height) / radius;
+    angle = Acos(ratio);
+    length = 2 * radius * sin(angle / 2);
+  } else if (length) {
+    // Case 2: height + chord length → derive radius
+    radius = (height / 2) + (length ** 2) / (8 * height);
+    angle = 2 * Asin(length / (2 * radius));
+  } else {
+    document.getElementById('segment-area').innerText =
+      'Error: Provide either radius or chord length.';
+    return;
+  }
 
-        const angle = 2 * Atan(ratio);
-        const sine = sin(angle);
-        radius = length / (2 * sine);
-        const area = segmentArea(length, height, angle, radius);
-
-        if (ratio === 1) {
-          document.getElementById('segment-area').innerText =
-            `Area of semi-circle: ${area.toFixed(5)} square units`;
-        } else {
-          document.getElementById('segment-area').innerText =
-            `Area: ${area.toFixed(5)} square units`;
-        }
-      }
-    }
+  area = segmentArea(length, height, angle, radius);
 
-    document.getElementById('chord-length').addEventListener('input', updateSegmentArea);
-    document.getElementById('segment-height').addEventListener('input', updateSegmentArea);
-    document.getElementById('parent-radius').addEventListener('input', updateSegmentArea);
-  </script>
+  // Special semicircle cases
+  if (radius === height || height === length / 2) {
+    document.getElementById('segment-area').innerText =
+      `Area of semi-circle: ${area.toFixed(5)} square units`;
+  } else {
+    document.getElementById('segment-area').innerText =
+      `Area: ${area.toFixed(5)} square units`;
+  }
+}
+</script>
   <p id="segment-area"></p>
 </div>
 </section>