Hugging Face's logo

Spaces:
raayraay
/
study-buddy-site
Running

App Files Community
raayraay commited on
Commit
5ef1c06
·
verified ·
1 Parent(s): 6dadd00

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1357 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Study Buddy Site
3
- emoji: 🏃
4
- colorFrom: gray
5
- colorTo: blue
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: study-buddy-site
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: red
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,1357 @@
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>ADHD Linear Programming Study Buddy</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
+ <style>
10
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-10px); }
13
+ }
14
+ @keyframes shake {
15
+ 0%, 100% { transform: rotate(0deg); }
16
+ 25% { transform: rotate(5deg); }
17
+ 75% { transform: rotate(-5deg); }
18
+ }
19
+ @keyframes pulse {
20
+ 0%, 100% { opacity: 1; }
21
+ 50% { opacity: 0.5; }
22
+ }
23
+ .floating {
24
+ animation: float 3s ease-in-out infinite;
25
+ }
26
+ .shaking {
27
+ animation: shake 0.5s ease-in-out infinite;
28
+ }
29
+ .pulsing {
30
+ animation: pulse 1.5s ease-in-out infinite;
31
+ }
32
+ .progress-bar {
33
+ transition: width 0.5s ease-in-out;
34
+ }
35
+ .constraint-line {
36
+ stroke-dasharray: 5;
37
+ animation: dash 30s linear infinite;
38
+ }
39
+ @keyframes dash {
40
+ to {
41
+ stroke-dashoffset: 1000;
42
+ }
43
+ }
44
+ .feasible-region {
45
+ fill-opacity: 0.3;
46
+ animation: colorChange 10s infinite alternate;
47
+ }
48
+ @keyframes colorChange {
49
+ 0% { fill: #3B82F6; }
50
+ 25% { fill: #10B981; }
51
+ 50% { fill: #F59E0B; }
52
+ 75% { fill: #EC4899; }
53
+ 100% { fill: #8B5CF6; }
54
+ }
55
+ .highlight-box {
56
+ transition: all 0.3s ease;
57
+ }
58
+ .highlight-box:hover {
59
+ transform: scale(1.02);
60
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
61
+ }
62
+ .tab-content {
63
+ display: none;
64
+ }
65
+ .tab-content.active {
66
+ display: block;
67
+ animation: fadeIn 0.5s ease-in;
68
+ }
69
+ @keyframes fadeIn {
70
+ from { opacity: 0; }
71
+ to { opacity: 1; }
72
+ }
73
+ .confetti {
74
+ position: absolute;
75
+ width: 10px;
76
+ height: 10px;
77
+ background-color: #f00;
78
+ opacity: 0;
79
+ }
80
+ </style>
81
+ </head>
82
+ <body class="bg-gray-50 min-h-screen font-sans">
83
+ <div class="container mx-auto px-4 py-8">
84
+ <!-- Header with progress tracker -->
85
+ <header class="mb-8">
86
+ <div class="flex justify-between items-center mb-6">
87
+ <h1 class="text-4xl font-bold text-indigo-800 flex items-center">
88
+ <i class="fas fa-brain mr-3 text-pink-500 floating"></i>
89
+ LP Study Buddy
90
+ </h1>
91
+ <div class="flex items-center space-x-4">
92
+ <div class="relative">
93
+ <div class="h-4 w-32 bg-gray-200 rounded-full overflow-hidden">
94
+ <div id="progress-bar" class="progress-bar h-full bg-green-500" style="width: 0%"></div>
95
+ </div>
96
+ <span id="progress-text" class="text-xs font-semibold text-gray-600 absolute -bottom-5 right-0">0% Complete</span>
97
+ </div>
98
+ <button id="focus-mode" class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm flex items-center">
99
+ <i class="fas fa-crosshairs mr-1"></i> Focus Mode
100
+ </button>
101
+ </div>
102
+ </div>
103
+
104
+ <div class="bg-white p-4 rounded-xl shadow-md mb-6">
105
+ <div class="flex items-center">
106
+ <div class="mr-4">
107
+ <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center">
108
+ <i class="fas fa-lightbulb text-yellow-500 text-2xl shaking"></i>
109
+ </div>
110
+ </div>
111
+ <div>
112
+ <h2 class="text-xl font-bold text-gray-800">ADHD Study Tips</h2>
113
+ <p class="text-gray-600" id="study-tip">Work in short bursts (10-15 min) with breaks in between!</p>
114
+ <div class="flex space-x-2 mt-2">
115
+ <button id="prev-tip" class="px-2 py-1 bg-gray-100 rounded text-sm">
116
+ <i class="fas fa-arrow-left"></i>
117
+ </button>
118
+ <button id="next-tip" class="px-2 py-1 bg-gray-100 rounded text-sm">
119
+ <i class="fas fa-arrow-right"></i>
120
+ </button>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </header>
126
+
127
+ <!-- Main content area with tabs -->
128
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
129
+ <!-- Sidebar with navigation -->
130
+ <div class="lg:col-span-1">
131
+ <div class="bg-white p-4 rounded-xl shadow-md sticky top-4">
132
+ <h3 class="font-bold text-lg mb-4 text-indigo-700 flex items-center">
133
+ <i class="fas fa-list-ul mr-2"></i> Topics
134
+ </h3>
135
+ <ul class="space-y-2">
136
+ <li>
137
+ <button data-tab="formulating" class="tab-btn w-full text-left px-3 py-2 rounded-lg bg-indigo-50 text-indigo-700 font-medium flex items-center justify-between">
138
+ <span>1. Formulating Problems</span>
139
+ <i class="fas fa-check-circle text-green-500 opacity-0"></i>
140
+ </button>
141
+ </li>
142
+ <li>
143
+ <button data-tab="graphical" class="tab-btn w-full text-left px-3 py-2 rounded-lg hover:bg-indigo-50 text-gray-700 flex items-center justify-between">
144
+ <span>2. Graphical Solutions</span>
145
+ <i class="fas fa-check-circle text-green-500 opacity-0"></i>
146
+ </button>
147
+ </li>
148
+ <li>
149
+ <button data-tab="standard-form" class="tab-btn w-full text-left px-3 py-2 rounded-lg hover:bg-indigo-50 text-gray-700 flex items-center justify-between">
150
+ <span>3. Standard Form</span>
151
+ <i class="fas fa-check-circle text-green-500 opacity-0"></i>
152
+ </button>
153
+ </li>
154
+ <li>
155
+ <button data-tab="simplex" class="tab-btn w-full text-left px-3 py-2 rounded-lg hover:bg-indigo-50 text-gray-700 flex items-center justify-between">
156
+ <span>4. Simplex Method</span>
157
+ <i class="fas fa-check-circle text-green-500 opacity-0"></i>
158
+ </button>
159
+ </li>
160
+ <li>
161
+ <button data-tab="duality" class="tab-btn w-full text-left px-3 py-2 rounded-lg hover:bg-indigo-50 text-gray-700 flex items-center justify-between">
162
+ <span>5. Duality</span>
163
+ <i class="fas fa-check-circle text-green-500 opacity-0"></i>
164
+ </button>
165
+ </li>
166
+ </ul>
167
+
168
+ <div class="mt-6 pt-4 border-t border-gray-200">
169
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
170
+ <i class="fas fa-gamepad mr-2"></i> Quick Games
171
+ </h3>
172
+ <button id="flashcards-btn" class="w-full mb-2 px-3 py-2 bg-purple-100 text-purple-700 rounded-lg flex items-center">
173
+ <i class="fas fa-layer-group mr-2"></i> Flashcards
174
+ </button>
175
+ <button id="quiz-btn" class="w-full px-3 py-2 bg-green-100 text-green-700 rounded-lg flex items-center">
176
+ <i class="fas fa-question-circle mr-2"></i> Pop Quiz
177
+ </button>
178
+ </div>
179
+
180
+ <div class="mt-6 pt-4 border-t border-gray-200">
181
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
182
+ <i class="fas fa-tools mr-2"></i> Tools
183
+ </h3>
184
+ <div class="flex space-x-2">
185
+ <button id="timer-btn" class="flex-1 px-3 py-2 bg-blue-100 text-blue-700 rounded-lg flex items-center justify-center">
186
+ <i class="fas fa-stopwatch mr-2"></i> Timer
187
+ </button>
188
+ <button id="distraction-btn" class="flex-1 px-3 py-2 bg-pink-100 text-pink-700 rounded-lg flex items-center justify-center">
189
+ <i class="fas fa-headphones mr-2"></i> Sounds
190
+ </button>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Main content -->
197
+ <div class="lg:col-span-3">
198
+ <!-- Formulating Problems Tab -->
199
+ <div id="formulating" class="tab-content active">
200
+ <div class="bg-white rounded-xl shadow-md overflow-hidden highlight-box">
201
+ <div class="p-5">
202
+ <div class="flex justify-between items-start">
203
+ <div>
204
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">1. Formulating Linear Programming Problems</h2>
205
+ <p class="text-gray-600 mb-4">Turning real-world problems into mathematical equations</p>
206
+ </div>
207
+ <button class="complete-topic px-4 py-2 bg-green-500 text-white rounded-lg flex items-center">
208
+ <i class="fas fa-check mr-2"></i> Mark Complete
209
+ </button>
210
+ </div>
211
+
212
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
213
+ <div>
214
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
215
+ <i class="fas fa-lightbulb mr-2 text-yellow-500"></i> Key Concepts
216
+ </h3>
217
+ <ul class="space-y-2">
218
+ <li class="flex items-start">
219
+ <i class="fas fa-arrow-right text-indigo-500 mt-1 mr-2"></i>
220
+ <span><strong>Objective Function:</strong> What you want to maximize or minimize</span>
221
+ </li>
222
+ <li class="flex items-start">
223
+ <i class="fas fa-arrow-right text-indigo-500 mt-1 mr-2"></i>
224
+ <span><strong>Constraints:</strong> Limitations or requirements</span>
225
+ </li>
226
+ <li class="flex items-start">
227
+ <i class="fas fa-arrow-right text-indigo-500 mt-1 mr-2"></i>
228
+ <span><strong>Decision Variables:</strong> What you can control</span>
229
+ </li>
230
+ </ul>
231
+
232
+ <h3 class="font-bold text-lg mt-6 mb-3 text-indigo-700 flex items-center">
233
+ <i class="fas fa-bolt mr-2 text-purple-500"></i> ADHD Tips
234
+ </h3>
235
+ <div class="bg-blue-50 p-3 rounded-lg">
236
+ <p class="text-blue-800"><i class="fas fa-star mr-2 text-yellow-500"></i> <strong>Make it fun:</strong> Use examples from your life (tacos, video games, etc.)</p>
237
+ <p class="text-blue-800 mt-2"><i class="fas fa-star mr-2 text-yellow-500"></i> <strong>Quick sketch:</strong> Jot down variables and constraints without perfection</p>
238
+ </div>
239
+ </div>
240
+
241
+ <div>
242
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
243
+ <i class="fas fa-pencil-alt mr-2 text-green-500"></i> Example
244
+ </h3>
245
+ <div class="bg-gray-50 p-4 rounded-lg">
246
+ <p class="font-semibold">Taco & Burger Stand:</p>
247
+ <p class="text-sm text-gray-600 mb-2">You have 10 buns and 5 patties. Tacos need 1 bun, burgers need 1 bun + 1 patty. Profit: $2/taco, $3/burger.</p>
248
+
249
+ <div class="space-y-2">
250
+ <div class="flex items-center">
251
+ <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded mr-2 text-sm">Goal</span>
252
+ <span>Maximize Profit: <span class="font-mono">P = 2x + 3y</span></span>
253
+ </div>
254
+ <div class="flex items-center">
255
+ <span class="bg-pink-100 text-pink-800 px-2 py-1 rounded mr-2 text-sm">Constraints</span>
256
+ <span>Buns: <span class="font-mono">x + y ≤ 10</span></span>
257
+ </div>
258
+ <div class="flex items-center">
259
+ <span class="bg-pink-100 text-pink-800 px-2 py-1 rounded mr-2 text-sm">Constraints</span>
260
+ <span>Patties: <span class="font-mono">y ≤ 5</span></span>
261
+ </div>
262
+ <div class="flex items-center">
263
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded mr-2 text-sm">Variables</span>
264
+ <span><span class="font-mono">x ≥ 0, y ≥ 0</span></span>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <button id="example-animation-btn" class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg flex items-center">
270
+ <i class="fas fa-play mr-2"></i> Show Animation
271
+ </button>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="border-t border-gray-200 pt-4">
276
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
277
+ <i class="fas fa-dumbbell mr-2 text-red-500"></i> Practice
278
+ </h3>
279
+ <div class="bg-orange-50 p-4 rounded-lg">
280
+ <p class="font-medium mb-2">Pizza & Wings:</p>
281
+ <p class="text-sm text-gray-600 mb-3">You have 20 slices of pizza and 30 wings. A pizza party needs 4 slices, a wing party needs 10 wings. Profit: $15/pizza party, $20/wing party.</p>
282
+
283
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
284
+ <div>
285
+ <label class="block text-sm font-medium text-gray-700 mb-1">Objective Function:</label>
286
+ <input type="text" class="practice-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="P = ...">
287
+ </div>
288
+ <div>
289
+ <label class="block text-sm font-medium text-gray-700 mb-1">Constraints:</label>
290
+ <input type="text" class="practice-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Pizza slices...">
291
+ <input type="text" class="practice-input w-full mt-2 px-3 py-2 border border-gray-300 rounded-md" placeholder="Wings...">
292
+ </div>
293
+ </div>
294
+
295
+ <button id="check-practice" class="px-4 py-2 bg-orange-500 text-white rounded-lg flex items-center">
296
+ <i class="fas fa-check-circle mr-2"></i> Check Answer
297
+ </button>
298
+ <div id="practice-feedback" class="mt-3 hidden"></div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Graphical Solutions Tab -->
306
+ <div id="graphical" class="tab-content">
307
+ <div class="bg-white rounded-xl shadow-md overflow-hidden highlight-box">
308
+ <div class="p-5">
309
+ <div class="flex justify-between items-start">
310
+ <div>
311
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">2. Graphical Solutions (2D Problems)</h2>
312
+ <p class="text-gray-600 mb-4">Visualizing and solving LP problems with two variables</p>
313
+ </div>
314
+ <button class="complete-topic px-4 py-2 bg-green-500 text-white rounded-lg flex items-center">
315
+ <i class="fas fa-check mr-2"></i> Mark Complete
316
+ </button>
317
+ </div>
318
+
319
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
320
+ <div>
321
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
322
+ <i class="fas fa-lightbulb mr-2 text-yellow-500"></i> Key Concepts
323
+ </h3>
324
+ <ul class="space-y-2">
325
+ <li class="flex items-start">
326
+ <i class="fas fa-arrow-right text-indigo-500 mt-1 mr-2"></i>
327
+ <span><strong>Plot constraints:</strong> Draw each inequality as a line</span>
328
+ </li>
329
+ <li class="flex items-start">
330
+ <i class="fas fa-arrow-right text-indigo-500 mt-1 mr-2"></i>
331
+ <span><strong>Feasible region:</strong> Where all constraints overlap</span>
332
+ </li>
333
+ <li class="flex items-start">
334
+ <i class="fas fa-arrow-right text-indigo-500 mt-1 mr-2"></i>
335
+ <span><strong>Optimal solution:</strong> At a corner point of the feasible region</span>
336
+ </li>
337
+ </ul>
338
+
339
+ <h3 class="font-bold text-lg mt-6 mb-3 text-indigo-700 flex items-center">
340
+ <i class="fas fa-bolt mr-2 text-purple-500"></i> ADHD Tips
341
+ </h3>
342
+ <div class="bg-blue-50 p-3 rounded-lg">
343
+ <p class="text-blue-800"><i class="fas fa-star mr-2 text-yellow-500"></i> <strong>Use colors:</strong> Different colors for each constraint</p>
344
+ <p class="text-blue-800 mt-2"><i class="fas fa-star mr-2 text-yellow-500"></i> <strong>Interactive tools:</strong> Try online graphing calculators</p>
345
+ </div>
346
+ </div>
347
+
348
+ <div>
349
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
350
+ <i class="fas fa-chart-line mr-2 text-green-500"></i> Interactive Graph
351
+ </h3>
352
+ <div class="bg-gray-100 p-4 rounded-lg">
353
+ <div id="graph-container" class="w-full h-64 relative">
354
+ <svg id="graph-svg" width="100%" height="100%" viewBox="0 0 400 300" class="bg-white rounded">
355
+ <!-- Axes -->
356
+ <line x1="50" y1="250" x2="350" y2="250" stroke="black" stroke-width="2" />
357
+ <line x1="50" y1="250" x2="50" y2="50" stroke="black" stroke-width="2" />
358
+
359
+ <!-- X axis labels -->
360
+ <text x="350" y="265" text-anchor="middle">x</text>
361
+ <text x="60" y="265" text-anchor="middle">0</text>
362
+ <text x="110" y="265" text-anchor="middle">2</text>
363
+ <text x="160" y="265" text-anchor="middle">4</text>
364
+ <text x="210" y="265" text-anchor="middle">6</text>
365
+ <text x="260" y="265" text-anchor="middle">8</text>
366
+ <text x="310" y="265" text-anchor="middle">10</text>
367
+
368
+ <!-- Y axis labels -->
369
+ <text x="35" y="60" text-anchor="middle">10</text>
370
+ <text x="35" y="110" text-anchor="middle">8</text>
371
+ <text x="35" y="160" text-anchor="middle">6</text>
372
+ <text x="35" y="210" text-anchor="middle">4</text>
373
+ <text x="35" y="260" text-anchor="middle">0</text>
374
+ <text x="30" y="40" text-anchor="middle">y</text>
375
+
376
+ <!-- Constraints will be added here by JavaScript -->
377
+ </svg>
378
+ </div>
379
+
380
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-2">
381
+ <button id="add-constraint-btn" class="px-3 py-2 bg-blue-100 text-blue-700 rounded flex items-center justify-center">
382
+ <i class="fas fa-plus mr-2"></i> Add Constraint
383
+ </button>
384
+ <button id="find-optimal-btn" class="px-3 py-2 bg-green-100 text-green-700 rounded flex items-center justify-center">
385
+ <i class="fas fa-bullseye mr-2"></i> Find Optimal
386
+ </button>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- Standard Form Tab -->
396
+ <div id="standard-form" class="tab-content">
397
+ <div class="bg-white rounded-xl shadow-md overflow-hidden highlight-box">
398
+ <div class="p-5">
399
+ <div class="flex justify-between items-start">
400
+ <div>
401
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">3. Conversion to Standard Form</h2>
402
+ <p class="text-gray-600 mb-4">Rewriting LP problems for the simplex method</p>
403
+ </div>
404
+ <button class="complete-topic px-4 py-2 bg-green-500 text-white rounded-lg flex items-center">
405
+ <i class="fas fa-check mr-2"></i> Mark Complete
406
+ </button>
407
+ </div>
408
+
409
+ <div class="mb-6">
410
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
411
+ <i class="fas fa-exchange-alt mr-2 text-purple-500"></i> Conversion Rules
412
+ </h3>
413
+
414
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
415
+ <div class="bg-gray-50 p-4 rounded-lg">
416
+ <h4 class="font-bold text-blue-700 mb-2 flex items-center">
417
+ <i class="fas fa-less-than-equal mr-2"></i> ≤ Constraints
418
+ </h4>
419
+ <p class="text-sm">Add a <span class="font-mono bg-blue-100 px-1">slack variable</span>:</p>
420
+ <p class="font-mono mt-1">x + y ≤ 10 → x + y + s = 10</p>
421
+ <p class="text-xs text-gray-500 mt-2">s ≥ 0</p>
422
+ </div>
423
+
424
+ <div class="bg-gray-50 p-4 rounded-lg">
425
+ <h4 class="font-bold text-green-700 mb-2 flex items-center">
426
+ <i class="fas fa-greater-than-equal mr-2"></i> ≥ Constraints
427
+ </h4>
428
+ <p class="text-sm">Add a <span class="font-mono bg-green-100 px-1">surplus variable</span>:</p>
429
+ <p class="font-mono mt-1">x + y ≥ 10 → x + y - s = 10</p>
430
+ <p class="text-xs text-gray-500 mt-2">s ≥ 0</p>
431
+ </div>
432
+
433
+ <div class="bg-gray-50 p-4 rounded-lg">
434
+ <h4 class="font-bold text-red-700 mb-2 flex items-center">
435
+ <i class="fas fa-random mr-2"></i> Free Variables
436
+ </h4>
437
+ <p class="text-sm">Replace with difference:</p>
438
+ <p class="font-mono mt-1">x unrestricted → x = x⁺ - x⁻</p>
439
+ <p class="text-xs text-gray-500 mt-2">x⁺ ≥ 0, x⁻ ≥ 0</p>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="border-t border-gray-200 pt-4">
445
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
446
+ <i class="fas fa-dumbbell mr-2 text-red-500"></i> Practice
447
+ </h3>
448
+
449
+ <div class="bg-orange-50 p-4 rounded-lg">
450
+ <div class="mb-4">
451
+ <p class="font-medium">Convert to standard form:</p>
452
+ <p class="text-sm font-mono bg-white p-2 rounded mt-1">Maximize z = 3x₁ + 2x₂</p>
453
+ <p class="text-sm font-mono bg-white p-2 rounded">Subject to: x₁ + x₂ ≤ 4</p>
454
+ <p class="text-sm font-mono bg-white p-2 rounded">x₁ - x₂ ≥ 1</p>
455
+ <p class="text-sm font-mono bg-white p-2 rounded">x₁ ≥ 0, x₂ unrestricted</p>
456
+ </div>
457
+
458
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
459
+ <div>
460
+ <label class="block text-sm font-medium text-gray-700 mb-1">Objective:</label>
461
+ <input type="text" class="std-form-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Maximize...">
462
+ </div>
463
+ <div>
464
+ <label class="block text-sm font-medium text-gray-700 mb-1">Constraints:</label>
465
+ <input type="text" class="std-form-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="First constraint...">
466
+ <input type="text" class="std-form-input w-full mt-2 px-3 py-2 border border-gray-300 rounded-md" placeholder="Second constraint...">
467
+ </div>
468
+ </div>
469
+
470
+ <button id="check-std-form" class="px-4 py-2 bg-orange-500 text-white rounded-lg flex items-center">
471
+ <i class="fas fa-check-circle mr-2"></i> Check Answer
472
+ </button>
473
+ <div id="std-form-feedback" class="mt-3 hidden"></div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <!-- Simplex Method Tab -->
481
+ <div id="simplex" class="tab-content">
482
+ <div class="bg-white rounded-xl shadow-md overflow-hidden highlight-box">
483
+ <div class="p-5">
484
+ <div class="flex justify-between items-start">
485
+ <div>
486
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">4. Simplex Method</h2>
487
+ <p class="text-gray-600 mb-4">Step-by-step algorithm for solving LP problems</p>
488
+ </div>
489
+ <button class="complete-topic px-4 py-2 bg-green-500 text-white rounded-lg flex items-center">
490
+ <i class="fas fa-check mr-2"></i> Mark Complete
491
+ </button>
492
+ </div>
493
+
494
+ <div class="mb-6">
495
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
496
+ <i class="fas fa-list-ol mr-2 text-purple-500"></i> Steps
497
+ </h3>
498
+
499
+ <div class="space-y-4">
500
+ <div class="flex items-start">
501
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-3">1</div>
502
+ <div>
503
+ <p class="font-medium">Set up initial tableau</p>
504
+ <p class="text-sm text-gray-600">Include slack/surplus variables and objective function</p>
505
+ </div>
506
+ </div>
507
+
508
+ <div class="flex items-start">
509
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-3">2</div>
510
+ <div>
511
+ <p class="font-medium">Choose pivot column</p>
512
+ <p class="text-sm text-gray-600">Most negative entry in bottom row (for minimization)</p>
513
+ </div>
514
+ </div>
515
+
516
+ <div class="flex items-start">
517
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-3">3</div>
518
+ <div>
519
+ <p class="font-medium">Choose pivot row</p>
520
+ <p class="text-sm text-gray-600">Smallest non-negative ratio (RHS ÷ pivot column)</p>
521
+ </div>
522
+ </div>
523
+
524
+ <div class="flex items-start">
525
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-3">4</div>
526
+ <div>
527
+ <p class="font-medium">Perform row operations</p>
528
+ <p class="text-sm text-gray-600">Make pivot element 1, others in column 0</p>
529
+ </div>
530
+ </div>
531
+
532
+ <div class="flex items-start">
533
+ <div class="bg-indigo-100 text-indigo-800 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-3">5</div>
534
+ <div>
535
+ <p class="font-medium">Repeat until optimal</p>
536
+ <p class="text-sm text-gray-600">No negatives in bottom row (minimization)</p>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </div>
541
+
542
+ <div class="border-t border-gray-200 pt-4">
543
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
544
+ <i class="fas fa-table mr-2 text-green-500"></i> Interactive Tableau
545
+ </h3>
546
+
547
+ <div class="bg-gray-100 p-4 rounded-lg">
548
+ <div class="overflow-x-auto">
549
+ <table id="simplex-table" class="w-full bg-white border border-gray-200">
550
+ <thead>
551
+ <tr>
552
+ <th class="border px-4 py-2">Basic</th>
553
+ <th class="border px-4 py-2">x₁</th>
554
+ <th class="border px-4 py-2">x₂</th>
555
+ <th class="border px-4 py-2">s₁</th>
556
+ <th class="border px-4 py-2">s₂</th>
557
+ <th class="border px-4 py-2">RHS</th>
558
+ </tr>
559
+ </thead>
560
+ <tbody>
561
+ <tr>
562
+ <td class="border px-4 py-2">s₁</td>
563
+ <td class="border px-4 py-2">1</td>
564
+ <td class="border px-4 py-2">1</td>
565
+ <td class="border px-4 py-2">1</td>
566
+ <td class="border px-4 py-2">0</td>
567
+ <td class="border px-4 py-2">4</td>
568
+ </tr>
569
+ <tr>
570
+ <td class="border px-4 py-2">s₂</td>
571
+ <td class="border px-4 py-2">1</td>
572
+ <td class="border px-4 py-2">-1</td>
573
+ <td class="border px-4 py-2">0</td>
574
+ <td class="border px-4 py-2">-1</td>
575
+ <td class="border px-4 py-2">1</td>
576
+ </tr>
577
+ <tr class="bg-gray-50">
578
+ <td class="border px-4 py-2">z</td>
579
+ <td class="border px-4 py-2">-3</td>
580
+ <td class="border px-4 py-2">-2</td>
581
+ <td class="border px-4 py-2">0</td>
582
+ <td class="border px-4 py-2">0</td>
583
+ <td class="border px-4 py-2">0</td>
584
+ </tr>
585
+ </tbody>
586
+ </table>
587
+ </div>
588
+
589
+ <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-2">
590
+ <button id="step-simplex" class="px-3 py-2 bg-blue-500 text-white rounded flex items-center justify-center">
591
+ <i class="fas fa-forward mr-2"></i> Next Step
592
+ </button>
593
+ <button id="reset-simplex" class="px-3 py-2 bg-gray-500 text-white rounded flex items-center justify-center">
594
+ <i class="fas fa-undo mr-2"></i> Reset
595
+ </button>
596
+ <button id="hint-simplex" class="px-3 py-2 bg-yellow-500 text-white rounded flex items-center justify-center">
597
+ <i class="fas fa-lightbulb mr-2"></i> Hint
598
+ </button>
599
+ <button id="auto-simplex" class="px-3 py-2 bg-green-500 text-white rounded flex items-center justify-center">
600
+ <i class="fas fa-robot mr-2"></i> Auto Solve
601
+ </button>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+
609
+ <!-- Duality Tab -->
610
+ <div id="duality" class="tab-content">
611
+ <div class="bg-white rounded-xl shadow-md overflow-hidden highlight-box">
612
+ <div class="p-5">
613
+ <div class="flex justify-between items-start">
614
+ <div>
615
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">5. Duality</h2>
616
+ <p class="text-gray-600 mb-4">Understanding the dual problem and its relationship to the primal</p>
617
+ </div>
618
+ <button class="complete-topic px-4 py-2 bg-green-500 text-white rounded-lg flex items-center">
619
+ <i class="fas fa-check mr-2"></i> Mark Complete
620
+ </button>
621
+ </div>
622
+
623
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
624
+ <div>
625
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
626
+ <i class="fas fa-project-diagram mr-2 text-purple-500"></i> Primal to Dual Rules
627
+ </h3>
628
+
629
+ <div class="space-y-4">
630
+ <div class="bg-gray-50 p-3 rounded-lg">
631
+ <p class="font-medium text-blue-700">Maximization → Minimization</p>
632
+ <p class="text-sm">(and vice versa)</p>
633
+ </div>
634
+
635
+ <div class="bg-gray-50 p-3 rounded-lg">
636
+ <p class="font-medium text-green-700">Constraints → Variables</p>
637
+ <p class="text-sm">Each primal constraint becomes a dual variable</p>
638
+ </div>
639
+
640
+ <div class="bg-gray-50 p-3 rounded-lg">
641
+ <p class="font-medium text-red-700">Variables → Constraints</p>
642
+ <p class="text-sm">Each primal variable becomes a dual constraint</p>
643
+ </div>
644
+
645
+ <div class="bg-gray-50 p-3 rounded-lg">
646
+ <p class="font-medium text-yellow-700">Coefficients transpose</p>
647
+ <p class="text-sm">Constraint matrix flips rows and columns</p>
648
+ </div>
649
+ </div>
650
+ </div>
651
+
652
+ <div>
653
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
654
+ <i class="fas fa-balance-scale mr-2 text-green-500"></i> Example
655
+ </h3>
656
+
657
+ <div class="bg-gray-100 p-4 rounded-lg">
658
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
659
+ <div>
660
+ <p class="font-medium text-center mb-2">Primal</p>
661
+ <div class="bg-white p-3 rounded">
662
+ <p class="text-sm font-mono">Max z = 3x₁ + 2x₂</p>
663
+ <p class="text-sm font-mono mt-1">x₁ + x₂ ≤ 4</p>
664
+ <p class="text-sm font-mono">x₁ - x₂ ≤ 1</p>
665
+ <p class="text-sm font-mono">x₁, x₂ ≥ 0</p>
666
+ </div>
667
+ </div>
668
+
669
+ <div>
670
+ <p class="font-medium text-center mb-2">Dual</p>
671
+ <div class="bg-white p-3 rounded">
672
+ <p class="text-sm font-mono">Min w = 4y₁ + y₂</p>
673
+ <p class="text-sm font-mono mt-1">y₁ + y₂ ≥ 3</p>
674
+ <p class="text-sm font-mono">y₁ - y₂ ≥ 2</p>
675
+ <p class="text-sm font-mono">y₁, y₂ ≥ 0</p>
676
+ </div>
677
+ </div>
678
+ </div>
679
+
680
+ <button id="duality-animation-btn" class="mt-4 w-full px-4 py-2 bg-indigo-600 text-white rounded-lg flex items-center justify-center">
681
+ <i class="fas fa-magic mr-2"></i> Show Transformation
682
+ </button>
683
+ </div>
684
+ </div>
685
+ </div>
686
+
687
+ <div class="border-t border-gray-200 pt-4">
688
+ <h3 class="font-bold text-lg mb-3 text-indigo-700 flex items-center">
689
+ <i class="fas fa-dumbbell mr-2 text-red-500"></i> Practice
690
+ </h3>
691
+
692
+ <div class="bg-orange-50 p-4 rounded-lg">
693
+ <p class="font-medium mb-2">Find the dual of:</p>
694
+ <div class="bg-white p-3 rounded mb-4">
695
+ <p class="text-sm font-mono">Min z = 2x₁ + 5x₂</p>
696
+ <p class="text-sm font-mono mt-1">3x₁ + x₂ ≥ 6</p>
697
+ <p class="text-sm font-mono">x₁ + 2x₂ ≥ 4</p>
698
+ <p class="text-sm font-mono">x₁, x₂ ≥ 0</p>
699
+ </div>
700
+
701
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
702
+ <div>
703
+ <label class="block text-sm font-medium text-gray-700 mb-1">Objective:</label>
704
+ <input type="text" class="dual-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Min/Max...">
705
+ </div>
706
+ <div>
707
+ <label class="block text-sm font-medium text-gray-700 mb-1">Constraints:</label>
708
+ <input type="text" class="dual-input w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="First constraint...">
709
+ <input type="text" class="dual-input w-full mt-2 px-3 py-2 border border-gray-300 rounded-md" placeholder="Second constraint...">
710
+ </div>
711
+ </div>
712
+
713
+ <button id="check-dual" class="px-4 py-2 bg-orange-500 text-white rounded-lg flex items-center">
714
+ <i class="fas fa-check-circle mr-2"></i> Check Answer
715
+ </button>
716
+ <div id="dual-feedback" class="mt-3 hidden"></div>
717
+ </div>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ </div>
722
+ </div>
723
+ </div>
724
+ </div>
725
+
726
+ <!-- Modals -->
727
+ <div id="flashcards-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
728
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
729
+ <div class="p-5">
730
+ <div class="flex justify-between items-center mb-4">
731
+ <h3 class="text-xl font-bold">Flashcards</h3>
732
+ <button id="close-flashcards" class="text-gray-500 hover:text-gray-700">
733
+ <i class="fas fa-times"></i>
734
+ </button>
735
+ </div>
736
+
737
+ <div class="bg-blue-50 p-6 rounded-lg h-64 flex items-center justify-center">
738
+ <div id="flashcard-content" class="text-center">
739
+ <p class="text-lg font-medium">Click "Next" to start!</p>
740
+ </div>
741
+ </div>
742
+
743
+ <div class="flex justify-between mt-6">
744
+ <button id="prev-card" class="px-4 py-2 bg-gray-200 rounded-lg">
745
+ <i class="fas fa-arrow-left mr-2"></i> Previous
746
+ </button>
747
+ <button id="next-card" class="px-4 py-2 bg-indigo-600 text-white rounded-lg">
748
+ Next <i class="fas fa-arrow-right ml-2"></i>
749
+ </button>
750
+ </div>
751
+ </div>
752
+ </div>
753
+ </div>
754
+
755
+ <div id="quiz-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
756
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
757
+ <div class="p-5">
758
+ <div class="flex justify-between items-center mb-4">
759
+ <h3 class="text-xl font-bold">Pop Quiz</h3>
760
+ <button id="close-quiz" class="text-gray-500 hover:text-gray-700">
761
+ <i class="fas fa-times"></i>
762
+ </button>
763
+ </div>
764
+
765
+ <div id="quiz-question" class="mb-4">
766
+ <p class="font-medium mb-3">What is the first step in formulating an LP problem?</p>
767
+ <div class="space-y-2">
768
+ <label class="flex items-center space-x-2 p-2 border rounded-lg hover:bg-gray-50 cursor-pointer">
769
+ <input type="radio" name="quiz-answer" class="form-radio" value="A">
770
+ <span>Draw a graph</span>
771
+ </label>
772
+ <label class="flex items-center space-x-2 p-2 border rounded-lg hover:bg-gray-50 cursor-pointer">
773
+ <input type="radio" name="quiz-answer" class="form-radio" value="B">
774
+ <span>Identify the objective function</span>
775
+ </label>
776
+ <label class="flex items-center space-x-2 p-2 border rounded-lg hover:bg-gray-50 cursor-pointer">
777
+ <input type="radio" name="quiz-answer" class="form-radio" value="C">
778
+ <span>Add slack variables</span>
779
+ </label>
780
+ </div>
781
+ </div>
782
+
783
+ <div class="flex justify-between mt-6">
784
+ <div id="quiz-score" class="text-sm text-gray-600">Score: 0/0</div>
785
+ <button id="submit-quiz" class="px-4 py-2 bg-indigo-600 text-white rounded-lg">
786
+ Submit <i class="fas fa-check ml-2"></i>
787
+ </button>
788
+ </div>
789
+ </div>
790
+ </div>
791
+ </div>
792
+
793
+ <div id="timer-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
794
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
795
+ <div class="p-5">
796
+ <div class="flex justify-between items-center mb-4">
797
+ <h3 class="text-xl font-bold">Focus Timer</h3>
798
+ <button id="close-timer" class="text-gray-500 hover:text-gray-700">
799
+ <i class="fas fa-times"></i>
800
+ </button>
801
+ </div>
802
+
803
+ <div class="text-center mb-6">
804
+ <div class="text-5xl font-bold mb-2" id="timer-display">25:00</div>
805
+ <div class="text-gray-500">Minutes Remaining</div>
806
+ </div>
807
+
808
+ <div class="grid grid-cols-3 gap-2 mb-4">
809
+ <button data-minutes="5" class="timer-preset px-3 py-2 bg-blue-100 text-blue-700 rounded-lg">
810
+ 5 min
811
+ </button>
812
+ <button data-minutes="15" class="timer-preset px-3 py-2 bg-blue-100 text-blue-700 rounded-lg">
813
+ 15 min
814
+ </button>
815
+ <button data-minutes="25" class="timer-preset px-3 py-2 bg-blue-100 text-blue-700 rounded-lg">
816
+ 25 min
817
+ </button>
818
+ </div>
819
+
820
+ <div class="flex justify-center space-x-4 mt-6">
821
+ <button id="start-timer" class="px-4 py-2 bg-green-500 text-white rounded-lg">
822
+ <i class="fas fa-play mr-2"></i> Start
823
+ </button>
824
+ <button id="pause-timer" class="px-4 py-2 bg-yellow-500 text-white rounded-lg">
825
+ <i class="fas fa-pause mr-2"></i> Pause
826
+ </button>
827
+ <button id="reset-timer" class="px-4 py-2 bg-red-500 text-white rounded-lg">
828
+ <i class="fas fa-stop mr-2"></i> Stop
829
+ </button>
830
+ </div>
831
+ </div>
832
+ </div>
833
+ </div>
834
+
835
+ <div id="distraction-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
836
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
837
+ <div class="p-5">
838
+ <div class="flex justify-between items-center mb-4">
839
+ <h3 class="text-xl font-bold">Focus Sounds</h3>
840
+ <button id="close-distraction" class="text-gray-500 hover:text-gray-700">
841
+ <i class="fas fa-times"></i>
842
+ </button>
843
+ </div>
844
+
845
+ <div class="space-y-3">
846
+ <label class="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
847
+ <input type="radio" name="sound" class="form-radio" value="rain">
848
+ <div class="flex-1">
849
+ <div class="font-medium">Rain</div>
850
+ <div class="text-sm text-gray-500">Gentle rainfall</div>
851
+ </div>
852
+ <i class="fas fa-volume-up text-gray-400"></i>
853
+ </label>
854
+
855
+ <label class="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
856
+ <input type="radio" name="sound" class="form-radio" value="coffee">
857
+ <div class="flex-1">
858
+ <div class="font-medium">Coffee Shop</div>
859
+ <div class="text-sm text-gray-500">Ambient chatter</div>
860
+ </div>
861
+ <i class="fas fa-volume-up text-gray-400"></i>
862
+ </label>
863
+
864
+ <label class="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
865
+ <input type="radio" name="sound" class="form-radio" value="white">
866
+ <div class="flex-1">
867
+ <div class="font-medium">White Noise</div>
868
+ <div class="text-sm text-gray-500">Static sound</div>
869
+ </div>
870
+ <i class="fas fa-volume-up text-gray-400"></i>
871
+ </label>
872
+
873
+ <label class="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
874
+ <input type="radio" name="sound" class="form-radio" value="none">
875
+ <div class="flex-1">
876
+ <div class="font-medium">None</div>
877
+ <div class="text-sm text-gray-500">Silence</div>
878
+ </div>
879
+ </label>
880
+ </div>
881
+
882
+ <div class="mt-6">
883
+ <label class="flex items-center space-x-2">
884
+ <input type="range" id="volume-control" min="0" max="1" step="0.1" value="0.5" class="w-full">
885
+ <span class="text-sm text-gray-600 w-10 text-right">50%</span>
886
+ </label>
887
+ </div>
888
+ </div>
889
+ </div>
890
+ </div>
891
+
892
+ <script>
893
+ // Study tips
894
+ const studyTips = [
895
+ "Work in short bursts (10-15 min) with breaks in between!",
896
+ "Use colorful pens or markers to make notes more engaging.",
897
+ "Try explaining concepts out loud to an imaginary friend.",
898
+ "Create silly mnemonics to remember key concepts.",
899
+ "Reward yourself after completing each topic.",
900
+ "Use movement - pace while reviewing or sit on an exercise ball.",
901
+ "Chew gum or have a fidget toy to help focus.",
902
+ "Make up real-world examples that interest you.",
903
+ "Record yourself explaining concepts and listen back.",
904
+ "Change study locations frequently to stay engaged."
905
+ ];
906
+
907
+ let currentTipIndex = 0;
908
+ document.getElementById('study-tip').textContent = studyTips[currentTipIndex];
909
+
910
+ document.getElementById('next-tip').addEventListener('click', () => {
911
+ currentTipIndex = (currentTipIndex + 1) % studyTips.length;
912
+ document.getElementById('study-tip').textContent = studyTips[currentTipIndex];
913
+ });
914
+
915
+ document.getElementById('prev-tip').addEventListener('click', () => {
916
+ currentTipIndex = (currentTipIndex - 1 + studyTips.length) % studyTips.length;
917
+ document.getElementById('study-tip').textContent = studyTips[currentTipIndex];
918
+ });
919
+
920
+ // Tab navigation
921
+ document.querySelectorAll('.tab-btn').forEach(btn => {
922
+ btn.addEventListener('click', () => {
923
+ const tabId = btn.getAttribute('data-tab');
924
+
925
+ // Hide all tab contents
926
+ document.querySelectorAll('.tab-content').forEach(tab => {
927
+ tab.classList.remove('active');
928
+ });
929
+
930
+ // Show selected tab
931
+ document.getElementById(tabId).classList.add('active');
932
+
933
+ // Update active tab button
934
+ document.querySelectorAll('.tab-btn').forEach(t => {
935
+ t.classList.remove('bg-indigo-50', 'text-indigo-700');
936
+ t.classList.add('hover:bg-indigo-50', 'text-gray-700');
937
+ });
938
+
939
+ btn.classList.remove('hover:bg-indigo-50', 'text-gray-700');
940
+ btn.classList.add('bg-indigo-50', 'text-indigo-700');
941
+ });
942
+ });
943
+
944
+ // Mark topic complete
945
+ document.querySelectorAll('.complete-topic').forEach(btn => {
946
+ btn.addEventListener('click', function() {
947
+ const topicId = this.closest('.tab-content').id;
948
+ const tabBtn = document.querySelector(`.tab-btn[data-tab="${topicId}"]`);
949
+
950
+ // Add checkmark
951
+ const checkIcon = tabBtn.querySelector('i');
952
+ checkIcon.classList.remove('opacity-0');
953
+
954
+ // Update progress
955
+ updateProgress();
956
+
957
+ // Confetti effect
958
+ createConfetti(this);
959
+ });
960
+ });
961
+
962
+ function updateProgress() {
963
+ const completedTopics = document.querySelectorAll('.tab-btn i:not(.opacity-0)').length;
964
+ const totalTopics = document.querySelectorAll('.tab-btn').length;
965
+ const percentage = Math.round((completedTopics / totalTopics) * 100);
966
+
967
+ document.getElementById('progress-bar').style.width = `${percentage}%`;
968
+ document.getElementById('progress-text').textContent = `${percentage}% Complete`;
969
+ }
970
+
971
+ function createConfetti(element) {
972
+ const rect = element.getBoundingClientRect();
973
+ const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
974
+
975
+ for (let i = 0; i < 50; i++) {
976
+ const confetti = document.createElement('div');
977
+ confetti.className = 'confetti';
978
+ confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
979
+ confetti.style.left = `${rect.left + rect.width/2}px`;
980
+ confetti.style.top = `${rect.top}px`;
981
+ confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
982
+
983
+ document.body.appendChild(confetti);
984
+
985
+ const animation = confetti.animate([
986
+ { transform: `translate(0, 0) rotate(0)`, opacity: 1 },
987
+ { transform: `translate(${Math.random() * 200 - 100}px, ${window.innerHeight}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
988
+ ], {
989
+ duration: 1000 + Math.random() * 2000,
990
+ easing: 'cubic-bezier(0.1, 0.8, 0.3, 1)'
991
+ });
992
+
993
+ animation.onfinish = () => confetti.remove();
994
+ }
995
+ }
996
+
997
+ // Example animation
998
+ document.getElementById('example-animation-btn').addEventListener('click', function() {
999
+ const exampleDiv = this.previousElementSibling;
1000
+ exampleDiv.classList.add('pulsing');
1001
+
1002
+ setTimeout(() => {
1003
+ exampleDiv.classList.remove('pulsing');
1004
+ }, 1500);
1005
+ });
1006
+
1007
+ // Graphical solutions
1008
+ let constraints = [];
1009
+
1010
+ document.getElementById('add-constraint-btn').addEventListener('click', function() {
1011
+ const newConstraint = prompt("Enter constraint (e.g., x + y ≤ 10):");
1012
+ if (newConstraint) {
1013
+ constraints.push(newConstraint);
1014
+ updateGraph();
1015
+ }
1016
+ });
1017
+
1018
+ document.getElementById('find-optimal-btn').addEventListener('click', function() {
1019
+ alert("Finding optimal solution at corner points...");
1020
+ // In a real implementation, we would calculate the optimal solution
1021
+ });
1022
+
1023
+ function updateGraph() {
1024
+ const svg = document.getElementById('graph-svg');
1025
+
1026
+ // Clear existing constraints
1027
+ svg.querySelectorAll('.constraint-line, .feasible-region').forEach(el => el.remove());
1028
+
1029
+ // Add new constraints
1030
+ constraints.forEach((constraint, index) => {
1031
+ const color = ['#3B82F6', '#10B981', '#F59E0B', '#EC4899', '#8B5CF6'][index % 5];
1032
+
1033
+ // This is a simplified version - in a real app, we'd parse the constraint
1034
+ const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
1035
+ line.setAttribute('x1', '50');
1036
+ line.setAttribute('y1', '250');
1037
+ line.setAttribute('x2', '350');
1038
+ line.setAttribute('y2', '50');
1039
+ line.setAttribute('stroke', color);
1040
+ line.setAttribute('stroke-width', '2');
1041
+ line.setAttribute('stroke-dasharray', '5');
1042
+ line.classList.add('constraint-line');
1043
+ svg.appendChild(line);
1044
+
1045
+ // Add label
1046
+ const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
1047
+ text.setAttribute('x', '300');
1048
+ text.setAttribute('y', '40');
1049
+ text.setAttribute('fill', color);
1050
+ text.setAttribute('font-size', '12');
1051
+ text.textContent = constraint;
1052
+ svg.appendChild(text);
1053
+ });
1054
+
1055
+ // Add feasible region (simplified)
1056
+ if (constraints.length >= 2) {
1057
+ const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
1058
+ polygon.setAttribute('points', '150,150 200,100 250,150 200,200');
1059
+ polygon.setAttribute('fill', '#3B82F6');
1060
+ polygon.classList.add('feasible-region');
1061
+ svg.appendChild(polygon);
1062
+ }
1063
+ }
1064
+
1065
+ // Flashcards
1066
+ const flashcards = [
1067
+ { question: "What is the objective function?", answer: "The function you want to maximize or minimize in an LP problem." },
1068
+ { question: "What are constraints?", answer: "Limitations or requirements in an LP problem, expressed as inequalities or equations." },
1069
+ { question: "What is the feasible region?", answer: "The set of all possible points that satisfy all constraints." },
1070
+ { question: "What is the simplex method?", answer: "An algorithm for solving LP problems by moving from one vertex of the feasible region to another." },
1071
+ { question: "What is duality in LP?", answer: "Every LP problem has a corresponding dual problem with interesting relationships." }
1072
+ ];
1073
+
1074
+ let currentCardIndex = 0;
1075
+ let showingAnswer = false;
1076
+
1077
+ document.getElementById('flashcards-btn').addEventListener('click', function() {
1078
+ document.getElementById('flashcards-modal').classList.remove('hidden');
1079
+ showFlashcardQuestion();
1080
+ });
1081
+
1082
+ document.getElementById('close-flashcards').addEventListener('click', function() {
1083
+ document.getElementById('flashcards-modal').classList.add('hidden');
1084
+ });
1085
+
1086
+ document.getElementById('next-card').addEventListener('click', function() {
1087
+ if (showingAnswer) {
1088
+ currentCardIndex = (currentCardIndex + 1) % flashcards.length;
1089
+ showFlashcardQuestion();
1090
+ } else {
1091
+ showFlashcardAnswer();
1092
+ }
1093
+ });
1094
+
1095
+ document.getElementById('prev-card').addEventListener('click', function() {
1096
+ if (!showingAnswer) {
1097
+ currentCardIndex = (currentCardIndex - 1 + flashcards.length) % flashcards.length;
1098
+ showFlashcardQuestion();
1099
+ }
1100
+ });
1101
+
1102
+ function showFlashcardQuestion() {
1103
+ const card = flashcards[currentCardIndex];
1104
+ document.getElementById('flashcard-content').innerHTML = `
1105
+ <p class="text-lg font-medium mb-4">${card.question}</p>
1106
+ <button id="show-answer" class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">
1107
+ Show Answer
1108
+ </button>
1109
+ `;
1110
+ showingAnswer = false;
1111
+
1112
+ document.getElementById('show-answer').addEventListener('click', showFlashcardAnswer);
1113
+ }
1114
+
1115
+ function showFlashcardAnswer() {
1116
+ const card = flashcards[currentCardIndex];
1117
+ document.getElementById('flashcard-content').innerHTML = `
1118
+ <p class="text-lg font-medium mb-2">${card.question}</p>
1119
+ <p class="text-gray-700">${card.answer}</p>
1120
+ `;
1121
+ showingAnswer = true;
1122
+ }
1123
+
1124
+ // Quiz
1125
+ const quizQuestions = [
1126
+ {
1127
+ question: "What is the first step in formulating an LP problem?",
1128
+ options: ["Draw a graph", "Identify the objective function", "Add slack variables"],
1129
+ answer: "B"
1130
+ },
1131
+ {
1132
+ question: "Where is the optimal solution found in graphical LP?",
1133
+ options: ["At the center of the feasible region", "At a corner point", "Anywhere on a constraint line"],
1134
+ answer: "B"
1135
+ },
1136
+ {
1137
+ question: "What do you add to convert a ≤ constraint to standard form?",
1138
+ options: ["Surplus variable", "Slack variable", "Artificial variable"],
1139
+ answer: "B"
1140
+ }
1141
+ ];
1142
+
1143
+ let currentQuestionIndex = 0;
1144
+ let quizScore = 0;
1145
+
1146
+ document.getElementById('quiz-btn').addEventListener('click', function() {
1147
+ document.getElementById('quiz-modal').classList.remove('hidden');
1148
+ showQuizQuestion();
1149
+ });
1150
+
1151
+ document.getElementById('close-quiz').addEventListener('click', function() {
1152
+ document.getElementById('quiz-modal').classList.add('hidden');
1153
+ });
1154
+
1155
+ document.getElementById('submit-quiz').addEventListener('click', function() {
1156
+ const selectedOption = document.querySelector('input[name="quiz-answer"]:checked');
1157
+ if (selectedOption) {
1158
+ if (selectedOption.value === quizQuestions[currentQuestionIndex].answer) {
1159
+ quizScore++;
1160
+ alert("Correct! 🎉");
1161
+ } else {
1162
+ alert(`Incorrect. The correct answer is ${quizQuestions[currentQuestionIndex].answer}.`);
1163
+ }
1164
+
1165
+ currentQuestionIndex++;
1166
+ if (currentQuestionIndex < quizQuestions.length) {
1167
+ showQuizQuestion();
1168
+ } else {
1169
+ alert(`Quiz complete! Your score: ${quizScore}/${quizQuestions.length}`);
1170
+ document.getElementById('quiz-modal').classList.add('hidden');
1171
+ currentQuestionIndex = 0;
1172
+ quizScore = 0;
1173
+ }
1174
+
1175
+ document.getElementById('quiz-score').textContent = `Score: ${quizScore}/${currentQuestionIndex}`;
1176
+ } else {
1177
+ alert("Please select an answer!");
1178
+ }
1179
+ });
1180
+
1181
+ function showQuizQuestion() {
1182
+ const question = quizQuestions[currentQuestionIndex];
1183
+ document.getElementById('quiz-question').innerHTML = `
1184
+ <p class="font-medium mb-3">${question.question}</p>
1185
+ <div class="space-y-2">
1186
+ ${question.options.map((opt, i) => `
1187
+ <label class="flex items-center space-x-2 p-2 border rounded-lg hover:bg-gray-50 cursor-pointer">
1188
+ <input type="radio" name="quiz-answer" class="form-radio" value="${String.fromCharCode(65 + i)}">
1189
+ <span>${opt}</span>
1190
+ </label>
1191
+ `).join('')}
1192
+ </div>
1193
+ `;
1194
+ }
1195
+
1196
+ // Timer
1197
+ let timerInterval;
1198
+ let timeLeft = 25 * 60; // 25 minutes in seconds
1199
+
1200
+ document.getElementById('timer-btn').addEventListener('click', function() {
1201
+ document.getElementById('timer-modal').classList.remove('hidden');
1202
+ updateTimerDisplay();
1203
+ });
1204
+
1205
+ document.getElementById('close-timer').addEventListener('click', function() {
1206
+ document.getElementById('timer-modal').classList.add('hidden');
1207
+ });
1208
+
1209
+ document.querySelectorAll('.timer-preset').forEach(btn => {
1210
+ btn.addEventListener('click', function() {
1211
+ const minutes = parseInt(this.getAttribute('data-minutes'));
1212
+ timeLeft = minutes * 60;
1213
+ updateTimerDisplay();
1214
+ });
1215
+ });
1216
+
1217
+ document.getElementById('start-timer').addEventListener('click', function() {
1218
+ if (!timerInterval) {
1219
+ timerInterval = setInterval(() => {
1220
+ timeLeft--;
1221
+ updateTimerDisplay();
1222
+
1223
+ if (timeLeft <= 0) {
1224
+ clearInterval(timerInterval);
1225
+ timerInterval = null;
1226
+ alert("Time's up! Take a break!");
1227
+ }
1228
+ }, 1000);
1229
+ }
1230
+ });
1231
+
1232
+ document.getElementById('pause-timer').addEventListener('click', function() {
1233
+ if (timerInterval) {
1234
+ clearInterval(timerInterval);
1235
+ timerInterval = null;
1236
+ }
1237
+ });
1238
+
1239
+ document.getElementById('reset-timer').addEventListener('click', function() {
1240
+ if (timerInterval) {
1241
+ clearInterval(timerInterval);
1242
+ timerInterval = null;
1243
+ }
1244
+ timeLeft = 25 * 60;
1245
+ updateTimerDisplay();
1246
+ });
1247
+
1248
+ function updateTimerDisplay() {
1249
+ const minutes = Math.floor(timeLeft / 60);
1250
+ const seconds = timeLeft % 60;
1251
+ document.getElementById('timer-display').textContent =
1252
+ `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
1253
+ }
1254
+
1255
+ // Distraction sounds
1256
+ document.getElementById('distraction-btn').addEventListener('click', function() {
1257
+ document.getElementById('distraction-modal').classList.remove('hidden');
1258
+ });
1259
+
1260
+ document.getElementById('close-distraction').addEventListener('click', function() {
1261
+ document.getElementById('distraction-modal').classList.add('hidden');
1262
+ });
1263
+
1264
+ document.getElementById('volume-control').addEventListener('input', function() {
1265
+ document.querySelector('.text-right').textContent = `${this.value * 100}%`;
1266
+ });
1267
+
1268
+ // Focus mode
1269
+ document.getElementById('focus-mode').addEventListener('click', function() {
1270
+ document.body.classList.toggle('bg-gray-900');
1271
+ document.querySelector('.container').classList.toggle('text-white');
1272
+ document.querySelectorAll('.bg-white').forEach(el => el.classList.toggle('bg-gray-800'));
1273
+ document.querySelectorAll('.text-gray-800').forEach(el => el.classList.toggle('text-gray-200'));
1274
+ document.querySelectorAll('.text-gray-600').forEach(el => el.classList.toggle('text-gray-400'));
1275
+
1276
+ if (document.body.classList.contains('bg-gray-900')) {
1277
+ this.innerHTML = '<i class="fas fa-sun mr-1"></i> Light Mode';
1278
+ } else {
1279
+ this.innerHTML = '<i class="fas fa-crosshairs mr-1"></i> Focus Mode';
1280
+ }
1281
+ });
1282
+
1283
+ // Practice feedback
1284
+ document.getElementById('check-practice').addEventListener('click', function() {
1285
+ const feedback = document.getElementById('practice-feedback');
1286
+ feedback.classList.remove('hidden');
1287
+ feedback.innerHTML = `
1288
+ <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
1289
+ <p>Good attempt! Here's the correct formulation:</p>
1290
+ <p class="font-mono mt-1">Max P = 15x + 20y</p>
1291
+ <p class="font-mono">4x ≤ 20</p>
1292
+ <p class="font-mono">10y ≤ 30</p>
1293
+ <p class="font-mono">x, y ≥ 0</p>
1294
+ </div>
1295
+ `;
1296
+ });
1297
+
1298
+ document.getElementById('check-std-form').addEventListener('click', function() {
1299
+ const feedback = document.getElementById('std-form-feedback');
1300
+ feedback.classList.remove('hidden');
1301
+ feedback.innerHTML = `
1302
+ <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
1303
+ <p>Correct standard form would be:</p>
1304
+ <p class="font-mono mt-1">Maximize z = 3x₁ + 2x₂⁺ - 2x₂⁻</p>
1305
+ <p class="font-mono">x₁ + x₂⁺ - x₂⁻ + s₁ = 4</p>
1306
+ <p class="font-mono">x₁ - x₂⁺ + x₂⁻ - s₂ = 1</p>
1307
+ <p class="font-mono">x₁, x₂⁺, x₂⁻, s₁, s₂ ≥ 0</p>
1308
+ </div>
1309
+ `;
1310
+ });
1311
+
1312
+ document.getElementById('check-dual').addEventListener('click', function() {
1313
+ const feedback = document.getElementById('dual-feedback');
1314
+ feedback.classList.remove('hidden');
1315
+ feedback.innerHTML = `
1316
+ <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
1317
+ <p>The dual problem is:</p>
1318
+ <p class="font-mono mt-1">Max w = 6y₁ + 4y₂</p>
1319
+ <p class="font-mono">3y₁ + y₂ ≤ 2</p>
1320
+ <p class="font-mono">y₁ + 2y₂ ≤ 5</p>
1321
+ <p class="font-mono">y₁, y₂ ≥ 0</p>
1322
+ </div>
1323
+ `;
1324
+ });
1325
+
1326
+ // Simplex method interaction
1327
+ document.getElementById('step-simplex').addEventListener('click', function() {
1328
+ alert("Performing next simplex iteration...");
1329
+ // In a real implementation, we would update the tableau
1330
+ });
1331
+
1332
+ document.getElementById('hint-simplex').addEventListener('click', function() {
1333
+ alert("Hint: Look for the most negative number in the bottom row to choose the pivot column.");
1334
+ });
1335
+
1336
+ document.getElementById('auto-simplex').addEventListener('click', function() {
1337
+ alert("Automatically solving the problem...");
1338
+ // In a real implementation, we would solve the entire problem
1339
+ });
1340
+
1341
+ document.getElementById('reset-simplex').addEventListener('click', function() {
1342
+ alert("Resetting the tableau to initial state...");
1343
+ // In a real implementation, we would reset the tableau
1344
+ });
1345
+
1346
+ // Duality animation
1347
+ document.getElementById('duality-animation-btn').addEventListener('click', function() {
1348
+ const exampleDiv = this.closest('.bg-gray-100');
1349
+ exampleDiv.classList.add('pulsing');
1350
+
1351
+ setTimeout(() => {
1352
+ exampleDiv.classList.remove('pulsing');
1353
+ }, 1500);
1354
+ });
1355
+ </script>
1356
+ <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=raayraay/study-buddy-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1357
+ </html>