Update index.html

Author: Gmac4247

index.html

@@ -3043,32 +3043,43 @@ <h3 itemprop="eduQuestionType" style="margin:7px">Area of a Circle Segment</h3>
 <input id="parent-radius" type="number" step="any" oninput="segmentArea()">
 <br>
 <script>
-	function segmentArea() {
-  let hVal = document.getElementById('segment-height').value;
-  let rVal = document.getElementById('parent-radius').value;
-  let lVal = document.getElementById('chord-length').value;
+	let calculated = false;
+
+function segmentArea() {
+  if (calculated) {
+    // Clear everything on next input after a calculation
+    document.getElementById('segment-height').value = "";
+    document.getElementById('parent-radius').value = "";
+    document.getElementById('chord-length').value = "";
+    document.getElementById('segment-area').innerText = "";
+    calculated = false; // reset flag
+    return;
+  }
 
-  // Treat empty string as NaN
-  let h = hVal === "" ? NaN : parseFloat(hVal);
-  let r = rVal === "" ? NaN : parseFloat(rVal);
-  let l = lVal === "" ? NaN : parseFloat(lVal);
+  let h = parseFloat(document.getElementById('segment-height').value);
+  let r = parseFloat(document.getElementById('parent-radius').value);
+  let l = parseFloat(document.getElementById('chord-length').value);
 
   let known = [!isNaN(h), !isNaN(r), !isNaN(l)].filter(Boolean).length;
   if (known < 2) {
     document.getElementById('segment-area').innerText = "";
-    return; // don’t auto‑fill anything
+    return;
   }
 
-  // Derive missing property only once we have exactly 2 inputs
+  // Case 1: height + radius known → derive length
   if (!isNaN(h) && !isNaN(r) && isNaN(l)) {
     let angle = Acos((r - h) / r);
     l = 2 * r * sin(angle);
     document.getElementById('chord-length').value = l.toFixed(5);
   }
+
+  // Case 2: height + length known → derive radius
   if (!isNaN(h) && !isNaN(l) && isNaN(r)) {
     r = (l ** 2 + 4 * h ** 2) / (8 * h);
     document.getElementById('parent-radius').value = r.toFixed(5);
   }
+
+  // Case 3: length + radius known → derive height
   if (!isNaN(l) && !isNaN(r) && isNaN(h)) {
     h = r - Math.sqrt(r ** 2 - (l / 2) ** 2);
     document.getElementById('segment-height').value = h.toFixed(5);
@@ -3085,15 +3096,18 @@ <h3 itemprop="eduQuestionType" style="margin:7px">Area of a Circle Segment</h3>
   let angle = Acos((r - h) / r);
   let area = angle * r ** 2 - (r - h) * (l / 2);
 
-  // Output
+  // Output with semicircle reminders
   if (h === r || h === l / 2 || l === 2 * r) {
     document.getElementById('segment-area').innerText =
       `Semicircle area: ${area.toFixed(5)} square units`;
   } else {
     document.getElementById('segment-area').innerText =
       `Area: ${area.toFixed(5)} square units`;
   }
-	  }
+
+  // Mark that a calculation has been completed
+  calculated = true;
+}
 </script>
   <p id="segment-area"></p>
 </div>