Advance question calculator - which can store value of one formula as it's label and can be put to use in another formula

Author: aryan

content/exercises/graded-assignments/statistics-1/week-4-questions.md

@@ -53,6 +53,14 @@ Therefore, Population standard deviation of sales of OnePlus = $\sqrt{\sigma_x^2
 
 ---
 
+{{< qna/question >}}
+  {{< qna/input name="a" value="2" >}}
+  {{< qna/input name="b" value="3" >}}
+  {{< qna/formula label="sum" value="a + b" >}}
+  {{< qna/formula label="average" value="sum / 2" >}}
+  {{< qna/result >}}
+{{< /qna/question >}}
+
 #### 2. What is the sample standard deviation of sales of BBK Electronics? (Enter the answer correct to 2 decimal accuracy)
 
 **Solution:**

layouts/shortcodes/qna/formula.html

@@ -1,8 +1,8 @@
 {{ $wrapper := .Parent.Get "wrapperId" }}
-<div>
+{{/*  <div>
   <label class="calc-label" for="formula-{{ $wrapper }}">{{ .Get "label" | default "Formula:" }} =</label>
   <input class="calc-formula" type="text" id="formula-{{ $wrapper }}" data-calc-formula value="{{ .Get "value" | default "a + b" }}">
-</div>
+</div>  */}}
 
 {{/*  <div>
   <label class="calc-label" for="formula-{{ $wrapper }}">Formula:</label>
@@ -18,4 +18,14 @@
   <p class="calc-formula" id="formula-{{ $wrapper }}" data-calc-formula>
     {{ .Get "value" | default "a + b" }}
   </p>
-</div>  */}}
+</div>  */}}
+
+{{ $label := .Get "label" | default (printf "formula_%s" $wrapper) }}
+<div>
+  <label class="calc-label" for="formula-{{ $wrapper }}">
+    {{ $label }}
+  </label>
+  <p class="calc-formula" id="formula-{{ $wrapper }}" data-calc-formula="{{ .Get "value" | default "a + b" }}" data-calc-label="{{ $label }}">
+    {{ .Get "value" | default "a + b" }}<span class="calc-formula-result"></span>
+  </p>
+</div>

layouts/shortcodes/qna/input.html

@@ -10,4 +10,10 @@
 
   {{/*  <label class="calc-label" for="input-{{ $wrapper }}-{{ .Get "name" }}">{{ .Get "name" | title }}:</label>  */}}
   {{/*  <input class="calc-input" type="number" id="input-{{ $wrapper }}-{{ .Get "name" }}" data-calc-var="{{ .Get "name" }}" value="{{ .Get "value" | default "0" }}">  */}}
+  {{/*  <input class="calc-input" type="number" id="input-{{ $wrapper }}-{{ .Get "name" }}" data-calc-var="{{ .Get "name" }}" value="{{ .Get "value" | default "0" }}">  */}}
+
+
+<div>
+  <label class="calc-label" for="input-{{ $wrapper }}-{{ .Get "name" }}">{{ .Get "name" | title }}:</label>
   <input class="calc-input" type="number" id="input-{{ $wrapper }}-{{ .Get "name" }}" data-calc-var="{{ .Get "name" }}" value="{{ .Get "value" | default "0" }}">
+</div>

layouts/shortcodes/qna/question.html

@@ -8,37 +8,49 @@
   <div class="calc-fields">
     {{ .Inner | .Page.RenderString (dict "wrapperId" $wrapperId) }}
   </div>
-  <button class="calc-btn" onclick="calc_('{{$wrapperId}}')">Calculate</button>
-  <div class="calc-answer" id="answer-{{ $wrapperId }}">Result: </div>
+  <button class="calc-btn" onclick="calc_('{{ $wrapperId }}')">Calculate</button>
 </div>
-
 <script>
 function calc_(Id) {
-  // Use the wrapper ID to find the correct elements
-  var wrapper = document.getElementById(Id);                  
-  {{/*  var wrapper = document.getElementById('{{ $wrapperId }}');  */}}
+  var wrapper = document.getElementById(Id);
   var inputs = wrapper.querySelectorAll('input[data-calc-var]');
   var vars = {};
   inputs.forEach(function(input) {
     var name = input.getAttribute('data-calc-var');
     vars[name] = parseFloat(input.value) || 0;
   });
-  var formulaInput = wrapper.querySelector('input[data-calc-formula]');
-  var answerDiv = wrapper.querySelector('.calc-answer');
-  if (!formulaInput || !answerDiv) {
-    answerDiv.textContent = "Result: Error (missing formula or answer)";
-    return;
-  }
-  var formula = formulaInput.value;
-  Object.keys(vars).forEach(function(name) {
-    var re = new RegExp('\\b' + name + '\\b', 'g');
-    formula = formula.replace(re, vars[name]);
+
+  // Evaluate formulas in order, storing results by label
+  var formulas = wrapper.querySelectorAll('[data-calc-formula]');
+  formulas.forEach(function(formulaEl) {
+    var label = formulaEl.getAttribute('data-calc-label');
+    var formula = formulaEl.getAttribute('data-calc-formula');
+    // Replace all variable names in the formula with their values
+    Object.keys(vars).forEach(function(name) {
+      var re = new RegExp('\\b' + name + '\\b', 'g');
+      formula = formula.replace(re, vars[name]);
+    });
+    // Replace previous formula results by label
+    Object.keys(vars).forEach(function(name) {
+      var re = new RegExp('\\b' + name + '\\b', 'g');
+      formula = formula.replace(re, vars[name]);
+    });
+    try {
+      var result = eval(formula);
+      vars[label] = result;
+      // Show result in the formula label if a result span exists
+      var resultSpan = formulaEl.parentElement.querySelector('.calc-formula-result');
+      if(resultSpan) resultSpan.textContent = " = " + result;
+    } catch (e) {
+      if(resultSpan) resultSpan.textContent = " = Error";
+    }
   });
-  try {
-    var result = eval(formula);
-    answerDiv.textContent = "Result: " + result;
-  } catch (e) {
-    answerDiv.textContent = "Result: Error";
+
+  // Show the last formula's result in the answer box
+  var lastLabel = formulas.length ? formulas[formulas.length-1].getAttribute('data-calc-label') : null;
+  var answerDiv = wrapper.querySelector('.calc-answer');
+  if (answerDiv && lastLabel && vars[lastLabel] !== undefined) {
+    answerDiv.textContent = "Result: " + vars[lastLabel];
   }
 }
 </script>

layouts/shortcodes/qna/result.html

@@ -1,2 +1,4 @@
 {{ $wrapper := .Parent.Get "wrapperId" }}
-<!-- The answer box is now handled in calc-wrapper for better styling and placement -->
+<!-- The answer box is now handled in calc-wrapper for better styling and placement -->
+
+<div class="calc-answer" id="answer-{{ $wrapper }}">Result: </div>