Lekcja matmy - dodawanie 1
This commit is contained in:
Sebastian Molenda
Generated
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "QuizzyTemplate",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
@@ -56,6 +56,14 @@
|
||||
<p class="card-desc">Sprawdź swoją wiedzę</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="lekcje.html" class="category-card" style="--grad-start: #6EE7B7; --grad-end: #34D399;">
|
||||
<div class="card-icon">📚</div>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Lekcje</h2>
|
||||
<p class="card-desc">Zobacz nasze lekcje matematyki</p>
|
||||
</div>
|
||||
</a>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lekcja 1: Dodawanie to dokładanie</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20260526">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body data-topic="dodawanie" data-lesson-id="1">
|
||||
<div class="app-container">
|
||||
<header class="lesson-header">
|
||||
<a href="lekcje.html" class="back-button" id="back-to-hub">←</a>
|
||||
<div class="header-content">
|
||||
<h1 class="lesson-title">Dodawanie</h1>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 0%;"></div>
|
||||
</div>
|
||||
<span class="progress-label">Postęp: 0/4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lesson-dropdown">
|
||||
<button class="dropdown-button">☰</button>
|
||||
<div class="dropdown-content">
|
||||
<!-- Lista lekcji zostanie wstawiona tutaj przez JS -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="lesson-container">
|
||||
<div class="lesson-content-main">
|
||||
<h2>Lekcja 1: Dodawanie to dokładanie</h2>
|
||||
|
||||
<div class="parent-guide">
|
||||
<h3>Dla Rodzica: Jak zacząć?</h3>
|
||||
<p>Nie zaczynaj od cyfr i znaku plus. Zacznij od prostego pomysłu: <strong>"dokładania"</strong>. Połóż przed dzieckiem 2 klocki, a potem dołóż jeszcze 3. Powiedz głośno: <em>"Dodawanie to dokładanie czegoś do tego, co już mamy."</em></p>
|
||||
</div>
|
||||
|
||||
<div class="interactive-exercise" id="exercise1">
|
||||
<p>Popatrz, mamy 2 dziewczynki. Teraz dołączają do nich 3 chłopców.</p>
|
||||
<div class="icon-group">
|
||||
<span>👧</span><span>👧</span> <span class="plus-sign">+</span> <span>👦</span><span>👦</span><span>👦</span>
|
||||
</div>
|
||||
<p>Ile dzieci jest teraz razem? Policz i wpisz liczbę.</p>
|
||||
<div class="interactive-example">
|
||||
<span>2 + 3 = </span>
|
||||
<input type="number" class="interactive-input" data-answer="5">
|
||||
<span class="feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="parent-guide">
|
||||
<h3>Kluczowa metoda: "Start i doskocz"</h3>
|
||||
<p>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ę.</p>
|
||||
<p>Przykład <strong>5 + 3</strong>: Nie liczymy od 1. Mówimy: <em>"Mam 5, dokładam 3"</em> i skaczemy: 6, 7, 8. Koniec!</p>
|
||||
<p><strong>Palce jako "licznik skoków":</strong> 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".</p>
|
||||
</div>
|
||||
|
||||
<div class="interactive-exercise" id="exercise2">
|
||||
<h4>Ćwiczenie "Start i doskocz"</h4>
|
||||
<p>Mamy <strong>5</strong> klocków. Chcemy dołożyć <strong>3</strong>.</p>
|
||||
<div class="start-and-jump">
|
||||
<div class="start-number">5</div>
|
||||
<div class="jumps">
|
||||
<button class="jump-btn" data-value="6">+1</button>
|
||||
<button class="jump-btn" data-value="7">+1</button>
|
||||
<button class="jump-btn" data-value="8">+1</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Klikaj przyciski "+1", żeby "doskoczyć" do wyniku. Jaki będzie wynik?</p>
|
||||
<div class="interactive-example">
|
||||
<span>5 + 3 = </span>
|
||||
<input type="number" class="interactive-input" data-answer="8">
|
||||
<span class="feedback"></span>
|
||||
</div>
|
||||
<div class="jump-feedback">
|
||||
Start: 5...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="parent-guide">
|
||||
<h3>Teraz spróbuj sam!</h3>
|
||||
<p>Pora na samodzielne ćwiczenie. Użyj metody "start i doskocz", żeby rozwiązać poniższy przykład. Powodzenia!</p>
|
||||
</div>
|
||||
|
||||
<div id="random-exercise-container">
|
||||
<!-- Losowe ćwiczenie zostanie wygenerowane tutaj -->
|
||||
</div>
|
||||
<button id="retry-random-exercise" class="retry-button">Jeszcze raz</button>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="lesson-footer">
|
||||
<a href="lekcja-dodawanie-2.html" class="button-next">Dalej →</a>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<script src="lekcja.js" defer></script>
|
||||
<script src="nav.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lekcja: Dodawanie w zakresie 20</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20260526">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body data-topic="dodawanie" data-lesson-id="2">
|
||||
<div class="app-container">
|
||||
<header class="lesson-header">
|
||||
<a href="lekcje.html" class="back-button" id="back-to-hub">←</a>
|
||||
<div class="header-content">
|
||||
<h1 class="lesson-title">Dodawanie</h1>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 0%;"></div>
|
||||
</div>
|
||||
<span class="progress-label">Postęp: 0/4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lesson-dropdown">
|
||||
<button class="dropdown-button">☰</button>
|
||||
<div class="dropdown-content">
|
||||
<!-- Lista lekcji zostanie wstawiona tutaj przez JS -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="lesson-container">
|
||||
<div class="lesson-content-main">
|
||||
<h2>Lekcja 2: Dodawanie w zakresie 20</h2>
|
||||
<p>Teraz spróbujmy z większymi liczbami. Pamiętaj, że zawsze możesz użyć palców lub liczydełka!</p>
|
||||
<div class="interactive-example">
|
||||
<span>8 + 7 = </span>
|
||||
<input type="number" class="interactive-input" data-answer="15">
|
||||
<span class="feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="lekcja.js" defer></script>
|
||||
<script src="nav.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lekcja: Dodawanie z przenoszeniem</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20260526">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body data-topic="dodawanie" data-lesson-id="3">
|
||||
<div class="app-container">
|
||||
<header class="lesson-header">
|
||||
<a href="lekcje.html" class="back-button" id="back-to-hub">←</a>
|
||||
<div class="header-content">
|
||||
<h1 class="lesson-title">Dodawanie</h1>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 0%;"></div>
|
||||
</div>
|
||||
<span class="progress-label">Postęp: 0/4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lesson-dropdown">
|
||||
<button class="dropdown-button">☰</button>
|
||||
<div class="dropdown-content">
|
||||
<!-- Lista lekcji zostanie wstawiona tutaj przez JS -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="lesson-container">
|
||||
<div class="lesson-content-main">
|
||||
<h2>Lekcja 3: Dodawanie z przenoszeniem</h2>
|
||||
<p>Czasami, dodając liczby, suma cyfr w kolumnie jest większa niż 9. Nazywamy to "przenoszeniem".</p>
|
||||
<p>Na przykład w działaniu 15 + 7, najpierw dodajesz 5+7=12. Zapisujesz 2, a 1 "przenosisz" do następnej kolumny.</p>
|
||||
<div class="interactive-example">
|
||||
<span>15 + 7 = </span>
|
||||
<input type="number" class="interactive-input" data-answer="22">
|
||||
<span class="feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="lekcja.js" defer></script>
|
||||
<script src="nav.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lekcja: Zadania tekstowe z dodawania</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20260526">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body data-topic="dodawanie" data-lesson-id="4">
|
||||
<div class="app-container">
|
||||
<header class="lesson-header">
|
||||
<a href="lekcje.html" class="back-button" id="back-to-hub">←</a>
|
||||
<div class="header-content">
|
||||
<h1 class="lesson-title">Dodawanie</h1>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: 0%;"></div>
|
||||
</div>
|
||||
<span class="progress-label">Postęp: 0/4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lesson-dropdown">
|
||||
<button class="dropdown-button">☰</button>
|
||||
<div class="dropdown-content">
|
||||
<!-- Lista lekcji zostanie wstawiona tutaj przez JS -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="lesson-container">
|
||||
<div class="lesson-content-main">
|
||||
<h2>Lekcja 4: Zadania tekstowe</h2>
|
||||
<p>Ania ma 5 cukierków, a Jaś dał jej jeszcze 4. Ile cukierków ma teraz Ania?</p>
|
||||
<div class="interactive-example">
|
||||
<span>5 + 4 = </span>
|
||||
<input type="number" class="interactive-input" data-answer="9">
|
||||
<span class="feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="lekcja.js" defer></script>
|
||||
<script src="nav.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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 += `<button class="jump-btn" data-value="${startNum + i + 1}">+1</button>`;
|
||||
}
|
||||
|
||||
randomExerciseContainer.innerHTML = `
|
||||
<div class="interactive-exercise" id="random-exercise">
|
||||
<h4>Ćwiczenie losowe</h4>
|
||||
<p>Mamy <strong>${startNum}</strong>. Chcemy dołożyć <strong>${jumpCount}</strong>.</p>
|
||||
<div class="start-and-jump">
|
||||
<div class="start-number">${startNum}</div>
|
||||
<div class="jumps">${jumpsHTML}</div>
|
||||
</div>
|
||||
<p>Klikaj przyciski "+1", żeby "doskoczyć" do wyniku. Jaki będzie wynik?</p>
|
||||
<div class="interactive-example">
|
||||
<span>${startNum} + ${jumpCount} = </span>
|
||||
<input type="number" class="interactive-input" data-answer="${answer}">
|
||||
<span class="feedback"></span>
|
||||
</div>
|
||||
<div class="jump-feedback">
|
||||
Start: ${startNum}...
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
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();
|
||||
});
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||||
<title>Edu — Lekcje z matematyki</title>
|
||||
<link rel="stylesheet" href="styles.css?v=20260524" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<header class="app-header">
|
||||
<a href="index.html" class="back-button" id="back-to-hub">←</a>
|
||||
<h1 class="app-title">Lekcje z matematyki</h1>
|
||||
<p class="app-subtitle">Wybierz temat, aby rozpocząć</p>
|
||||
</header>
|
||||
|
||||
<main class="category-grid">
|
||||
<a href="lekcja-dodawanie-1.html" class="category-card" style="--grad-start: #3B82F6; --grad-end: #1D4ED8;">
|
||||
<div class="card-icon">➕</div>
|
||||
<div class="card-content">
|
||||
<h2 class="card-title">Dodawanie</h2>
|
||||
<p class="card-desc">Naucz się dodawać</p>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Tutaj pojawią się kolejne tematy -->
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">Version: <span id="commit-sha">(loading)</span></footer>
|
||||
<script src="version.js?v=20260521" defer></script>
|
||||
<script src="nav.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
+31
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
+265
-20
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user