Spaces:
Running
Running
| <html lang="ca"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Matemàtiques 4t ESO - Funcions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| .function-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .graph-container { | |
| transition: all 0.3s ease; | |
| } | |
| .highlight { | |
| background-color: #FEF3C7; | |
| transition: background-color 0.3s; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #3B82F6; | |
| font-weight: 600; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-10 text-center"> | |
| <h1 class="text-4xl font-bold text-blue-600 mb-2">Funcions Matemàtiques</h1> | |
| <p class="text-xl text-gray-600">Aprendre les característiques bàsiques de les funcions per a 4t d'ESO</p> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium"> | |
| Nivell: Mitjà | |
| </span> | |
| </div> | |
| </header> | |
| <!-- Navigation Tabs --> | |
| <div class="flex border-b border-gray-200 mb-8"> | |
| <button onclick="changeTab('theory')" class="tab-active px-6 py-3 text-blue-600 focus:outline-none"> | |
| <i class="fas fa-book mr-2"></i>Teoria | |
| </button> | |
| <button onclick="changeTab('practice')" class="px-6 py-3 text-gray-500 hover:text-blue-600 focus:outline-none"> | |
| <i class="fas fa-pen mr-2"></i>Pràctica | |
| </button> | |
| <button onclick="changeTab('interactive')" class="px-6 py-3 text-gray-500 hover:text-blue-600 focus:outline-none"> | |
| <i class="fas fa-sliders mr-2"></i>Interactiu | |
| </button> | |
| </div> | |
| <!-- Theory Tab Content --> | |
| <div id="theory-tab" class="tab-content"> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Concept Card --> | |
| <div class="bg-white p-6 rounded-lg shadow-md function-card"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-lightbulb text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Què és una funció?</h3> | |
| <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> | |
| <div class="bg-blue-50 p-3 rounded"> | |
| <p class="text-blue-800 font-mono">f: X → Y</p> | |
| </div> | |
| </div> | |
| <!-- Types Card --> | |
| <div class="bg-white p-6 rounded-lg shadow-md function-card"> | |
| <div class="text-green-500 mb-4"> | |
| <i class="fas fa-project-diagram text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Tipus de funcions</h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li><span class="font-medium">Lineals:</span> f(x) = mx + n</li> | |
| <li><span class="font-medium">Quadràtiques:</span> f(x) = ax² + bx + c</li> | |
| <li><span class="font-medium">Racionals:</span> f(x) = P(x)/Q(x)</li> | |
| <li><span class="font-medium">Exponencials:</span> f(x) = aˣ</li> | |
| </ul> | |
| </div> | |
| <!-- Characteristics Card --> | |
| <div class="bg-white p-6 rounded-lg shadow-md function-card"> | |
| <div class="text-purple-500 mb-4"> | |
| <i class="fas fa-chart-line text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Característiques</h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li><span class="font-medium">Domini:</span> Valors que pot prendre x</li> | |
| <li><span class="font-medium">Imatge:</span> Valors que pot prendre y</li> | |
| <li><span class="font-medium">Creixement:</span> On augmenta/disminueix</li> | |
| <li><span class="font-medium">Màxims i mínims:</span> Punts alts/baixos</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Detailed Explanation --> | |
| <div class="bg-white p-6 rounded-lg shadow-md mb-8"> | |
| <h2 class="text-2xl font-bold text-blue-600 mb-4">Anàlisi d'una Funció</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">1. Domini i Imatge</h3> | |
| <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> | |
| <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> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4"> | |
| <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> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">2. Punts de tall</h3> | |
| <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> | |
| <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> | |
| <div class="bg-green-50 border-l-4 border-green-400 p-4"> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Graph Example --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-2xl font-bold text-blue-600 mb-4">Exemple Gràfic</h2> | |
| <div class="graph-container bg-gray-50 p-4 rounded-lg"> | |
| <canvas id="theoryGraph" height="300"></canvas> | |
| </div> | |
| <div class="mt-4 grid md:grid-cols-3 gap-4"> | |
| <div class="bg-blue-50 p-3 rounded"> | |
| <p class="text-sm font-medium text-blue-800">Funció: <span id="theoryFunction" class="font-mono">f(x) = x² - 4</span></p> | |
| </div> | |
| <div class="bg-green-50 p-3 rounded"> | |
| <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> | |
| </div> | |
| <div class="bg-purple-50 p-3 rounded"> | |
| <p class="text-sm font-medium text-purple-800">Punt de tall Y: <span id="theoryYIntercept" class="font-mono">(0,-4)</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Practice Tab Content --> | |
| <div id="practice-tab" class="tab-content hidden"> | |
| <div class="bg-white p-6 rounded-lg shadow-md mb-8"> | |
| <h2 class="text-2xl font-bold text-blue-600 mb-6">Exercicis Pràctics</h2> | |
| <!-- Exercise 1 --> | |
| <div class="mb-8 p-4 border border-gray-200 rounded-lg"> | |
| <div class="flex items-start mb-4"> | |
| <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> | |
| <div> | |
| <h3 class="text-lg font-semibold">Domini d'una funció</h3> | |
| <p class="text-gray-600">Determina el domini de la següent funció:</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded mb-4"> | |
| <p class="font-mono text-lg">f(x) = √(x + 3)</p> | |
| </div> | |
| <div class="flex flex-wrap gap-3 mb-4"> | |
| <button onclick="checkAnswer('a1', false)" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg">a) ℝ</button> | |
| <button onclick="checkAnswer('a1', false)" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg">b) (-∞, -3]</button> | |
| <button onclick="checkAnswer('a1', true)" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg">c) [-3, ∞)</button> | |
| <button onclick="checkAnswer('a1', false)" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg">d) (0, ∞)</button> | |
| </div> | |
| <div id="feedback1" class="hidden p-3 rounded"></div> | |
| </div> | |
| <!-- Exercise 2 --> | |
| <div class="mb-8 p-4 border border-gray-200 rounded-lg"> | |
| <div class="flex items-start mb-4"> | |
| <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> | |
| <div> | |
| <h3 class="text-lg font-semibold">Punts de tall</h3> | |
| <p class="text-gray-600">Troba els punts de tall amb els eixos de la funció:</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded mb-4"> | |
| <p class="font-mono text-lg">f(x) = x² - 5x + 6</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Punts de tall amb X:</label> | |
| <input type="text" id="rootsInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Ex: (2,0), (3,0)"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Punt de tall amb Y:</label> | |
| <input type="text" id="yInterceptInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Ex: (0,6)"> | |
| </div> | |
| </div> | |
| <button onclick="checkExercise2()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Comprova</button> | |
| <div id="feedback2" class="hidden mt-3 p-3 rounded"></div> | |
| </div> | |
| <!-- Exercise 3 --> | |
| <div class="p-4 border border-gray-200 rounded-lg"> | |
| <div class="flex items-start mb-4"> | |
| <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> | |
| <div> | |
| <h3 class="text-lg font-semibold">Gràfica d'una funció</h3> | |
| <p class="text-gray-600">Observa la gràfica i respon:</p> | |
| </div> | |
| </div> | |
| <div class="graph-container bg-gray-50 p-4 rounded mb-4"> | |
| <canvas id="practiceGraph" height="250"></canvas> | |
| </div> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q3a" name="practiceQuestion" value="a" class="mr-2"> | |
| <label for="q3a">La funció és creixent en tot el seu domini</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q3b" name="practiceQuestion" value="b" class="mr-2"> | |
| <label for="q3b">La funció té un màxim en x=0</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q3c" name="practiceQuestion" value="c" class="mr-2"> | |
| <label for="q3c">El domini de la funció és (0, ∞)</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q3d" name="practiceQuestion" value="d" class="mr-2"> | |
| <label for="q3d">La funció és simètrica respecte l'origen</label> | |
| </div> | |
| </div> | |
| <button onclick="checkExercise3()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Comprova</button> | |
| <div id="feedback3" class="hidden mt-3 p-3 rounded"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Interactive Tab Content --> | |
| <div id="interactive-tab" class="tab-content hidden"> | |
| <div class="bg-white p-6 rounded-lg shadow-md mb-8"> | |
| <h2 class="text-2xl font-bold text-blue-600 mb-6">Explorador de Funcions</h2> | |
| <div class="grid md:grid-cols-3 gap-6 mb-6"> | |
| <div class="md:col-span-2"> | |
| <div class="graph-container bg-gray-50 p-4 rounded-lg mb-4"> | |
| <canvas id="interactiveGraph" height="350"></canvas> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> | |
| <h3 class="text-lg font-semibold mb-3">Configura la funció</h3> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Tipus de funció:</label> | |
| <select id="functionType" onchange="updateFunctionType()" class="w-full px-3 py-2 border rounded-lg"> | |
| <option value="linear">Lineal</option> | |
| <option value="quadratic">Quadràtica</option> | |
| <option value="rational">Racional</option> | |
| <option value="exponential">Exponencial</option> | |
| </select> | |
| </div> | |
| <div id="linearParams"> | |
| <div class="mb-3"> | |
| <label class="block text-gray-700 mb-1">Pendent (m):</label> | |
| <input type="range" id="linearSlope" min="-5" max="5" step="0.5" value="1" oninput="updateLinearFunction()" class="w-full"> | |
| <span id="slopeValue" class="text-sm text-gray-600">1</span> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Ordenada a l'origen (n):</label> | |
| <input type="range" id="linearIntercept" min="-5" max="5" step="0.5" value="0" oninput="updateLinearFunction()" class="w-full"> | |
| <span id="interceptValue" class="text-sm text-gray-600">0</span> | |
| </div> | |
| </div> | |
| <div id="quadraticParams" class="hidden"> | |
| <div class="mb-3"> | |
| <label class="block text-gray-700 mb-1">Coeficient a:</label> | |
| <input type="range" id="quadA" min="-2" max="2" step="0.1" value="1" oninput="updateQuadraticFunction()" class="w-full"> | |
| <span id="quadAValue" class="text-sm text-gray-600">1</span> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="block text-gray-700 mb-1">Coeficient b:</label> | |
| <input type="range" id="quadB" min="-5" max="5" step="0.5" value="0" oninput="updateQuadraticFunction()" class="w-full"> | |
| <span id="quadBValue" class="text-sm text-gray-600">0</span> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Coeficient c:</label> | |
| <input type="range" id="quadC" min="-5" max="5" step="0.5" value="0" oninput="updateQuadraticFunction()" class="w-full"> | |
| <span id="quadCValue" class="text-sm text-gray-600">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <h3 class="text-lg font-semibold mb-3">Característiques</h3> | |
| <div class="space-y-2"> | |
| <p><span class="font-medium">Funció:</span> <span id="currentFunction" class="font-mono">f(x) = x</span></p> | |
| <p><span class="font-medium">Domini:</span> <span id="domainValue">ℝ</span></p> | |
| <p><span class="font-medium">Imatge:</span> <span id="rangeValue">ℝ</span></p> | |
| <p><span class="font-medium">Punts de tall:</span> <span id="interceptsValue">X: (0,0), Y: (0,0)</span></p> | |
| <p><span class="font-medium">Creixement:</span> <span id="growthValue">Creixent en tot el domini</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-4"> | |
| <h3 class="text-lg font-semibold mb-3">Desafí</h3> | |
| <p class="text-gray-600 mb-4">Configura una funció que compleixi les següents condicions:</p> | |
| <ul class="list-disc pl-5 mb-4 text-gray-600"> | |
| <li>Punt de tall amb Y en (0,2)</li> | |
| <li>Creixent en tot el seu domini</li> | |
| <li>Punt de tall amb X en (-2,0)</li> | |
| </ul> | |
| <button onclick="checkChallenge()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">Comprova el meu desafi</button> | |
| <div id="challengeFeedback" class="hidden mt-3 p-3 rounded"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Theory Graph | |
| const theoryCtx = document.getElementById('theoryGraph').getContext('2d'); | |
| const theoryChart = new Chart(theoryCtx, { | |
| type: 'line', | |
| data: { | |
| labels: Array.from({length: 21}, (_, i) => i - 10), | |
| datasets: [{ | |
| label: 'f(x) = x² - 4', | |
| data: Array.from({length: 21}, (_, i) => Math.pow(i - 10, 2) - 4), | |
| borderColor: 'rgb(59, 130, 246)', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| borderWidth: 2, | |
| fill: true, | |
| tension: 0.1 | |
| }] | |
| }, | |
| options: getChartOptions() | |
| }); | |
| // Practice Graph | |
| const practiceCtx = document.getElementById('practiceGraph').getContext('2d'); | |
| const practiceChart = new Chart(practiceCtx, { | |
| type: 'line', | |
| data: { | |
| labels: Array.from({length: 21}, (_, i) => i - 10), | |
| datasets: [{ | |
| label: 'f(x) = -x² + 4', | |
| data: Array.from({length: 21}, (_, i) => -Math.pow(i - 10, 2) + 4), | |
| borderColor: 'rgb(16, 185, 129)', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| borderWidth: 2, | |
| fill: true | |
| }] | |
| }, | |
| options: getChartOptions() | |
| }); | |
| // Interactive Graph | |
| const interactiveCtx = document.getElementById('interactiveGraph').getContext('2d'); | |
| window.interactiveChart = new Chart(interactiveCtx, { | |
| type: 'line', | |
| data: { | |
| labels: Array.from({length: 21}, (_, i) => i - 10), | |
| datasets: [{ | |
| label: 'f(x) = x', | |
| data: Array.from({length: 21}, (_, i) => (i - 10)), | |
| borderColor: 'rgb(139, 92, 246)', | |
| backgroundColor: 'rgba(139, 92, 246, 0.1)', | |
| borderWidth: 2, | |
| fill: true, | |
| tension: 0.1 | |
| }] | |
| }, | |
| options: getChartOptions() | |
| }); | |
| // Initialize interactive function controls | |
| updateFunctionType(); | |
| }); | |
| function getChartOptions() { | |
| return { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| grid: { | |
| color: 'rgba(0, 0, 0, 0.05)' | |
| }, | |
| title: { | |
| display: true, | |
| text: 'x' | |
| } | |
| }, | |
| y: { | |
| grid: { | |
| color: 'rgba(0, 0, 0, 0.05)' | |
| }, | |
| title: { | |
| display: true, | |
| text: 'f(x)' | |
| } | |
| } | |
| }, | |
| elements: { | |
| point: { | |
| radius: 0 | |
| } | |
| } | |
| }; | |
| } | |
| // Tab switching | |
| function changeTab(tabName) { | |
| // Update tab buttons | |
| document.querySelectorAll('[onclick^="changeTab"]').forEach(btn => { | |
| btn.classList.remove('tab-active', 'text-blue-600'); | |
| btn.classList.add('text-gray-500'); | |
| }); | |
| event.currentTarget.classList.add('tab-active', 'text-blue-600'); | |
| event.currentTarget.classList.remove('text-gray-500'); | |
| // Update tab content | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.add('hidden'); | |
| }); | |
| document.getElementById(`${tabName}-tab`).classList.remove('hidden'); | |
| } | |
| // Practice exercises | |
| function checkAnswer(exerciseId, isCorrect) { | |
| const feedback = document.getElementById(`feedback${exerciseId.slice(1)}`); | |
| feedback.classList.remove('hidden', 'bg-red-100', 'border-red-400', 'text-red-700', | |
| 'bg-green-100', 'border-green-400', 'text-green-700'); | |
| if (isCorrect) { | |
| feedback.classList.add('bg-green-100', 'border-green-400', 'text-green-700'); | |
| feedback.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Correcte! Molt bé.'; | |
| } else { | |
| feedback.classList.add('bg-red-100', 'border-red-400', 'text-red-700'); | |
| feedback.innerHTML = '<i class="fas fa-times-circle mr-2"></i> Incorrecte. Torna a intentar-ho.'; | |
| } | |
| } | |
| function checkExercise2() { | |
| const rootsInput = document.getElementById('rootsInput').value.trim(); | |
| const yInterceptInput = document.getElementById('yInterceptInput').value.trim(); | |
| const feedback = document.getElementById('feedback2'); | |
| feedback.classList.remove('hidden', 'bg-red-100', 'border-red-400', 'text-red-700', | |
| 'bg-green-100', 'border-green-400', 'text-green-700'); | |
| // Check answers (simplified validation for demo) | |
| const rootsCorrect = rootsInput.includes('2,0') && rootsInput.includes('3,0'); | |
| const yInterceptCorrect = yInterceptInput.includes('0,6'); | |
| if (rootsCorrect && yInterceptCorrect) { | |
| feedback.classList.add('bg-green-100', 'border-green-400', 'text-green-700'); | |
| feedback.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Tot correcte! Excel·lent treball.'; | |
| } else { | |
| feedback.classList.add('bg-red-100', 'border-red-400', 'text-red-700'); | |
| let message = '<i class="fas fa-times-circle mr-2"></i> Alguna resposta incorrecta. '; | |
| if (!rootsCorrect && !yInterceptCorrect) { | |
| message += 'Els punts de tall amb X són (2,0) i (3,0). El punt de tall amb Y és (0,6).'; | |
| } else if (!rootsCorrect) { | |
| message += 'Els punts de tall amb X no són correctes. Haurien de ser (2,0) i (3,0).'; | |
| } else { | |
| message += 'El punt de tall amb Y no és correcte. Hauria de ser (0,6).'; | |
| } | |
| feedback.innerHTML = message; | |
| } | |
| } | |
| function checkExercise3() { | |
| const selectedOption = document.querySelector('input[name="practiceQuestion"]:checked'); | |
| const feedback = document.getElementById('feedback3'); | |
| feedback.classList.remove('hidden', 'bg-red-100', 'border-red-400', 'text-red-700', | |
| 'bg-green-100', 'border-green-400', 'text-green-700'); | |
| if (!selectedOption) { | |
| feedback.classList.add('bg-yellow-100', 'border-yellow-400', 'text-yellow-700'); | |
| feedback.innerHTML = '<i class="fas fa-exclamation-circle mr-2"></i> Selecciona una resposta abans de comprovar.'; | |
| return; | |
| } | |
| if (selectedOption.value === 'b') { | |
| feedback.classList.add('bg-green-100', 'border-green-400', 'text-green-700'); | |
| feedback.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Correcte! La funció té un màxim en x=0.'; | |
| } else { | |
| feedback.classList.add('bg-red-100', 'border-red-400', 'text-red-700'); | |
| 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".'; | |
| } | |
| } | |
| // Interactive function explorer | |
| function updateFunctionType() { | |
| const functionType = document.getElementById('functionType').value; | |
| // Hide all parameter sections | |
| document.querySelectorAll('[id$="Params"]').forEach(el => { | |
| el.classList.add('hidden'); | |
| }); | |
| // Show the selected one | |
| document.getElementById(`${functionType}Params`).classList.remove('hidden'); | |
| // Update the function | |
| if (functionType === 'linear') { | |
| updateLinearFunction(); | |
| } else if (functionType === 'quadratic') { | |
| updateQuadraticFunction(); | |
| } | |
| } | |
| function updateLinearFunction() { | |
| const slope = parseFloat(document.getElementById('linearSlope').value); | |
| const intercept = parseFloat(document.getElementById('linearIntercept').value); | |
| // Update displayed values | |
| document.getElementById('slopeValue').textContent = slope; | |
| document.getElementById('interceptValue').textContent = intercept; | |
| // Update function display | |
| let functionText = 'f(x) = '; | |
| if (slope !== 0) { | |
| functionText += (slope === 1) ? 'x' : (slope === -1) ? '-x' : `${slope}x`; | |
| } | |
| if (intercept !== 0) { | |
| if (slope !== 0) { | |
| functionText += (intercept > 0) ? ` + ${intercept}` : ` - ${Math.abs(intercept)}`; | |
| } else { | |
| functionText += intercept; | |
| } | |
| } else if (slope === 0) { | |
| functionText += '0'; | |
| } | |
| document.getElementById('currentFunction').textContent = functionText; | |
| // Update chart | |
| const data = Array.from({length: 21}, (_, i) => slope * (i - 10) + intercept); | |
| updateInteractiveChart(data, functionText); | |
| // Update characteristics | |
| document.getElementById('domainValue').textContent = 'ℝ'; | |
| document.getElementById('rangeValue').textContent = 'ℝ'; | |
| // Calculate intercepts | |
| let xIntercepts = []; | |
| if (slope !== 0) { | |
| const xIntercept = -intercept / slope; | |
| xIntercepts.push(`(${xIntercept.toFixed(1)},0)`); | |
| } | |
| document.getElementById('interceptsValue').textContent = | |
| `X: ${xIntercepts.join(', ') || 'Cap'}, Y: (0,${intercept})`; | |
| document.getElementById('growthValue').textContent = | |
| slope > 0 ? 'Creixent en tot el domini' : (slope < 0 ? 'Decreixent en tot el domini' : 'Constant'); | |
| } | |
| function updateQuadraticFunction() { | |
| const a = parseFloat(document.getElementById('quadA').value); | |
| const b = parseFloat(document.getElementById('quadB').value); | |
| const c = parseFloat(document.getElementById('quadC').value); | |
| // Update displayed values | |
| document.getElementById('quadAValue').textContent = a; | |
| document.getElementById('quadBValue').textContent = b; | |
| document.getElementById('quadCValue').textContent = c; | |
| // Update function display | |
| let functionText = 'f(x) = '; | |
| if (a !== 0) { | |
| functionText += (a === 1) ? 'x²' : (a === -1) ? '-x²' : `${a}x²`; | |
| } | |
| if (b !== 0) { | |
| if (a !== 0) { | |
| functionText += (b > 0) ? ` + ${b}x` : ` - ${Math.abs(b)}x`; | |
| } else { | |
| functionText += (b === 1) ? 'x' : (b === -1) ? '-x' : `${b}x`; | |
| } | |
| } | |
| if (c !== 0) { | |
| if (a !== 0 || b !== 0) { | |
| functionText += (c > 0) ? ` + ${c}` : ` - ${Math.abs(c)}`; | |
| } else { | |
| functionText += c; | |
| } | |
| } else if (a === 0 && b === 0) { | |
| functionText += '0'; | |
| } | |
| document.getElementById('currentFunction').textContent = functionText; | |
| // Update chart | |
| const data = Array.from({length: 21}, (_, i) => { | |
| const x = i - 10; | |
| return a * x * x + b * x + c; | |
| }); | |
| updateInteractiveChart(data, functionText); | |
| // Update characteristics | |
| document.getElementById('domainValue').textContent = 'ℝ'; | |
| // Calculate range | |
| let rangeText = 'ℝ'; | |
| if (a !== 0) { | |
| const vertexY = c - (b * b) / (4 * a); | |
| rangeText = a > 0 ? `[${vertexY.toFixed(1)}, ∞)` : `(-∞, ${vertexY.toFixed(1)}]`; | |
| } | |
| document.getElementById('rangeValue').textContent = rangeText; | |
| // Calculate intercepts | |
| let xIntercepts = []; | |
| if (a !== 0) { | |
| const discriminant = b * b - 4 * a * c; | |
| if (discriminant >= 0) { | |
| const sqrtDiscriminant = Math.sqrt(discriminant); | |
| const x1 = (-b + sqrtDiscriminant) / (2 * a); | |
| const x2 = (-b - sqrtDiscriminant) / (2 * a); | |
| xIntercepts.push(`(${x1.toFixed(1)},0)`); | |
| if (discriminant > 0) { | |
| xIntercepts.push(`(${x2.toFixed(1)},0)`); | |
| } | |
| } | |
| } else if (b !== 0) { | |
| // Linear case | |
| const xIntercept = -c / b; | |
| xIntercepts.push(`(${xIntercept.toFixed(1)},0)`); | |
| } else if (c === 0) { | |
| // Zero function | |
| xIntercepts.push('Tots els punts de X'); | |
| } | |
| document.getElementById('interceptsValue').textContent = | |
| `X: ${xIntercepts.join(', ') || 'Cap'}, Y: (0,${c})`; | |
| // Calculate growth | |
| let growthText = ''; | |
| if (a > 0) { | |
| const vertexX = -b / (2 * a); | |
| growthText = `Decreixent en (-∞, ${vertexX.toFixed(1)}), Creixent en (${vertexX.toFixed(1)}, ∞)`; | |
| } else if (a < 0) { | |
| const vertexX = -b / (2 * a); | |
| growthText = `Creixent en (-∞, ${vertexX.toFixed(1)}), Decreixent en (${vertexX.toFixed(1)}, ∞)`; | |
| } else if (b !== 0) { | |
| growthText = b > 0 ? 'Creixent en tot el domini' : 'Decreixent en tot el domini'; | |
| } else { | |
| growthText = 'Constant'; | |
| } | |
| document.getElementById('growthValue').textContent = growthText; | |
| } | |
| function updateInteractiveChart(data, label) { | |
| window.interactiveChart.data.datasets[0].data = data; | |
| window.interactiveChart.data.datasets[0].label = label; | |
| window.interactiveChart.update(); | |
| } | |
| function checkChallenge() { | |
| const functionType = document.getElementById('functionType').value; | |
| const feedback = document.getElementById('challengeFeedback'); | |
| feedback.classList.remove('hidden', 'bg-red-100', 'border-red-400', 'text-red-700', | |
| 'bg-green-100', 'border-green-400', 'text-green-700'); | |
| if (functionType !== 'linear') { | |
| feedback.classList.add('bg-red-100', 'border-red-400', 'text-red-700'); | |
| feedback.innerHTML = '<i class="fas fa-times-circle mr-2"></i> La funció hauria de ser lineal per complir totes les condicions.'; | |
| return; | |
| } | |
| const slope = parseFloat(document.getElementById('linearSlope').value); | |
| const intercept = parseFloat(document.getElementById('linearIntercept').value); | |
| // Check conditions | |
| const yInterceptOK = Math.abs(intercept - 2) < 0.1; | |
| const growingOK = slope > 0; | |
| // Calculate x-intercept | |
| let xInterceptOK = false; | |
| if (slope !== 0) { | |
| const xIntercept = -intercept / slope; | |
| xInterceptOK = Math.abs(xIntercept - (-2)) < 0.1; | |
| } | |
| if (yInterceptOK && growingOK && xInterceptOK) { | |
| feedback.classList.add('bg-green-100', 'border-green-400', 'text-green-700'); | |
| 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.'; | |
| } else { | |
| feedback.classList.add('bg-red-100', 'border-red-400', 'text-red-700'); | |
| let message = '<i class="fas fa-times-circle mr-2"></i> Encara no compleixes totes les condicions:'; | |
| if (!yInterceptOK) { | |
| message += '<br>- El punt de tall amb Y ha de ser (0,2)'; | |
| } | |
| if (!growingOK) { | |
| message += '<br>- La funció ha de ser creixent (pendent positiu)'; | |
| } | |
| if (!xInterceptOK) { | |
| message += '<br>- Falta el punt de tall amb X en (-2,0)'; | |
| } | |
| feedback.innerHTML = message + '<br><br>Pista: Prova amb una funció lineal amb pendent 1 i ordenada a l\'origen 2.'; | |
| } | |
| } | |
| </script> | |
| <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> | |
| </html> |