From ee4163ae426beecde909025dd1bfd7c92e2910c4 Mon Sep 17 00:00:00 2001 From: Yazdan Haider Date: Sun, 13 Oct 2024 20:48:53 +0530 Subject: [PATCH] Feature added to progress --- challenge.html | 8 +++++ learn.html | 9 ++++++ script.js | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 55 +++++++++++++++++++++++++++++++++ 4 files changed, 154 insertions(+) diff --git a/challenge.html b/challenge.html index c320280..432f8d0 100644 --- a/challenge.html +++ b/challenge.html @@ -30,6 +30,14 @@

Python Challenges

Welcome to the challenges section! Test your skills with various coding challenges.

+
+

Challenge Progress

+
+
+
+ +
+
+ + +
+

Lesson Progress

+
+
+
+ +
diff --git a/script.js b/script.js index 22d3de7..55153d3 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,66 @@ let editor; let pyodide; +// Add these lines at the beginning of the file +let userProgress = JSON.parse(localStorage.getItem('userProgress')) || { + lessons: {}, + challenges: {} +}; + +function updateProgress(type, item) { + if (type === 'lesson') { + userProgress.lessons[item] = true; + } else if (type === 'challenge') { + userProgress.challenges[item] = true; + } + localStorage.setItem('userProgress', JSON.stringify(userProgress)); + updateProgressBar(); +} + +function updateProgressBar() { + const lessonProgress = document.getElementById('lesson-progress'); + const challengeProgress = document.getElementById('challenge-progress'); + const lessonResetBtn = document.getElementById('lesson-reset-btn'); + const challengeResetBtn = document.getElementById('challenge-reset-btn'); + + if (lessonProgress) { + const completedLessons = Object.values(userProgress.lessons).filter(Boolean).length; + const totalLessons = document.querySelectorAll('.lesson-list li').length; + const lessonPercentage = (completedLessons / totalLessons) * 100; + lessonProgress.style.width = `${lessonPercentage}%`; + lessonProgress.textContent = `${Math.round(lessonPercentage)}%`; + + // Show reset button if there's any progress + if (lessonResetBtn) { + lessonResetBtn.style.display = completedLessons > 0 ? 'inline-block' : 'none'; + } + } + + if (challengeProgress) { + const completedChallenges = Object.values(userProgress.challenges).filter(Boolean).length; + const totalChallenges = document.querySelectorAll('#challenge-list li').length; + const challengePercentage = (completedChallenges / totalChallenges) * 100; + challengeProgress.style.width = `${challengePercentage}%`; + challengeProgress.textContent = `${Math.round(challengePercentage)}%`; + + // Show reset button if there's any progress + if (challengeResetBtn) { + challengeResetBtn.style.display = completedChallenges > 0 ? 'inline-block' : 'none'; + } + } +} + +// Add this function to your script.js file +function resetProgress(type) { + if (type === 'lesson') { + userProgress.lessons = {}; + } else if (type === 'challenge') { + userProgress.challenges = {}; + } + localStorage.setItem('userProgress', JSON.stringify(userProgress)); + updateProgressBar(); +} + async function initPyodide() { try { pyodide = await loadPyodide(); @@ -128,6 +188,7 @@ if "name" in student: major = student.get("major", "No major specified") print("Student's major:", major)`, 1); } + updateProgress('lesson', lesson); } async function runCode() { @@ -236,6 +297,7 @@ document.querySelectorAll('#challenge-list a').forEach(link => { function viewChallenge(challenge) { console.log("View Challenge:", challenge); // Additional logic for viewing the challenge can go here + updateProgress('challenge', challenge); } // Initial theme setting @@ -392,6 +454,7 @@ function viewChallenge(challengeName) { default: description.innerHTML = `

Select a challenge to view its description.

`; } + updateProgress('challenge', challengeName); } // FAQ Accordion @@ -410,4 +473,23 @@ document.addEventListener('DOMContentLoaded', function() { } }); } + updateProgressBar(); }); + +// Add this to your DOMContentLoaded event listener +document.addEventListener('DOMContentLoaded', () => { + // ... existing code ... + + const lessonResetBtn = document.getElementById('lesson-reset-btn'); + const challengeResetBtn = document.getElementById('challenge-reset-btn'); + + if (lessonResetBtn) { + lessonResetBtn.addEventListener('click', () => resetProgress('lesson')); + } + + if (challengeResetBtn) { + challengeResetBtn.addEventListener('click', () => resetProgress('challenge')); + } + + updateProgressBar(); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index 690e450..f376b1d 100644 --- a/styles.css +++ b/styles.css @@ -493,4 +493,59 @@ body.dark-theme .accordion.active { flex: none; width: 100%; } +} + +/* Progress Bar Styles */ +.progress-container { + margin-bottom: 2rem; +} + +.progress-bar { + width: 100%; + background-color: #e0e0e0; + border-radius: 10px; + overflow: hidden; +} + +.progress { + width: 0; + height: 20px; + background-color: #3498db; + text-align: center; + line-height: 20px; + color: white; + transition: width 0.5s ease-in-out; +} + +body.dark-theme .progress-bar { + background-color: #2c3e50; +} + +body.dark-theme .progress { + background-color: #e94560; +} + +/* Add these styles to your styles.css file */ +.reset-btn { + display: none; + margin-top: 10px; + padding: 5px 10px; + background-color: #e74c3c; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.reset-btn:hover { + background-color: #c0392b; +} + +body.dark-theme .reset-btn { + background-color: #e94560; +} + +body.dark-theme .reset-btn:hover { + background-color: #d63649; } \ No newline at end of file