TetraGenius/math.html at master · 90PlusWorks/TetraGenius · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practical Math Roadmap 🧮</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; background: #f9f9f9; color: #333; line-height: 1.6; }
        h1, h2 { color: #2c3e50; }
        details { margin-bottom: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 10px; }
        summary { cursor: pointer; font-weight: bold; font-size: 1.2em; padding: 10px; background: #e8f5e9; border-radius: 6px; }
        .intro, .example, .quiz { padding: 15px; }
        .quiz question { margin-bottom: 20px; }
        .quiz label { display: block; margin: 8px 0; }
        button { padding: 8px 16px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #2980b9; }
        #user-section { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 30px; }
        #currentuser { font-weight: bold; margin-top: 10px; }
        .result { font-weight: bold; color: #27ae60; margin-top: 15px; }
        .overall { margin-top: 20px; font-size: 1.1em; }
        a { color: #3498db; }
    </style>
</head>
<body>

    <h1>Practical Math Roadmap for Real Work 🧮</h1>
    <p>This interactive module is based on the viral thread by physicist <a href="https://x.com/kekius_sage" target="_blank">@Kekius_Sage</a> (<a href="https://x.com/kekius_sage/status/2014841012003512616" target="_blank">original post</a>). It distills decades of experience into a grounded, sequential path to learn the mathematics actually needed for science, engineering, data, finance, and other quantitative fields. The focus is on deep understanding, intuition, and real application—not rote memorisation.</p>

    <div id="user-section">
        <label for="username">User name: </label>
        <input type="text" id="username" placeholder="Enter or select a name">
        <button onclick="selectUser()">Select / Add User</button>
        <select id="userlist"></select>
        <p id="currentuser"></p>
        <div class="overall" id="overall-scores"></div>
    </div>

    <details>
        <summary>1. Algebra – The Foundation</summary>
        <div class="intro">
            <h2>Introduction</h2>
            <p>Algebra is where real mathematical thinking begins. Learn to manipulate symbols cleanly and understand the underlying rules and structure. Treat equations not as things to solve mechanically, but as cause–effect relationships: what happens when one variable changes? Slow down until every step feels obvious. Weak algebra makes everything later feel like noise.</p>
        </div>

        <div class="example">
            <h2>Practical Example</h2>
            <p>In physics, Newton's second law F = ma is an algebraic relation. Understanding it as "force causes acceleration proportional to mass" lets you rearrange to a = F/m and immediately see how doubling force doubles acceleration, or doubling mass halves it—intuition that guides real design decisions in engineering.</p>
        </div>

        <div class="quiz">
            <h2>Quiz – Test Your Understanding (3 questions)</h2>
            <form id="algebra-quiz">
                <div class="question">
                    <p>1. What is the main goal when learning algebra according to the roadmap?</p>
                    <label><input type="radio" name="algebra-q1" value="wrong"> a) Become fast at calculation</label>
                    <label><input type="radio" name="algebra-q1" value="correct"> b) Manipulate symbols cleanly and understand structure</label>
                    <label><input type="radio" name="algebra-q1" value="wrong"> c) Memorise formulas</label>
                    <label><input type="radio" name="algebra-q1" value="wrong"> d) Skip to applications</label>
                </div>
                <div class="question">
                    <p>2. How should you view equations in algebra?</p>
                    <label><input type="radio" name="algebra-q2" value="correct"> a) As cause–effect relationships</label>
                    <label><input type="radio" name="algebra-q2" value="wrong"> b) As isolated problems to solve quickly</label>
                    <label><input type="radio" name="algebra-q2" value="wrong"> c) Only numerically</label>
                    <label><input type="radio" name="algebra-q2" value="wrong"> d) As unrelated symbols</label>
                </div>
                <div class="question">
                    <p>3. What happens if you rush through algebra?</p>
                    <label><input type="radio" name="algebra-q3" value="wrong"> a) You finish faster</label>
                    <label><input type="radio" name="algebra-q3" value="correct"> b) Later topics become noisy and confusing</label>
                    <label><input type="radio" name="algebra-q3" value="wrong"> c) Nothing—it’s basic</label>
                    <label><input type="radio" name="algebra-q3" value="wrong"> d) You become better at proofs</label>
                </div>
                <button type="button" onclick="submitQuiz('algebra')">Submit Quiz</button>
            </form>
            <div class="result" id="algebra-result"></div>
        </div>
    </details>

    <details>
        <summary>2. Geometry & Vectors – Building Intuition</summary>
        <div class="intro">
            <h2>Introduction</h2>
            <p>Geometry trains spatial intuition through shapes, distances, and angles. Always connect it to algebra: translate pictures into equations and back. Introduce vectors early—they unify algebra and geometry, providing a powerful language for direction and magnitude that appears everywhere in real problems.</p>
        </div>

        <div class="example">
            <h2>Practical Example</h2>
            <p>In game development or robotics, position and velocity are vectors. Adding a velocity vector to position gives new position. Visualising this geometrically (arrow diagrams) while writing it algebraically (v = Δx/Δt) makes navigation algorithms intuitive rather than abstract.</p>
        </div>

        <div class="quiz">
            <h2>Quiz – Test Your Understanding (3 questions)</h2>
            <form id="geometry-quiz">
                <div class="question">
                    <p>1. Why learn geometry after algebra?</p>
                    <label><input type="radio" name="geometry-q1" value="correct"> a) It builds visual intuition formulas alone can't provide</label>
                    <label><input type="radio" name="geometry-q1" value="wrong"> b) It's easier and quicker</label>
                    <label><input type="radio" name="geometry-q1" value="wrong"> c) To memorise theorems</label>
                    <label><input type="radio" name="geometry-q1" value="wrong"> d) Only for proofs</label>
                </div>
                <div class="question">
                    <p>2. When should vectors be introduced?</p>
                    <label><input type="radio" name="geometry-q2" value="wrong"> a) At the very end</label>
                    <label><input type="radio" name="geometry-q2" value="correct"> b) Early—they unify algebra and geometry</label>
                    <label><input type="radio" name="geometry-q2" value="wrong"> c) Only in physics</label>
                    <label><input type="radio" name="geometry-q2" value="wrong"> d) Never—they’re advanced</label>
                </div>
                <div class="question">
                    <p>3. How should you approach geometry problems?</p>
                    <label><input type="radio" name="geometry-q3" value="wrong"> a) Purely algebraically</label>
                    <label><input type="radio" name="geometry-q3" value="correct"> b) Both visually and algebraically, translating between them</label>
                    <label><input type="radio" name="geometry-q3" value="wrong"> c) Only with drawings</label>
                    <label><input type="radio" name="geometry-q3" value="wrong"> d) By memorising formulas</label>
                </div>
                <button type="button" onclick="submitQuiz('geometry')">Submit Quiz</button>
            </form>
            <div class="result" id="geometry-result"></div>
        </div>
    </details>

    <details>
        <summary>3. Trigonometry – Angles & Rotation</summary>
        <div class="intro">
            <h2>Introduction</h2>
            <p>Trigonometry is fundamentally about angles, rotation, and periodic behaviour—not just triangles. Master sine and cosine through the unit circle: if you can draw and interpret it, you truly understand trig. Identities come later; intuition first.</p>
        </div>

        <div class="example">
            <h2>Practical Example</h2>
            <p>In signal processing or audio engineering, waves are modelled as sine functions. Understanding phase shifts and amplitude via the unit circle lets you intuitively adjust filters or synthesise sounds without blindly applying formulas.</p>
        </div>

        <div class="quiz">
            <h2>Quiz – Test Your Understanding (3 questions)</h2>
            <form id="trig-quiz">
                <div class="question">
                    <p>1. What is the core idea of trigonometry?</p>
                    <label><input type="radio" name="trig-q1" value="wrong"> a) Memorising triangle formulas</label>
                    <label><input type="radio" name="trig-q1" value="correct"> b) Angles, rotation, and periodic functions</label>
                    <label><input type="radio" name="trig-q1" value="wrong"> c) Only right triangles</label>
                    <label><input type="radio" name="trig-q1" value="wrong"> d) Proofs</label>
                </div>
                <div class="question">
                    <p>2. Best way to learn sine and cosine?</p>
                    <label><input type="radio" name="trig-q2" value="correct"> a) Through the unit circle</label>
                    <label><input type="radio" name="trig-q2" value="wrong"> b) Memorising identities first</label>
                    <label><input type="radio" name="trig-q2" value="wrong"> c) Only with triangles</label>
                    <label><input type="radio" name="trig-q2" value="wrong"> d) Skipping visualisation</label>
                </div>
                <div class="question">
                    <p>3. Why prioritise the unit circle?</p>
                    <label><input type="radio" name="trig-q3" value="wrong"> a) It's the hardest part</label>
                    <label><input type="radio" name="trig-q3" value="correct"> b) If you can draw it, you understand trig deeply</label>
                    <label><input type="radio" name="trig-q3" value="wrong"> c) Identities are more important</label>
                    <label><input type="radio" name="trig-q3" value="wrong"> d) It's optional</label>
                </div>
                <button type="button" onclick="submitQuiz('trig')">Submit Quiz</button>
            </form>
            <div class="result" id="trig-result"></div>
        </div>
    </details>

    <details>
        <summary>4. Precalculus – Bridging to Calculus</summary>
        <div class="intro">
            <h2>Introduction</h2>
            <p>Precalculus ties together functions, trigonometry, and algebra to prepare for calculus. Its goal is to make rates of change and accumulation predictable. If concepts feel unclear here, pause and strengthen foundations—calculus will punish gaps relentlessly.</p>
        </div>

        <div class="example">
            <h2>Practical Example</h2>
            <p>In economics, modelling supply/demand curves as functions and understanding limits (what happens as quantity approaches a value) helps predict equilibrium points before applying formal calculus optimisation.</p>
        </div>

        <div class="quiz">
            <h2>Quiz – Test Your Understanding (3 questions)</h2>
            <form id="precalc-quiz">
                <div class="question">
                    <p>1. What is precalculus for?</p>
                    <label><input type="radio" name="precalc-q1" value="correct"> a) Making calculus predictable</label>
                    <label><input type="radio" name="precalc-q1" value="wrong"> b) Advanced proofs</label>
                    <label><input type="radio" name="precalc-q1" value="wrong"> c) Only functions</label>
                    <label><input type="radio" name="precalc-q1" value="wrong"> d) Skipping calculus</label>
                </div>
                <div class="question">
                    <p>2. What to do if precalculus feels unclear?</p>
                    <label><input type="radio" name="precalc-q2" value="wrong"> a) Push forward anyway</label>
                    <label><input type="radio" name="precalc-q2" value="correct"> b) Stop and fix foundations</label>
                    <label><input type="radio" name="precalc-q2" value="wrong"> c) Memorise more</label>
                    <label><input type="radio" name="precalc-q2" value="wrong"> d) Ignore it</label>
                </div>
                <div class="question">
                    <p>3. Precalculus connects which areas?</p>
                    <label><input type="radio" name="precalc-q3" value="correct"> a) Functions, trig, and algebra</label>
                    <label><input type="radio" name="precalc-q3" value="wrong"> b) Only statistics</label>
                    <label><input type="radio" name="precalc-q3" value="wrong"> c) Linear algebra first</label>
                    <label><input type="radio" name="precalc-q3" value="wrong"> d) Proofs only</label>
                </div>
                <button type="button" onclick="submitQuiz('precalc')">Submit Quiz</button>
            </form>
            <div class="result" id="precalc-result"></div>
        </div>
    </details>

    <details>
        <summary>5. Calculus – Rates & Accumulation</summary>
        <div class="intro">
            <h2>Introduction</h2>
            <p>Calculus is about change and accumulation. Start with derivatives as instantaneous rates of change: ask “what happens if I nudge this slightly?” Integration is adding up tiny pieces—area is just one case. Focus on modelling real behaviour and conceptual limits before techniques. Real problems often end at setup, not computation.</p>
        </div>

        <div class="example">
            <h2>Practical Example</h2>
            <p>In epidemiology, the derivative of infections over time gives the growth rate. Understanding this as “how much faster are cases increasing right now?” guides policy decisions far more than solving integrals by hand.</p>
        </div>

        <div class="quiz">
            <h2>Quiz – Test Your Understanding (3 questions)</h2>
            <form id="calculus-quiz">
                <div class="question">
                    <p>1. What does a derivative fundamentally represent?</p>
                    <label><input type="radio" name="calculus-q1" value="correct"> a) Instantaneous rate of change</label>
                    <label><input type="radio" name="calculus-q1" value="wrong"> b) Total area</label>
                    <label><input type="radio" name="calculus-q1" value="wrong"> c) Only slopes</label>
                    <label><input type="radio" name="calculus-q1" value="wrong"> d) Memorised formulas</label>
                </div>
                <div class="question">
                    <p>2. What is integration at its core?</p>
                    <label><input type="radio" name="calculus-q2" value="wrong"> a) Only finding areas</label>
                    <label><input type="radio" name="calculus-q2" value="correct"> b) Accumulation of quantities</label>
                    <label><input type="radio" name="calculus-q2" value="wrong"> c) Differentiation backwards</label>
                    <label><input type="radio" name="calculus-q2" value="wrong"> d) Technical tricks</label>
                </div>
                <div class="question">
                    <p>3. Where should most real calculus effort go?</p>
                    <label><input type="radio" name="calculus-q3" value="correct"> a) Modelling and setup</label>
                    <label><input type="radio" name="calculus-q3" value="wrong"> b) Hand computation only</label>
                    <label><input type="radio" name="calculus-q3" value="wrong"> c) Memorising integrals</label>
                    <label><input type="radio" name="calculus-q3" value="wrong"> d) Avoiding limits</label>
                </div>
                <button type="button" onclick="submitQuiz('calculus')">Submit Quiz</button>
            </form>
            <div class="result" id="calculus-result"></div>
        </div>
    </details>

    <details>
        <summary>6. Linear Algebra – Structure & Transformations</summary>
        <div class="intro">
            <h2>Introduction</h2>
            <p>Linear algebra reveals structure in multi-variable systems. Think of matrices as transformations of space, not just tables of numbers. Eigenvalues describe stability and long-term behaviour. Learn it relatively early—it's essential for modern fields and provides powerful intuition.</p>
        </div>

        <div class="example">
            <h2>Practical Example</h2>
            <p>In machine learning, neural network layers are matrix multiplications—linear transformations. Visualising how they stretch, rotate, or compress data spaces explains why certain architectures work better for images vs text.</p>
        </div>

        <div class="quiz">
            <h2>Quiz – Test Your Understanding (3 questions)</h2>
            <form id="linalg-quiz">
                <div class="question">
                    <p>1. Best mental model for matrices?</p>
                    <label><input type="radio" name="linalg-q1" value="wrong"> a) Just tables of numbers</label>
                    <label><input type="radio" name="linalg-q1" value="correct"> b) Transformations of space</label>
                    <label><input type="radio" name="linalg-q1" value="wrong"> c) Only for solving equations</label>
                    <label><input type="radio" name="linalg-q1" value="wrong"> d) Advanced only</label>
                </div>
                <div class="question">
                    <p>2. What do eigenvalues reveal?</p>
                    <label><input type="radio" name="linalg-q2" value="correct"> a) Stability and long-term behaviour</label>
                    <label><input type="radio" name="linalg-q2" value="wrong"> b) Only determinants</label>
                    <label><input type="radio" name="linalg-q2" value="wrong"> c) Areas</label>
                    <label><input type="radio" name="linalg-q2" value="wrong"> d) Rates of change</label>
                </div>
                <div class="question">
                    <p>3. When should linear algebra be learned?</p>
                    <label><input type="radio" name="linalg-q3" value="wrong"> a) Only at university end</label>
                    <label><input type="radio" name="linalg-q3" value="correct"> b) Relatively early—it's foundational for many fields</label>
                    <label><input type="radio" name="linalg-q3" value="wrong"> c) After statistics</label>
                    <label><input type="radio" name="linalg-q3" value="wrong"> d) Never</label>
                </div>
                <button type="button" onclick="submitQuiz('linalg')">Submit Quiz</button>
            </form>
            <div class="result" id="linalg-result"></div>
        </div>
    </details>

    <details>
        <summary>7. Multivariable Calculus & Real Applications</summary>
        <div class="intro">
            <h2>Introduction</h2>
            <p>Most real systems depend on multiple variables. Partial derivatives isolate individual influences, gradients point the steepest direction, and constrained optimisation reflects actual limits. Study probability/statistics only after mastering change and structure. Then map the math to careers: engineering (optimisation), ML (linear algebra + probability), finance (rates + risk), physics (symmetry), and more.</p>
        </div>

        <div class="example">
            <h2>Practical Example</h2>
            <p>In finance, option pricing uses partial derivatives (Greeks) to see how price changes with underlying asset value, time, or volatility—isolate each factor while holding others constant, exactly like real risk management.</p>
        </div>

        <div class="quiz">
            <h2>Quiz – Test Your Understanding (3 questions)</h2>
            <form id="multi-quiz">
                <div class="question">
                    <p>1. Why study multivariable calculus?</p>
                    <label><input type="radio" name="multi-q1" value="correct"> a) Reality rarely depends on one variable</label>
                    <label><input type="radio" name="multi-q1" value="wrong"> b) It's easier than single-variable</label>
                    <label><input type="radio" name="multi-q1" value="wrong"> c) Only for theory</label>
                    <label><input type="radio" name="multi-q1" value="wrong"> d) To skip constraints</label>
                </div>
                <div class="question">
                    <p>2. When to study probability/statistics?</p>
                    <label><input type="radio" name="multi-q2" value="wrong"> a) First thing</label>
                    <label><input type="radio" name="multi-q2" value="correct"> b) After change and structure are solid</label>
                    <label><input type="radio" name="multi-q2" value="wrong"> c) Never</label>
                    <label><input type="radio" name="multi-q2" value="wrong"> d) Before calculus</label>
                </div>
                <div class="question">
                    <p>3. Core math for machine learning?</p>
                    <label><input type="radio" name="multi-q3" value="correct"> a) Linear algebra + probability + optimisation</label>
                    <label><input type="radio" name="multi-q3" value="wrong"> b) Only calculus</label>
                    <label><input type="radio" name="multi-q3" value="wrong"> c) Advanced proofs only</label>
                    <label><input type="radio" name="multi-q3" value="wrong"> d) Geometry alone</label>
                </div>
                <button type="button" onclick="submitQuiz('multi')">Submit Quiz</button>
            </form>
            <div class="result" id="multi-result"></div>
        </div>
    </details>

    <script>
        let currentUser = '';

        window.onload = function() {
            updateUserList();
        };

        function updateUserList() {
            let users = JSON.parse(localStorage.getItem('math_users') || '[]');
            let select = document.getElementById('userlist');
            select.innerHTML = '<option value="">-- Select existing user --</option>';
            users.forEach(u => {
                let opt = document.createElement('option');
                opt.value = u;
                opt.textContent = u;
                select.appendChild(opt);
            });
            select.onchange = function() {
                if (this.value) {
                    document.getElementById('username').value = this.value;
                    selectUser();
                }
            };
            loadOverallScores();
        }

        function selectUser() {
            let name = document.getElementById('username').value.trim();
            if (!name) return alert('Please enter a name');

            let users = JSON.parse(localStorage.getItem('math_users') || '[]');
            if (!users.includes(name)) {
                users.push(name);
                localStorage.setItem('math_users', JSON.stringify(users));
                localStorage.setItem(name + '_math_scores', JSON.stringify({algebra: 0, geometry: 0, trig: 0, precalc: 0, calculus: 0, linalg: 0, multi: 0}));
            }

            currentUser = name;
            document.getElementById('currentuser').textContent = 'Current user: ' + name;
            updateUserList();
            loadResults();
            loadOverallScores();
        }

        function loadResults() {
            if (!currentUser) return;
            let scores = JSON.parse(localStorage.getItem(currentUser + '_math_scores') || '{"algebra":0,"geometry":0,"trig":0,"precalc":0,"calculus":0,"linalg":0,"multi":0}');
            document.getElementById('algebra-result').textContent = scores.algebra > 0 ? 'Previous score: ' + scores.algebra + '/3' : '';
            document.getElementById('geometry-result').textContent = scores.geometry > 0 ? 'Previous score: ' + scores.geometry + '/3' : '';
            document.getElementById('trig-result').textContent = scores.trig > 0 ? 'Previous score: ' + scores.trig + '/3' : '';
            document.getElementById('precalc-result').textContent = scores.precalc > 0 ? 'Previous score: ' + scores.precalc + '/3' : '';
            document.getElementById('calculus-result').textContent = scores.calculus > 0 ? 'Previous score: ' + scores.calculus + '/3' : '';
            document.getElementById('linalg-result').textContent = scores.linalg > 0 ? 'Previous score: ' + scores.linalg + '/3' : '';
            document.getElementById('multi-result').textContent = scores.multi > 0 ? 'Previous score: ' + scores.multi + '/3' : '';
        }

        function loadOverallScores() {
            if (!currentUser) {
                document.getElementById('overall-scores').textContent = '';
                return;
            }
            let scores = JSON.parse(localStorage.getItem(currentUser + '_math_scores') || '{"algebra":0,"geometry":0,"trig":0,"precalc":0,"calculus":0,"linalg":0,"multi":0}');
            let total = scores.algebra + scores.geometry + scores.trig + scores.precalc + scores.calculus + scores.linalg + scores.multi;
            document.getElementById('overall-scores').textContent = 'Overall progress: ' + total + '/21';
        }

        function submitQuiz(topic) {
            if (!currentUser) return alert('Please select a user first');

            let correct = 0;
            for (let i = 1; i <= 3; i++) {
                let selected = document.querySelector(`input[name="${topic}-q${i}"]:checked`);
                if (selected && selected.value === 'correct') correct++;
            }

            let scores = JSON.parse(localStorage.getItem(currentUser + '_math_scores') || '{"algebra":0,"geometry":0,"trig":0,"precalc":0,"calculus":0,"linalg":0,"multi":0}');
            scores[topic] = correct;
            localStorage.setItem(currentUser + '_math_scores', JSON.stringify(scores));

            document.getElementById(topic + '-result').textContent = 'Your score: ' + correct + '/3';
            loadOverallScores();
        }
    </script>

</body>
</html>