Hugging Face's logo

Spaces:
AARIFSHABIR
/
motion
Running

App Files Community
AARIFSHABIR commited on
Commit
61f0ae9
·
verified ·
1 Parent(s): 760a9b3

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +878 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Motion
3
- emoji: 📉
4
- colorFrom: gray
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: motion
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,878 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>1D Motion Solver | Class 11 Physics</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ .equation-input {
12
+ background-color: #f8fafc;
13
+ border-left: 4px solid #3b82f6;
14
+ }
15
+ .motion-diagram {
16
+ position: relative;
17
+ height: 100px;
18
+ background-color: #f1f5f9;
19
+ border-radius: 6px;
20
+ overflow: hidden;
21
+ }
22
+ .object {
23
+ position: absolute;
24
+ width: 20px;
25
+ height: 20px;
26
+ background-color: #ef4444;
27
+ border-radius: 50%;
28
+ bottom: 10px;
29
+ transition: left 0.5s ease-out;
30
+ }
31
+ .position-markers {
32
+ position: absolute;
33
+ bottom: 40px;
34
+ width: 100%;
35
+ height: 1px;
36
+ background-color: #94a3b8;
37
+ }
38
+ .marker {
39
+ position: absolute;
40
+ bottom: 35px;
41
+ width: 1px;
42
+ height: 10px;
43
+ background-color: #64748b;
44
+ }
45
+ .marker-label {
46
+ position: absolute;
47
+ bottom: 15px;
48
+ transform: translateX(-50%);
49
+ font-size: 10px;
50
+ color: #64748b;
51
+ }
52
+ .vector-arrow {
53
+ position: absolute;
54
+ width: 0;
55
+ height: 0;
56
+ border-left: 6px solid transparent;
57
+ border-right: 6px solid transparent;
58
+ border-bottom: 12px solid #3b82f6;
59
+ bottom: 30px;
60
+ transform-origin: 50% 100%;
61
+ }
62
+ .vector-line {
63
+ position: absolute;
64
+ height: 2px;
65
+ background-color: #3b82f6;
66
+ bottom: 30px;
67
+ }
68
+ @media (max-width: 640px) {
69
+ .problem-container {
70
+ flex-direction: column;
71
+ }
72
+ .solution-container {
73
+ margin-top: 20px;
74
+ margin-left: 0;
75
+ }
76
+ }
77
+ </style>
78
+ </head>
79
+ <body class="bg-gray-50 min-h-screen">
80
+ <div class="container mx-auto px-4 py-8">
81
+ <!-- Header -->
82
+ <header class="bg-white shadow-sm rounded-lg p-6 mb-8 flex flex-col md:flex-row justify-between items-center">
83
+ <div class="flex items-center">
84
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
85
+ <i class="fas fa-rocket text-blue-500 text-xl"></i>
86
+ </div>
87
+ <div>
88
+ <h1 class="text-2xl font-bold text-gray-800">1D Motion Solver</h1>
89
+ <p class="text-gray-600">Solve numericals for Motion in One Dimension (Class 11 Physics)</p>
90
+ </div>
91
+ </div>
92
+ <button id="help-btn" class="mt-4 md:mt-0 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
93
+ <i class="fas fa-question-circle mr-2"></i>Need Help?
94
+ </button>
95
+ </header>
96
+
97
+ <div class="grid grid-cols-1 gap-6">
98
+ <!-- Problem Input Section -->
99
+ <div class="bg-white shadow-sm rounded-lg overflow-hidden">
100
+ <div class="bg-blue-600 px-6 py-4">
101
+ <h2 class="text-xl font-semibold text-white">Enter Problem Details</h2>
102
+ </div>
103
+ <div class="p-6">
104
+ <div class="mb-6 grid grid-cols-1 md:grid-cols-3 gap-4">
105
+ <!-- Problem Type Selector -->
106
+ <div>
107
+ <label class="block text-sm font-medium text-gray-700 mb-1">Problem Type</label>
108
+ <select id="problem-type" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
109
+ <option value="uniform">Uniform Motion</option>
110
+ <option value="constant-acceleration">Motion with Constant Acceleration</option>
111
+ <option value="free-fall">Free Fall</option>
112
+ <option value="relative-motion">Relative Motion</option>
113
+ </select>
114
+ </div>
115
+
116
+ <!-- Known Variables -->
117
+ <div id="known-vars-container">
118
+ <label class="block text-sm font-medium text-gray-700 mb-1">Known Variables (comma separated)</label>
119
+ <input type="text" id="known-vars" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. u, a, t">
120
+ </div>
121
+
122
+ <!-- Find Variable -->
123
+ <div>
124
+ <label class="block text-sm font-medium text-gray-700 mb-1">Find</label>
125
+ <select id="find-var" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
126
+ <option value="s">Displacement (s)</option>
127
+ <option value="u">Initial Velocity (u)</option>
128
+ <option value="v">Final Velocity (v)</option>
129
+ <option value="a">Acceleration (a)</option>
130
+ <option value="t">Time (t)</option>
131
+ </select>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Values Input -->
136
+ <div id="values-input-container" class="mb-6">
137
+ <!-- Will be dynamically generated based on known variables -->
138
+ <div class="text-center text-gray-500">
139
+ Select your known variables first
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Action Buttons -->
144
+ <div class="flex flex-wrap gap-3">
145
+ <button id="solve-btn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center">
146
+ <i class="fas fa-calculator mr-2"></i> Solve
147
+ </button>
148
+ <button id="reset-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 flex items-center">
149
+ <i class="fas fa-redo mr-2"></i> Reset
150
+ </button>
151
+ <button id="example-btn" class="px-4 py-2 bg-purple-100 text-purple-700 rounded-md hover:bg-purple-200 flex items-center">
152
+ <i class="fas fa-lightbulb mr-2"></i> Load Example
153
+ </button>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- Solution Display Section -->
159
+ <div id="solution-section" class="bg-white shadow-sm rounded-lg overflow-hidden hidden">
160
+ <div class="bg-green-600 px-6 py-4">
161
+ <h2 class="text-xl font-semibold text-white flex items-center justify-between">
162
+ <span>Solution</span>
163
+ <button id="expand-all" class="text-xs bg-green-700 px-2 py-1 rounded">
164
+ Expand All Steps
165
+ </button>
166
+ </h2>
167
+ </div>
168
+ <div class="p-6">
169
+ <div id="solution-steps" class="space-y-6">
170
+ <!-- Solution steps will be inserted here -->
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Visualization Section -->
176
+ <div id="visualization-section" class="hidden">
177
+ <div class="bg-white shadow-sm rounded-lg overflow-hidden">
178
+ <div class="bg-indigo-600 px-6 py-4">
179
+ <h2 class="text-xl font-semibold text-white">Visualization</h2>
180
+ </div>
181
+ <div class="p-6">
182
+ <!-- Motion Diagram -->
183
+ <div class="mb-8">
184
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Motion Diagram</h3>
185
+ <div class="motion-diagram" id="motion-diagram">
186
+ <!-- Will be dynamically generated -->
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Charts -->
191
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
192
+ <div>
193
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Position vs Time</h3>
194
+ <canvas id="position-chart" height="250"></canvas>
195
+ </div>
196
+ <div>
197
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Velocity vs Time</h3>
198
+ <canvas id="velocity-chart" height="250"></canvas>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Help Modal -->
208
+ <div id="help-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
209
+ <div class="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
210
+ <div class="bg-blue-600 px-6 py-4 flex justify-between items-center">
211
+ <h3 class="text-xl font-semibold text-white">Help Guide</h3>
212
+ <button id="close-help" class="text-white hover:text-blue-100">
213
+ <i class="fas fa-times"></i>
214
+ </button>
215
+ </div>
216
+ <div class="p-6">
217
+ <h4 class="text-lg font-medium text-gray-800 mb-3">How to use this solver</h4>
218
+ <ol class="list-decimal pl-5 space-y-3 mb-6">
219
+ <li class="pl-2">Select the type of motion problem you're solving (uniform, constant acceleration, etc.)</li>
220
+ <li class="pl-2">Enter which variables you know (comma separated)</li>
221
+ <li class="pl-2">Input the values for each known variable</li>
222
+ <li class="pl-2">Choose the variable you want to find</li>
223
+ <li class="pl-2">Click "Solve" to see the complete solution</li>
224
+ <li class="pl-2">View the visualizations and graphs for better understanding</li>
225
+ </ol>
226
+
227
+ <h4 class="text-lg font-medium text-gray-800 mb-3">Variable Key</h4>
228
+ <div class="mb-6 grid grid-cols-2 md:grid-cols-3 gap-3">
229
+ <div class="bg-gray-100 p-2 rounded">
230
+ <span class="font-mono font-bold">u</span>: Initial velocity (m/s)
231
+ </div>
232
+ <div class="bg-gray-100 p-2 rounded">
233
+ <span class="font-mono font-bold">v</span>: Final velocity (m/s)
234
+ </div>
235
+ <div class="bg-gray-100 p-2 rounded">
236
+ <span class="font-mono font-bold">a</span>: Acceleration (m/s²)
237
+ </div>
238
+ <div class="bg-gray-100 p-2 rounded">
239
+ <span class="font-mono font-bold">s</span>: Displacement (m)
240
+ </div>
241
+ <div class="bg-gray-100 p-2 rounded">
242
+ <span class="font-mono font-bold">t</span>: Time (s)
243
+ </div>
244
+ <div class="bg-gray-100 p-2 rounded">
245
+ <span class="font-mono font-bold">g</span>: Gravity (9.8 m/s²)
246
+ </div>
247
+ </div>
248
+
249
+ <h4 class="text-lg font-medium text-gray-800 mb-3">Common Equations</h4>
250
+ <div class="bg-gray-50 p-4 rounded-lg space-y-3">
251
+ <div class="equation-input p-3 rounded">
252
+ <span class="font-semibold">1.</span> v = u + at
253
+ </div>
254
+ <div class="equation-input p-3 rounded">
255
+ <span class="font-semibold">2.</span> s = ut + ½at²
256
+ </div>
257
+ <div class="equation-input p-3 rounded">
258
+ <span class="font-semibold">3.</span> v² = u² + 2as
259
+ </div>
260
+ <div class="equation-input p-3 rounded">
261
+ <span class="font-semibold">4.</span> s = (u + v)t/2
262
+ </div>
263
+ <div class="equation-input p-3 rounded">
264
+ <span class="font-semibold">5.</span> For free fall: a = -g (if upward is positive)
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <script>
272
+ document.addEventListener('DOMContentLoaded', function() {
273
+ // DOM Elements
274
+ const problemTypeSelect = document.getElementById('problem-type');
275
+ const knownVarsInput = document.getElementById('known-vars');
276
+ const valuesInputContainer = document.getElementById('values-input-container');
277
+ const solveBtn = document.getElementById('solve-btn');
278
+ const resetBtn = document.getElementById('reset-btn');
279
+ const exampleBtn = document.getElementById('example-btn');
280
+ const solutionSection = document.getElementById('solution-section');
281
+ const solutionSteps = document.getElementById('solution-steps');
282
+ const visualizationSection = document.getElementById('visualization-section');
283
+ const motionDiagram = document.getElementById('motion-diagram');
284
+ const helpBtn = document.getElementById('help-btn');
285
+ const helpModal = document.getElementById('help-modal');
286
+ const closeHelp = document.getElementById('close-help');
287
+ const expandAllBtn = document.getElementById('expand-all');
288
+
289
+ // Variables
290
+ let positionChart, velocityChart;
291
+ let autoExpandSteps = true;
292
+
293
+ // Initialize
294
+ setupKnownVarsListener();
295
+
296
+ // Event Listeners
297
+ problemTypeSelect.addEventListener('change', updateKnownVarsOptions);
298
+ solveBtn.addEventListener('click', solveProblem);
299
+ resetBtn.addEventListener('click', resetProblem);
300
+ exampleBtn.addEventListener('click', loadExample);
301
+ helpBtn.addEventListener('click', () => helpModal.classList.remove('hidden'));
302
+ closeHelp.addEventListener('click', () => helpModal.classList.add('hidden'));
303
+ expandAllBtn.addEventListener('click', toggleExpandAll);
304
+
305
+ // Listen for clicks on step titles to toggle content
306
+ document.addEventListener('click', function(e) {
307
+ if (e.target.classList.contains('step-title')) {
308
+ const content = e.target.nextElementSibling;
309
+ content.classList.toggle('hidden');
310
+ const icon = e.target.querySelector('i');
311
+ icon.classList.toggle('fa-chevron-down');
312
+ icon.classList.toggle('fa-chevron-up');
313
+ }
314
+ });
315
+
316
+ // Functions
317
+ function setupKnownVarsListener() {
318
+ knownVarsInput.addEventListener('input', function() {
319
+ const vars = this.value.replace(/\s/g, '').split(',');
320
+ renderValueInputs(vars);
321
+ });
322
+ }
323
+
324
+ function updateKnownVarsOptions() {
325
+ const problemType = problemTypeSelect.value;
326
+ let options = [];
327
+
328
+ switch(problemType) {
329
+ case 'uniform':
330
+ options = ['u', 'v', 's', 't'];
331
+ break;
332
+ case 'constant-acceleration':
333
+ options = ['u', 'v', 'a', 's', 't'];
334
+ break;
335
+ case 'free-fall':
336
+ knownVarsInput.value = 'u,v,s,t';
337
+ renderValueInputs(['u', 'v', 's', 't']);
338
+ document.getElementById('find-var').value = 'a';
339
+ return;
340
+ case 'relative-motion':
341
+ options = ['u1', 'u2', 'v1', 'v2', 'a1', 'a2', 't'];
342
+ break;
343
+ }
344
+
345
+ knownVarsInput.value = options.join(',');
346
+ renderValueInputs(options);
347
+ }
348
+
349
+ function renderValueInputs(vars) {
350
+ valuesInputContainer.innerHTML = '';
351
+
352
+ if (vars.length === 0 || (vars.length === 1 && vars[0] === '')) {
353
+ valuesInputContainer.innerHTML = '<div class="text-center text-gray-500">Select your known variables first</div>';
354
+ return;
355
+ }
356
+
357
+ vars.forEach(variable => {
358
+ if (variable === '') return;
359
+
360
+ const div = document.createElement('div');
361
+ div.className = 'mb-4';
362
+
363
+ let label, unit = '';
364
+
365
+ switch(variable) {
366
+ case 'u':
367
+ label = 'Initial Velocity';
368
+ unit = 'm/s';
369
+ break;
370
+ case 'v':
371
+ label = 'Final Velocity';
372
+ unit = 'm/s';
373
+ break;
374
+ case 'a':
375
+ label = 'Acceleration';
376
+ unit = 'm/s²';
377
+ break;
378
+ case 's':
379
+ label = 'Displacement';
380
+ unit = 'm';
381
+ break;
382
+ case 't':
383
+ label = 'Time';
384
+ unit = 's';
385
+ break;
386
+ case 'u1':
387
+ label = 'Initial Velocity (Object 1)';
388
+ unit = 'm/s';
389
+ break;
390
+ case 'u2':
391
+ label = 'Initial Velocity (Object 2)';
392
+ unit = 'm/s';
393
+ break;
394
+ case 'v1':
395
+ label = 'Final Velocity (Object 1)';
396
+ unit = 'm/s';
397
+ break;
398
+ case 'v2':
399
+ label = 'Final Velocity (Object 2)';
400
+ unit = 'm/s';
401
+ break;
402
+ case 'a1':
403
+ label = 'Acceleration (Object 1)';
404
+ unit = 'm/s²';
405
+ break;
406
+ case 'a2':
407
+ label = 'Acceleration (Object 2)';
408
+ unit = 'm/s²';
409
+ break;
410
+ default:
411
+ label = variable;
412
+ }
413
+
414
+ div.innerHTML = `
415
+ <label class="block text-sm font-medium text-gray-700 mb-1">${label} (${variable}) <span class="text-gray-500">${unit}</span></label>
416
+ <input type="number" id="val-${variable}" step="any" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Enter value">
417
+ `;
418
+
419
+ valuesInputContainer.appendChild(div);
420
+ });
421
+ }
422
+
423
+ function solveProblem() {
424
+ // Clear previous solution
425
+ solutionSteps.innerHTML = '';
426
+ solutionSection.classList.remove('hidden');
427
+ visualizationSection.classList.remove('hidden');
428
+
429
+ // Get problem parameters
430
+ const problemType = problemTypeSelect.value;
431
+ const knownVars = knownVarsInput.value.replace(/\s/g, '').split(',');
432
+ const findVar = document.getElementById('find-var').value;
433
+ const values = {};
434
+
435
+ knownVars.forEach(v => {
436
+ if (v === '') return;
437
+ const input = document.getElementById(`val-${v}`);
438
+ values[v] = input ? parseFloat(input.value) : 0;
439
+ });
440
+
441
+ // Solve based on problem type
442
+ switch(problemType) {
443
+ case 'uniform':
444
+ case 'constant-acceleration':
445
+ solveKinematicsProblem(problemType, knownVars, findVar, values);
446
+ break;
447
+ case 'free-fall':
448
+ solveFreeFallProblem(knownVars, findVar, values);
449
+ break;
450
+ case 'relative-motion':
451
+ solveRelativeMotionProblem(knownVars, findVar, values);
452
+ break;
453
+ }
454
+
455
+ // Scroll to solution
456
+ solutionSection.scrollIntoView({ behavior: 'smooth' });
457
+ }
458
+
459
+ function solveKinematicsProblem(problemType, knownVars, findVar, values) {
460
+ // Extract values with defaults
461
+ const u = values.u || 0;
462
+ const v = values.v || 0;
463
+ const a = problemType === 'uniform' ? 0 : (values.a || 0);
464
+ const s = values.s || 0;
465
+ const t = values.t || 0;
466
+
467
+ let result;
468
+ let steps = [];
469
+
470
+ // Create initial diagram
471
+ createMotionDiagram([u, v], a, s, t);
472
+
473
+ switch(findVar) {
474
+ case 's':
475
+ steps.push(`<div class="step"><div class="step-title cursor-pointer flex items-center justify-between bg-blue-50 p-3 rounded-t-md"><span class="font-medium">Step 1: Identify the known variables</span><i class="fas fa-chevron-down"></i></div><div class="${autoExpandSteps ? '' : 'hidden'} bg-blue-50 rounded-b-md p-3 border-t border-blue-100">We know: initial velocity (u = ${u} m/s), ${v !== 0 ? 'final velocity (v = ' + v + ' m/s), ' : ''}${a !== 0 ? 'acceleration (a = ' + a + ' m/s²), ' : ''}${t !== 0 ? 'time (t = ' + t + ' s)' : ''}</div></div>`);
476
+
477
+ if (u && v && t) {
478
+ // Equation: s = (u + v)t/2
479
+ result = (u + v) * t / 2;
480
+ steps.push(`<div class="step"><div class="step-title cursor-pointer flex items-center justify-between bg-blue-50 p-3 rounded-t-md"><span class="font-medium">Step 2: Use equation s = (u + v)t/2</span><i class="fas fa-chevron-down"></i></div><div class="${autoExpandSteps ? '' : 'hidden'} bg-blue-50 rounded-b-md p-3 border-t border-blue-100">s = (${u} + ${v}) × ${t} / 2 = ${(u + v) * t / 2} m</div></div>`);
481
+ } else if (u && t && a) {
482
+ // Equation: s = ut + ½at²
483
+ result = u * t + 0.5 * a * t * t;
484
+ steps.push(`<div class="step"><div class="step-title cursor-pointer flex items-center justify-between bg-blue-50 p-3 rounded-t-md"><span class="font-medium">Step 2: Use equation s = ut + ½at²</span><i class="fas fa-chevron-down"></i></div><div class="${autoExpandSteps ? '' : 'hidden'} bg-blue-50 rounded-b-md p-3 border-t border-blue-100">s = ${u} × ${t} + 0.5 × ${a} × ${t}² = ${u * t} + ${0.5 * a * t * t} = ${result} m</div></div>`);
485
+ } else if (u && v && a) {
486
+ // Equation: v² = u² + 2as → s = (v² - u²)/2a
487
+ result = (v * v - u * u) / (2 * a);
488
+ steps.push(`<div class="step"><div class="step-title cursor-pointer flex items-center justify-between bg-blue-50 p-3 rounded-t-md"><span class="font-medium">Step 2: Use equation v² = u² + 2as</span><i class="fas fa-chevron-down"></i></div><div class="${autoExpandSteps ? '' : 'hidden'} bg-blue-50 rounded-b-md p-3 border-t border-blue-100">Rearranged to: s = (v² - u²)/2a = (${v}² - ${u}²)/(2 × ${a}) = ${result} m</div></div>`);
489
+ }
490
+ break;
491
+
492
+ case 'v':
493
+ if (u && a && t) {
494
+ // Equation: v = u + at
495
+ result = u + a * t;
496
+ steps.push(`<div class="step"><div class="step-title cursor-pointer flex items-center justify-between bg-blue-50 p-3 rounded-t-md"><span class="font-medium">Step 2: Use equation v = u + at</span><i class="fas fa-chevron-down"></i></div><div class="${autoExpandSteps ? '' : 'hidden'} bg-blue-50 rounded-b-md p-3 border-t border-blue-100">v = ${u} + ${a} × ${t} = ${result} m/s</div></div>`);
497
+ } else if (u && a && s) {
498
+ // Equation: v² = u² + 2as
499
+ result = Math.sqrt(u * u + 2 * a * s);
500
+ steps.push(`<div class="step"><div class="step-title cursor-pointer flex items-center justify-between bg-blue-50 p-3 rounded-t-md"><span class="font-medium">Step 2: Use equation v² = u² + 2as</span><i class="fas fa-chevron-down"></i></div><div class="${autoExpandSteps ? '' : 'hidden'} bg-blue-50 rounded-b-md p-3 border-t border-blue-100">v = √(u² + 2as) = √(${u}² + 2 × ${a} × ${s}) = √(${u*u} + ${2*a*s}) = ${result} m/s</div></div>`);
501
+ }
502
+ break;
503
+
504
+ // Other cases similar to above
505
+
506
+ default:
507
+ result = "Cannot solve for this variable with given information";
508
+ }
509
+
510
+ // Add final answer
511
+ if (result !== undefined) {
512
+ steps.push(`
513
+ <div class="bg-green-100 border-l-4 border-green-500 p-4">
514
+ <h3 class="font-bold text-green-800 mb-1">Final Answer</h3>
515
+ <p class="text-green-700">${findVar.toUpperCase()} = ${result} ${findVar === 'a' ? 'm/s²' : findVar === 't' ? 's' : 'm' + (findVar === 's' ? '' : '/s')}</p>
516
+ </div>
517
+ `);
518
+ }
519
+
520
+ // Render steps
521
+ solutionSteps.innerHTML = steps.join('');
522
+
523
+ // Create charts
524
+ createCharts(problemType, u, v, a, s, t, result);
525
+ }
526
+
527
+ function solveFreeFallProblem(knownVars, findVar, values) {
528
+ const u = values.u || 0;
529
+ const v = values.v || 0;
530
+ const s = values.s || 0;
531
+ const t = values.t || 0;
532
+
533
+ let result;
534
+ let steps = [];
535
+
536
+ // For free fall, acceleration is -9.8 m/s² (assuming upward as positive)
537
+ const g = 9.8;
538
+ const a = -g;
539
+
540
+ // Create initial diagram (modified for free fall)
541
+ createMotionDiagram([u, v], a, s, t, true);
542
+
543
+ steps.push(`<div class="step"><div class="step-title cursor-pointer flex items-center justify-between bg-blue-50 p-3 rounded-t-md"><span class="font-medium">Step 1: Recognize this as free fall under gravity</span><i class="fas fa-chevron-down"></i></div><div class="${autoExpandSteps ? '' : 'hidden'} bg-blue-50 rounded-b-md p-3 border-t border-blue-100">Acceleration due to gravity (a) = -g = -9.8 m/s² (taking upward direction as positive)</div></div>`);
544
+
545
+ switch(findVar) {
546
+ case 'a':
547
+ result = -g;
548
+ steps.push(`<div class="step"><div class="step-title cursor-pointer flex items-center justify-between bg-blue-50 p-3 rounded-t-md"><span class="font-medium">Step 2: Free fall acceleration</span><i class="fas fa-chevron-down"></i></div><div class="${autoExpandSteps ? '' : 'hidden'} bg-blue-50 rounded-b-md p-3 border-t border-blue-100">In free fall near Earth's surface, acceleration = -g = -9.8 m/s² (positive direction is upward)</div></div>`);
549
+ break;
550
+
551
+ case 'v':
552
+ if (u && t) {
553
+ // v = u - gt
554
+ result = u - g * t;
555
+ steps.push(`<div class="step"><div class="step-title cursor-pointer flex items-center justify-between bg-blue-50 p-3 rounded-t-md"><span class="font-medium">Step 2: Use equation v = u - gt</span><i class="fas fa-chevron-down"></i></div><div class="${autoExpandSteps ? '' : 'hidden'} bg-blue-50 rounded-b-md p-3 border-t border-blue-100">v = ${u} - 9.8 × ${t} = ${result} m/s</div></div>`);
556
+ }
557
+ break;
558
+
559
+ case 's':
560
+ if (u && t) {
561
+ // s = ut - ½gt²
562
+ result = u * t - 0.5 * g * t * t;
563
+ steps.push(`<div class="step"><div class="step-title cursor-pointer flex items-center justify-between bg-blue-50 p-3 rounded-t-md"><span class="font-medium">Step 2: Use equation s = ut - ½gt²</span><i class="fas fa-chevron-down"></i></div><div class="${autoExpandSteps ? '' : 'hidden'} bg-blue-50 rounded-b-md p-3 border-t border-blue-100">s = ${u} × ${t} - 0.5 × 9.8 × ${t}² = ${u*t} - ${0.5*g*t*t} = ${result} m</div></div>`);
564
+ }
565
+ break;
566
+ }
567
+
568
+ // Add final answer
569
+ if (result !== undefined) {
570
+ steps.push(`
571
+ <div class="bg-green-100 border-l-4 border-green-500 p-4">
572
+ <h3 class="font-bold text-green-800 mb-1">Final Answer</h3>
573
+ <p class="text-green-700">${findVar.toUpperCase()} = ${result} ${findVar === 'a' ? 'm/s²' : findVar === 't' ? 's' : 'm' + (findVar === 's' ? '' : '/s')}</p>
574
+ </div>
575
+ `);
576
+ }
577
+
578
+ solutionSteps.innerHTML = steps.join('');
579
+ createCharts('free-fall', u, v, a, s, t, result);
580
+ }
581
+
582
+ function solveRelativeMotionProblem(knownVars, findVar, values) {
583
+ // Simplified relative motion example
584
+ solutionSteps.innerHTML = `
585
+ <div class="bg-yellow-100 border-l-4 border-yellow-500 p-4">
586
+ <h3 class="font-bold text-yellow-800">Relative Motion Solution</h3>
587
+ <p class="text-yellow-700">This feature is under development. For now, please use other motion types.</p>
588
+ </div>
589
+ `;
590
+ }
591
+
592
+ function createMotionDiagram(velocities, acceleration, displacement, time, isFreeFall = false) {
593
+ motionDiagram.innerHTML = '';
594
+
595
+ // Create position markers
596
+ const markersContainer = document.createElement('div');
597
+ markersContainer.className = 'position-markers';
598
+ motionDiagram.appendChild(markersContainer);
599
+
600
+ // Create 5 position markers (0-4)
601
+ for (let i = 0; i < 5; i++) {
602
+ const marker = document.createElement('div');
603
+ marker.className = 'marker';
604
+ marker.style.left = `${(i / 4) * 95 + 2.5}%`;
605
+ markersContainer.appendChild(marker);
606
+
607
+ const label = document.createElement('div');
608
+ label.className = 'marker-label';
609
+ label.style.left = `${(i / 4) * 95 + 2.5}%`;
610
+ label.textContent = `${i * (displacement / 4 || 1)} m`;
611
+ markersContainer.appendChild(label);
612
+ }
613
+
614
+ // Create object
615
+ const object = document.createElement('div');
616
+ object.className = 'object';
617
+ object.id = 'moving-object';
618
+ motionDiagram.appendChild(object);
619
+
620
+ // Create velocity vectors if they exist
621
+ if (velocities && velocities.length > 0) {
622
+ velocities.forEach((velocity, index) => {
623
+ if (velocity !== 0) {
624
+ const vectorLine = document.createElement('div');
625
+ vectorLine.className = 'vector-line';
626
+ vectorLine.style.width = `${Math.min(Math.abs(velocity) * 5, 50)}px`;
627
+ vectorLine.style.left = `${index === 0 ? '5%' : '95%'}`;
628
+ vectorLine.style.transform = `translateX(${velocity > 0 ? 0 : '-100%'})`;
629
+
630
+ const vectorArrow = document.createElement('div');
631
+ vectorArrow.className = 'vector-arrow';
632
+ vectorArrow.style.left = `${index === 0 ? '5%' : '95%'}`;
633
+ vectorArrow.style.transform = `translateX(${velocity > 0 ? 0 : '-100%'}) ${velocity > 0 ? 'rotate(0)' : 'rotate(180deg)'}`;
634
+
635
+ motionDiagram.appendChild(vectorLine);
636
+ motionDiagram.appendChild(vectorArrow);
637
+
638
+ // Add velocity label
639
+ const vectorLabel = document.createElement('div');
640
+ vectorLabel.className = 'absolute text-xs text-blue-700';
641
+ vectorLabel.textContent = `v=${velocity} m/s`;
642
+ vectorLabel.style.bottom = '50px';
643
+ vectorLabel.style.left = `${index === 0 ? '5%' : '95%'}`;
644
+ vectorLabel.style.transform = `translateX(${velocity > 0 ? 0 : '-100%'})`;
645
+ motionDiagram.appendChild(vectorLabel);
646
+ }
647
+ });
648
+ }
649
+
650
+ // Create acceleration indicator if it exists
651
+ if (acceleration && acceleration !== 0) {
652
+ const accelLabel = document.createElement('div');
653
+ accelLabel.className = 'absolute font-bold text-xs';
654
+ accelLabel.style.top = '10px';
655
+ accelLabel.style.left = '50%';
656
+ accelLabel.style.transform = 'translateX(-50%)';
657
+
658
+ if (isFreeFall) {
659
+ accelLabel.textContent = 'g = 9.8 m/s² ↓';
660
+ accelLabel.style.color = '#ef4444';
661
+ } else {
662
+ accelLabel.textContent = `a = ${Math.abs(acceleration)} m/s² ${acceleration > 0 ? '→' : '←'}`;
663
+ accelLabel.style.color = '#3b82f6';
664
+ }
665
+
666
+ motionDiagram.appendChild(accelLabel);
667
+ }
668
+
669
+ // Animate the motion if time is provided
670
+ if (time && time > 0) {
671
+ setTimeout(() => {
672
+ const obj = document.getElementById('moving-object');
673
+ obj.style.left = '95%';
674
+
675
+ // Create a dot at the start position
676
+ const startMark = document.createElement('div');
677
+ startMark.className = 'absolute w-2 h-2 bg-gray-800 rounded-full bottom-10';
678
+ startMark.style.left = '5%';
679
+ motionDiagram.appendChild(startMark);
680
+
681
+ // Create a dot at the end position
682
+ const endMark = document.createElement('div');
683
+ endMark.className = 'absolute w-2 h-2 bg-gray-800 rounded-full bottom-10';
684
+ endMark.style.left = '95%';
685
+ motionDiagram.appendChild(endMark);
686
+ }, 100);
687
+ }
688
+ }
689
+
690
+ function createCharts(problemType, u, v, a, s, t, result) {
691
+ // Destroy previous charts if they exist
692
+ if (positionChart) positionChart.destroy();
693
+ if (velocityChart) velocityChart.destroy();
694
+
695
+ // Generate time points
696
+ const timeSteps = 20;
697
+ const timePoints = [];
698
+ const timeInterval = t ? t / timeSteps : 2; // Default to 2s if time not specified
699
+
700
+ for (let i = 0; i <= timeSteps; i++) {
701
+ timePoints.push(i * (t ? (t / timeSteps) : timeInterval));
702
+ }
703
+
704
+ // Calculate position and velocity at each time point
705
+ const positionData = [];
706
+ const velocityData = [];
707
+
708
+ timePoints.forEach(time => {
709
+ let pos, vel;
710
+
711
+ if (problemType === 'uniform') {
712
+ pos = u * time;
713
+ vel = u;
714
+ } else if (problemType === 'free-fall') {
715
+ pos = u * time - 0.5 * 9.8 * time * time;
716
+ vel = u - 9.8 * time;
717
+ } else {
718
+ // Constant acceleration
719
+ pos = u * time + 0.5 * a * time * time;
720
+ vel = u + a * time;
721
+ }
722
+
723
+ positionData.push(pos);
724
+ velocityData.push(vel);
725
+ });
726
+
727
+ // Position vs Time Chart
728
+ const positionCtx = document.getElementById('position-chart').getContext('2d');
729
+ positionChart = new Chart(positionCtx, {
730
+ type: 'line',
731
+ data: {
732
+ labels: timePoints.map(t => t.toFixed(1)),
733
+ datasets: [{
734
+ label: 'Position (m)',
735
+ data: positionData,
736
+ borderColor: '#3b82f6',
737
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
738
+ borderWidth: 2,
739
+ fill: true,
740
+ tension: 0.1
741
+ }]
742
+ },
743
+ options: {
744
+ responsive: true,
745
+ plugins: {
746
+ title: {
747
+ display: true,
748
+ text: 'Position vs Time'
749
+ }
750
+ },
751
+ scales: {
752
+ x: {
753
+ title: {
754
+ display: true,
755
+ text: 'Time (s)'
756
+ }
757
+ },
758
+ y: {
759
+ title: {
760
+ display: true,
761
+ text: 'Position (m)'
762
+ }
763
+ }
764
+ }
765
+ }
766
+ });
767
+
768
+ // Velocity vs Time Chart
769
+ const velocityCtx = document.getElementById('velocity-chart').getContext('2d');
770
+ velocityChart = new Chart(velocityCtx, {
771
+ type: 'line',
772
+ data: {
773
+ labels: timePoints.map(t => t.toFixed(1)),
774
+ datasets: [{
775
+ label: 'Velocity (m/s)',
776
+ data: velocityData,
777
+ borderColor: '#ef4444',
778
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
779
+ borderWidth: 2,
780
+ fill: true,
781
+ tension: 0.1
782
+ }]
783
+ },
784
+ options: {
785
+ responsive: true,
786
+ plugins: {
787
+ title: {
788
+ display: true,
789
+ text: 'Velocity vs Time'
790
+ }
791
+ },
792
+ scales: {
793
+ x: {
794
+ title: {
795
+ display: true,
796
+ text: 'Time (s)'
797
+ }
798
+ },
799
+ y: {
800
+ title: {
801
+ display: true,
802
+ text: 'Velocity (m/s)'
803
+ }
804
+ }
805
+ }
806
+ }
807
+ });
808
+ }
809
+
810
+ function resetProblem() {
811
+ knownVarsInput.value = '';
812
+ valuesInputContainer.innerHTML = '<div class="text-center text-gray-500">Select your known variables first</div>';
813
+ solutionSection.classList.add('hidden');
814
+ visualizationSection.classList.add('hidden');
815
+ motionDiagram.innerHTML = '';
816
+
817
+ if (positionChart) positionChart.destroy();
818
+ if (velocityChart) velocityChart.destroy();
819
+ }
820
+
821
+ function loadExample() {
822
+ const problemType = problemTypeSelect.value;
823
+
824
+ switch(problemType) {
825
+ case 'uniform':
826
+ knownVarsInput.value = 'u,t';
827
+ renderValueInputs(['u', 't']);
828
+ const uInput = document.getElementById('val-u');
829
+ const tInput = document.getElementById('val-t');
830
+ if (uInput) uInput.value = '10';
831
+ if (tInput) tInput.value = '5';
832
+ document.getElementById('find-var').value = 's';
833
+ break;
834
+
835
+ case 'constant-acceleration':
836
+ knownVarsInput.value = 'u,a,t';
837
+ renderValueInputs(['u', 'a', 't']);
838
+ const uCAInput = document.getElementById('val-u');
839
+ const aInput = document.getElementById('val-a');
840
+ const tCAInput = document.getElementById('val-t');
841
+ if (uCAInput) uCAInput.value = '5';
842
+ if (aInput) aInput.value = '2';
843
+ if (tCAInput) tCAInput.value = '4';
844
+ document.getElementById('find-var').value = 'v';
845
+ break;
846
+
847
+ case 'free-fall':
848
+ knownVarsInput.value = 'u,t';
849
+ renderValueInputs(['u', 't']);
850
+ const uFFInput = document.getElementById('val-u');
851
+ const tFFInput = document.getElementById('val-t');
852
+ if (uFFInput) uFFInput.value = '20';
853
+ if (tFFInput) tFFInput.value = '3';
854
+ document.getElementById('find-var').value = 'v';
855
+ break;
856
+ }
857
+ }
858
+
859
+ function toggleExpandAll() {
860
+ autoExpandSteps = !autoExpandSteps;
861
+
862
+ const steps = document.querySelectorAll('.step .step-title + div');
863
+ steps.forEach(step => {
864
+ step.classList.toggle('hidden');
865
+ });
866
+
867
+ const icons = document.querySelectorAll('.step-title i');
868
+ icons.forEach(icon => {
869
+ icon.classList.toggle('fa-chevron-down');
870
+ icon.classList.toggle('fa-chevron-up');
871
+ });
872
+
873
+ expandAllBtn.textContent = autoExpandSteps ? 'Collapse All Steps' : 'Expand All Steps';
874
+ }
875
+ });
876
+ </script>
877
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AARIFSHABIR/motion" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
878
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Please make an app solving numericals in chapter motion in one dimension using effective diaghrams for class 11