Hugging Face's logo

Spaces:
raayraay
/
study-update
Running

App Files Community
raayraay commited on
Commit
3b16b3a
·
verified ·
1 Parent(s): 617c449

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 Update
3
- emoji: 📉
4
- colorFrom: red
5
- colorTo: pink
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-update
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: gray
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>Linear Programming Study Guide</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
+ .tab-content {
11
+ display: none;
12
+ }
13
+ .tab-content.active {
14
+ display: block;
15
+ animation: fadeIn 0.5s ease-in-out;
16
+ }
17
+ @keyframes fadeIn {
18
+ from { opacity: 0; transform: translateY(10px); }
19
+ to { opacity: 1; transform: translateY(0); }
20
+ }
21
+ .modal {
22
+ display: none;
23
+ position: fixed;
24
+ z-index: 100;
25
+ left: 0;
26
+ top: 0;
27
+ width: 100%;
28
+ height: 100%;
29
+ background-color: rgba(0,0,0,0.5);
30
+ }
31
+ .modal-content {
32
+ background-color: #f8fafc;
33
+ margin: 10% auto;
34
+ padding: 20px;
35
+ border-radius: 0.5rem;
36
+ max-width: 600px;
37
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
38
+ }
39
+ .flashcard {
40
+ perspective: 1000px;
41
+ cursor: pointer;
42
+ }
43
+ .flashcard-inner {
44
+ position: relative;
45
+ width: 100%;
46
+ height: 100%;
47
+ transition: transform 0.6s;
48
+ transform-style: preserve-3d;
49
+ }
50
+ .flashcard.flipped .flashcard-inner {
51
+ transform: rotateY(180deg);
52
+ }
53
+ .flashcard-front, .flashcard-back {
54
+ position: absolute;
55
+ width: 100%;
56
+ height: 100%;
57
+ backface-visibility: hidden;
58
+ padding: 1.5rem;
59
+ border-radius: 0.5rem;
60
+ display: flex;
61
+ align-items: center;
62
+ justify-content: center;
63
+ text-align: center;
64
+ }
65
+ .flashcard-back {
66
+ transform: rotateY(180deg);
67
+ background-color: #e2e8f0;
68
+ }
69
+ .constraint-line {
70
+ stroke-width: 2;
71
+ stroke-dasharray: 5,5;
72
+ }
73
+ .feasible-region {
74
+ fill: rgba(56, 178, 172, 0.2);
75
+ stroke: rgba(56, 178, 172, 0.8);
76
+ stroke-width: 2;
77
+ }
78
+ .objective-line {
79
+ stroke-width: 2;
80
+ stroke: #6b46c1;
81
+ }
82
+ .optimal-point {
83
+ fill: #e53e3e;
84
+ stroke: #63171b;
85
+ stroke-width: 2;
86
+ }
87
+ </style>
88
+ </head>
89
+ <body class="bg-gray-50 font-sans">
90
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
91
+ <!-- Header -->
92
+ <header class="mb-8 text-center">
93
+ <h1 class="text-4xl font-bold text-indigo-800 mb-2">Linear Programming Study Guide</h1>
94
+ <p class="text-lg text-gray-600">Mastering ECE 580 Exam 2 Concepts (Chapters 15-17)</p>
95
+
96
+ <!-- Progress Bar -->
97
+ <div class="mt-6 mb-4">
98
+ <div class="flex justify-between mb-1">
99
+ <span class="text-sm font-medium text-gray-700" id="progress-text">0% Complete</span>
100
+ <span class="text-sm font-medium text-gray-700" id="points">0 Points</span>
101
+ </div>
102
+ <div class="w-full bg-gray-200 rounded-full h-4">
103
+ <div id="progress-bar" class="bg-teal-500 h-4 rounded-full" style="width: 0%"></div>
104
+ </div>
105
+ </div>
106
+ </header>
107
+
108
+ <!-- Navigation Tabs -->
109
+ <div class="flex flex-wrap border-b border-gray-200 mb-6">
110
+ <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-indigo-600 transition-colors border-b-2 border-transparent hover:border-indigo-300 active" data-tab="formulating">Formulating Problems</button>
111
+ <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-indigo-600 transition-colors border-b-2 border-transparent hover:border-indigo-300" data-tab="graphical">Graphical Solutions</button>
112
+ <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-indigo-600 transition-colors border-b-2 border-transparent hover:border-indigo-300" data-tab="standard">Standard Form</button>
113
+ <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-indigo-600 transition-colors border-b-2 border-transparent hover:border-indigo-300" data-tab="simplex">Simplex Method</button>
114
+ <button class="tab-btn px-4 py-2 font-medium text-gray-600 hover:text-indigo-600 transition-colors border-b-2 border-transparent hover:border-indigo-300" data-tab="duality">Duality</button>
115
+ </div>
116
+
117
+ <!-- Toolbar -->
118
+ <div class="flex justify-between mb-6">
119
+ <div class="flex space-x-2">
120
+ <button id="flashcards-btn" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 px-4 py-2 rounded-lg flex items-center transition-colors">
121
+ <i class="fas fa-layer-group mr-2"></i> Flashcards
122
+ </button>
123
+ <button id="quiz-btn" class="bg-purple-100 hover:bg-purple-200 text-purple-800 px-4 py-2 rounded-lg flex items-center transition-colors">
124
+ <i class="fas fa-question-circle mr-2"></i> Pop Quiz
125
+ </button>
126
+ </div>
127
+ <div class="flex items-center">
128
+ <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium flex items-center">
129
+ <i class="fas fa-star mr-1"></i> <span id="badge-count">0</span> Badges
130
+ </span>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Tab Contents -->
135
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
136
+ <!-- Formulating Problems Tab -->
137
+ <div id="formulating" class="tab-content active">
138
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Formulating Linear Programming Problems</h2>
139
+
140
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
141
+ <!-- Content Block 1 -->
142
+ <div class="bg-blue-50 p-4 rounded-lg">
143
+ <h3 class="text-lg font-semibold text-blue-800 mb-2">What is Linear Programming?</h3>
144
+ <p class="text-gray-700 mb-3">Linear programming (LP) is a mathematical method for determining the best outcome in a mathematical model whose requirements are represented by linear relationships.</p>
145
+ <p class="text-gray-700">Key components:</p>
146
+ <ul class="list-disc pl-5 text-gray-700 space-y-1 mt-2">
147
+ <li><strong>Objective Function:</strong> What we want to maximize or minimize</li>
148
+ <li><strong>Decision Variables:</strong> Variables that represent choices</li>
149
+ <li><strong>Constraints:</strong> Limitations on the decision variables</li>
150
+ </ul>
151
+ </div>
152
+
153
+ <!-- Content Block 2 -->
154
+ <div class="bg-green-50 p-4 rounded-lg">
155
+ <h3 class="text-lg font-semibold text-green-800 mb-2">Example: Taco & Burger Stand</h3>
156
+ <p class="text-gray-700 mb-3">A food stand sells tacos ($2 profit each) and burgers ($3 profit each). They have limited ingredients:</p>
157
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
158
+ <li>Meat: 20 lbs (taco: 0.25 lb, burger: 0.5 lb)</li>
159
+ <li>Cheese: 15 lbs (taco: 0.1 lb, burger: 0.3 lb)</li>
160
+ <li>Time: 8 hours (taco: 2 min, burger: 5 min)</li>
161
+ </ul>
162
+ <button id="taco-animation-btn" class="mt-3 bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm transition-colors">
163
+ <i class="fas fa-play mr-1"></i> Show Animation
164
+ </button>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Animation Placeholder -->
169
+ <div id="taco-animation" class="hidden bg-gray-100 p-4 rounded-lg mb-6">
170
+ <div class="flex justify-between items-center mb-2">
171
+ <h4 class="font-medium text-gray-700">Formulating the LP Problem</h4>
172
+ <button id="close-animation" class="text-gray-500 hover:text-gray-700">
173
+ <i class="fas fa-times"></i>
174
+ </button>
175
+ </div>
176
+ <div class="bg-white p-3 rounded border border-gray-200">
177
+ <div class="flex items-center mb-2">
178
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
179
+ <span class="text-blue-600 font-bold">1</span>
180
+ </div>
181
+ <p class="text-gray-700">Define decision variables: Let x = number of tacos, y = number of burgers</p>
182
+ </div>
183
+ <div class="flex items-center mb-2">
184
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
185
+ <span class="text-blue-600 font-bold">2</span>
186
+ </div>
187
+ <p class="text-gray-700">Objective function: Maximize profit = 2x + 3y</p>
188
+ </div>
189
+ <div class="flex items-center mb-2">
190
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
191
+ <span class="text-blue-600 font-bold">3</span>
192
+ </div>
193
+ <p class="text-gray-700">Constraints:</p>
194
+ </div>
195
+ <div class="ml-10">
196
+ <p class="text-gray-700">0.25x + 0.5y ≤ 20 (Meat constraint)</p>
197
+ <p class="text-gray-700">0.1x + 0.3y ≤ 15 (Cheese constraint)</p>
198
+ <p class="text-gray-700">2x + 5y ≤ 480 (Time constraint in minutes)</p>
199
+ <p class="text-gray-700">x ≥ 0, y ≥ 0 (Non-negativity)</p>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Interactive Practice -->
205
+ <div class="bg-yellow-50 p-4 rounded-lg mb-6">
206
+ <h3 class="text-lg font-semibold text-yellow-800 mb-3">Practice: Pizza & Wings</h3>
207
+ <p class="text-gray-700 mb-3">A restaurant sells pizza ($8 profit) and wings ($5 profit). They have:</p>
208
+ <ul class="list-disc pl-5 text-gray-700 mb-4">
209
+ <li>Dough: 50 lbs (pizza: 1 lb, wings: 0.2 lb)</li>
210
+ <li>Sauce: 20 lbs (pizza: 0.5 lb, wings: 0.1 lb)</li>
211
+ <li>Oven time: 12 hours (pizza: 15 min, wings: 10 min)</li>
212
+ </ul>
213
+
214
+ <div class="grid md:grid-cols-2 gap-4">
215
+ <div>
216
+ <label class="block text-gray-700 mb-1">Objective Function:</label>
217
+ <input type="text" id="pizza-objective" class="w-full px-3 py-2 border border-gray-300 rounded" placeholder="e.g., Maximize 8x + 5y">
218
+ </div>
219
+ <div>
220
+ <label class="block text-gray-700 mb-1">Constraints:</label>
221
+ <textarea id="pizza-constraints" class="w-full px-3 py-2 border border-gray-300 rounded" rows="4" placeholder="Enter each constraint on a new line"></textarea>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="flex justify-between mt-4">
226
+ <button id="check-pizza" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded flex items-center">
227
+ <i class="fas fa-check mr-2"></i> Check Answer
228
+ </button>
229
+ <button id="show-pizza-solution" class="text-blue-600 hover:text-blue-800 flex items-center">
230
+ <i class="fas fa-lightbulb mr-2"></i> Show Solution
231
+ </button>
232
+ </div>
233
+
234
+ <div id="pizza-feedback" class="hidden mt-4 p-3 rounded"></div>
235
+ </div>
236
+
237
+ <!-- Quick Review -->
238
+ <div class="bg-purple-50 p-4 rounded-lg">
239
+ <h3 class="text-lg font-semibold text-purple-800 mb-2">Quick Review</h3>
240
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
241
+ <li>LP problems have an objective to maximize or minimize</li>
242
+ <li>Decision variables represent quantities to be determined</li>
243
+ <li>Constraints limit the possible values of variables</li>
244
+ <li>All relationships must be linear (no exponents, no products of variables)</li>
245
+ <li>Non-negativity constraints are usually required</li>
246
+ </ul>
247
+ <div class="mt-4">
248
+ <button class="mark-complete bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded flex items-center">
249
+ <i class="fas fa-check-circle mr-2"></i> Mark Complete
250
+ </button>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Graphical Solutions Tab -->
256
+ <div id="graphical" class="tab-content">
257
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Graphical Solutions</h2>
258
+
259
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
260
+ <!-- Content Block 1 -->
261
+ <div class="bg-blue-50 p-4 rounded-lg">
262
+ <h3 class="text-lg font-semibold text-blue-800 mb-2">Graphical Method Basics</h3>
263
+ <p class="text-gray-700 mb-3">For problems with two variables, we can solve LP problems graphically:</p>
264
+ <ol class="list-decimal pl-5 text-gray-700 space-y-1">
265
+ <li>Plot each constraint as an equation</li>
266
+ <li>Identify the feasible region (area satisfying all constraints)</li>
267
+ <li>Plot the objective function for different values</li>
268
+ <li>Find the optimal solution at a corner point of the feasible region</li>
269
+ </ol>
270
+ </div>
271
+
272
+ <!-- Content Block 2 -->
273
+ <div class="bg-green-50 p-4 rounded-lg">
274
+ <h3 class="text-lg font-semibold text-green-800 mb-2">Special Cases</h3>
275
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
276
+ <li><strong>Multiple Solutions:</strong> Objective function parallel to a constraint</li>
277
+ <li><strong>Unbounded:</strong> Feasible region extends infinitely</li>
278
+ <li><strong>Infeasible:</strong> No points satisfy all constraints</li>
279
+ </ul>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- Interactive Graph -->
284
+ <div class="bg-gray-100 p-4 rounded-lg mb-6">
285
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Interactive Graph</h3>
286
+
287
+ <div class="grid md:grid-cols-3 gap-4 mb-4">
288
+ <div>
289
+ <label class="block text-gray-700 mb-1">Objective:</label>
290
+ <select id="graph-objective" class="w-full px-3 py-2 border border-gray-300 rounded">
291
+ <option value="max">Maximize</option>
292
+ <option value="min">Minimize</option>
293
+ </select>
294
+ </div>
295
+ <div>
296
+ <label class="block text-gray-700 mb-1">Function:</label>
297
+ <input type="text" id="graph-function" class="w-full px-3 py-2 border border-gray-300 rounded" placeholder="e.g., 3x + 2y">
298
+ </div>
299
+ <div>
300
+ <label class="block text-gray-700 mb-1">Value:</label>
301
+ <input type="number" id="graph-value" class="w-full px-3 py-2 border border-gray-300 rounded" placeholder="e.g., 30" value="30">
302
+ </div>
303
+ </div>
304
+
305
+ <div class="grid md:grid-cols-2 gap-4 mb-4">
306
+ <div>
307
+ <label class="block text-gray-700 mb-1">Add Constraint:</label>
308
+ <div class="flex">
309
+ <input type="text" id="new-constraint" class="flex-1 px-3 py-2 border border-gray-300 rounded-l" placeholder="e.g., x + y ≤ 10">
310
+ <button id="add-constraint" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-2 rounded-r">
311
+ <i class="fas fa-plus"></i>
312
+ </button>
313
+ </div>
314
+ </div>
315
+ <div>
316
+ <label class="block text-gray-700 mb-1">Constraints:</label>
317
+ <select id="constraint-list" class="w-full px-3 py-2 border border-gray-300 rounded" size="3">
318
+ <!-- Constraints will be added here -->
319
+ </select>
320
+ </div>
321
+ </div>
322
+
323
+ <div class="flex space-x-2 mb-4">
324
+ <button id="find-optimal" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded flex items-center">
325
+ <i class="fas fa-bullseye mr-2"></i> Find Optimal
326
+ </button>
327
+ <button id="reset-graph" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded flex items-center">
328
+ <i class="fas fa-redo mr-2"></i> Reset
329
+ </button>
330
+ </div>
331
+
332
+ <div class="bg-white p-2 rounded border border-gray-300">
333
+ <svg id="graph" width="100%" height="400" viewBox="0 0 500 400" class="border border-gray-200">
334
+ <!-- Graph elements will be added here -->
335
+ </svg>
336
+ </div>
337
+ </div>
338
+
339
+ <!-- Quick Review -->
340
+ <div class="bg-purple-50 p-4 rounded-lg">
341
+ <h3 class="text-lg font-semibold text-purple-800 mb-2">Quick Review</h3>
342
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
343
+ <li>Graphical method works for 2-variable problems</li>
344
+ <li>Feasible region is the intersection of all constraints</li>
345
+ <li>Optimal solution is at a corner point (vertex)</li>
346
+ <li>Objective function is moved parallel until it touches the feasible region</li>
347
+ </ul>
348
+ <div class="mt-4">
349
+ <button class="mark-complete bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded flex items-center">
350
+ <i class="fas fa-check-circle mr-2"></i> Mark Complete
351
+ </button>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <!-- Standard Form Tab -->
357
+ <div id="standard" class="tab-content">
358
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Standard Form</h2>
359
+
360
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
361
+ <!-- Content Block 1 -->
362
+ <div class="bg-blue-50 p-4 rounded-lg">
363
+ <h3 class="text-lg font-semibold text-blue-800 mb-2">Standard Form Requirements</h3>
364
+ <p class="text-gray-700 mb-3">All LP problems must be converted to standard form for the simplex method:</p>
365
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
366
+ <li>Maximization problem (convert minimization by multiplying objective by -1)</li>
367
+ <li>All constraints are equations (not inequalities)</li>
368
+ <li>All variables are non-negative</li>
369
+ <li>Right-hand side constants are non-negative</li>
370
+ </ul>
371
+ </div>
372
+
373
+ <!-- Content Block 2 -->
374
+ <div class="bg-green-50 p-4 rounded-lg">
375
+ <h3 class="text-lg font-semibold text-green-800 mb-2">Conversion Rules</h3>
376
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
377
+ <li><strong>≤ constraints:</strong> Add slack variable (s ≥ 0)</li>
378
+ <li><strong>≥ constraints:</strong> Subtract surplus variable (s ≥ 0) and add artificial variable (a ≥ 0)</li>
379
+ <li><strong>= constraints:</strong> Add artificial variable (a ≥ 0)</li>
380
+ <li><strong>Unrestricted variables:</strong> Replace x with x⁺ - x⁻ where x⁺, x⁻ ≥ 0</li>
381
+ </ul>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Example Conversion -->
386
+ <div class="bg-yellow-50 p-4 rounded-lg mb-6">
387
+ <h3 class="text-lg font-semibold text-yellow-800 mb-3">Example Conversion</h3>
388
+
389
+ <div class="grid md:grid-cols-2 gap-4 mb-4">
390
+ <div>
391
+ <h4 class="font-medium text-gray-700 mb-2">Original Problem:</h4>
392
+ <div class="bg-white p-3 rounded border border-gray-200">
393
+ <p>Minimize: -x₁ + 2x₂</p>
394
+ <p>Subject to:</p>
395
+ <p>x₁ + x₂ ≤ 6</p>
396
+ <p>x₁ - x₂ ≥ 2</p>
397
+ <p>x₁ + 2x₂ = 10</p>
398
+ <p>x₁ ≥ 0, x₂ unrestricted</p>
399
+ </div>
400
+ </div>
401
+ <div>
402
+ <h4 class="font-medium text-gray-700 mb-2">Standard Form:</h4>
403
+ <div class="bg-white p-3 rounded border border-gray-200">
404
+ <p>Maximize: x₁ - 2x₂⁺ + 2x₂⁻</p>
405
+ <p>Subject to:</p>
406
+ <p>x₁ + x₂⁺ - x₂⁻ + s₁ = 6</p>
407
+ <p>x₁ - x₂⁺ + x₂⁻ - s₂ + a₁ = 2</p>
408
+ <p>x₁ + 2x₂⁺ - 2x₂⁻ + a₂ = 10</p>
409
+ <p>All variables ≥ 0</p>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <button id="show-conversion-animation" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded flex items-center">
415
+ <i class="fas fa-play mr-2"></i> Show Conversion Steps
416
+ </button>
417
+ </div>
418
+
419
+ <!-- Practice Section -->
420
+ <div class="bg-orange-50 p-4 rounded-lg mb-6">
421
+ <h3 class="text-lg font-semibold text-orange-800 mb-3">Practice Conversion</h3>
422
+
423
+ <div class="mb-4">
424
+ <label class="block text-gray-700 mb-1">Original Problem:</label>
425
+ <textarea id="original-problem" class="w-full px-3 py-2 border border-gray-300 rounded" rows="4" placeholder="Enter the original LP problem"></textarea>
426
+ </div>
427
+
428
+ <div class="mb-4">
429
+ <label class="block text-gray-700 mb-1">Converted Standard Form:</label>
430
+ <textarea id="standard-form" class="w-full px-3 py-2 border border-gray-300 rounded" rows="4" placeholder="Enter your converted standard form"></textarea>
431
+ </div>
432
+
433
+ <div class="flex justify-between">
434
+ <button id="check-standard" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded flex items-center">
435
+ <i class="fas fa-check mr-2"></i> Check Answer
436
+ </button>
437
+ <button id="show-standard-solution" class="text-blue-600 hover:text-blue-800 flex items-center">
438
+ <i class="fas fa-lightbulb mr-2"></i> Show Solution
439
+ </button>
440
+ </div>
441
+
442
+ <div id="standard-feedback" class="hidden mt-4 p-3 rounded"></div>
443
+ </div>
444
+
445
+ <!-- Quick Review -->
446
+ <div class="bg-purple-50 p-4 rounded-lg">
447
+ <h3 class="text-lg font-semibold text-purple-800 mb-2">Quick Review</h3>
448
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
449
+ <li>Standard form requires maximization, equality constraints, and non-negative variables</li>
450
+ <li>Slack variables are added for ≤ constraints</li>
451
+ <li>Surplus and artificial variables are added for ≥ constraints</li>
452
+ <li>Artificial variables are needed for = constraints</li>
453
+ <li>Unrestricted variables are split into positive and negative parts</li>
454
+ </ul>
455
+ <div class="mt-4">
456
+ <button class="mark-complete bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded flex items-center">
457
+ <i class="fas fa-check-circle mr-2"></i> Mark Complete
458
+ </button>
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <!-- Simplex Method Tab -->
464
+ <div id="simplex" class="tab-content">
465
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Simplex Method</h2>
466
+
467
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
468
+ <!-- Content Block 1 -->
469
+ <div class="bg-blue-50 p-4 rounded-lg">
470
+ <h3 class="text-lg font-semibold text-blue-800 mb-2">Simplex Algorithm Steps</h3>
471
+ <ol class="list-decimal pl-5 text-gray-700 space-y-1">
472
+ <li>Convert problem to standard form</li>
473
+ <li>Set up initial simplex tableau</li>
474
+ <li>Identify entering variable (most negative coefficient in objective row)</li>
475
+ <li>Identify departing variable (minimum ratio test)</li>
476
+ <li>Pivot to create new tableau</li>
477
+ <li>Repeat until all coefficients in objective row are non-negative</li>
478
+ </ol>
479
+ </div>
480
+
481
+ <!-- Content Block 2 -->
482
+ <div class="bg-green-50 p-4 rounded-lg">
483
+ <h3 class="text-lg font-semibold text-green-800 mb-2">Special Cases</h3>
484
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
485
+ <li><strong>Degeneracy:</strong> Minimum ratio test has a tie</li>
486
+ <li><strong>Unbounded:</strong> No positive denominators in ratio test</li>
487
+ <li><strong>Multiple Solutions:</strong> Zero coefficient in objective row for non-basic variable</li>
488
+ <li><strong>Infeasible:</strong> Artificial variable remains in basis</li>
489
+ </ul>
490
+ </div>
491
+ </div>
492
+
493
+ <!-- Simplex Practice -->
494
+ <div class="bg-gray-100 p-4 rounded-lg mb-6">
495
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Simplex Practice</h3>
496
+
497
+ <div class="mb-4">
498
+ <label class="block text-gray-700 mb-1">Initial Tableau:</label>
499
+ <div class="overflow-x-auto">
500
+ <table id="simplex-tableau" class="w-full border-collapse">
501
+ <thead>
502
+ <tr>
503
+ <th class="border px-4 py-2">Basic</th>
504
+ <th class="border px-4 py-2">x₁</th>
505
+ <th class="border px-4 py-2">x₂</th>
506
+ <th class="border px-4 py-2">s₁</th>
507
+ <th class="border px-4 py-2">s₂</th>
508
+ <th class="border px-4 py-2">RHS</th>
509
+ </tr>
510
+ </thead>
511
+ <tbody>
512
+ <tr>
513
+ <td class="border px-4 py-2">s₁</td>
514
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="1"></td>
515
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="1"></td>
516
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="1"></td>
517
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="0"></td>
518
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="6"></td>
519
+ </tr>
520
+ <tr>
521
+ <td class="border px-4 py-2">s₂</td>
522
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="2"></td>
523
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="1"></td>
524
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="0"></td>
525
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="1"></td>
526
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="8"></td>
527
+ </tr>
528
+ <tr class="bg-gray-100">
529
+ <td class="border px-4 py-2">z</td>
530
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="-3"></td>
531
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="-2"></td>
532
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="0"></td>
533
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="0"></td>
534
+ <td class="border px-4 py-2"><input type="number" class="w-16 px-2 py-1 border" value="0"></td>
535
+ </tr>
536
+ </tbody>
537
+ </table>
538
+ </div>
539
+ </div>
540
+
541
+ <div class="flex flex-wrap gap-2 mb-4">
542
+ <button id="next-step" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded flex items-center">
543
+ <i class="fas fa-forward mr-2"></i> Next Step
544
+ </button>
545
+ <button id="reset-simplex" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded flex items-center">
546
+ <i class="fas fa-redo mr-2"></i> Reset
547
+ </button>
548
+ <button id="hint-simplex" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded flex items-center">
549
+ <i class="fas fa-question mr-2"></i> Hint
550
+ </button>
551
+ <button id="auto-solve" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded flex items-center">
552
+ <i class="fas fa-robot mr-2"></i> Auto Solve
553
+ </button>
554
+ </div>
555
+
556
+ <div id="simplex-feedback" class="hidden p-3 bg-white rounded border border-gray-300 mb-4"></div>
557
+
558
+ <div id="simplex-steps" class="hidden">
559
+ <h4 class="font-medium text-gray-700 mb-2">Solution Steps:</h4>
560
+ <div class="space-y-2" id="steps-container"></div>
561
+ </div>
562
+ </div>
563
+
564
+ <!-- Quick Review -->
565
+ <div class="bg-purple-50 p-4 rounded-lg">
566
+ <h3 class="text-lg font-semibold text-purple-800 mb-2">Quick Review</h3>
567
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
568
+ <li>Simplex method moves from one basic feasible solution to another</li>
569
+ <li>Entering variable has most negative coefficient in objective row</li>
570
+ <li>Departing variable is chosen by minimum ratio test</li>
571
+ <li>Pivot operation updates the tableau</li>
572
+ <li>Process continues until optimality is reached</li>
573
+ </ul>
574
+ <div class="mt-4">
575
+ <button class="mark-complete bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded flex items-center">
576
+ <i class="fas fa-check-circle mr-2"></i> Mark Complete
577
+ </button>
578
+ </div>
579
+ </div>
580
+ </div>
581
+
582
+ <!-- Duality Tab -->
583
+ <div id="duality" class="tab-content">
584
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Duality</h2>
585
+
586
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
587
+ <!-- Content Block 1 -->
588
+ <div class="bg-blue-50 p-4 rounded-lg">
589
+ <h3 class="text-lg font-semibold text-blue-800 mb-2">Duality Concepts</h3>
590
+ <p class="text-gray-700 mb-3">Every LP problem (primal) has a corresponding dual problem:</p>
591
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
592
+ <li>Primal maximization becomes dual minimization (and vice versa)</li>
593
+ <li>Primal constraints become dual variables</li>
594
+ <li>Primal variables become dual constraints</li>
595
+ <li>Constraint coefficients become constraint coefficients in transposed form</li>
596
+ </ul>
597
+ </div>
598
+
599
+ <!-- Content Block 2 -->
600
+ <div class="bg-green-50 p-4 rounded-lg">
601
+ <h3 class="text-lg font-semibold text-green-800 mb-2">Duality Theorems</h3>
602
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
603
+ <li><strong>Weak Duality:</strong> Value of any feasible dual solution ≥ value of any feasible primal solution</li>
604
+ <li><strong>Strong Duality:</strong> If one problem has optimal solution, so does the other, with equal objective values</li>
605
+ <li><strong>Complementary Slackness:</strong> At optimality, either primal slack or dual variable is zero for each constraint</li>
606
+ </ul>
607
+ </div>
608
+ </div>
609
+
610
+ <!-- Example Conversion -->
611
+ <div class="bg-yellow-50 p-4 rounded-lg mb-6">
612
+ <h3 class="text-lg font-semibold text-yellow-800 mb-3">Example: Primal to Dual</h3>
613
+
614
+ <div class="grid md:grid-cols-2 gap-4 mb-4">
615
+ <div>
616
+ <h4 class="font-medium text-gray-700 mb-2">Primal Problem:</h4>
617
+ <div class="bg-white p-3 rounded border border-gray-200">
618
+ <p>Maximize: 3x₁ + 2x₂</p>
619
+ <p>Subject to:</p>
620
+ <p>x₁ + x₂ ≤ 4</p>
621
+ <p>2x₁ + x₂ ≤ 6</p>
622
+ <p>x₁ ≥ 0, x₂ ≥ 0</p>
623
+ </div>
624
+ </div>
625
+ <div>
626
+ <h4 class="font-medium text-gray-700 mb-2">Dual Problem:</h4>
627
+ <div class="bg-white p-3 rounded border border-gray-200">
628
+ <p>Minimize: 4y₁ + 6y₂</p>
629
+ <p>Subject to:</p>
630
+ <p>y₁ + 2y₂ ≥ 3</p>
631
+ <p>y₁ + y₂ ≥ 2</p>
632
+ <p>y₁ ≥ 0, y₂ ≥ 0</p>
633
+ </div>
634
+ </div>
635
+ </div>
636
+
637
+ <button id="show-duality-animation" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded flex items-center">
638
+ <i class="fas fa-play mr-2"></i> Show Conversion Steps
639
+ </button>
640
+ </div>
641
+
642
+ <!-- Practice Section -->
643
+ <div class="bg-orange-50 p-4 rounded-lg mb-6">
644
+ <h3 class="text-lg font-semibold text-orange-800 mb-3">Practice Duality</h3>
645
+
646
+ <div class="mb-4">
647
+ <label class="block text-gray-700 mb-1">Primal Problem:</label>
648
+ <textarea id="primal-problem" class="w-full px-3 py-2 border border-gray-300 rounded" rows="4" placeholder="Enter the primal LP problem"></textarea>
649
+ </div>
650
+
651
+ <div class="mb-4">
652
+ <label class="block text-gray-700 mb-1">Dual Problem:</label>
653
+ <textarea id="dual-problem" class="w-full px-3 py-2 border border-gray-300 rounded" rows="4" placeholder="Enter your dual formulation"></textarea>
654
+ </div>
655
+
656
+ <div class="flex justify-between">
657
+ <button id="check-dual" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded flex items-center">
658
+ <i class="fas fa-check mr-2"></i> Check Answer
659
+ </button>
660
+ <button id="show-dual-solution" class="text-blue-600 hover:text-blue-800 flex items-center">
661
+ <i class="fas fa-lightbulb mr-2"></i> Show Solution
662
+ </button>
663
+ </div>
664
+
665
+ <div id="dual-feedback" class="hidden mt-4 p-3 rounded"></div>
666
+ </div>
667
+
668
+ <!-- Quick Review -->
669
+ <div class="bg-purple-50 p-4 rounded-lg">
670
+ <h3 class="text-lg font-semibold text-purple-800 mb-2">Quick Review</h3>
671
+ <ul class="list-disc pl-5 text-gray-700 space-y-1">
672
+ <li>Dual of a maximization problem is a minimization problem</li>
673
+ <li>Number of dual variables = number of primal constraints</li>
674
+ <li>Number of dual constraints = number of primal variables</li>
675
+ <li>Constraint coefficients are transposed</li>
676
+ <li>Weak duality provides bounds, strong duality provides exact equality at optimality</li>
677
+ </ul>
678
+ <div class="mt-4">
679
+ <button class="mark-complete bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded flex items-center">
680
+ <i class="fas fa-check-circle mr-2"></i> Mark Complete
681
+ </button>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ </div>
687
+
688
+ <!-- Flashcards Modal -->
689
+ <div id="flashcards-modal" class="modal">
690
+ <div class="modal-content">
691
+ <div class="flex justify-between items-center mb-4">
692
+ <h3 class="text-xl font-bold text-gray-800">Linear Programming Flashcards</h3>
693
+ <button id="close-flashcards" class="text-gray-500 hover:text-gray-700">
694
+ <i class="fas fa-times"></i>
695
+ </button>
696
+ </div>
697
+
698
+ <div class="bg-white p-4 rounded-lg border border-gray-200 mb-4">
699
+ <div id="flashcard-container" class="flex flex-col items-center">
700
+ <div class="flashcard w-full h-64 mb-4" id="current-flashcard">
701
+ <div class="flashcard-inner">
702
+ <div class="flashcard-front bg-indigo-100 flex items-center justify-center">
703
+ <p class="text-xl font-medium text-indigo-800" id="flashcard-question">Click to flip</p>
704
+ </div>
705
+ <div class="flashcard-back">
706
+ <p class="text-lg text-gray-700" id="flashcard-answer">Answer will appear here</p>
707
+ </div>
708
+ </div>
709
+ </div>
710
+
711
+ <div class="flex justify-between w-full">
712
+ <button id="prev-flashcard" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded">
713
+ <i class="fas fa-arrow-left"></i>
714
+ </button>
715
+ <span id="flashcard-count" class="text-gray-700">1/10</span>
716
+ <button id="next-flashcard" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded">
717
+ <i class="fas fa-arrow-right"></i>
718
+ </button>
719
+ </div>
720
+ </div>
721
+ </div>
722
+
723
+ <div class="flex justify-center">
724
+ <button id="shuffle-flashcards" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded flex items-center">
725
+ <i class="fas fa-random mr-2"></i> Shuffle
726
+ </button>
727
+ </div>
728
+ </div>
729
+ </div>
730
+
731
+ <!-- Quiz Modal -->
732
+ <div id="quiz-modal" class="modal">
733
+ <div class="modal-content">
734
+ <div class="flex justify-between items-center mb-4">
735
+ <h3 class="text-xl font-bold text-gray-800">Linear Programming Pop Quiz</h3>
736
+ <button id="close-quiz" class="text-gray-500 hover:text-gray-700">
737
+ <i class="fas fa-times"></i>
738
+ </button>
739
+ </div>
740
+
741
+ <div class="bg-white p-4 rounded-lg border border-gray-200 mb-4">
742
+ <div id="quiz-container">
743
+ <div class="mb-4">
744
+ <h4 class="text-lg font-medium text-gray-700 mb-2" id="quiz-question">Question will appear here</h4>
745
+ <div class="space-y-2" id="quiz-options">
746
+ <!-- Options will be added here -->
747
+ </div>
748
+ </div>
749
+
750
+ <div id="quiz-feedback" class="hidden p-3 rounded mb-4"></div>
751
+
752
+ <div class="flex justify-between">
753
+ <button id="prev-question" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded">
754
+ <i class="fas fa-arrow-left"></i> Previous
755
+ </button>
756
+ <span id="quiz-count" class="text-gray-700">1/5</span>
757
+ <button id="next-question" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
758
+ Next <i class="fas fa-arrow-right"></i>
759
+ </button>
760
+ </div>
761
+ </div>
762
+ </div>
763
+
764
+ <div class="flex justify-center">
765
+ <button id="submit-quiz" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded flex items-center">
766
+ <i class="fas fa-check-circle mr-2"></i> Submit Quiz
767
+ </button>
768
+ </div>
769
+ </div>
770
+ </div>
771
+
772
+ <script>
773
+ // Tab switching functionality
774
+ document.querySelectorAll('.tab-btn').forEach(button => {
775
+ button.addEventListener('click', () => {
776
+ // Remove active class from all buttons and content
777
+ document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
778
+ document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
779
+
780
+ // Add active class to clicked button
781
+ button.classList.add('active');
782
+
783
+ // Show corresponding content
784
+ const tabId = button.getAttribute('data-tab');
785
+ document.getElementById(tabId).classList.add('active');
786
+ });
787
+ });
788
+
789
+ // Formulating Problems Animation
790
+ document.getElementById('taco-animation-btn').addEventListener('click', () => {
791
+ document.getElementById('taco-animation').classList.remove('hidden');
792
+ });
793
+
794
+ document.getElementById('close-animation').addEventListener('click', () => {
795
+ document.getElementById('taco-animation').classList.add('hidden');
796
+ });
797
+
798
+ // Pizza Practice
799
+ document.getElementById('check-pizza').addEventListener('click', () => {
800
+ const objective = document.getElementById('pizza-objective').value.trim();
801
+ const constraints = document.getElementById('pizza-constraints').value.trim();
802
+ const feedback = document.getElementById('pizza-feedback');
803
+
804
+ if (!objective || !constraints) {
805
+ feedback.innerHTML = '<div class="bg-red-100 text-red-800 p-3 rounded">Please enter both the objective function and constraints.</div>';
806
+ feedback.classList.remove('hidden');
807
+ return;
808
+ }
809
+
810
+ // Simple validation (would be more robust in a real implementation)
811
+ const expectedObjective = "Maximize 8x + 5y";
812
+ const expectedConstraints = [
813
+ "1x + 0.2y ≤ 50",
814
+ "0.5x + 0.1y ≤ 20",
815
+ "15x + 10y ≤ 720",
816
+ "x ≥ 0",
817
+ "y ≥ 0"
818
+ ];
819
+
820
+ let correct = true;
821
+ let message = '';
822
+
823
+ if (!objective.toLowerCase().includes(expectedObjective.toLowerCase())) {
824
+ correct = false;
825
+ message += '<p>Objective function should be similar to: ' + expectedObjective + '</p>';
826
+ }
827
+
828
+ const constraintLines = constraints.split('\n').map(c => c.trim());
829
+ if (constraintLines.length < expectedConstraints.length) {
830
+ correct = false;
831
+ message += '<p>You seem to be missing some constraints. Expected ' + expectedConstraints.length + ' constraints.</p>';
832
+ }
833
+
834
+ if (correct) {
835
+ feedback.innerHTML = '<div class="bg-green-100 text-green-800 p-3 rounded">Correct! Well done.</div>';
836
+ addPoints(10);
837
+ } else {
838
+ feedback.innerHTML = '<div class="bg-yellow-100 text-yellow-800 p-3 rounded">' +
839
+ '<p>Almost there! Here are some suggestions:</p>' + message + '</div>';
840
+ }
841
+
842
+ feedback.classList.remove('hidden');
843
+ });
844
+
845
+ document.getElementById('show-pizza-solution').addEventListener('click', () => {
846
+ document.getElementById('pizza-objective').value = "Maximize 8x + 5y";
847
+ document.getElementById('pizza-constraints').value =
848
+ "1x + 0.2y ≤ 50\n" +
849
+ "0.5x + 0.1y ≤ 20\n" +
850
+ "15x + 10y ≤ 720\n" +
851
+ "x ≥ 0\n" +
852
+ "y ≥ 0";
853
+ });
854
+
855
+ // Graphical Solutions
856
+ // Initialize SVG graph
857
+ const svg = document.getElementById('graph');
858
+ const svgNS = "http://www.w3.org/2000/svg";
859
+
860
+ // Draw axes
861
+ const xAxis = document.createElementNS(svgNS, 'line');
862
+ xAxis.setAttribute('x1', '50');
863
+ xAxis.setAttribute('y1', '350');
864
+ xAxis.setAttribute('x2', '450');
865
+ xAxis.setAttribute('y2', '350');
866
+ xAxis.setAttribute('stroke', 'black');
867
+ xAxis.setAttribute('stroke-width', '2');
868
+ svg.appendChild(xAxis);
869
+
870
+ const yAxis = document.createElementNS(svgNS, 'line');
871
+ yAxis.setAttribute('x1', '50');
872
+ yAxis.setAttribute('y1', '350');
873
+ yAxis.setAttribute('x2', '50');
874
+ yAxis.setAttribute('y2', '50');
875
+ yAxis.setAttribute('stroke', 'black');
876
+ yAxis.setAttribute('stroke-width', '2');
877
+ svg.appendChild(yAxis);
878
+
879
+ // Add axis labels
880
+ const xLabel = document.createElementNS(svgNS, 'text');
881
+ xLabel.setAttribute('x', '440');
882
+ xLabel.setAttribute('y', '340');
883
+ xLabel.setAttribute('font-size', '14');
884
+ xLabel.setAttribute('text-anchor', 'end');
885
+ xLabel.textContent = 'x';
886
+ svg.appendChild(xLabel);
887
+
888
+ const yLabel = document.createElementNS(svgNS, 'text');
889
+ yLabel.setAttribute('x', '60');
890
+ yLabel.setAttribute('y', '60');
891
+ yLabel.setAttribute('font-size', '14');
892
+ yLabel.textContent = 'y';
893
+ svg.appendChild(yLabel);
894
+
895
+ // Add tick marks
896
+ for (let i = 1; i <= 8; i++) {
897
+ const xTick = document.createElementNS(svgNS, 'line');
898
+ xTick.setAttribute('x1', 50 + i * 50);
899
+ xTick.setAttribute('y1', '345');
900
+ xTick.setAttribute('x2', 50 + i * 50);
901
+ xTick.setAttribute('y2', '355');
902
+ xTick.setAttribute('stroke', 'black');
903
+ xTick.setAttribute('stroke-width', '1');
904
+ svg.appendChild(xTick);
905
+
906
+ const xTickLabel = document.createElementNS(svgNS, 'text');
907
+ xTickLabel.setAttribute('x', 50 + i * 50);
908
+ xTickLabel.setAttribute('y', '370');
909
+ xTickLabel.setAttribute('font-size', '12');
910
+ xTickLabel.setAttribute('text-anchor', 'middle');
911
+ xTickLabel.textContent = i;
912
+ svg.appendChild(xTickLabel);
913
+
914
+ const yTick = document.createElementNS(svgNS, 'line');
915
+ yTick.setAttribute('x1', '45');
916
+ yTick.setAttribute('y1', 350 - i * 50);
917
+ yTick.setAttribute('x2', '55');
918
+ yTick.setAttribute('y2', 350 - i * 50);
919
+ yTick.setAttribute('stroke', 'black');
920
+ yTick.setAttribute('stroke-width', '1');
921
+ svg.appendChild(yTick);
922
+
923
+ const yTickLabel = document.createElementNS(svgNS, 'text');
924
+ yTickLabel.setAttribute('x', '35');
925
+ yTickLabel.setAttribute('y', 355 - i * 50);
926
+ yTickLabel.setAttribute('font-size', '12');
927
+ yTickLabel.setAttribute('text-anchor', 'end');
928
+ yTickLabel.textContent = i;
929
+ svg.appendChild(yTickLabel);
930
+ }
931
+
932
+ // Store graph elements for later manipulation
933
+ const graphElements = {
934
+ constraints: [],
935
+ feasibleRegion: null,
936
+ objectiveLine: null,
937
+ optimalPoint: null
938
+ };
939
+
940
+ // Add constraint functionality
941
+ document.getElementById('add-constraint').addEventListener('click', () => {
942
+ const constraintText = document.getElementById('new-constraint').value.trim();
943
+ if (!constraintText) return;
944
+
945
+ // Add to constraint list
946
+ const option = document.createElement('option');
947
+ option.textContent = constraintText;
948
+ document.getElementById('constraint-list').appendChild(option);
949
+
950
+ // Clear input
951
+ document.getElementById('new-constraint').value = '';
952
+
953
+ // Plot constraint (simplified for demo)
954
+ const parts = constraintText.split(/(<=|>=|=)/);
955
+ if (parts.length !== 3) return;
956
+
957
+ const left = parts[0].trim();
958
+ const op = parts[1].trim();
959
+ const right = parts[2].trim();
960
+
961
+ // Parse constraint (very simplified parsing for demo)
962
+ let a, b, c;
963
+ if (left.includes('x') && left.includes('y')) {
964
+ const xyParts = left.split(/x|y/);
965
+ a = parseFloat(xyParts[0]) || 1;
966
+ b = parseFloat(xyParts[1]) || 1;
967
+ } else if (left.includes('x')) {
968
+ a = parseFloat(left.replace('x', '')) || 1;
969
+ b = 0;
970
+ } else if (left.includes('y')) {
971
+ a = 0;
972
+ b = parseFloat(left.replace('y', '')) || 1;
973
+ }
974
+
975
+ c = parseFloat(right);
976
+
977
+ // Plot the line ax + by = c
978
+ if (a !== 0 && b !== 0) {
979
+ // Find two points to draw the line
980
+ const x1 = 0, y1 = c / b;
981
+ const x2 = c / a, y2 = 0;
982
+
983
+ const line = document.createElementNS(svgNS, 'line');
984
+ line.setAttribute('x1', 50 + x1 * 50);
985
+ line.setAttribute('y1', 350 - y1 * 50);
986
+ line.setAttribute('x2', 50 + x2 * 50);
987
+ line.setAttribute('y2', 350 - y2 * 50);
988
+ line.setAttribute('stroke', 'blue');
989
+ line.setAttribute('stroke-width', '2');
990
+ line.setAttribute('stroke-dasharray', '5,5');
991
+ line.classList.add('constraint-line');
992
+ svg.appendChild(line);
993
+
994
+ // Store for later reference
995
+ graphElements.constraints.push(line);
996
+ }
997
+ });
998
+
999
+ // Find optimal solution (simplified for demo)
1000
+ document.getElementById('find-optimal').addEventListener('click', () => {
1001
+ // In a real implementation, this would solve the LP problem
1002
+ // For demo purposes, we'll just show a point at (4,2)
1003
+
1004
+ // Remove previous optimal point if exists
1005
+ if (graphElements.optimalPoint) {
1006
+ svg.removeChild(graphElements.optimalPoint);
1007
+ }
1008
+
1009
+ // Add optimal point
1010
+ const point = document.createElementNS(svgNS, 'circle');
1011
+ point.setAttribute('cx', '250');
1012
+ point.setAttribute('cy', '250');
1013
+ point.setAttribute('r', '6');
1014
+ point.setAttribute('fill', 'red');
1015
+ point.setAttribute('stroke', 'darkred');
1016
+ point.setAttribute('stroke-width', '2');
1017
+ point.classList.add('optimal-point');
1018
+ svg.appendChild(point);
1019
+
1020
+ graphElements.optimalPoint = point;
1021
+
1022
+ // Add label
1023
+ const label = document.createElementNS(svgNS, 'text');
1024
+ label.setAttribute('x', '265');
1025
+ label.setAttribute('y', '255');
1026
+ label.setAttribute('font-size', '14');
1027
+ label.textContent = 'Optimal (4,2)';
1028
+ svg.appendChild(label);
1029
+
1030
+ // Store for removal
1031
+ graphElements.optimalLabel = label;
1032
+
1033
+ // Add points for finding the solution
1034
+ addPoints(15);
1035
+ });
1036
+
1037
+ // Reset graph
1038
+ document.getElementById('reset-graph').addEventListener('click', () => {
1039
+ // Remove all constraints
1040
+ graphElements.constraints.forEach(line => {
1041
+ svg.removeChild(line);
1042
+ });
1043
+ graphElements.constraints = [];
1044
+
1045
+ // Remove feasible region if exists
1046
+ if (graphElements.feasibleRegion) {
1047
+ svg.removeChild(graphElements.feasibleRegion);
1048
+ graphElements.feasibleRegion = null;
1049
+ }
1050
+
1051
+ // Remove objective line if exists
1052
+ if (graphElements.objectiveLine) {
1053
+ svg.removeChild(graphElements.objectiveLine);
1054
+ graphElements.objectiveLine = null;
1055
+ }
1056
+
1057
+ // Remove optimal point if exists
1058
+ if (graphElements.optimalPoint) {
1059
+ svg.removeChild(graphElements.optimalPoint);
1060
+ graphElements.optimalPoint = null;
1061
+ }
1062
+
1063
+ if (graphElements.optimalLabel) {
1064
+ svg.removeChild(graphElements.optimalLabel);
1065
+ graphElements.optimalLabel = null;
1066
+ }
1067
+
1068
+ // Clear constraint list
1069
+ document.getElementById('constraint-list').innerHTML = '';
1070
+ });
1071
+
1072
+ // Standard Form Practice
1073
+ document.getElementById('check-standard').addEventListener('click', () => {
1074
+ const original = document.getElementById('original-problem').value.trim();
1075
+ const standard = document.getElementById('standard-form').value.trim();
1076
+ const feedback = document.getElementById('standard-feedback');
1077
+
1078
+ if (!original || !standard) {
1079
+ feedback.innerHTML = '<div class="bg-red-100 text-red-800 p-3 rounded">Please enter both the original problem and your standard form conversion.</div>';
1080
+ feedback.classList.remove('hidden');
1081
+ return;
1082
+ }
1083
+
1084
+ // Simple validation (would be more robust in a real implementation)
1085
+ if (standard.toLowerCase().includes('slack') || standard.toLowerCase().includes('surplus') ||
1086
+ standard.toLowerCase().includes('artificial') || standard.toLowerCase().includes('maximize')) {
1087
+ feedback.innerHTML = '<div class="bg-green-100 text-green-800 p-3 rounded">Good job! Your conversion looks correct.</div>';
1088
+ addPoints(10);
1089
+ } else {
1090
+ feedback.innerHTML = '<div class="bg-yellow-100 text-yellow-800 p-3 rounded">' +
1091
+ '<p>Check your conversion. Standard form should:</p>' +
1092
+ '<ul class="list-disc pl-5"><li>Be a maximization problem</li>' +
1093
+ '<li>Have equality constraints</li>' +
1094
+ '<li>Include slack/surplus/artificial variables as needed</li></ul></div>';
1095
+ }
1096
+
1097
+ feedback.classList.remove('hidden');
1098
+ });
1099
+
1100
+ document.getElementById('show-standard-solution').addEventListener('click', () => {
1101
+ document.getElementById('original-problem').value =
1102
+ "Minimize: -x₁ + 2x₂\n" +
1103
+ "Subject to:\n" +
1104
+ "x₁ + x₂ ≤ 6\n" +
1105
+ "x₁ - x₂ ≥ 2\n" +
1106
+ "x₁ + 2x₂ = 10\n" +
1107
+ "x₁ ≥ 0, x₂ unrestricted";
1108
+
1109
+ document.getElementById('standard-form').value =
1110
+ "Maximize: x₁ - 2x₂⁺ + 2x₂⁻\n" +
1111
+ "Subject to:\n" +
1112
+ "x₁ + x₂⁺ - x₂⁻ + s₁ = 6\n" +
1113
+ "x₁ - x₂⁺ + x₂⁻ - s₂ + a₁ = 2\n" +
1114
+ "x₁ + 2x₂⁺ - 2x₂⁻ + a₂ = 10\n" +
1115
+ "All variables ≥ 0";
1116
+ });
1117
+
1118
+ // Simplex Method Practice
1119
+ document.getElementById('next-step').addEventListener('click', () => {
1120
+ const feedback = document.getElementById('simplex-feedback');
1121
+ feedback.innerHTML = '<div class="bg-blue-100 text-blue-800 p-3 rounded">Next step: Pivot on x₁ column (most negative in objective row) and s₂ row (minimum ratio test).</div>';
1122
+ feedback.classList.remove('hidden');
1123
+
1124
+ // In a real implementation, this would perform the actual pivot operation
1125
+ });
1126
+
1127
+ document.getElementById('hint-simplex').addEventListener('click', () => {
1128
+ const feedback = document.getElementById('simplex-feedback');
1129
+ feedback.innerHTML = '<div class="bg-yellow-100 text-yellow-800 p-3 rounded">Hint: Look for the most negative number in the objective row to choose the entering variable.</div>';
1130
+ feedback.classList.remove('hidden');
1131
+ });
1132
+
1133
+ document.getElementById('auto-solve').addEventListener('click', () => {
1134
+ const stepsContainer = document.getElementById('steps-container');
1135
+ stepsContainer.innerHTML = `
1136
+ <div class="bg-white p-3 rounded border border-gray-200">
1137
+ <p class="font-medium">Step 1: Initial Tableau</p>
1138
+ <p>Entering variable: x₁ (most negative in objective row)</p>
1139
+ <p>Departing variable: s₂ (minimum ratio test: 6/1=6, 8/2=4)</p>
1140
+ </div>
1141
+ <div class="bg-white p-3 rounded border border-gray-200">
1142
+ <p class="font-medium">Step 2: Pivot Operation</p>
1143
+ <p>Divide pivot row by 2 to make pivot element 1</p>
1144
+ <p>Update other rows to zero out x₁ column</p>
1145
+ </div>
1146
+ <div class="bg-white p-3 rounded border border-gray-200">
1147
+ <p class="font-medium">Step 3: Second Tableau</p>
1148
+ <p>Entering variable: x₂ (most negative in objective row)</p>
1149
+ <p>Departing variable: s₁ (minimum ratio test)</p>
1150
+ </div>
1151
+ <div class="bg-white p-3 rounded border border-gray-200">
1152
+ <p class="font-medium">Step 4: Final Tableau</p>
1153
+ <p>All coefficients in objective row are non-negative</p>
1154
+ <p>Optimal solution: x₁=2, x₂=4, z=14</p>
1155
+ </div>
1156
+ `;
1157
+
1158
+ document.getElementById('simplex-steps').classList.remove('hidden');
1159
+ addPoints(20);
1160
+ });
1161
+
1162
+ // Duality Practice
1163
+ document.getElementById('check-dual').addEventListener('click', () => {
1164
+ const primal = document.getElementById('primal-problem').value.trim();
1165
+ const dual = document.getElementById('dual-problem').value.trim();
1166
+ const feedback = document.getElementById('dual-feedback');
1167
+
1168
+ if (!primal || !dual) {
1169
+ feedback.innerHTML = '<div class="bg-red-100 text-red-800 p-3 rounded">Please enter both the primal problem and your dual formulation.</div>';
1170
+ feedback.classList.remove('hidden');
1171
+ return;
1172
+ }
1173
+
1174
+ // Simple validation (would be more robust in a real implementation)
1175
+ if (dual.toLowerCase().includes('min') && dual.toLowerCase().includes('y') &&
1176
+ (dual.toLowerCase().includes('≥') || dual.toLowerCase().includes('>='))) {
1177
+ feedback.innerHTML = '<div class="bg-green-100 text-green-800 p-3 rounded">Correct! Your dual formulation looks good.</div>';
1178
+ addPoints(10);
1179
+ } else {
1180
+ feedback.innerHTML = '<div class="bg-yellow-100 text-yellow-800 p-3 rounded">' +
1181
+ '<p>Check your dual formulation. Remember:</p>' +
1182
+ '<ul class="list-disc pl-5"><li>Primal max becomes dual min</li>' +
1183
+ '<li>Primal constraints become dual variables</li>' +
1184
+ '<li>Constraint coefficients are transposed</li></ul></div>';
1185
+ }
1186
+
1187
+ feedback.classList.remove('hidden');
1188
+ });
1189
+
1190
+ document.getElementById('show-dual-solution').addEventListener('click', () => {
1191
+ document.getElementById('primal-problem').value =
1192
+ "Maximize: 4x₁ + 6x₂\n" +
1193
+ "Subject to:\n" +
1194
+ "x₁ + 2x₂ ≤ 3\n" +
1195
+ "x₁ + x₂ ≤ 2\n" +
1196
+ "x₁ ≥ 0, x₂ ≥ 0";
1197
+
1198
+ document.getElementById('dual-problem').value =
1199
+ "Minimize: 3y₁ + 2y₂\n" +
1200
+ "Subject to:\n" +
1201
+ "y₁ + y₂ ≥ 4\n" +
1202
+ "2y₁ + y₂ ≥ 6\n" +
1203
+ "y₁ ≥ 0, y₂ ≥ 0";
1204
+ });
1205
+
1206
+ // Mark Complete buttons
1207
+ document.querySelectorAll('.mark-complete').forEach(button => {
1208
+ button.addEventListener('click', function() {
1209
+ // Update progress
1210
+ const progressBar = document.getElementById('progress-bar');
1211
+ const progressText = document.getElementById('progress-text');
1212
+
1213
+ let currentWidth = parseFloat(progressBar.style.width) || 0;
1214
+ currentWidth += 20; // Each topic is 20%
1215
+
1216
+ if (currentWidth > 100) currentWidth = 100;
1217
+ progressBar.style.width = currentWidth + '%';
1218
+ progressText.textContent = Math.round(currentWidth) + '% Complete';
1219
+
1220
+ // Add points
1221
+ addPoints(5);
1222
+
1223
+ // Show completion message
1224
+ const parentDiv = this.parentNode.parentNode;
1225
+ const completeMsg = document.createElement('div');
1226
+ completeMsg.className = 'bg-green-100 text-green-800 p-2 rounded text-sm mt-2';
1227
+ completeMsg.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Topic marked as complete!';
1228
+ parentDiv.appendChild(completeMsg);
1229
+
1230
+ // Disable button
1231
+ this.disabled = true;
1232
+ this.classList.remove('bg-indigo-500', 'hover:bg-indigo-600');
1233
+ this.classList.add('bg-gray-400', 'cursor-not-allowed');
1234
+ });
1235
+ });
1236
+
1237
+ // Flashcards
1238
+ const flashcards = [
1239
+ { question: "What is linear programming?", answer: "A mathematical method for determining the best outcome in a model with linear relationships." },
1240
+ { question: "What are the three main components of an LP problem?", answer: "Objective function, decision variables, and constraints." },
1241
+ { question: "What is the feasible region?", answer: "The set of all points that satisfy all constraints simultaneously." },
1242
+ { question: "What is standard form in LP?", answer: "Maximization problem with equality constraints and non-negative variables." },
1243
+ { question: "What is a slack variable?", answer: "A variable added to a ≤ constraint to convert it to an equation." },
1244
+ { question: "What is the simplex method?", answer: "An algorithm that moves from one basic feasible solution to another to find the optimal solution." },
1245
+ { question: "How do you choose the entering variable in simplex?", answer: "The non-basic variable with the most negative coefficient in the objective row." },
1246
+ { question: "What is the minimum ratio test?", answer: "Used to determine the departing variable by finding the smallest non-negative ratio of RHS to pivot column coefficient." },
1247
+ { question: "What is duality in LP?", answer: "Every LP problem has a corresponding dual problem with important theoretical relationships." },
1248
+ { question: "What does the weak duality theorem state?", answer: "The value of any feasible dual solution is ≥ the value of any feasible primal solution." }
1249
+ ];
1250
+
1251
+ let currentFlashcardIndex = 0;
1252
+
1253
+ // Open flashcards modal
1254
+ document.getElementById('flashcards-btn').addEventListener('click', () => {
1255
+ document.getElementById('flashcards-modal').style.display = 'block';
1256
+ showFlashcard(currentFlashcardIndex);
1257
+ });
1258
+
1259
+ // Close flashcards modal
1260
+ document.getElementById('close-flashcards').addEventListener('click', () => {
1261
+ document.getElementById('flashcards-modal').style.display = 'none';
1262
+ });
1263
+
1264
+ // Show flashcard
1265
+ function showFlashcard(index) {
1266
+ const flashcard = document.getElementById('current-flashcard');
1267
+ flashcard.classList.remove('flipped');
1268
+
1269
+ document.getElementById('flashcard-question').textContent = flashcards[index].question;
1270
+ document.getElementById('flashcard-answer').textContent = flashcards[index].answer;
1271
+ document.getElementById('flashcard-count').textContent = (index + 1) + '/' + flashcards.length;
1272
+ }
1273
+
1274
+ // Flip flashcard
1275
+ document.getElementById('current-flashcard').addEventListener('click', function() {
1276
+ this.classList.toggle('flipped');
1277
+ });
1278
+
1279
+ // Previous flashcard
1280
+ document.getElementById('prev-flashcard').addEventListener('click', () => {
1281
+ currentFlashcardIndex = (currentFlashcardIndex - 1 + flashcards.length) % flashcards.length;
1282
+ showFlashcard(currentFlashcardIndex);
1283
+ });
1284
+
1285
+ // Next flashcard
1286
+ document.getElementById('next-flashcard').addEventListener('click', () => {
1287
+ currentFlashcardIndex = (currentFlashcardIndex + 1) % flashcards.length;
1288
+ showFlashcard(currentFlashcardIndex);
1289
+ });
1290
+
1291
+ // Shuffle flashcards
1292
+ document.getElementById('shuffle-flashcards').addEventListener('click', () => {
1293
+ for (let i = flashcards.length - 1; i > 0; i--) {
1294
+ const j = Math.floor(Math.random() * (i + 1));
1295
+ [flashcards[i], flashcards[j]] = [flashcards[j], flashcards[i]];
1296
+ }
1297
+ currentFlashcardIndex = 0;
1298
+ showFlashcard(currentFlashcardIndex);
1299
+ addPoints(5);
1300
+ });
1301
+
1302
+ // Quiz
1303
+ const quizQuestions = [
1304
+ {
1305
+ question: "Which of the following is NOT a requirement for standard form in LP?",
1306
+ options: [
1307
+ "Maximization problem",
1308
+ "Equality constraints",
1309
+ "Non-negative variables",
1310
+ "At least three variables"
1311
+ ],
1312
+ answer: 3
1313
+ },
1314
+ {
1315
+ question: "In the simplex method, how is the entering variable chosen?",
1316
+ options: [
1317
+ "Largest coefficient in objective row",
1318
+ "Most negative coefficient in objective row",
1319
+ "Random selection",
1320
+ "Variable with smallest index"
1321
+ ],
1322
+ answer: 1
1323
+ },
1324
+ {
1325
+ question: "What does the strong duality theorem state?",
1326
+ options: [
1327
+ "Primal and dual problems always have the same number of variables",
1328
+ "If one problem has an optimal solution, so does the other with equal objective values",
1329
+ "Dual problems are always easier to solve than primal problems",
1330
+ "All LP problems have multiple optimal solutions"
1331
+ ],
1332
+ answer: 1
1333
+ },
1334
+ {
1335
+ question: "What is added to convert a ≥ constraint to standard form?",
1336
+ options: [
1337
+ "Only a slack variable",
1338
+ "Only a surplus variable",
1339
+ "A surplus variable and an artificial variable",
1340
+ "Only an artificial variable"
1341
+ ],
1342
+ answer: 2
1343
+ },
1344
+ {
1345
+ question: "Where is the optimal solution found in graphical LP?",
1346
+ options: [
1347
+ "At the center of the feasible region",
1348
+ "At a corner point of the feasible region",
1349
+ "At the point closest to the origin",
1350
+ "At the intersection of the first two constraints"
1351
+ ],
1352
+ answer: 1
1353
+ }
1354
+ ];
1355
+
1356
+ let currentQuizIndex
1357
+ </html>