Skip to content

Commit ebe7085

Browse files
author
aryan
committed
Advance Modular Calculator Added with multiple instancing
1 parent 624e9ed commit ebe7085

11 files changed

Lines changed: 220 additions & 9 deletions

File tree

‎content/blog/math/add-geogebra-graphs-in-HUGO-as-shortcode.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,15 +95,15 @@ To integrate GeoGebra into a Hugo website as a shortcode, you can create a custo
9595

9696
## Math/GeoGebra
9797

98-
{{< math/geogebra id="azbxfs9y" width="600" height="600" >}}
98+
<!-- {{< math/geogebra id="azbxfs9y" width="600" height="600" >}}
9999
100100
{{< math/geogebra id="fe9vckwu" width="600" height="600" >}}
101101
102-
{{< math/geogebra id="u7mzkqt2" width="600" height="600" sri="true" >}}
102+
{{< math/geogebra id="u7mzkqt2" width="600" height="600" sri="true" >}} -->
103103

104104
## i-frame
105105

106-
<iframe src="https://www.geogebra.org/classic/azbxfs9y?embed" width="800" height="600" allowfullscreen style="border: 1px solid #e4e4e4;border-radius: 4px;" frameborder="0"></iframe>
106+
<!-- <iframe src="https://www.geogebra.org/classic/azbxfs9y?embed" width="800" height="600" allowfullscreen style="border: 1px solid #e4e4e4;border-radius: 4px;" frameborder="0"></iframe> -->
107107

108108

109109
## 2. How Hugo Shortcodes Work

‎content/blog/math/desmos-vs-geogebra.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ Both are free, widely used, and highly respected in education. Many teachers use
9090

9191
## GeoGebra Shortcode 2
9292

93-
{{< geogebra material_id="qhqxxhp9" width="700" height="500" app="graphing" toolbar="true" algebra="true" menu="true" >}}
93+
{{< geogebra material_id="fe9vckwu" width="700" height="500" app="graphing" toolbar="true" algebra="true" menu="true" >}}
9494

9595
## i frame
9696

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,20 @@ series:
2525

2626
{{< math/calc3 a=10 b=5 c=3 d=5 e=5 f=5 g=5 h=5 i=5 j=5 k=5 l=5 m=5 n=5 formula="a+b+c+d+e+f+g+h+i+j+k+l+m+n / 2" >}}
2727

28+
{{< calc/calc-wrapper >}}
29+
{{< calc/input name="a" value="2" >}}
30+
{{< calc/input name="b" value="3" >}}
31+
{{< calc/formula value="a + b * 2" >}}
32+
{{< calc/answer >}}
33+
{{< /calc/calc-wrapper >}}
34+
35+
{{< calc/calc-wrapper >}}
36+
{{< calc/input name="a" value="2" >}}
37+
{{< calc/input name="b" value="3" >}}
38+
{{< calc/formula value="Math.pow(2,a)" >}}
39+
{{< calc/answer >}}
40+
{{< /calc/calc-wrapper >}}
41+
2842
**Solution:**
2943
Let $m_x$ and $\sigma_x$ be the mean and population standard deviation of sales of OnePlus respectively.
3044

@@ -38,9 +52,9 @@ $$
3852

3953
Therefore, Population standard deviation of sales of OnePlus = $\sqrt{\sigma_x^2}$
4054

41-
{{< math/calc3 a=10 b=5 formula="a + b * 2" >}}
55+
<!-- {{< math/calc3 a=10 b=5 formula="a + b * 2" >}} -->
4256

43-
{{< math/calc3 x=2 y=3 z=4 formula="x * y + z" >}}
57+
<!-- {{< math/calc3 x=2 y=3 z=4 formula="x * y + z" >}} -->
4458

4559
---
4660

‎content/notes/iit-madras/data-science-and-application/foundational-level/mathematics/week 1/aq1.11.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,8 @@ The image also provides context stating: "The domain and range of the function t
119119

120120
{{< plotly formula="Math.sin(x)" xmin="-6.28" xmax="6.28" step="0.05" title="y = sin(x)" xlabel="x" ylabel="y" >}}
121121

122+
### Quadratic Equation
123+
122124
{{< plotly formula="x^2-5" xmin="-6.28" xmax="6.28" step="0.05" title="y = sin(x)" xlabel="x" ylabel="y" >}}
123125

124126
{{< plotly formula="(Math.pow(x,2)) - 5" xmin="-6.28" xmax="6.28" step="0.05" title="y = sin(x)" xlabel="x" ylabel="y" >}}

‎layouts/shortcodes/calc/answer.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{{ $wrapper := .Parent.Get "wrapperId" }}
2+
<!-- The answer box is now handled in calc-wrapper for better styling and placement -->

‎layouts/shortcodes/calc/calc-wrapper.html‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
{{/* Generate a unique ID for this instance */}}
2+
{{- $wrapperId := .Page.Scratch.Get "addCounter" | default 0 -}}
3+
{{- .Page.Scratch.Set "addCounter" (add $wrapperId 1) -}}
4+
5+
{{/* {{ $wrapperId := printf "calc_x%d" now.UnixNano }} */}}
6+
7+
<div class="calc-wrapper" id="{{ $wrapperId }}">
8+
<div class="calc-fields">
9+
{{ .Inner | .Page.RenderString (dict "wrapperId" $wrapperId) }}
10+
</div>
11+
<button class="calc-btn" onclick="calc_('{{$wrapperId}}')">Calculate</button>
12+
<div class="calc-answer" id="answer-{{ $wrapperId }}">Result: </div>
13+
</div>
14+
15+
<script>
16+
function calc_(Id) {
17+
// Use the wrapper ID to find the correct elements
18+
var wrapper = document.getElementById(Id);
19+
{{/* var wrapper = document.getElementById('{{ $wrapperId }}'); */}}
20+
var inputs = wrapper.querySelectorAll('input[data-calc-var]');
21+
var vars = {};
22+
inputs.forEach(function(input) {
23+
var name = input.getAttribute('data-calc-var');
24+
vars[name] = parseFloat(input.value) || 0;
25+
});
26+
var formulaInput = wrapper.querySelector('input[data-calc-formula]');
27+
var answerDiv = wrapper.querySelector('.calc-answer');
28+
if (!formulaInput || !answerDiv) {
29+
answerDiv.textContent = "Result: Error (missing formula or answer)";
30+
return;
31+
}
32+
var formula = formulaInput.value;
33+
Object.keys(vars).forEach(function(name) {
34+
var re = new RegExp('\\b' + name + '\\b', 'g');
35+
formula = formula.replace(re, vars[name]);
36+
});
37+
try {
38+
var result = eval(formula);
39+
answerDiv.textContent = "Result: " + result;
40+
} catch (e) {
41+
answerDiv.textContent = "Result: Error";
42+
}
43+
}
44+
</script>
45+
<style>
46+
.calc-wrapper {
47+
max-width: 350px;
48+
margin: 2em auto;
49+
padding: 1.5em 2em;
50+
border-radius: 12px;
51+
background: #f9f9f9;
52+
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
53+
font-family: system-ui, sans-serif;
54+
transition: background 0.3s, color 0.3s;
55+
}
56+
.calc-fields {
57+
display: flex;
58+
flex-direction: column;
59+
gap: 1em;
60+
}
61+
.calc-label {
62+
font-weight: 500;
63+
margin-bottom: 0.3em;
64+
}
65+
.calc-input, .calc-formula {
66+
width: 100%;
67+
padding: 0.4em 0.6em;
68+
border: 1px solid #ccc;
69+
border-radius: 6px;
70+
font-size: 1em;
71+
background: #fff;
72+
color: #222;
73+
transition: border 0.2s;
74+
}
75+
.calc-input:focus, .calc-formula:focus {
76+
border-color: #0078d4;
77+
outline: none;
78+
}
79+
.calc-btn {
80+
width: 100%;
81+
padding: 0.6em 0;
82+
background: #0078d4;
83+
color: #fff;
84+
border: none;
85+
border-radius: 6px;
86+
font-size: 1.1em;
87+
font-weight: 600;
88+
cursor: pointer;
89+
margin-top: 1em;
90+
transition: background 0.2s;
91+
}
92+
.calc-btn:hover {
93+
background: #005fa3;
94+
}
95+
.calc-answer {
96+
margin-top: 1em;
97+
font-size: 1.1em;
98+
font-weight: 500;
99+
color: #007800;
100+
min-height: 1.5em;
101+
}
102+
@media (prefers-color-scheme: dark) {
103+
.calc-wrapper {
104+
background: #23272f;
105+
color: #f3f3f3;
106+
box-shadow: 0 2px 12px rgba(0,0,0,0.32);
107+
}
108+
.calc-input, .calc-formula {
109+
background: #181b20;
110+
color: #f3f3f3;
111+
border: 1px solid #444;
112+
}
113+
.calc-input:focus, .calc-formula:focus {
114+
border-color: #4fa3ff;
115+
}
116+
.calc-btn {
117+
background: #4fa3ff;
118+
color: #181b20;
119+
}
120+
.calc-btn:hover {
121+
background: #0078d4;
122+
color: #fff;
123+
}
124+
.calc-answer {
125+
color: #7fff7f;
126+
}
127+
}
128+
</style>

‎layouts/shortcodes/calc/formula.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{{ $wrapper := .Parent.Get "wrapperId" }}
2+
<div>
3+
<label class="calc-label" for="formula-{{ $wrapper }}">Formula:</label>
4+
<input class="calc-formula" type="text" id="formula-{{ $wrapper }}" data-calc-formula value="{{ .Get "value" | default "a + b" }}">
5+
</div>

‎layouts/shortcodes/calc/input.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{{ $wrapper := .Parent.Get "wrapperId" }}
2+
<div>
3+
<label class="calc-label" for="input-{{ $wrapper }}-{{ .Get "name" }}">{{ .Get "name" | title }}:</label>
4+
<input class="calc-input" type="number" id="input-{{ $wrapper }}-{{ .Get "name" }}" data-calc-var="{{ .Get "name" }}" value="{{ .Get "value" | default "0" }}">
5+
</div>

‎layouts/shortcodes/geogebra-js.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
{{ $materialID := .Get "id" | default "" }}
2+
{{ $id := delimit (slice "chart" (partial "functions/uid.html" .)) "-" }}
3+
24
{{ $width := .Get "width" | default "800" }}
35
{{ $height := .Get "height" | default "600" }}
46
{{ $appName := .Get "appName" | default "graphing" }}

‎layouts/shortcodes/geogebra.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- filepath: d:\Code\hextra-notes\layouts\shortcodes\geogebra.html -->
2-
{{ $id := delimit (slice "ggb_%d" (partial "functions/uid.html" .)) "-" }}
3-
{{- $uid := .Page.Scratch.Get "addCounter" | default 0 -}}
4-
{{- .Page.Scratch.Set "addCounter" (add $uid 1) -}}
2+
{{ $uid := delimit (slice "ggb_%d" (partial "functions/uid.html" .)) "-" }}
3+
{{/* {{- $uid := .Page.Scratch.Get "addCounter" | default 0 -}}
4+
{{- .Page.Scratch.Set "addCounter" (add $uid 1) -}} */}}
55

66
{{/* {{ $id := printf "ggb_%d" now.UnixNano }} */}}
77
<div id="{{ $uid }}"></div>

0 commit comments

Comments
 (0)