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 2n ESO - Equacions de Primer Grau</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> | |
| .equation-input { | |
| font-family: 'Courier New', monospace; | |
| font-size: 1.2rem; | |
| } | |
| .step-by-step { | |
| background-color: #f8fafc; | |
| border-left: 4px solid #3b82f6; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .correct-answer { | |
| background-color: #d1fae5; | |
| border-left: 4px solid #10b981; | |
| } | |
| .incorrect-answer { | |
| background-color: #fee2e2; | |
| border-left: 4px solid #ef4444; | |
| } | |
| .math-symbol { | |
| font-family: 'Times New Roman', serif; | |
| font-style: italic; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-blue-600 mb-2"> | |
| <i class="fas fa-square-root-alt mr-2"></i>Equacions de Primer Grau | |
| </h1> | |
| <p class="text-xl text-gray-600">Aplicaci贸 interactiva per a 2n d'ESO</p> | |
| <div class="w-full bg-blue-100 h-1 mt-4 rounded-full"></div> | |
| </header> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <!-- Sidebar navigation --> | |
| <div class="w-full md:w-1/4 bg-white p-6 rounded-lg shadow-md h-fit"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800"> | |
| <i class="fas fa-bars mr-2 text-blue-500"></i>Continguts | |
| </h2> | |
| <ul class="space-y-2"> | |
| <li> | |
| <button onclick="showTab('basic')" class="tab-button w-full text-left px-4 py-2 rounded-lg bg-blue-50 text-blue-700 font-medium hover:bg-blue-100 transition"> | |
| <i class="fas fa-calculator mr-2"></i>Equacions b脿siques | |
| </button> | |
| </li> | |
| <li> | |
| <button onclick="showTab('denominators')" class="tab-button w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100 transition"> | |
| <i class="fas fa-divide mr-2"></i>Amb denominadors | |
| </button> | |
| </li> | |
| <li> | |
| <button onclick="showTab('parentheses')" class="tab-button w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100 transition"> | |
| <i class="fas fa-brackets-curly mr-2"></i>Amb par猫ntesis | |
| </button> | |
| </li> | |
| <li> | |
| <button onclick="showTab('problems')" class="tab-button w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100 transition"> | |
| <i class="fas fa-question-circle mr-2"></i>Problemes | |
| </button> | |
| </li> | |
| <li> | |
| <button onclick="showTab('graphic')" class="tab-button w-full text-left px-4 py-2 rounded-lg hover:bg-gray-100 transition"> | |
| <i class="fas fa-chart-line mr-2"></i>Representaci贸 gr脿fica | |
| </button> | |
| </li> | |
| </ul> | |
| <div class="mt-8 pt-4 border-t border-gray-200"> | |
| <h3 class="font-medium text-gray-700 mb-2"> | |
| <i class="fas fa-trophy mr-2 text-yellow-500"></i>El teu progr茅s | |
| </h3> | |
| <div class="bg-gray-100 rounded-full h-4 mb-2"> | |
| <div id="progress-bar" class="bg-green-500 h-4 rounded-full" style="width: 20%"></div> | |
| </div> | |
| <p class="text-sm text-gray-600">Has completat <span id="progress-percent">20</span>%</p> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="w-full md:w-3/4"> | |
| <!-- Basic equations tab --> | |
| <div id="basic" class="tab-content active bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4"> | |
| <i class="fas fa-calculator mr-2 text-blue-500"></i>Equacions B脿siques | |
| </h2> | |
| <p class="text-gray-600 mb-6">Les equacions de primer grau s贸n aquelles on la inc貌gnita (normalment x) no est脿 elevada a cap exponent. Per resoldre-les, hem d'a茂llar la x.</p> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-700">Exemple resolt</h3> | |
| <div class="step-by-step p-4 rounded-lg mb-4"> | |
| <p class="font-medium mb-2">Resol: 3x + 5 = 17</p> | |
| <div class="space-y-2 ml-4"> | |
| <p>1. Restem 5 als dos costats: <span class="math-symbol">3x = 17 - 5</span></p> | |
| <p>2. Simplifiquem: <span class="math-symbol">3x = 12</span></p> | |
| <p>3. Dividim ambd贸s costats per 3: <span class="math-symbol">x = 12 / 3</span></p> | |
| <p>4. Soluci贸: <span class="math-symbol">x = 4</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="practice-section"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-700">Practica</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="mb-3">Resol la seg眉ent equaci贸:</p> | |
| <p class="text-xl font-mono mb-4">2x - 7 = 15</p> | |
| <div class="flex items-center mb-4"> | |
| <span class="mr-2">x =</span> | |
| <input type="number" id="basic-answer" class="equation-input border border-gray-300 rounded px-3 py-2 w-20"> | |
| <button onclick="checkBasicAnswer()" class="ml-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition"> | |
| Comprova | |
| </button> | |
| </div> | |
| <div id="basic-feedback" class="hidden p-3 rounded"></div> | |
| <button onclick="showBasicSolution()" class="mt-2 text-blue-500 hover:text-blue-700 text-sm"> | |
| <i class="fas fa-lightbulb mr-1"></i>Mostra la soluci贸 | |
| </button> | |
| <div id="basic-solution" class="hidden mt-3 step-by-step p-3 rounded-lg"> | |
| <p class="font-medium mb-2">Soluci贸 pas a pas:</p> | |
| <div class="space-y-2 ml-4"> | |
| <p>1. Sumem 7 als dos costats: <span class="math-symbol">2x = 15 + 7</span></p> | |
| <p>2. Simplifiquem: <span class="math-symbol">2x = 22</span></p> | |
| <p>3. Dividim ambd贸s costats per 2: <span class="math-symbol">x = 22 / 2</span></p> | |
| <p>4. Soluci贸: <span class="math-symbol">x = 11</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Equations with denominators tab --> | |
| <div id="denominators" class="tab-content bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4"> | |
| <i class="fas fa-divide mr-2 text-blue-500"></i>Equacions amb Denominadors | |
| </h2> | |
| <p class="text-gray-600 mb-6">Quan una equaci贸 t茅 denominadors, el primer pas 茅s eliminar-los trobant el m铆nim com煤 m煤ltiple (MCM) i multiplicant tota l'equaci贸 per aquest valor.</p> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-700">Exemple resolt</h3> | |
| <div class="step-by-step p-4 rounded-lg mb-4"> | |
| <p class="font-medium mb-2">Resol: (x/2) + (x/3) = 5</p> | |
| <div class="space-y-2 ml-4"> | |
| <p>1. Trobar MCM de denominadors (2 i 3): <span class="math-symbol">MCM = 6</span></p> | |
| <p>2. Multiplicar tota l'equaci贸 per 6: <span class="math-symbol">6*(x/2) + 6*(x/3) = 6*5</span></p> | |
| <p>3. Simplificar: <span class="math-symbol">3x + 2x = 30</span></p> | |
| <p>4. Combinar termes: <span class="math-symbol">5x = 30</span></p> | |
| <p>5. Dividir per 5: <span class="math-symbol">x = 6</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="practice-section"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-700">Practica</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="mb-3">Resol la seg眉ent equaci贸:</p> | |
| <p class="text-xl font-mono mb-4">(x/4) - (x/5) = 2</p> | |
| <div class="flex items-center mb-4"> | |
| <span class="mr-2">x =</span> | |
| <input type="number" id="denominators-answer" class="equation-input border border-gray-300 rounded px-3 py-2 w-20"> | |
| <button onclick="checkDenominatorsAnswer()" class="ml-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition"> | |
| Comprova | |
| </button> | |
| </div> | |
| <div id="denominators-feedback" class="hidden p-3 rounded"></div> | |
| <button onclick="showDenominatorsSolution()" class="mt-2 text-blue-500 hover:text-blue-700 text-sm"> | |
| <i class="fas fa-lightbulb mr-1"></i>Mostra la soluci贸 | |
| </button> | |
| <div id="denominators-solution" class="hidden mt-3 step-by-step p-3 rounded-lg"> | |
| <p class="font-medium mb-2">Soluci贸 pas a pas:</p> | |
| <div class="space-y-2 ml-4"> | |
| <p>1. Trobar MCM de denominadors (4 i 5): <span class="math-symbol">MCM = 20</span></p> | |
| <p>2. Multiplicar tota l'equaci贸 per 20: <span class="math-symbol">20*(x/4) - 20*(x/5) = 20*2</span></p> | |
| <p>3. Simplificar: <span class="math-symbol">5x - 4x = 40</span></p> | |
| <p>4. Combinar termes: <span class="math-symbol">x = 40</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Equations with parentheses tab --> | |
| <div id="parentheses" class="tab-content bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4"> | |
| <i class="fas fa-brackets-curly mr-2 text-blue-500"></i>Equacions amb Par猫ntesis | |
| </h2> | |
| <p class="text-gray-600 mb-6">Quan una equaci贸 t茅 par猫ntesis, el primer pas 茅s eliminar-los aplicant la propietat distributiva o resolent primer les operacions dins dels par猫ntesis.</p> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-700">Exemple resolt</h3> | |
| <div class="step-by-step p-4 rounded-lg mb-4"> | |
| <p class="font-medium mb-2">Resol: 2(x + 3) = x - 4</p> | |
| <div class="space-y-2 ml-4"> | |
| <p>1. Aplicar propietat distributiva: <span class="math-symbol">2x + 6 = x - 4</span></p> | |
| <p>2. Restar x als dos costats: <span class="math-symbol">x + 6 = -4</span></p> | |
| <p>3. Restar 6 als dos costats: <span class="math-symbol">x = -10</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="practice-section"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-700">Practica</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="mb-3">Resol la seg眉ent equaci贸:</p> | |
| <p class="text-xl font-mono mb-4">3(x - 2) = 2(x + 1)</p> | |
| <div class="flex items-center mb-4"> | |
| <span class="mr-2">x =</span> | |
| <input type="number" id="parentheses-answer" class="equation-input border border-gray-300 rounded px-3 py-2 w-20"> | |
| <button onclick="checkParenthesesAnswer()" class="ml-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition"> | |
| Comprova | |
| </button> | |
| </div> | |
| <div id="parentheses-feedback" class="hidden p-3 rounded"></div> | |
| <button onclick="showParenthesesSolution()" class="mt-2 text-blue-500 hover:text-blue-700 text-sm"> | |
| <i class="fas fa-lightbulb mr-1"></i>Mostra la soluci贸 | |
| </button> | |
| <div id="parentheses-solution" class="hidden mt-3 step-by-step p-3 rounded-lg"> | |
| <p class="font-medium mb-2">Soluci贸 pas a pas:</p> | |
| <div class="space-y-2 ml-4"> | |
| <p>1. Aplicar propietat distributiva: <span class="math-symbol">3x - 6 = 2x + 2</span></p> | |
| <p>2. Restar 2x als dos costats: <span class="math-symbol">x - 6 = 2</span></p> | |
| <p>3. Sumar 6 als dos costats: <span class="math-symbol">x = 8</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Word problems tab --> | |
| <div id="problems" class="tab-content bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4"> | |
| <i class="fas fa-question-circle mr-2 text-blue-500"></i>Problemes amb Equacions | |
| </h2> | |
| <p class="text-gray-600 mb-6">Els problemes d'equacions consisteixen en traduir un enunciat verbal a una equaci贸 matem脿tica i despr茅s resoldre-la.</p> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-700">Exemple resolt</h3> | |
| <div class="step-by-step p-4 rounded-lg mb-4"> | |
| <p class="font-medium mb-2">Problema: Si sumem 8 al doble d'un nombre, obtenim 26. Quin 茅s aquest nombre?</p> | |
| <div class="space-y-2 ml-4"> | |
| <p>1. Definir la inc貌gnita: <span class="math-symbol">x = el nombre buscat</span></p> | |
| <p>2. Plantejar l'equaci贸: <span class="math-symbol">2x + 8 = 26</span></p> | |
| <p>3. Restar 8: <span class="math-symbol">2x = 18</span></p> | |
| <p>4. Dividir per 2: <span class="math-symbol">x = 9</span></p> | |
| <p>5. Resposta: El nombre 茅s 9</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="practice-section"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-700">Practica</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="mb-3">Problema: La meitat d'un nombre m茅s el seu triple 茅s igual a 28. Quin 茅s aquest nombre?</p> | |
| <div class="flex items-center mb-4"> | |
| <span class="mr-2">x =</span> | |
| <input type="number" id="problem-answer" class="equation-input border border-gray-300 rounded px-3 py-2 w-20"> | |
| <button onclick="checkProblemAnswer()" class="ml-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition"> | |
| Comprova | |
| </button> | |
| </div> | |
| <div id="problem-feedback" class="hidden p-3 rounded"></div> | |
| <button onclick="showProblemSolution()" class="mt-2 text-blue-500 hover:text-blue-700 text-sm"> | |
| <i class="fas fa-lightbulb mr-1"></i>Mostra la soluci贸 | |
| </button> | |
| <div id="problem-solution" class="hidden mt-3 step-by-step p-3 rounded-lg"> | |
| <p class="font-medium mb-2">Soluci贸 pas a pas:</p> | |
| <div class="space-y-2 ml-4"> | |
| <p>1. Definir la inc貌gnita: <span class="math-symbol">x = el nombre buscat</span></p> | |
| <p>2. Plantejar l'equaci贸: <span class="math-symbol">(x/2) + 3x = 28</span></p> | |
| <p>3. Eliminar denominadors (MCM=2): <span class="math-symbol">x + 6x = 56</span></p> | |
| <p>4. Combinar termes: <span class="math-symbol">7x = 56</span></p> | |
| <p>5. Dividir per 7: <span class="math-symbol">x = 8</span></p> | |
| <p>6. Resposta: El nombre 茅s 8</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Graphic representation tab --> | |
| <div id="graphic" class="tab-content bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4"> | |
| <i class="fas fa-chart-line mr-2 text-blue-500"></i>Representaci贸 Gr脿fica | |
| </h2> | |
| <p class="text-gray-600 mb-6">Les equacions de primer grau es poden representar gr脿ficament com a l铆nies rectes. La forma general 茅s y = mx + b, on m 茅s el pendent i b 茅s l'ordenada a l'origen.</p> | |
| <div class="mb-8"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-700">Exemple interactiu</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <div class="w-full md:w-1/2"> | |
| <p class="mb-2">Selecciona una equaci贸:</p> | |
| <select id="equation-select" class="border border-gray-300 rounded px-3 py-2 w-full mb-4" onchange="updateGraph()"> | |
| <option value="1">y = 2x + 1</option> | |
| <option value="2">y = -x + 3</option> | |
| <option value="3">y = 0.5x - 2</option> | |
| <option value="4">y = -2x</option> | |
| </select> | |
| <div class="mt-4"> | |
| <p class="font-medium mb-2">Punts clau:</p> | |
| <ul class="list-disc pl-5 space-y-1"> | |
| <li>Ordenada a l'origen (b): punt on la recta talla l'eix Y</li> | |
| <li>Pendent (m): inclinaci贸 de la recta</li> | |
| <li>Arrel: punt on y=0 (tall amb l'eix X)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2"> | |
| <canvas id="equation-chart" class="w-full h-64"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="practice-section"> | |
| <h3 class="text-lg font-semibold mb-3 text-gray-700">Identifica l'equaci贸</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="mb-3">Observa el gr脿fic i selecciona l'equaci贸 que el representa:</p> | |
| <div class="flex flex-col md:flex-row gap-4 mb-4"> | |
| <div class="w-full md:w-1/2"> | |
| <canvas id="quiz-chart" class="w-full h-64"></canvas> | |
| </div> | |
| <div class="w-full md:w-1/2 flex flex-col justify-center"> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="option1" name="graph-quiz" value="1" class="mr-2"> | |
| <label for="option1">y = 3x - 2</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="option2" name="graph-quiz" value="2" class="mr-2"> | |
| <label for="option2">y = -2x + 3</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="option3" name="graph-quiz" value="3" class="mr-2"> | |
| <label for="option3">y = x + 1</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="option4" name="graph-quiz" value="4" class="mr-2"> | |
| <label for="option4">y = -0.5x + 2</label> | |
| </div> | |
| </div> | |
| <button onclick="checkGraphAnswer()" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition"> | |
| Comprova | |
| </button> | |
| </div> | |
| </div> | |
| <div id="graph-feedback" class="hidden p-3 rounded"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab navigation | |
| function showTab(tabId) { | |
| // Hide all tabs | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| // Show selected tab | |
| document.getElementById(tabId).classList.add('active'); | |
| // Update active tab button style | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.classList.remove('bg-blue-50', 'text-blue-700'); | |
| button.classList.add('hover:bg-gray-100'); | |
| }); | |
| // Highlight current tab button | |
| const activeButton = document.querySelector(`button[onclick="showTab('${tabId}')"]`); | |
| activeButton.classList.add('bg-blue-50', 'text-blue-700'); | |
| activeButton.classList.remove('hover:bg-gray-100'); | |
| // Update progress when changing tabs | |
| updateProgress(); | |
| } | |
| // Answer checking functions | |
| function checkBasicAnswer() { | |
| const answer = parseInt(document.getElementById('basic-answer').value); | |
| const feedback = document.getElementById('basic-feedback'); | |
| if (answer === 11) { | |
| feedback.textContent = 'Correcte! Has resolt b茅 l\'equaci贸.'; | |
| feedback.className = 'correct-answer p-3 rounded'; | |
| updateProgress(5); | |
| } else { | |
| feedback.textContent = 'No 茅s correcte. Torna a intentar-ho o mira la soluci贸.'; | |
| feedback.className = 'incorrect-answer p-3 rounded'; | |
| } | |
| feedback.classList.remove('hidden'); | |
| } | |
| function showBasicSolution() { | |
| document.getElementById('basic-solution').classList.remove('hidden'); | |
| } | |
| function checkDenominatorsAnswer() { | |
| const answer = parseInt(document.getElementById('denominators-answer').value); | |
| const feedback = document.getElementById('denominators-feedback'); | |
| if (answer === 40) { | |
| feedback.textContent = 'Correcte! Has resolt b茅 l\'equaci贸 amb denominadors.'; | |
| feedback.className = 'correct-answer p-3 rounded'; | |
| updateProgress(5); | |
| } else { | |
| feedback.textContent = 'No 茅s correcte. Recorda trobar el MCM primer.'; | |
| feedback.className = 'incorrect-answer p-3 rounded'; | |
| } | |
| feedback.classList.remove('hidden'); | |
| } | |
| function showDenominatorsSolution() { | |
| document.getElementById('denominators-solution').classList.remove('hidden'); | |
| } | |
| function checkParenthesesAnswer() { | |
| const answer = parseInt(document.getElementById('parentheses-answer').value); | |
| const feedback = document.getElementById('parentheses-feedback'); | |
| if (answer === 8) { | |
| feedback.textContent = 'Correcte! Has aplicat b茅 la propietat distributiva.'; | |
| feedback.className = 'correct-answer p-3 rounded'; | |
| updateProgress(5); | |
| } else { | |
| feedback.textContent = 'No 茅s correcte. Recorda eliminar els par猫ntesis primer.'; | |
| feedback.className = 'incorrect-answer p-3 rounded'; | |
| } | |
| feedback.classList.remove('hidden'); | |
| } | |
| function showParenthesesSolution() { | |
| document.getElementById('parentheses-solution').classList.remove('hidden'); | |
| } | |
| function checkProblemAnswer() { | |
| const answer = parseInt(document.getElementById('problem-answer').value); | |
| const feedback = document.getElementById('problem-feedback'); | |
| if (answer === 8) { | |
| feedback.textContent = 'Correcte! Has tradu茂t b茅 el problema a una equaci贸.'; | |
| feedback.className = 'correct-answer p-3 rounded'; | |
| updateProgress(10); | |
| } else { | |
| feedback.textContent = 'No 茅s correcte. Assegura\'t de plantejar b茅 l\'equaci贸.'; | |
| feedback.className = 'incorrect-answer p-3 rounded'; | |
| } | |
| feedback.classList.remove('hidden'); | |
| } | |
| function showProblemSolution() { | |
| document.getElementById('problem-solution').classList.remove('hidden'); | |
| } | |
| // Graphic representation | |
| let equationChart; | |
| let quizChart; | |
| function initCharts() { | |
| const ctx = document.getElementById('equation-chart').getContext('2d'); | |
| equationChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: [-3, -2, -1, 0, 1, 2, 3], | |
| datasets: [{ | |
| label: 'y = 2x + 1', | |
| data: [-5, -3, -1, 1, 3, 5, 7], | |
| borderColor: 'rgb(59, 130, 246)', | |
| borderWidth: 2, | |
| fill: false | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| scales: { | |
| x: { | |
| title: { | |
| display: true, | |
| text: 'Eix X' | |
| } | |
| }, | |
| y: { | |
| title: { | |
| display: true, | |
| text: 'Eix Y' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Quiz chart (correct answer is option 2: y = -2x + 3) | |
| const quizCtx = document.getElementById('quiz-chart').getContext('2d'); | |
| quizChart = new Chart(quizCtx, { | |
| type: 'line', | |
| data: { | |
| labels: [-2, -1, 0, 1, 2], | |
| datasets: [{ | |
| data: [7, 5, 3, 1, -1], | |
| borderColor: 'rgb(239, 68, 68)', | |
| borderWidth: 2, | |
| fill: false, | |
| showLine: true, | |
| pointRadius: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| title: { | |
| display: true, | |
| text: 'Eix X' | |
| } | |
| }, | |
| y: { | |
| title: { | |
| display: true, | |
| text: 'Eix Y' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| function updateGraph() { | |
| const selectedValue = document.getElementById('equation-select').value; | |
| let equation, data; | |
| switch(selectedValue) { | |
| case '1': | |
| equation = 'y = 2x + 1'; | |
| data = [-5, -3, -1, 1, 3, 5, 7]; | |
| break; | |
| case '2': | |
| equation = 'y = -x + 3'; | |
| data = [6, 5, 4, 3, 2, 1, 0]; | |
| break; | |
| case '3': | |
| equation = 'y = 0.5x - 2'; | |
| data = [-3.5, -3, -2.5, -2, -1.5, -1, -0.5]; | |
| break; | |
| case '4': | |
| equation = 'y = -2x'; | |
| data = [6, 4, 2, 0, -2, -4, -6]; | |
| break; | |
| } | |
| equationChart.data.datasets[0].label = equation; | |
| equationChart.data.datasets[0].data = data; | |
| equationChart.update(); | |
| } | |
| function checkGraphAnswer() { | |
| const selectedOption = document.querySelector('input[name="graph-quiz"]:checked'); | |
| const feedback = document.getElementById('graph-feedback'); | |
| if (!selectedOption) { | |
| feedback.textContent = 'Selecciona una opci贸 abans de comprovar.'; | |
| feedback.className = 'incorrect-answer p-3 rounded'; | |
| feedback.classList.remove('hidden'); | |
| return; | |
| } | |
| if (selectedOption.value === '2') { | |
| feedback.textContent = 'Correcte! La gr脿fica correspon a y = -2x + 3.'; | |
| feedback.className = 'correct-answer p-3 rounded'; | |
| updateProgress(10); | |
| } else { | |
| feedback.textContent = 'No 茅s correcte. Observa el pendent i la ordenada a l\'origen.'; | |
| feedback.className = 'incorrect-answer p-3 rounded'; | |
| } | |
| feedback.classList.remove('hidden'); | |
| } | |
| // Progress tracking | |
| let progress = 20; | |
| function updateProgress(points = 0) { | |
| if (points > 0) { | |
| progress = Math.min(progress + points, 100); | |
| document.getElementById('progress-bar').style.width = progress + '%'; | |
| document.getElementById('progress-percent').textContent = progress; | |
| } | |
| } | |
| // Initialize the app | |
| window.onload = function() { | |
| initCharts(); | |
| showTab('basic'); | |
| }; | |
| </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/primergrau" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |