const quizData = [ { id: 'definicja', title: '1. Definicja', formula: 'log_a(b) = c ⇔ a^c = b', recognize: [ 'Zawsze, gdy widzisz słowo log.', 'To jest podstawa wszystkich innych działań na logarytmach.'], howToDo: [ 'Znajdź podstawę a i liczbę logarytmowaną b.', 'Zadaj pytanie: „Do jakiej potęgi (c) muszę podnieść a, żeby otrzymać b?”.', 'Odpowiedź na to pytanie to wynik logarytmu.'], example: 'Oblicz log₃(81).

Zadaj pytanie: "Do jakiej potęgi podnieść 3, żeby wyszło 81?".
Sprawdź kolejno: 3²=9, 3³=27, 3⁴=81.
Odpowiedź: 4.

', questions: [ { q: 'log₂(32) = ?', a: 5, options: [4, 5, 6, 16], solution: '

Pytanie: Do jakiej potęgi podnieść 2, żeby otrzymać 32?
Sprawdzamy kolejne potęgi: 2⁴=16, 2⁵=32.
Poprawna odpowiedź to 5.

'}, { q: 'log₅(125) = ?', a: 3, options: [2, 3, 4, 25], solution: '

Pytanie: Do jakiej potęgi podnieść 5, żeby otrzymać 125?
Sprawdzamy kolejne potęgi: 5²=25, 5³=125.
Poprawna odpowiedź to 3.

'} ] }, { id: 'potega', title: '2. Wykładnik', formula: 'log_a(bⁿ) = n · log_a(b)', recognize: [ 'Liczba w środku logarytmu ma wykładnik (potęgę).', 'Wzór pozwala "zrzucić" wykładnik przed logarytm.'], howToDo: [ 'Znajdź wykładnik n.', 'Przenieś go przed cały logarytm, mnożąc.', 'Oblicz logarytm, który pozostał, a na końcu pomnóż.' ], example: 'Oblicz log₂(8⁵).

Zakreśl wykładnik: 5.
Przenieś go na początek: 5 · log₂(8).
Oblicz logarytm: log₂(8) = 3.
Pomnóż: 5 · 3 = 15.

', questions: [ { q: 'log₃(9⁴) = ?', a: 8, options: [6, 8, 12, 36], solution: '

Przenosimy wykładnik 4 przed logarytm: 4 · log₃(9).
Obliczamy wartość logarytmu: log₃(9) = 2.
Mnożymy wynik: 4 · 2 = 8.

'}, { q: 'log₅(25³) = ?', a: 6, options: [5, 6, 8, 15], solution: '

Przenosimy wykładnik 3 przed logarytm: 3 · log₅(25).
Obliczamy wartość logarytmu: log₅(25) = 2.
Mnożymy wynik: 3 · 2 = 6.

'} ] }, { id: 'suma', title: '3. Suma', formula: 'log_p(a) + log_p(b) = log_p(a · b)', recognize: [ 'Masz dwa logarytmy o tej samej podstawie, połączone znakiem "+".' ], howToDo: [ 'Połącz je w jeden logarytm o tej samej podstawie.', 'Liczby ze środków pomnóż przez siebie.', 'Oblicz ten jeden, prostszy logarytm.' ], example: 'Oblicz log₆(2) + log₆(18).

Zapisz jako jeden logarytm, a liczby pomnóż: log₆(2 · 18).
Wykonaj mnożenie w środku: log₆(36).
Oblicz wynik: 2 (bo 6² = 36).

', questions: [ { q: 'Oblicz: log₂(4) + log₂(8)', a: 5, options: [3, 4, 5, 12], solution: '

Łączymy w jeden logarytm, mnożąc liczby: log₂(4 · 8).
Wykonujemy mnożenie: log₂(32).
Obliczamy wynik: 5.

'}, { q: 'Oblicz: log₁₀(2) + log₁₀(50)', a: 2, options: [1, 2, 3, 52], solution: '

Łączymy w jeden logarytm, mnożąc liczby: log₁₀(2 · 50).
Wykonujemy mnożenie: log₁₀(100).
Obliczamy wynik: 2.

'} ] }, { id: 'roznica', title: '4. Różnica', formula: 'log_p(a) - log_p(b) = log_p(ab)', recognize: [ 'Masz dwa logarytmy o tej samej podstawie, połączone znakiem "-".' ], howToDo: [ 'Połącz je w jeden o tej samej podstawie.', 'Liczby ze środków podziel przez siebie.', 'Oblicz ten jeden, prostszy logarytm.' ], example: 'Oblicz log₂(40) - log₂(5).

Zapisz jako jeden logarytm, a liczby podziel: log₂(405).
Wykonaj dzielenie w środku: log₂(8).
Oblicz wynik: 3 (bo 2³ = 8).

', questions: [ { q: 'Oblicz: log₃(54) - log₃(2)', a: 3, options: [2, 3, 4, 27], solution: '

Łączymy w jeden logarytm, dzieląc liczby: log₃(542).
Wykonujemy dzielenie: log₃(27).
Obliczamy wynik: 3.

'}, { q: 'Oblicz: log₅(100) - log₅(4)', a: 2, options: [1, 2, 3, 25], solution: '

Łączymy w jeden logarytm, dzieląc liczby: log₅(1004).
Wykonujemy dzielenie: log₅(25).
Obliczamy wynik: 2.

'} ] }, { id: 'rownanie', title: '5. Równanie', formula: 'log_a(x) = c ⇔ a^c = x', recognize: [ 'W logarytmie jest szukana niewiadoma x.', 'Po drugiej stronie znaku "=" jest znana liczba.' ], howToDo: [ 'Użyj metody "na kółeczko" (czyli definicji logarytmu).', 'Zacznij od podstawy a, podnieś ją do potęgi c i przyrównaj do x.', 'Oblicz potęgę, aby znaleźć x.'], example: 'Rozwiąż log₅(x) = 2.

Zakreśl: a=5, c=2.
Zamień na potęgę: 5² = x.
Oblicz wynik: x = 25.

', questions: [ { q: 'Rozwiąż: log₄(x) = 2', a: 16, options: [2, 6, 8, 16], solution: '

Zmieniamy postać logarytmiczną na potęgową: 4² = x.
Obliczamy potęgę: 16 = x.
Poprawna odpowiedź to 16.

'}, { q: 'Rozwiąż: log₂(x) = 5', a: 32, options: [7, 10, 25, 32], solution: '

Zmieniamy postać logarytmiczną na potęgową: 2⁵ = x.
Obliczamy potęgę: 32 = x.
Poprawna odpowiedź to 32.

'} ] }, { id: 'advanced-equation', title: '6. Równ. Złożone', formula: 'log_p(a) + log_p(b) = log_p(a · b)', recognize: [ 'Po jednej stronie jest więcej niż jeden logarytm.', 'Mają tę samą podstawę i są połączone znakiem "+" lub "-".' ], howToDo: [ 'Krok 1: Połącz logarytmy w jeden.', 'Krok 2: Gdy masz postać log_p(wyrażenie) = c, zamień na potęgę.', 'Krok 3: Rozwiąż otrzymane równanie.', 'Krok 4 (Ważne!): Sprawdź, czy wynik pasuje do założeń (liczba w logarytmie musi być > 0).' ], example: 'Rozwiąż log₂(x) + log₂(x-2) = 3.

Złącz logarytmy: log₂(x(x-2)) = 3.
Zamień na potęgę: 2³ = x(x-2).
Policz: 8 = x² - 2x.
Rozwiąż równanie kwadratowe: x² - 2x - 8 = 0. Wyniki to x=4 i x=-2.
Sprawdź: dla x=-2 w środku logarytmu jest liczba ujemna, więc ten wynik odpada.
Poprawna odpowiedź: x=4.

', questions: [ { q: 'Rozwiąż równanie: log₃(x) + log₃(x-8) = 2. Podaj jedyne poprawne rozwiązanie.', a: 9, options: [-1, 1, 8, 9], solution: '

Łączymy logarytmy: log₃(x(x-8)) = 2.
Zmieniamy na potęgę: 3² = x(x-8).
Rozwiązujemy równanie: 9 = x²-8x ⇒ x²-8x-9=0.
Pierwiastki to x=9 i x=-1. Odrzucamy x=-1 (bo x>0 i x-8>0).
Poprawna odpowiedź to 9.

'}, { q: 'Rozwiąż równanie: log₂(x+1) + log₂(x-1) = 3. Podaj jedyne poprawne rozwiązanie.', a: 3, options: [-3, 1, 3, 4], solution: '

Łączymy logarytmy: log₂((x+1)(x-1)) = 3.
Zmieniamy na potęgę: 2³ = x²-1.
Rozwiązujemy równanie: 8 = x²-1 ⇒ x²=9.
Pierwiastki to x=3 i x=-3. Odrzucamy x=-3 (bo x+1>0 i x-1>0).
Poprawna odpowiedź to 3.

'} ] } ]; let score = 0; let totalQuestions = 0; const tabsContainer = document.getElementById('tabs'); const tabContentsContainer = document.getElementById('tab-contents'); const scoreSpan = document.getElementById('current-score'); const totalSpan = document.getElementById('total-questions'); function setupUI() { quizData.forEach((tabData, index) => { const button = document.createElement('button'); button.className = `tab-btn text-sm sm:text-base font-medium py-2 px-4 border-b-2 border-transparent hover:bg-gray-200 transition-colors duration-200 rounded-t-lg ${index === 0 ? 'active' : ''}`; button.textContent = tabData.title; button.onclick = () => showTab(tabData.id); tabsContainer.appendChild(button); const contentDiv = document.createElement('div'); contentDiv.id = tabData.id; contentDiv.className = `tab-content p-4 sm:p-6 bg-white rounded-lg shadow-md ${index === 0 ? 'active' : ''}`; let recognizeHtml = tabData.recognize.map(item => `

${item}

`).join(''); let howToDoHtml = tabData.howToDo.map(item => `

${item}

`).join(''); let questionsHtml = tabData.questions.map((q, qIndex) => { totalQuestions++; // Mieszamy opcje, aby poprawna odpowiedź nie była zawsze w tym samym miejscu const shuffledOptions = [...q.options].sort(() => Math.random() - 0.5); let optionsHtml = shuffledOptions.map(option => { return ``; }).join(''); return `

${q.q}

${optionsHtml}

Rozwiązanie:

${q.solution}

`; }).join(''); contentDiv.innerHTML = `

Wzór

${tabData.formula}

👉 Jak rozpoznać?

${recognizeHtml}

👉 Jak zrobić?

${howToDoHtml}

Przykład w stylu "krok po kroku":

${tabData.example}

🚀 Czas na zadania!

${questionsHtml}

`; tabContentsContainer.appendChild(contentDiv); }); totalSpan.textContent = totalQuestions; } function showTab(tabId) { document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); document.querySelectorAll('.tab-btn').forEach(button => button.classList.remove('active')); document.getElementById(tabId).classList.add('active'); const activeButton = Array.from(tabsContainer.children).find(btn => btn.textContent === quizData.find(t => t.id === tabId).title); if (activeButton) activeButton.classList.add('active'); } function checkAnswer(clickedButton, correctAnswer, userAnswer) { const optionsContainer = clickedButton.parentElement; const questionContainer = optionsContainer.parentElement; const feedback = questionContainer.querySelector('.feedback'); const solutionDiv = questionContainer.querySelector('.solution-box'); if (optionsContainer.dataset.answered) return; if (userAnswer === correctAnswer) { feedback.textContent = '✅ Świetnie!'; feedback.className = 'feedback correct'; score++; scoreSpan.textContent = score; } else { feedback.textContent = '❌ Błędna odpowiedź.'; feedback.className = 'feedback incorrect'; clickedButton.classList.add('wrong-answer'); } Array.from(optionsContainer.children).forEach(button => { if (parseInt(button.textContent) === correctAnswer) { button.classList.add('correct-answer'); } button.disabled = true; }); solutionDiv.style.display = 'block'; optionsContainer.dataset.answered = true; } document.addEventListener('DOMContentLoaded', () => { setupUI(); });

Twoje Postępy