From d406f1020611380f3183c24d3105862893502926 Mon Sep 17 00:00:00 2001 From: Sebastian Molenda Date: Tue, 26 May 2026 21:19:14 +0200 Subject: [PATCH] Lekcja matmy - dodawanie 1 --- QuizzyTemplate/package-lock.json | 6 + dodawanie.html | 0 dodawanie.js | 0 index.html | 8 + lekcja-dodawanie-1.html | 105 ++++++++++++ lekcja-dodawanie-2.html | 48 ++++++ lekcja-dodawanie-3.html | 49 ++++++ lekcja-dodawanie-4.html | 48 ++++++ lekcja.js | 234 +++++++++++++++++++++++++ lekcje.html | 36 ++++ lekcje.json | 31 ++++ styles.css | 285 ++++++++++++++++++++++++++++--- 12 files changed, 830 insertions(+), 20 deletions(-) create mode 100644 QuizzyTemplate/package-lock.json create mode 100644 dodawanie.html create mode 100644 dodawanie.js create mode 100644 lekcja-dodawanie-1.html create mode 100644 lekcja-dodawanie-2.html create mode 100644 lekcja-dodawanie-3.html create mode 100644 lekcja-dodawanie-4.html create mode 100644 lekcja.js create mode 100644 lekcje.html create mode 100644 lekcje.json diff --git a/QuizzyTemplate/package-lock.json b/QuizzyTemplate/package-lock.json new file mode 100644 index 0000000..41493dd --- /dev/null +++ b/QuizzyTemplate/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "QuizzyTemplate", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/dodawanie.html b/dodawanie.html new file mode 100644 index 0000000..e69de29 diff --git a/dodawanie.js b/dodawanie.js new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index 76841ff..184cda0 100644 --- a/index.html +++ b/index.html @@ -56,6 +56,14 @@

Sprawdź swoją wiedzę

+ + +
📚
+
+

Lekcje

+

Zobacz nasze lekcje matematyki

+
+ diff --git a/lekcja-dodawanie-1.html b/lekcja-dodawanie-1.html new file mode 100644 index 0000000..b770117 --- /dev/null +++ b/lekcja-dodawanie-1.html @@ -0,0 +1,105 @@ + + + + + + Lekcja 1: Dodawanie to dokładanie + + + + + + +
+
+ ← +
+

Dodawanie

+
+
+
+
+ Postęp: 0/4 +
+
+
+ +
+ +
+
+
+ +
+
+

Lekcja 1: Dodawanie to dokładanie

+ +
+

Dla Rodzica: Jak zacząć?

+

Nie zaczynaj od cyfr i znaku plus. Zacznij od prostego pomysłu: "dokładania". Połóż przed dzieckiem 2 klocki, a potem dołóż jeszcze 3. Powiedz głośno: "Dodawanie to dokładanie czegoś do tego, co już mamy."

+
+ +
+

Popatrz, mamy 2 dziewczynki. Teraz dołączają do nich 3 chłopców.

+
+ 👧👧 + 👦👦👦 +
+

Ile dzieci jest teraz razem? Policz i wpisz liczbę.

+
+ 2 + 3 = + + +
+
+ +
+

Kluczowa metoda: "Start i doskocz"

+

Unikaj liczenia od początku (1, 2, 3, 4, 5). To wolne i męczące. Naucz dziecko metody "start i doskocz": startujemy od większej liczby i "doskakujemy" o resztę.

+

Przykład 5 + 3: Nie liczymy od 1. Mówimy: "Mam 5, dokładam 3" i skaczemy: 6, 7, 8. Koniec!

+

Palce jako "licznik skoków": Palce nie służą do pokazywania 5 i 3. Pokazują tylko "skoki". Przy 5+3, startujemy od 5, a potem podnosimy jeden palec mówiąc "6", drugi mówiąc "7" i trzeci mówiąc "8".

+
+ +
+

Ćwiczenie "Start i doskocz"

+

Mamy 5 klocków. Chcemy dołożyć 3.

+
+
5
+
+ + + +
+
+

Klikaj przyciski "+1", żeby "doskoczyć" do wyniku. Jaki będzie wynik?

+
+ 5 + 3 = + + +
+
+ Start: 5... +
+
+ +
+

Teraz spróbuj sam!

+

Pora na samodzielne ćwiczenie. Użyj metody "start i doskocz", żeby rozwiązać poniższy przykład. Powodzenia!

+
+ +
+ +
+ + +
+
+ + + +
+ + + + diff --git a/lekcja-dodawanie-2.html b/lekcja-dodawanie-2.html new file mode 100644 index 0000000..66cd5a8 --- /dev/null +++ b/lekcja-dodawanie-2.html @@ -0,0 +1,48 @@ + + + + + + Lekcja: Dodawanie w zakresie 20 + + + + + + +
+
+ ← +
+

Dodawanie

+
+
+
+
+ Postęp: 0/4 +
+
+
+ +
+ +
+
+
+ +
+
+

Lekcja 2: Dodawanie w zakresie 20

+

Teraz spróbujmy z większymi liczbami. Pamiętaj, że zawsze możesz użyć palców lub liczydełka!

+
+ 8 + 7 = + + +
+
+
+
+ + + + diff --git a/lekcja-dodawanie-3.html b/lekcja-dodawanie-3.html new file mode 100644 index 0000000..3aa333e --- /dev/null +++ b/lekcja-dodawanie-3.html @@ -0,0 +1,49 @@ + + + + + + Lekcja: Dodawanie z przenoszeniem + + + + + + +
+
+ ← +
+

Dodawanie

+
+
+
+
+ Postęp: 0/4 +
+
+
+ +
+ +
+
+
+ +
+
+

Lekcja 3: Dodawanie z przenoszeniem

+

Czasami, dodając liczby, suma cyfr w kolumnie jest większa niż 9. Nazywamy to "przenoszeniem".

+

Na przykład w działaniu 15 + 7, najpierw dodajesz 5+7=12. Zapisujesz 2, a 1 "przenosisz" do następnej kolumny.

+
+ 15 + 7 = + + +
+
+
+
+ + + + diff --git a/lekcja-dodawanie-4.html b/lekcja-dodawanie-4.html new file mode 100644 index 0000000..e52352a --- /dev/null +++ b/lekcja-dodawanie-4.html @@ -0,0 +1,48 @@ + + + + + + Lekcja: Zadania tekstowe z dodawania + + + + + + +
+
+ ← +
+

Dodawanie

+
+
+
+
+ Postęp: 0/4 +
+
+
+ +
+ +
+
+
+ +
+
+

Lekcja 4: Zadania tekstowe

+

Ania ma 5 cukierków, a Jaś dał jej jeszcze 4. Ile cukierków ma teraz Ania?

+
+ 5 + 4 = + + +
+
+
+
+ + + + diff --git a/lekcja.js b/lekcja.js new file mode 100644 index 0000000..0d603ef --- /dev/null +++ b/lekcja.js @@ -0,0 +1,234 @@ +document.addEventListener('DOMContentLoaded', async () => { + const body = document.body; + const topic = body.dataset.topic; + const currentLessonId = parseInt(body.dataset.lessonId, 10); + + if (!topic) return; + + // --- Pobieranie danych o lekcjach --- + const response = await fetch('lekcje.json'); + const allTopics = await response.json(); + const topicData = allTopics[topic]; + const lessons = topicData.lessons; + const totalLessons = lessons.length; + + // --- Inicjalizacja Dropdown Menu --- + const dropdownContent = document.querySelector('.dropdown-content'); + const dropdownButton = document.querySelector('.dropdown-button'); + + lessons.forEach(lesson => { + const a = document.createElement('a'); + a.href = lesson.url; + a.textContent = `Lekcja ${lesson.id}: ${lesson.title}`; + if (lesson.id === currentLessonId) { + a.classList.add('active'); + } + dropdownContent.appendChild(a); + }); + + dropdownButton.addEventListener('click', (e) => { + e.stopPropagation(); + dropdownContent.classList.toggle('show'); + }); + + document.addEventListener('click', (e) => { + if (!e.target.matches('.dropdown-button')) { + if (dropdownContent.classList.contains('show')) { + dropdownContent.classList.remove('show'); + } + } + }); + + // --- Zarządzanie postępem --- + const progressKey = `progress_${topic}`; + let progress = JSON.parse(localStorage.getItem(progressKey)) || []; + + const progressBar = document.querySelector('.progress'); + const progressLabel = document.querySelector('.progress-label'); + + function updateProgress() { + const completedCount = progress.length; + const progressPercentage = (completedCount / totalLessons) * 100; + + if (progressBar) progressBar.style.width = `${progressPercentage}%`; + if (progressLabel) progressLabel.textContent = `Postęp: ${completedCount}/${totalLessons}`; + } + + // --- Interaktywne zadania --- + const interactiveInputs = document.querySelectorAll('.interactive-input'); + interactiveInputs.forEach(input => { + input.addEventListener('change', () => { + const correctAnswer = input.dataset.answer; + const feedbackSpan = input.nextElementSibling; + if (input.value === correctAnswer) { + feedbackSpan.textContent = '✅ Dobrze!'; + feedbackSpan.style.color = 'green'; + input.style.borderColor = 'green'; + + // Sprawdź, czy wszystkie zadania na stronie są rozwiązane + const allCorrect = Array.from(document.querySelectorAll('.interactive-input')).every(i => i.style.borderColor === 'green'); + + // Zapisz postęp, jeśli wszystkie zadania są poprawne + if (allCorrect && !progress.includes(currentLessonId)) { + progress.push(currentLessonId); + localStorage.setItem(progressKey, JSON.stringify(progress)); + updateProgress(); + } + } else { + feedbackSpan.textContent = '❌ Spróbuj jeszcze raz.'; + feedbackSpan.style.color = 'red'; + input.style.borderColor = 'red'; + } + }); + }); + + // --- Ćwiczenie "Start i doskocz" --- + const jumpExercise = document.querySelector('#exercise2'); + if (jumpExercise) { + const jumpButtons = jumpExercise.querySelectorAll('.jump-btn'); + const jumpFeedback = jumpExercise.querySelector('.jump-feedback'); + let jumpCounter = 5; + let jumpsMade = 0; + + jumpButtons.forEach(button => { + button.addEventListener('click', () => { + if (button.classList.contains('activated')) return; + + jumpsMade++; + jumpCounter++; + button.classList.add('activated'); + button.textContent = jumpCounter; + + let feedbackText = "Start: 5"; + for (let i = 1; i <= jumpsMade; i++) { + feedbackText += ` ↷ ${5 + i}`; + } + jumpFeedback.textContent = feedbackText; + + // Po ostatnim skoku, wypełnij pole odpowiedzi + if (jumpsMade === jumpButtons.length) { + const targetInput = jumpExercise.querySelector('.interactive-input'); + targetInput.value = jumpCounter; + // Wywołaj zdarzenie 'change', aby sprawdzić odpowiedź i zapisać postęp + targetInput.dispatchEvent(new Event('change')); + } + }); + }); + } + + // --- Losowe ćwiczenie "Start i doskocz" --- + const randomExerciseContainer = document.getElementById('random-exercise-container'); + const retryButton = document.getElementById('retry-random-exercise'); + + function generateRandomExercise() { + const num1 = Math.floor(Math.random() * 8) + 2; // 2-9 + const num2 = Math.floor(Math.random() * 8) + 2; // 2-9 + const startNum = Math.max(num1, num2); + const jumpCount = Math.min(num1, num2); + const answer = startNum + jumpCount; + + let jumpsHTML = ''; + for (let i = 0; i < jumpCount; i++) { + jumpsHTML += ``; + } + + randomExerciseContainer.innerHTML = ` +
+

Ćwiczenie losowe

+

Mamy ${startNum}. Chcemy dołożyć ${jumpCount}.

+
+
${startNum}
+
${jumpsHTML}
+
+

Klikaj przyciski "+1", żeby "doskoczyć" do wyniku. Jaki będzie wynik?

+
+ ${startNum} + ${jumpCount} = + + +
+
+ Start: ${startNum}... +
+
+ `; + setupRandomExerciseListeners(); + setupInteractiveInputs(); // Ponownie podłączamy listenery do nowo dodanych inputów + } + + function setupRandomExerciseListeners() { + const exercise = document.getElementById('random-exercise'); + if (!exercise) return; + + const jumpButtons = exercise.querySelectorAll('.jump-btn'); + const jumpFeedback = exercise.querySelector('.jump-feedback'); + const startNum = parseInt(exercise.querySelector('.start-number').textContent, 10); + let jumpCounter = startNum; + let jumpsMade = 0; + + jumpButtons.forEach(button => { + button.addEventListener('click', () => { + if (button.classList.contains('activated')) return; + + jumpsMade++; + jumpCounter++; + button.classList.add('activated'); + button.textContent = jumpCounter; + + let feedbackText = `Start: ${startNum}`; + for (let i = 1; i <= jumpsMade; i++) { + feedbackText += ` ↷ ${startNum + i}`; + } + jumpFeedback.textContent = feedbackText; + + if (jumpsMade === jumpButtons.length) { + const targetInput = exercise.querySelector('.interactive-input'); + targetInput.value = jumpCounter; + targetInput.dispatchEvent(new Event('change')); + } + }); + }); + } + + function setupInteractiveInputs() { + const allInputs = document.querySelectorAll('.interactive-input'); + allInputs.forEach(input => { + // Usuń stare listenery, aby uniknąć duplikacji + const newInput = input.cloneNode(true); + input.parentNode.replaceChild(newInput, input); + + newInput.addEventListener('change', () => { + const correctAnswer = newInput.dataset.answer; + const feedbackSpan = newInput.nextElementSibling; + if (newInput.value === correctAnswer) { + feedbackSpan.textContent = '✅ Dobrze!'; + feedbackSpan.style.color = 'green'; + newInput.style.borderColor = 'green'; + + const allCorrect = Array.from(document.querySelectorAll('.interactive-input')).every(i => i.style.borderColor === 'green'); + + if (allCorrect && !progress.includes(currentLessonId)) { + progress.push(currentLessonId); + localStorage.setItem(progressKey, JSON.stringify(progress)); + updateProgress(); + } + } else { + feedbackSpan.textContent = '❌ Spróbuj jeszcze raz.'; + feedbackSpan.style.color = 'red'; + newInput.style.borderColor = 'red'; + } + }); + }); + } + + + if (randomExerciseContainer) { + generateRandomExercise(); + retryButton.addEventListener('click', generateRandomExercise); + } else { + setupInteractiveInputs(); + } + + + // Inicjalizacja paska postępu przy ładowaniu strony + updateProgress(); +}); diff --git a/lekcje.html b/lekcje.html new file mode 100644 index 0000000..5751314 --- /dev/null +++ b/lekcje.html @@ -0,0 +1,36 @@ + + + + + + Edu — Lekcje z matematyki + + + + + + +
+
+ ← +

Lekcje z matematyki

+

Wybierz temat, aby rozpocząć

+
+ +
+ +
➕
+
+

Dodawanie

+

Naucz się dodawać

+
+ + +
+
+ + + + + + diff --git a/lekcje.json b/lekcje.json new file mode 100644 index 0000000..6ac768e --- /dev/null +++ b/lekcje.json @@ -0,0 +1,31 @@ +{ + "dodawanie": { + "title": "Dodawanie", + "lessons": [ + { + "id": 1, + "title": "Co to jest dodawanie?", + "subtitle": "Podstawy i proste przykłady.", + "url": "lekcja-dodawanie-1.html" + }, + { + "id": 2, + "title": "Dodawanie w zakresie 20", + "subtitle": "Ćwiczenia z większymi liczbami.", + "url": "lekcja-dodawanie-2.html" + }, + { + "id": 3, + "title": "Dodawanie z przenoszeniem", + "subtitle": "Gdy suma cyfr przekracza 9.", + "url": "lekcja-dodawanie-3.html" + }, + { + "id": 4, + "title": "Zadania tekstowe", + "subtitle": "Praktyczne zastosowanie dodawania.", + "url": "lekcja-dodawanie-4.html" + } + ] + } +} diff --git a/styles.css b/styles.css index b73dca2..64e1ef0 100644 --- a/styles.css +++ b/styles.css @@ -1101,24 +1101,269 @@ body { margin-bottom: 24px; } -@media (max-width: 640px) { - body { - padding: 16px; - } - - .app-title { - font-size: 28px; - } - - .app-subtitle { - font-size: 16px; - } - - .category-grid { - grid-template-columns: 1fr; - } - - .test-config-grid { - grid-template-columns: 1fr; - } +/* Nowe style dla strony z lekcjami */ +.lesson-header { + display: flex; + align-items: center; + padding: 1rem; + background-color: #f8f9fa; + border-bottom: 1px solid #dee2e6; +} + +.lesson-header .back-button { + margin-right: 1rem; + font-size: 1.5rem; + text-decoration: none; + color: #333; + align-self: center; +} + +.header-content { + flex-grow: 1; +} + +.lesson-title { + margin: 0; + font-size: 1.5rem; +} + +.progress-bar-container { + display: flex; + align-items: center; + margin-top: 0.5rem; +} + +.progress-bar { + width: 100%; + height: 10px; + background-color: #e9ecef; + border-radius: 5px; + overflow: hidden; + margin-right: 0.5rem; +} + +.progress { + height: 100%; + background-color: #28a745; + transition: width 0.3s ease-in-out; +} + +.progress-label { + font-size: 0.8rem; + white-space: nowrap; +} + +/* Dropdown Menu */ +.lesson-dropdown { + position: relative; + display: inline-block; + margin-left: auto; + align-self: center; +} + +.dropdown-button { + background: none; + border: 1px solid #ccc; + border-radius: 4px; + padding: 0.5rem 0.75rem; + font-size: 1rem; + cursor: pointer; +} + +.dropdown-content { + display: none; + position: absolute; + right: 0; + background-color: #f1f1f1; + min-width: 250px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + border-radius: 4px; +} + +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown-content a:hover { + background-color: #ddd; +} + +.dropdown-content a.active { + background-color: #28a745; + color: white; +} + +.show { + display: block; +} + + +.lesson-container { + padding: 1rem; +} + +.lesson-selector details { + margin-bottom: 1rem; + border: 1px solid #ddd; + border-radius: 8px; +} + +.lesson-selector summary { + padding: 1rem; + cursor: pointer; + list-style: none; + display: flex; + flex-direction: column; +} + +.lesson-selector summary::-webkit-details-marker { + display: none; +} + +.lesson-selector summary h2 { + margin: 0; + font-size: 1.2rem; +} + +.lesson-selector summary p { + margin: 0.25rem 0 0; + font-size: 0.9rem; + color: #666; +} + +.lesson-content { + padding: 0 1rem 1rem; + border-top: 1px solid #ddd; +} + +.lesson-content-main { + padding: 1rem; +} + +.parent-guide { + background-color: #fdfdea; + border: 1px solid #fce58a; + border-radius: 8px; + padding: 0.5rem 1rem; + margin: 1.5rem 0; +} + +.parent-guide h3 { + color: #c39100; + font-size: 1.1rem; +} + +.interactive-exercise { + margin-bottom: 2rem; +} + +.icon-group { + font-size: 2rem; + margin: 0.5rem 0; +} + +.icon-group .plus-sign { + margin: 0 0.5rem; + color: #888; +} + +.start-and-jump { + display: flex; + align-items: center; + gap: 1rem; + margin: 1rem 0; +} + +.start-number { + font-size: 2.5rem; + font-weight: bold; + padding: 1rem; + background-color: #e9ecef; + border-radius: 8px; +} + +.jumps { + display: flex; + gap: 0.5rem; +} + +.jump-btn { + font-size: 1.5rem; + width: 50px; + height: 50px; + border: 2px solid #007bff; + background-color: white; + color: #007bff; + border-radius: 50%; + cursor: pointer; + transition: background-color 0.2s; +} + +.jump-btn:hover { + background-color: #e7f3ff; +} + +.jump-btn.activated { + background-color: #007bff; + color: white; + border-color: #0056b3; +} + +.jump-feedback { + margin-top: 0.5rem; + font-size: 1.1rem; + font-weight: 500; + color: #555; + min-height: 2rem; +} + +.retry-button { + display: block; + margin: 1rem auto; + padding: 0.75rem 1.5rem; + font-size: 1rem; + font-weight: 500; + color: #fff; + background-color: #6c757d; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.2s; +} + +.retry-button:hover { + background-color: #5a6268; +} + +.lesson-footer { + text-align: center; + padding: 2rem 1rem; + border-top: 1px solid #eee; +} + +.button-next { + display: inline-block; + padding: 1rem 2.5rem; + font-size: 1.2rem; + font-weight: bold; + text-decoration: none; + color: #fff; + background-color: #28a745; + border-radius: 8px; + transition: background-color 0.2s; +} + +.button-next:hover { + background-color: #218838; +} + +.interactive-example { + margin-top: 1rem; + padding: 1rem; + background-color: #f9f9f9; + border-radius: 4px; }