Hugging Face's logo

Spaces:
Rubenhugging
/
caractfuncions
Running

App Files Community
Rubenhugging commited on
Commit
c1f1d7d
·
verified ·
1 Parent(s): 8bea91c

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +724 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Caractfuncions
3
- emoji: 🚀
4
- colorFrom: gray
5
- colorTo: gray
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: caractfuncions
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
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,724 @@
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="ca">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Matemàtiques 4t ESO - Funcions</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ .function-card:hover {
12
+ transform: translateY(-5px);
13
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
14
+ }
15
+ .graph-container {
16
+ transition: all 0.3s ease;
17
+ }
18
+ .highlight {
19
+ background-color: #FEF3C7;
20
+ transition: background-color 0.3s;
21
+ }
22
+ .tab-active {
23
+ border-bottom: 3px solid #3B82F6;
24
+ font-weight: 600;
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="bg-gray-50 font-sans">
29
+ <div class="container mx-auto px-4 py-8">
30
+ <!-- Header -->
31
+ <header class="mb-10 text-center">
32
+ <h1 class="text-4xl font-bold text-blue-600 mb-2">Funcions Matemàtiques</h1>
33
+ <p class="text-xl text-gray-600">Aprendre les característiques bàsiques de les funcions per a 4t d'ESO</p>
34
+ <div class="mt-4">
35
+ <span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
36
+ Nivell: Mitjà
37
+ </span>
38
+ </div>
39
+ </header>
40
+
41
+ <!-- Navigation Tabs -->
42
+ <div class="flex border-b border-gray-200 mb-8">
43
+ <button onclick="changeTab('theory')" class="tab-active px-6 py-3 text-blue-600 focus:outline-none">
44
+ <i class="fas fa-book mr-2"></i>Teoria
45
+ </button>
46
+ <button onclick="changeTab('practice')" class="px-6 py-3 text-gray-500 hover:text-blue-600 focus:outline-none">
47
+ <i class="fas fa-pen mr-2"></i>Pràctica
48
+ </button>
49
+ <button onclick="changeTab('interactive')" class="px-6 py-3 text-gray-500 hover:text-blue-600 focus:outline-none">
50
+ <i class="fas fa-sliders mr-2"></i>Interactiu
51
+ </button>
52
+ </div>
53
+
54
+ <!-- Theory Tab Content -->
55
+ <div id="theory-tab" class="tab-content">
56
+ <div class="grid md:grid-cols-3 gap-6 mb-8">
57
+ <!-- Concept Card -->
58
+ <div class="bg-white p-6 rounded-lg shadow-md function-card">
59
+ <div class="text-blue-500 mb-4">
60
+ <i class="fas fa-lightbulb text-3xl"></i>
61
+ </div>
62
+ <h3 class="text-xl font-semibold mb-2">Què és una funció?</h3>
63
+ <p class="text-gray-600 mb-4">Una funció és una relació entre dos conjunts on cada element del primer conjunt (domini) està relacionat amb exactament un element del segon conjunt (codomini).</p>
64
+ <div class="bg-blue-50 p-3 rounded">
65
+ <p class="text-blue-800 font-mono">f: X → Y</p>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Types Card -->
70
+ <div class="bg-white p-6 rounded-lg shadow-md function-card">
71
+ <div class="text-green-500 mb-4">
72
+ <i class="fas fa-project-diagram text-3xl"></i>
73
+ </div>
74
+ <h3 class="text-xl font-semibold mb-2">Tipus de funcions</h3>
75
+ <ul class="space-y-2 text-gray-600">
76
+ <li><span class="font-medium">Lineals:</span> f(x) = mx + n</li>
77
+ <li><span class="font-medium">Quadràtiques:</span> f(x) = ax² + bx + c</li>
78
+ <li><span class="font-medium">Racionals:</span> f(x) = P(x)/Q(x)</li>
79
+ <li><span class="font-medium">Exponencials:</span> f(x) = aˣ</li>
80
+ </ul>
81
+ </div>
82
+
83
+ <!-- Characteristics Card -->
84
+ <div class="bg-white p-6 rounded-lg shadow-md function-card">
85
+ <div class="text-purple-500 mb-4">
86
+ <i class="fas fa-chart-line text-3xl"></i>
87
+ </div>
88
+ <h3 class="text-xl font-semibold mb-2">Característiques</h3>
89
+ <ul class="space-y-2 text-gray-600">
90
+ <li><span class="font-medium">Domini:</span> Valors que pot prendre x</li>
91
+ <li><span class="font-medium">Imatge:</span> Valors que pot prendre y</li>
92
+ <li><span class="font-medium">Creixement:</span> On augmenta/disminueix</li>
93
+ <li><span class="font-medium">Màxims i mínims:</span> Punts alts/baixos</li>
94
+ </ul>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Detailed Explanation -->
99
+ <div class="bg-white p-6 rounded-lg shadow-md mb-8">
100
+ <h2 class="text-2xl font-bold text-blue-600 mb-4">Anàlisi d'una Funció</h2>
101
+
102
+ <div class="grid md:grid-cols-2 gap-6">
103
+ <div>
104
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">1. Domini i Imatge</h3>
105
+ <p class="text-gray-600 mb-4">El <span class="font-medium highlight px-1">domini</span> d'una funció són tots els valors reals que pot prendre la variable independent (x).</p>
106
+ <p class="text-gray-600 mb-4">La <span class="font-medium highlight px-1">imatge</span> o recorregut són tots els valors reals que pot prendre la variable dependent (y) com a resultat de la funció.</p>
107
+
108
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
109
+ <p class="text-yellow-700"><i class="fas fa-exclamation-circle mr-2"></i> <strong>Exemple:</strong> Per f(x) = x², el domini són tots els reals (ℝ) i la imatge són els reals no negatius [0, ∞).</p>
110
+ </div>
111
+ </div>
112
+
113
+ <div>
114
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">2. Punts de tall</h3>
115
+ <p class="text-gray-600 mb-4">Els <span class="font-medium highlight px-1">punts de tall amb l'eix X</span> són les arrels o zeros de la funció (f(x) = 0).</p>
116
+ <p class="text-gray-600 mb-4">El <span class="font-medium highlight px-1">punt de tall amb l'eix Y</span> es troba avaluant f(0).</p>
117
+
118
+ <div class="bg-green-50 border-l-4 border-green-400 p-4">
119
+ <p class="text-green-700"><i class="fas fa-check-circle mr-2"></i> <strong>Exemple:</strong> Per f(x) = 2x - 4, el punt de tall amb X és (2,0) i amb Y és (0,-4).</p>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Graph Example -->
126
+ <div class="bg-white p-6 rounded-lg shadow-md">
127
+ <h2 class="text-2xl font-bold text-blue-600 mb-4">Exemple Gràfic</h2>
128
+ <div class="graph-container bg-gray-50 p-4 rounded-lg">
129
+ <canvas id="theoryGraph" height="300"></canvas>
130
+ </div>
131
+ <div class="mt-4 grid md:grid-cols-3 gap-4">
132
+ <div class="bg-blue-50 p-3 rounded">
133
+ <p class="text-sm font-medium text-blue-800">Funció: <span id="theoryFunction" class="font-mono">f(x) = x² - 4</span></p>
134
+ </div>
135
+ <div class="bg-green-50 p-3 rounded">
136
+ <p class="text-sm font-medium text-green-800">Punts de tall X: <span id="theoryRoots" class="font-mono">(-2,0), (2,0)</span></p>
137
+ </div>
138
+ <div class="bg-purple-50 p-3 rounded">
139
+ <p class="text-sm font-medium text-purple-800">Punt de tall Y: <span id="theoryYIntercept" class="font-mono">(0,-4)</span></p>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Practice Tab Content -->
146
+ <div id="practice-tab" class="tab-content hidden">
147
+ <div class="bg-white p-6 rounded-lg shadow-md mb-8">
148
+ <h2 class="text-2xl font-bold text-blue-600 mb-6">Exercicis Pràctics</h2>
149
+
150
+ <!-- Exercise 1 -->
151
+ <div class="mb-8 p-4 border border-gray-200 rounded-lg">
152
+ <div class="flex items-start mb-4">
153
+ <span class="bg-blue-100 text-blue-800 font-bold rounded-full h-8 w-8 flex items-center justify-center mr-3">1</span>
154
+ <div>
155
+ <h3 class="text-lg font-semibold">Domini d'una funció</h3>
156
+ <p class="text-gray-600">Determina el domini de la següent funció:</p>
157
+ </div>
158
+ </div>
159
+ <div class="bg-gray-50 p-4 rounded mb-4">
160
+ <p class="font-mono text-lg">f(x) = √(x + 3)</p>
161
+ </div>
162
+ <div class="flex flex-wrap gap-3 mb-4">
163
+ <button onclick="checkAnswer('a1', false)" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg">a) ℝ</button>
164
+ <button onclick="checkAnswer('a1', false)" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg">b) (-∞, -3]</button>
165
+ <button onclick="checkAnswer('a1', true)" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg">c) [-3, ∞)</button>
166
+ <button onclick="checkAnswer('a1', false)" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg">d) (0, ∞)</button>
167
+ </div>
168
+ <div id="feedback1" class="hidden p-3 rounded"></div>
169
+ </div>
170
+
171
+ <!-- Exercise 2 -->
172
+ <div class="mb-8 p-4 border border-gray-200 rounded-lg">
173
+ <div class="flex items-start mb-4">
174
+ <span class="bg-blue-100 text-blue-800 font-bold rounded-full h-8 w-8 flex items-center justify-center mr-3">2</span>
175
+ <div>
176
+ <h3 class="text-lg font-semibold">Punts de tall</h3>
177
+ <p class="text-gray-600">Troba els punts de tall amb els eixos de la funció:</p>
178
+ </div>
179
+ </div>
180
+ <div class="bg-gray-50 p-4 rounded mb-4">
181
+ <p class="font-mono text-lg">f(x) = x² - 5x + 6</p>
182
+ </div>
183
+ <div class="grid md:grid-cols-2 gap-4 mb-4">
184
+ <div>
185
+ <label class="block text-gray-700 mb-2">Punts de tall amb X:</label>
186
+ <input type="text" id="rootsInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Ex: (2,0), (3,0)">
187
+ </div>
188
+ <div>
189
+ <label class="block text-gray-700 mb-2">Punt de tall amb Y:</label>
190
+ <input type="text" id="yInterceptInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Ex: (0,6)">
191
+ </div>
192
+ </div>
193
+ <button onclick="checkExercise2()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Comprova</button>
194
+ <div id="feedback2" class="hidden mt-3 p-3 rounded"></div>
195
+ </div>
196
+
197
+ <!-- Exercise 3 -->
198
+ <div class="p-4 border border-gray-200 rounded-lg">
199
+ <div class="flex items-start mb-4">
200
+ <span class="bg-blue-100 text-blue-800 font-bold rounded-full h-8 w-8 flex items-center justify-center mr-3">3</span>
201
+ <div>
202
+ <h3 class="text-lg font-semibold">Gràfica d'una funció</h3>
203
+ <p class="text-gray-600">Observa la gràfica i respon:</p>
204
+ </div>
205
+ </div>
206
+ <div class="graph-container bg-gray-50 p-4 rounded mb-4">
207
+ <canvas id="practiceGraph" height="250"></canvas>
208
+ </div>
209
+ <div class="space-y-3 mb-4">
210
+ <div class="flex items-center">
211
+ <input type="radio" id="q3a" name="practiceQuestion" value="a" class="mr-2">
212
+ <label for="q3a">La funció és creixent en tot el seu domini</label>
213
+ </div>
214
+ <div class="flex items-center">
215
+ <input type="radio" id="q3b" name="practiceQuestion" value="b" class="mr-2">
216
+ <label for="q3b">La funció té un màxim en x=0</label>
217
+ </div>
218
+ <div class="flex items-center">
219
+ <input type="radio" id="q3c" name="practiceQuestion" value="c" class="mr-2">
220
+ <label for="q3c">El domini de la funció és (0, ∞)</label>
221
+ </div>
222
+ <div class="flex items-center">
223
+ <input type="radio" id="q3d" name="practiceQuestion" value="d" class="mr-2">
224
+ <label for="q3d">La funció és simètrica respecte l'origen</label>
225
+ </div>
226
+ </div>
227
+ <button onclick="checkExercise3()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Comprova</button>
228
+ <div id="feedback3" class="hidden mt-3 p-3 rounded"></div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Interactive Tab Content -->
234
+ <div id="interactive-tab" class="tab-content hidden">
235
+ <div class="bg-white p-6 rounded-lg shadow-md mb-8">
236
+ <h2 class="text-2xl font-bold text-blue-600 mb-6">Explorador de Funcions</h2>
237
+
238
+ <div class="grid md:grid-cols-3 gap-6 mb-6">
239
+ <div class="md:col-span-2">
240
+ <div class="graph-container bg-gray-50 p-4 rounded-lg mb-4">
241
+ <canvas id="interactiveGraph" height="350"></canvas>
242
+ </div>
243
+ </div>
244
+
245
+ <div>
246
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
247
+ <h3 class="text-lg font-semibold mb-3">Configura la funció</h3>
248
+
249
+ <div class="mb-4">
250
+ <label class="block text-gray-700 mb-2">Tipus de funció:</label>
251
+ <select id="functionType" onchange="updateFunctionType()" class="w-full px-3 py-2 border rounded-lg">
252
+ <option value="linear">Lineal</option>
253
+ <option value="quadratic">Quadràtica</option>
254
+ <option value="rational">Racional</option>
255
+ <option value="exponential">Exponencial</option>
256
+ </select>
257
+ </div>
258
+
259
+ <div id="linearParams">
260
+ <div class="mb-3">
261
+ <label class="block text-gray-700 mb-1">Pendent (m):</label>
262
+ <input type="range" id="linearSlope" min="-5" max="5" step="0.5" value="1" oninput="updateLinearFunction()" class="w-full">
263
+ <span id="slopeValue" class="text-sm text-gray-600">1</span>
264
+ </div>
265
+ <div>
266
+ <label class="block text-gray-700 mb-1">Ordenada a l'origen (n):</label>
267
+ <input type="range" id="linearIntercept" min="-5" max="5" step="0.5" value="0" oninput="updateLinearFunction()" class="w-full">
268
+ <span id="interceptValue" class="text-sm text-gray-600">0</span>
269
+ </div>
270
+ </div>
271
+
272
+ <div id="quadraticParams" class="hidden">
273
+ <div class="mb-3">
274
+ <label class="block text-gray-700 mb-1">Coeficient a:</label>
275
+ <input type="range" id="quadA" min="-2" max="2" step="0.1" value="1" oninput="updateQuadraticFunction()" class="w-full">
276
+ <span id="quadAValue" class="text-sm text-gray-600">1</span>
277
+ </div>
278
+ <div class="mb-3">
279
+ <label class="block text-gray-700 mb-1">Coeficient b:</label>
280
+ <input type="range" id="quadB" min="-5" max="5" step="0.5" value="0" oninput="updateQuadraticFunction()" class="w-full">
281
+ <span id="quadBValue" class="text-sm text-gray-600">0</span>
282
+ </div>
283
+ <div>
284
+ <label class="block text-gray-700 mb-1">Coeficient c:</label>
285
+ <input type="range" id="quadC" min="-5" max="5" step="0.5" value="0" oninput="updateQuadraticFunction()" class="w-full">
286
+ <span id="quadCValue" class="text-sm text-gray-600">0</span>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="bg-blue-50 p-4 rounded-lg">
292
+ <h3 class="text-lg font-semibold mb-3">Característiques</h3>
293
+ <div class="space-y-2">
294
+ <p><span class="font-medium">Funció:</span> <span id="currentFunction" class="font-mono">f(x) = x</span></p>
295
+ <p><span class="font-medium">Domini:</span> <span id="domainValue">ℝ</span></p>
296
+ <p><span class="font-medium">Imatge:</span> <span id="rangeValue">ℝ</span></p>
297
+ <p><span class="font-medium">Punts de tall:</span> <span id="interceptsValue">X: (0,0), Y: (0,0)</span></p>
298
+ <p><span class="font-medium">Creixement:</span> <span id="growthValue">Creixent en tot el domini</span></p>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
305
+ <h3 class="text-lg font-semibold mb-3">Desafí</h3>
306
+ <p class="text-gray-600 mb-4">Configura una funció que compleixi les següents condicions:</p>
307
+ <ul class="list-disc pl-5 mb-4 text-gray-600">
308
+ <li>Punt de tall amb Y en (0,2)</li>
309
+ <li>Creixent en tot el seu domini</li>
310
+ <li>Punt de tall amb X en (-2,0)</li>
311
+ </ul>
312
+ <button onclick="checkChallenge()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">Comprova el meu desafi</button>
313
+ <div id="challengeFeedback" class="hidden mt-3 p-3 rounded"></div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+
319
+ <script>
320
+ // Initialize charts
321
+ document.addEventListener('DOMContentLoaded', function() {
322
+ // Theory Graph
323
+ const theoryCtx = document.getElementById('theoryGraph').getContext('2d');
324
+ const theoryChart = new Chart(theoryCtx, {
325
+ type: 'line',
326
+ data: {
327
+ labels: Array.from({length: 21}, (_, i) => i - 10),
328
+ datasets: [{
329
+ label: 'f(x) = x² - 4',
330
+ data: Array.from({length: 21}, (_, i) => Math.pow(i - 10, 2) - 4),
331
+ borderColor: 'rgb(59, 130, 246)',
332
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
333
+ borderWidth: 2,
334
+ fill: true,
335
+ tension: 0.1
336
+ }]
337
+ },
338
+ options: getChartOptions()
339
+ });
340
+
341
+ // Practice Graph
342
+ const practiceCtx = document.getElementById('practiceGraph').getContext('2d');
343
+ const practiceChart = new Chart(practiceCtx, {
344
+ type: 'line',
345
+ data: {
346
+ labels: Array.from({length: 21}, (_, i) => i - 10),
347
+ datasets: [{
348
+ label: 'f(x) = -x² + 4',
349
+ data: Array.from({length: 21}, (_, i) => -Math.pow(i - 10, 2) + 4),
350
+ borderColor: 'rgb(16, 185, 129)',
351
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
352
+ borderWidth: 2,
353
+ fill: true
354
+ }]
355
+ },
356
+ options: getChartOptions()
357
+ });
358
+
359
+ // Interactive Graph
360
+ const interactiveCtx = document.getElementById('interactiveGraph').getContext('2d');
361
+ window.interactiveChart = new Chart(interactiveCtx, {
362
+ type: 'line',
363
+ data: {
364
+ labels: Array.from({length: 21}, (_, i) => i - 10),
365
+ datasets: [{
366
+ label: 'f(x) = x',
367
+ data: Array.from({length: 21}, (_, i) => (i - 10)),
368
+ borderColor: 'rgb(139, 92, 246)',
369
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
370
+ borderWidth: 2,
371
+ fill: true,
372
+ tension: 0.1
373
+ }]
374
+ },
375
+ options: getChartOptions()
376
+ });
377
+
378
+ // Initialize interactive function controls
379
+ updateFunctionType();
380
+ });
381
+
382
+ function getChartOptions() {
383
+ return {
384
+ responsive: true,
385
+ plugins: {
386
+ legend: {
387
+ display: false
388
+ },
389
+ tooltip: {
390
+ mode: 'index',
391
+ intersect: false
392
+ }
393
+ },
394
+ scales: {
395
+ x: {
396
+ grid: {
397
+ color: 'rgba(0, 0, 0, 0.05)'
398
+ },
399
+ title: {
400
+ display: true,
401
+ text: 'x'
402
+ }
403
+ },
404
+ y: {
405
+ grid: {
406
+ color: 'rgba(0, 0, 0, 0.05)'
407
+ },
408
+ title: {
409
+ display: true,
410
+ text: 'f(x)'
411
+ }
412
+ }
413
+ },
414
+ elements: {
415
+ point: {
416
+ radius: 0
417
+ }
418
+ }
419
+ };
420
+ }
421
+
422
+ // Tab switching
423
+ function changeTab(tabName) {
424
+ // Update tab buttons
425
+ document.querySelectorAll('[onclick^="changeTab"]').forEach(btn => {
426
+ btn.classList.remove('tab-active', 'text-blue-600');
427
+ btn.classList.add('text-gray-500');
428
+ });
429
+ event.currentTarget.classList.add('tab-active', 'text-blue-600');
430
+ event.currentTarget.classList.remove('text-gray-500');
431
+
432
+ // Update tab content
433
+ document.querySelectorAll('.tab-content').forEach(tab => {
434
+ tab.classList.add('hidden');
435
+ });
436
+ document.getElementById(`${tabName}-tab`).classList.remove('hidden');
437
+ }
438
+
439
+ // Practice exercises
440
+ function checkAnswer(exerciseId, isCorrect) {
441
+ const feedback = document.getElementById(`feedback${exerciseId.slice(1)}`);
442
+ feedback.classList.remove('hidden', 'bg-red-100', 'border-red-400', 'text-red-700',
443
+ 'bg-green-100', 'border-green-400', 'text-green-700');
444
+
445
+ if (isCorrect) {
446
+ feedback.classList.add('bg-green-100', 'border-green-400', 'text-green-700');
447
+ feedback.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Correcte! Molt bé.';
448
+ } else {
449
+ feedback.classList.add('bg-red-100', 'border-red-400', 'text-red-700');
450
+ feedback.innerHTML = '<i class="fas fa-times-circle mr-2"></i> Incorrecte. Torna a intentar-ho.';
451
+ }
452
+ }
453
+
454
+ function checkExercise2() {
455
+ const rootsInput = document.getElementById('rootsInput').value.trim();
456
+ const yInterceptInput = document.getElementById('yInterceptInput').value.trim();
457
+ const feedback = document.getElementById('feedback2');
458
+ feedback.classList.remove('hidden', 'bg-red-100', 'border-red-400', 'text-red-700',
459
+ 'bg-green-100', 'border-green-400', 'text-green-700');
460
+
461
+ // Check answers (simplified validation for demo)
462
+ const rootsCorrect = rootsInput.includes('2,0') && rootsInput.includes('3,0');
463
+ const yInterceptCorrect = yInterceptInput.includes('0,6');
464
+
465
+ if (rootsCorrect && yInterceptCorrect) {
466
+ feedback.classList.add('bg-green-100', 'border-green-400', 'text-green-700');
467
+ feedback.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Tot correcte! Excel·lent treball.';
468
+ } else {
469
+ feedback.classList.add('bg-red-100', 'border-red-400', 'text-red-700');
470
+ let message = '<i class="fas fa-times-circle mr-2"></i> Alguna resposta incorrecta. ';
471
+
472
+ if (!rootsCorrect && !yInterceptCorrect) {
473
+ message += 'Els punts de tall amb X són (2,0) i (3,0). El punt de tall amb Y és (0,6).';
474
+ } else if (!rootsCorrect) {
475
+ message += 'Els punts de tall amb X no són correctes. Haurien de ser (2,0) i (3,0).';
476
+ } else {
477
+ message += 'El punt de tall amb Y no és correcte. Hauria de ser (0,6).';
478
+ }
479
+
480
+ feedback.innerHTML = message;
481
+ }
482
+ }
483
+
484
+ function checkExercise3() {
485
+ const selectedOption = document.querySelector('input[name="practiceQuestion"]:checked');
486
+ const feedback = document.getElementById('feedback3');
487
+ feedback.classList.remove('hidden', 'bg-red-100', 'border-red-400', 'text-red-700',
488
+ 'bg-green-100', 'border-green-400', 'text-green-700');
489
+
490
+ if (!selectedOption) {
491
+ feedback.classList.add('bg-yellow-100', 'border-yellow-400', 'text-yellow-700');
492
+ feedback.innerHTML = '<i class="fas fa-exclamation-circle mr-2"></i> Selecciona una resposta abans de comprovar.';
493
+ return;
494
+ }
495
+
496
+ if (selectedOption.value === 'b') {
497
+ feedback.classList.add('bg-green-100', 'border-green-400', 'text-green-700');
498
+ feedback.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Correcte! La funció té un màxim en x=0.';
499
+ } else {
500
+ feedback.classList.add('bg-red-100', 'border-red-400', 'text-red-700');
501
+ feedback.innerHTML = '<i class="fas fa-times-circle mr-2"></i> Incorrecte. La resposta correcta és "La funció té un màxim en x=0".';
502
+ }
503
+ }
504
+
505
+ // Interactive function explorer
506
+ function updateFunctionType() {
507
+ const functionType = document.getElementById('functionType').value;
508
+
509
+ // Hide all parameter sections
510
+ document.querySelectorAll('[id$="Params"]').forEach(el => {
511
+ el.classList.add('hidden');
512
+ });
513
+
514
+ // Show the selected one
515
+ document.getElementById(`${functionType}Params`).classList.remove('hidden');
516
+
517
+ // Update the function
518
+ if (functionType === 'linear') {
519
+ updateLinearFunction();
520
+ } else if (functionType === 'quadratic') {
521
+ updateQuadraticFunction();
522
+ }
523
+ }
524
+
525
+ function updateLinearFunction() {
526
+ const slope = parseFloat(document.getElementById('linearSlope').value);
527
+ const intercept = parseFloat(document.getElementById('linearIntercept').value);
528
+
529
+ // Update displayed values
530
+ document.getElementById('slopeValue').textContent = slope;
531
+ document.getElementById('interceptValue').textContent = intercept;
532
+
533
+ // Update function display
534
+ let functionText = 'f(x) = ';
535
+ if (slope !== 0) {
536
+ functionText += (slope === 1) ? 'x' : (slope === -1) ? '-x' : `${slope}x`;
537
+ }
538
+
539
+ if (intercept !== 0) {
540
+ if (slope !== 0) {
541
+ functionText += (intercept > 0) ? ` + ${intercept}` : ` - ${Math.abs(intercept)}`;
542
+ } else {
543
+ functionText += intercept;
544
+ }
545
+ } else if (slope === 0) {
546
+ functionText += '0';
547
+ }
548
+
549
+ document.getElementById('currentFunction').textContent = functionText;
550
+
551
+ // Update chart
552
+ const data = Array.from({length: 21}, (_, i) => slope * (i - 10) + intercept);
553
+ updateInteractiveChart(data, functionText);
554
+
555
+ // Update characteristics
556
+ document.getElementById('domainValue').textContent = 'ℝ';
557
+ document.getElementById('rangeValue').textContent = 'ℝ';
558
+
559
+ // Calculate intercepts
560
+ let xIntercepts = [];
561
+ if (slope !== 0) {
562
+ const xIntercept = -intercept / slope;
563
+ xIntercepts.push(`(${xIntercept.toFixed(1)},0)`);
564
+ }
565
+
566
+ document.getElementById('interceptsValue').textContent =
567
+ `X: ${xIntercepts.join(', ') || 'Cap'}, Y: (0,${intercept})`;
568
+
569
+ document.getElementById('growthValue').textContent =
570
+ slope > 0 ? 'Creixent en tot el domini' : (slope < 0 ? 'Decreixent en tot el domini' : 'Constant');
571
+ }
572
+
573
+ function updateQuadraticFunction() {
574
+ const a = parseFloat(document.getElementById('quadA').value);
575
+ const b = parseFloat(document.getElementById('quadB').value);
576
+ const c = parseFloat(document.getElementById('quadC').value);
577
+
578
+ // Update displayed values
579
+ document.getElementById('quadAValue').textContent = a;
580
+ document.getElementById('quadBValue').textContent = b;
581
+ document.getElementById('quadCValue').textContent = c;
582
+
583
+ // Update function display
584
+ let functionText = 'f(x) = ';
585
+ if (a !== 0) {
586
+ functionText += (a === 1) ? 'x²' : (a === -1) ? '-x²' : `${a}x²`;
587
+ }
588
+
589
+ if (b !== 0) {
590
+ if (a !== 0) {
591
+ functionText += (b > 0) ? ` + ${b}x` : ` - ${Math.abs(b)}x`;
592
+ } else {
593
+ functionText += (b === 1) ? 'x' : (b === -1) ? '-x' : `${b}x`;
594
+ }
595
+ }
596
+
597
+ if (c !== 0) {
598
+ if (a !== 0 || b !== 0) {
599
+ functionText += (c > 0) ? ` + ${c}` : ` - ${Math.abs(c)}`;
600
+ } else {
601
+ functionText += c;
602
+ }
603
+ } else if (a === 0 && b === 0) {
604
+ functionText += '0';
605
+ }
606
+
607
+ document.getElementById('currentFunction').textContent = functionText;
608
+
609
+ // Update chart
610
+ const data = Array.from({length: 21}, (_, i) => {
611
+ const x = i - 10;
612
+ return a * x * x + b * x + c;
613
+ });
614
+ updateInteractiveChart(data, functionText);
615
+
616
+ // Update characteristics
617
+ document.getElementById('domainValue').textContent = 'ℝ';
618
+
619
+ // Calculate range
620
+ let rangeText = 'ℝ';
621
+ if (a !== 0) {
622
+ const vertexY = c - (b * b) / (4 * a);
623
+ rangeText = a > 0 ? `[${vertexY.toFixed(1)}, ∞)` : `(-∞, ${vertexY.toFixed(1)}]`;
624
+ }
625
+ document.getElementById('rangeValue').textContent = rangeText;
626
+
627
+ // Calculate intercepts
628
+ let xIntercepts = [];
629
+ if (a !== 0) {
630
+ const discriminant = b * b - 4 * a * c;
631
+ if (discriminant >= 0) {
632
+ const sqrtDiscriminant = Math.sqrt(discriminant);
633
+ const x1 = (-b + sqrtDiscriminant) / (2 * a);
634
+ const x2 = (-b - sqrtDiscriminant) / (2 * a);
635
+
636
+ xIntercepts.push(`(${x1.toFixed(1)},0)`);
637
+ if (discriminant > 0) {
638
+ xIntercepts.push(`(${x2.toFixed(1)},0)`);
639
+ }
640
+ }
641
+ } else if (b !== 0) {
642
+ // Linear case
643
+ const xIntercept = -c / b;
644
+ xIntercepts.push(`(${xIntercept.toFixed(1)},0)`);
645
+ } else if (c === 0) {
646
+ // Zero function
647
+ xIntercepts.push('Tots els punts de X');
648
+ }
649
+
650
+ document.getElementById('interceptsValue').textContent =
651
+ `X: ${xIntercepts.join(', ') || 'Cap'}, Y: (0,${c})`;
652
+
653
+ // Calculate growth
654
+ let growthText = '';
655
+ if (a > 0) {
656
+ const vertexX = -b / (2 * a);
657
+ growthText = `Decreixent en (-∞, ${vertexX.toFixed(1)}), Creixent en (${vertexX.toFixed(1)}, ∞)`;
658
+ } else if (a < 0) {
659
+ const vertexX = -b / (2 * a);
660
+ growthText = `Creixent en (-∞, ${vertexX.toFixed(1)}), Decreixent en (${vertexX.toFixed(1)}, ∞)`;
661
+ } else if (b !== 0) {
662
+ growthText = b > 0 ? 'Creixent en tot el domini' : 'Decreixent en tot el domini';
663
+ } else {
664
+ growthText = 'Constant';
665
+ }
666
+
667
+ document.getElementById('growthValue').textContent = growthText;
668
+ }
669
+
670
+ function updateInteractiveChart(data, label) {
671
+ window.interactiveChart.data.datasets[0].data = data;
672
+ window.interactiveChart.data.datasets[0].label = label;
673
+ window.interactiveChart.update();
674
+ }
675
+
676
+ function checkChallenge() {
677
+ const functionType = document.getElementById('functionType').value;
678
+ const feedback = document.getElementById('challengeFeedback');
679
+ feedback.classList.remove('hidden', 'bg-red-100', 'border-red-400', 'text-red-700',
680
+ 'bg-green-100', 'border-green-400', 'text-green-700');
681
+
682
+ if (functionType !== 'linear') {
683
+ feedback.classList.add('bg-red-100', 'border-red-400', 'text-red-700');
684
+ feedback.innerHTML = '<i class="fas fa-times-circle mr-2"></i> La funció hauria de ser lineal per complir totes les condicions.';
685
+ return;
686
+ }
687
+
688
+ const slope = parseFloat(document.getElementById('linearSlope').value);
689
+ const intercept = parseFloat(document.getElementById('linearIntercept').value);
690
+
691
+ // Check conditions
692
+ const yInterceptOK = Math.abs(intercept - 2) < 0.1;
693
+ const growingOK = slope > 0;
694
+
695
+ // Calculate x-intercept
696
+ let xInterceptOK = false;
697
+ if (slope !== 0) {
698
+ const xIntercept = -intercept / slope;
699
+ xInterceptOK = Math.abs(xIntercept - (-2)) < 0.1;
700
+ }
701
+
702
+ if (yInterceptOK && growingOK && xInterceptOK) {
703
+ feedback.classList.add('bg-green-100', 'border-green-400', 'text-green-700');
704
+ feedback.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Perfecte! Has trobat la funció f(x) = x + 2 que compleix totes les condicions.';
705
+ } else {
706
+ feedback.classList.add('bg-red-100', 'border-red-400', 'text-red-700');
707
+ let message = '<i class="fas fa-times-circle mr-2"></i> Encara no compleixes totes les condicions:';
708
+
709
+ if (!yInterceptOK) {
710
+ message += '<br>- El punt de tall amb Y ha de ser (0,2)';
711
+ }
712
+ if (!growingOK) {
713
+ message += '<br>- La funció ha de ser creixent (pendent positiu)';
714
+ }
715
+ if (!xInterceptOK) {
716
+ message += '<br>- Falta el punt de tall amb X en (-2,0)';
717
+ }
718
+
719
+ feedback.innerHTML = message + '<br><br>Pista: Prova amb una funció lineal amb pendent 1 i ordenada a l\'origen 2.';
720
+ }
721
+ }
722
+ </script>
723
+ <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=Rubenhugging/caractfuncions" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
724
+ </html>