Skip to content

Commit aa9ef53

Browse files
simplearyansimplearyan
committed
Clean code | remove localstrorage code for now - maybe in future
1 parent 8616bd3 commit aa9ef53

7 files changed

Lines changed: 75 additions & 215 deletions

File tree

‎content/exercises/graded-assignments/mathematics-1/mathematic-questions.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ Check equation 2: 4(8.5) + (-20) = 34 - 20 = 14 ✓
5252
{{</ qna/question >}}
5353

5454
{{< qna/question >}}
55-
**Q:** If the slope of parabola y = ax² + bx + c, where a, b, c ∈ ℝ\{0} at points ({{< qna/variable name="a" value="3" >}}, {{< qna/variable name="b" value="2" >}}) and ({{< qna/variable name="c" value="2" >}}, {{< qna/variable name="d" value="3" >}}) are {{< qna/variable name="x" value="31" >}} and {{< qna/variable name="y" value="14" >}} respectively, then find the value of a.
55+
**Q:** If the slope of parabola y = ax² + bx + c, where a, b, c ∈ ℝ\{0} at points ({{< qna/var name="a" value="3" >}}, {{< qna/var name="b" value="2" >}}) and ({{< qna/var name="c" value="2" >}}, {{< qna/var name="d" value="3" >}}) are {{< qna/var name="x" value="31" >}} and {{< qna/var name="y" value="14" >}} respectively, then find the value of a.
5656

5757
---
5858

@@ -65,7 +65,7 @@ For parabola y = ax² + bx + c, the slope at any point is:
6565

6666
**Step 2: Set up equations using given conditions** 📐
6767

68-
At point (3, 2), slope = 31:
68+
At point ({{< qna/var-value name="a" >}}, {{< qna/var-value name="b" >}}), slope = {{< qna/var-value name="x" >}}:
6969

7070
\$ 2a(3) + b = 31 \$
7171
\$ 6a + b = 31 \quad ...(equation 1) \$

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ categories:
1313

1414
| Dealer's Location | OnePlus | BBK Electronics |
1515
| :-- | :-- | :-- |
16-
| Chennai | {{< qna/variable name="a" value="2" >}} | {{< qna/variable name="b" value="2" >}} |
17-
| Punjab | {{< qna/variable name="c" value="2" >}} | {{< qna/variable name="d" value="2" >}} |
18-
| Chennai | {{< qna/variable name="e" value="2" >}} | {{< qna/variable name="f" value="2" >}} |
19-
| Punjab | {{< qna/variable name="g" value="2" >}} | {{< qna/variable name="h" value="2" >}} |
20-
| Chennai | {{< qna/variable name="i" value="2" >}} | {{< qna/variable name="j" value="2" >}} |
21-
| Punjab | {{< qna/variable name="k" value="2" >}} | {{< qna/variable name="l" value="2" >}} |
22-
| Chennai | {{< qna/variable name="m" value="2" >}} | {{< qna/variable name="n" value="2" >}} |
16+
| Chennai | {{< qna/var name="a" value="2" >}} | {{< qna/var name="b" value="2" >}} |
17+
| Punjab | {{< qna/var name="c" value="2" >}} | {{< qna/var name="d" value="2" >}} |
18+
| Chennai | {{< qna/var name="e" value="2" >}} | {{< qna/var name="f" value="2" >}} |
19+
| Punjab | {{< qna/var name="g" value="2" >}} | {{< qna/var name="h" value="2" >}} |
20+
| Chennai | {{< qna/var name="i" value="2" >}} | {{< qna/var name="j" value="2" >}} |
21+
| Punjab | {{< qna/var name="k" value="2" >}} | {{< qna/var name="l" value="2" >}} |
22+
| Chennai | {{< qna/var name="m" value="2" >}} | {{< qna/var name="n" value="2" >}} |
2323

2424

2525
#### 1. What is the population standard deviation of sales of OnePlus? (Enter the answer correct to 2 decimal accuracy)
@@ -50,13 +50,13 @@ Therefore, Population standard deviation of sales of OnePlus = $\sqrt{\sigma_x^2
5050
---
5151

5252
{{< qna/question >}}
53-
The value of a: {{% qna/variable name="a" value="2" %}} meters.
53+
The value of a: {{% qna/var name="a" value="2" %}} meters.
5454

55-
b = {{< qna/variable name="b" value="3" >}} meters.
55+
b = {{< qna/var name="b" value="3" >}} meters.
5656

5757
{{< qna/formula label="sum" title="Sum of " value="a + b" hide="false" >}}
5858

59-
**Formula**: Sum of a + b = {{< qna/variable-value name="a" >}} + {{< qna/variable-value name="b" >}}
59+
**Formula**: Sum of a + b = {{< qna/var-value name="a" >}} + {{< qna/var-value name="b" >}}
6060

6161
The sum is: {{< qna/formula-value label="sum" >}}
6262

‎layouts/shortcodes/qna/question.html‎

Lines changed: 15 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -74,125 +74,36 @@
7474
if (answerDiv && lastLabel && vars[lastLabel] !== undefined) {
7575
answerDiv.textContent = "✅ Result: " + Number(vars[lastLabel]).toLocaleString(undefined, { maximumFractionDigits: 5 });
7676
}
77+
78+
// Update all variable-value spans for this wrapper
79+
updateVariableValueSpans(wrapper, vars);
80+
}
81+
82+
83+
// Update all variable-value spans for this wrapper using current vars
84+
function updateVariableValueSpans(wrapper, vars) {
85+
if (!wrapper) return;
86+
wrapper.querySelectorAll('.qna-variable-value').forEach(function(el) {
87+
var name = el.getAttribute('data-var-name');
88+
el.textContent = (vars && vars[name] !== undefined) ? vars[name] : '';
89+
});
7790
}
78-
// Calculate result on window load
79-
window.addEventListener("DOMContentLoaded", function () {
80-
calc_("{{ $wrapperId }}");
81-
});
8291

83-
// To calculate the result automatically when the user edits a variable (contenteditable or input),
84-
// add an event listener for input and change events on all [data-calc-var] elements.
85-
{{/* window.addEventListener("DOMContentLoaded", function () {
92+
// Calculate result on window load and set up listeners
93+
window.addEventListener("DOMContentLoaded", function () {
8694
calc_("{{ $wrapperId }}");
87-
// Listen for changes on all variable fields
8895
var wrapper = document.getElementById("{{ $wrapperId }}");
8996
if (wrapper) {
9097
wrapper.querySelectorAll("[data-calc-var]").forEach(function (el) {
9198
el.addEventListener("input", function () {
9299
calc_("{{ $wrapperId }}");
93100
});
94-
// For input elements, also listen to 'change'
95101
el.addEventListener("change", function () {
96102
calc_("{{ $wrapperId }}");
97103
});
98104
});
99105
}
100-
}); */}}
101-
102-
103-
// Store each variable's value to localStroage on input/change.
104-
// On page load, restore values from localStroage (if present).
105-
106-
// Helper to get a unique key for each variable in this calculator
107-
function getVarKey(wrapperId, varName) {
108-
return "calc_" + wrapperId + "_" + varName;
109-
}
110-
111-
{{/* function saveVarsToLocal(wrapperId) {
112-
var wrapper = document.getElementById(wrapperId);
113-
if (!wrapper) return;
114-
wrapper.querySelectorAll("[data-calc-var]").forEach(function (el) {
115-
var name = el.getAttribute("data-calc-var");
116-
var val = el.value !== undefined ? el.value : el.textContent;
117-
localStorage.setItem(getVarKey(wrapperId, name), val);
118106
});
119-
} */}}
120-
121-
// And in your JS (in question.html), after every input/change, store the value in localStorage by variable name:
122-
123-
function saveVarsToLocalByName(wrapperId) {
124-
var wrapper = document.getElementById(wrapperId);
125-
if (!wrapper) return;
126-
wrapper.querySelectorAll("[data-calc-var]").forEach(function (el) {
127-
var name = el.getAttribute("data-calc-var");
128-
var val = el.value !== undefined ? el.value : el.textContent;
129-
localStorage.setItem("qna_var_" + name, val);
130-
});
131-
}
132-
133-
// Call this function whenever a variable is updated:
134-
window.addEventListener("DOMContentLoaded", function () {
135-
var wrapper = document.getElementById("{{ $wrapperId }}");
136-
if (wrapper) {
137-
wrapper.querySelectorAll("[data-calc-var]").forEach(function (el) {
138-
el.addEventListener("input", function () {
139-
saveVarsToLocalByName("{{ $wrapperId }}");
140-
calc_("{{ $wrapperId }}");
141-
updateVariableValueSpans();
142-
});
143-
el.addEventListener("change", function () {
144-
saveVarsToLocalByName("{{ $wrapperId }}");
145-
calc_("{{ $wrapperId }}");
146-
updateVariableValueSpans();
147-
});
148-
});
149-
}
150-
updateVariableValueSpans();
151-
});
152-
153-
// Function to update all variable-value spans
154-
function updateVariableValueSpans() {
155-
document.querySelectorAll('.qna-variable-value').forEach(function(el) {
156-
var name = el.getAttribute('data-var-name');
157-
var val = localStorage.getItem('qna_var_' + name);
158-
el.textContent = val !== null ? val : '';
159-
});
160-
}
161-
162-
function restoreVarsFromLocal(wrapperId) {
163-
var wrapper = document.getElementById(wrapperId);
164-
if (!wrapper) return;
165-
wrapper.querySelectorAll("[data-calc-var]").forEach(function (el) {
166-
var name = el.getAttribute("data-calc-var");
167-
var stored = localStorage.getItem(getVarKey(wrapperId, name));
168-
if (stored !== null) {
169-
if (el.value !== undefined) {
170-
el.value = stored;
171-
} else {
172-
el.textContent = stored;
173-
}
174-
}
175-
});
176-
}
177-
178-
// On DOMContentLoaded, restore values and set up listeners
179-
window.addEventListener("DOMContentLoaded", function () {
180-
restoreVarsFromLocal("{{ $wrapperId }}");
181-
calc_("{{ $wrapperId }}");
182-
var wrapper = document.getElementById("{{ $wrapperId }}");
183-
if (wrapper) {
184-
wrapper.querySelectorAll("[data-calc-var]").forEach(function (el) {
185-
el.addEventListener("input", function () {
186-
saveVarsToLocal("{{ $wrapperId }}");
187-
calc_("{{ $wrapperId }}");
188-
});
189-
el.addEventListener("change", function () {
190-
saveVarsToLocal("{{ $wrapperId }}");
191-
calc_("{{ $wrapperId }}");
192-
});
193-
});
194-
}
195-
});
196107

197108
</script>
198109

‎layouts/shortcodes/qna/var-value.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{{ $wrapper := .Parent.Get "wrapperId" }}
2+
3+
<span class="qna-variable-value" data-var-name="{{ .Get "name" }}" data-wrapper-id="{{ .Parent.Get "wrapperId" }}"></span>

‎layouts/shortcodes/qna/var.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{{ $wrapper := .Parent.Get "wrapperId" }}
2+
3+
<span>
4+
<span
5+
class="calc-input calc-variable"
6+
id="input-{{ $wrapper }}-{{ .Get "name" }}"
7+
data-calc-var="{{ .Get "name" }}"
8+
contenteditable="true"
9+
spellcheck="false"
10+
style="display:inline-block; min-width:1ch;">
11+
{{ .Get "value" | default "0" }}</span></span>
12+
13+
{{/*
14+
TODO:
15+
Note: You must update your JS to read .textContent instead of .value for these variables. */}}
16+
17+
<style>
18+
.calc-input {
19+
max-width: 50ch;
20+
text-align: center;
21+
}
22+
.calc-input:focus {
23+
outline: none;
24+
border-color: #007bff;
25+
}
26+
.calc-variable{
27+
/* Basic styling for the editable span */
28+
display: inline-block;
29+
min-width: 1.5em; /* Ensure it's not too small when empty */
30+
padding: 0.2em 0.5em;
31+
border-bottom: 2px solid #ccc; /* Add a bottom border to indicate it's editable */
32+
transition: all 0.2s ease-in-out;
33+
cursor: text;
34+
text-align: center;
35+
font-weight: bold;
36+
color: #007bff; /* A distinct color */
37+
}
38+
.calc-variable:focus{
39+
/* Style when the user is editing the content */
40+
outline: none; /* Remove default browser outline */
41+
border-color: #007bff; /* Change border color on focus */
42+
background-color: #e9f5ff; /* Light background on focus */
43+
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add a subtle glow */
44+
}
45+
</style>

‎layouts/shortcodes/qna/variable-value.html‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎layouts/shortcodes/qna/variable.html‎

Lines changed: 0 additions & 98 deletions
This file was deleted.

0 commit comments

Comments
 (0)