Merge pull request #46 from yazdanhaider/main

Feature added to progress

challenge.html

@@ -31,6 +31,14 @@
         <h2><i class="fas fa-trophy"></i> Python Challenges</h2>
         <p>Welcome to the challenges section! Test your skills with various coding challenges.</p>
 
+        <div class="progress-container">
+            <h3>Challenge Progress</h3>
+            <div class="progress-bar">
+                <div id="challenge-progress" class="progress"></div>
+            </div>
+            <button id="challenge-reset-btn" class="reset-btn">Reset Progress</button>
+        </div>
+
         <div class="challenge-container">
             <ul id="challenge-list">
                 <li><a href="#" onclick="viewChallenge('Basic Math Challenge')"><i class="fas fa-calculator"></i> Basic Math Challenge</a></li>

learn.html

@@ -62,6 +62,15 @@ <h2>Python Lessons</h2>
                 </div>
             </div>
         </div>
+
+        <!-- Add this right after the <h2>Python Lessons</h2> line -->
+        <div class="progress-container">
+            <h3>Lesson Progress</h3>
+            <div class="progress-bar">
+                <div id="lesson-progress" class="progress"></div>
+            </div>
+            <button id="lesson-reset-btn" class="reset-btn">Reset Progress</button>
+        </div>
     </div>
 
     <script src="script.js"></script>

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 = `<p>Select a challenge to view its description.</p>`;
     }
+    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();
+});

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;
 }