fixed all Calculator with multiple instances

Author: aryan

content/exercises/graded-assignments/mathematics-1/q2.md

@@ -46,15 +46,15 @@ excludeSearch: false
 
 
 
-<!-- {{< math/calc3 a=10 b=5 formula="a + b * 2" >}} -->
+{{< math/calc3 a=10 b=5 formula="a + b * 2" >}}
 
-<!-- {{< math/calc3 x=2 y=3 z=4 formula="x * y + z" >}} -->
+{{< math/calc3 x=2 y=3 z=4 formula="x * y + z" >}}
 
 <!-- {{< math/calc3 initialValue=10 growthRate=2 time=5 formula="initialValue * (1 + growthRate/100) ^ time" >}} -->
 
 
 
 
-<!-- {{< math/add_numbers num1="5" num2="10" buttonText="Add Now" >}} -->
+{{< math/add_numbers num1="5" num2="10" buttonText="Add Now" >}}
 
-<!-- {{< math/add_numbers num1="5" num2="20" buttonText="Add Now" >}} -->
+{{< math/add_numbers num1="5" num2="20" buttonText="Add Now" >}}

layouts/shortcodes/calc.html

@@ -1,38 +1,53 @@
-<!-- filepath: d:\Code\hextra-notes\layouts\shortcodes\math\calc3.html -->
-{{ $id := printf "calc_%d" now.UnixNano }}
-{{ $formula := .Get "formula" | default "a + b" }}
-
-<div id="{{ $id }}">
-    <label for="formula-{{ $id }}">Formula:</label>
-    <input type="text" id="formula-{{ $id }}" value="{{ $formula }}">
+{{/* Generate a unique ID for this instance */}}
+{{- $uid := .Page.Scratch.Get "addCounter" | default 0 -}}
+{{- .Page.Scratch.Set "addCounter" (add $uid 1) -}}
 
-    {{ range $key, $value := .Params }}
-        {{ if ne $key "formula" }}
-            <label for="{{ $key }}-{{ $id }}">{{ $key }}:</label>
-            <input type="number" id="{{ $key }}-{{ $id }}" value="{{ $value }}">
-        {{ end }}
+{{ $formula := .Get "formula" | default "a + b" }}
+<div id="calc-{{$uid}}" class="calc-box">
+  {{ range $key, $value := .Params }}
+    {{ if ne $key "formula" }}
+      <label>
+        {{ $key }}:
+        <input type="number" id="calc-{{$uid}}-{{$key}}" value="{{ $value }}">
+      </label>
+      <br>
     {{ end }}
-
-    <button onclick="calculate_{{ $id }}()">Calculate</button>
-    <p>Result: <span id="result-{{ $id }}"></span></p>
+  {{ end }}
+  <label>
+    Formula:
+    <input type="text" id="calc-{{$uid}}-formula" value="{{ $formula }}">
+  </label>
+  <br>
+  <button type="button" onclick="calcSolve('calc-{{$uid}}')">Solve</button>
+  <div id="calc-{{$uid}}-result">Result: </div>
 </div>
 
 <script>
-function calculate_{{ $id }}() {
-    try {
-        const formulaInput = document.getElementById('formula-{{ $id }}').value;
-        const vars = {};
-        {{ range $key, $value := .Params }}
-            {{ if ne $key "formula" }}
-                vars["{{ $key }}"] = parseFloat(document.getElementById('{{ $key }}-{{ $id }}').value) || 0;
-            {{ end }}
-        {{ end }}
+function calcSolve(boxId) {
+  const box = document.getElementById(boxId);
+  const inputs = box.querySelectorAll('input[type="number"]');
+  let formula = box.querySelector('input[type="text"]').value;
+  inputs.forEach(input => {
+    const varName = input.id.split('-').pop();
+    formula = formula.replace(new RegExp('\\b' + varName + '\\b', 'g'), input.value || '0');
+  });
+  try {
+    // For public sites, use a math parser instead of eval for safety!
+    const result = eval(formula);
+    box.querySelector('[id$="result"]').textContent = "Result: " + result;
+  } catch {
+    box.querySelector('[id$="result"]').textContent = "Result: Error in formula";
+  }
+}
+</script>
 
-        const result = new Function(...Object.keys(vars), 'return ' + formulaInput + ';')(...Object.values(vars));
-        document.getElementById('result-{{ $id }}').textContent = result;
-    } catch (error) {
-        document.getElementById('result-{{ $id }}').textContent = "Invalid Formula";
-        console.error("Error in calculate_{{ $id }}():", error);
-    }
+<style>
+.calc-box {
+  border: 1px solid #ccc; border-radius: 8px; padding: 1em; margin: 1em 0; max-width: 320px;
+  background: #f9f9f9; font-family: system-ui, sans-serif;
 }
-</script>
+.calc-box label { display: block; margin-bottom: 0.5em; }
+.calc-box input { margin-left: 0.5em; }
+.calc-box button { margin-top: 0.5em; }
+.calc-box div[id$="result"] { margin-top: 0.5em; font-weight: bold; color: #007800; }
+</style>