script.js

/* =========================================
   1. LESSONS PAGE LOGIC
   Handles switching between topics in lessons.html
   ========================================= */

function showLesson(lessonId) {
    // 1. Hide all lesson content divs
    const allLessons = document.querySelectorAll('.lesson-content');
    allLessons.forEach(div => {
        div.classList.remove('active-content');
    });

    // 2. Remove 'active' class from sidebar items
    // (We scope this to .sidebar to avoid conflict if multiple lists exist)
    const sidebarItems = document.querySelectorAll('.sidebar .topic-list li');
    sidebarItems.forEach(item => {
        item.classList.remove('active');
    });

    // 3. Show the selected lesson content
    const targetLesson = document.getElementById(lessonId);
    if (targetLesson) {
        targetLesson.classList.add('active-content');
    }

    // 4. Set the clicked sidebar item as active
    // We use event.currentTarget to ensure we get the LI element even if child clicked
    if (event && event.currentTarget) {
        event.currentTarget.classList.add('active');
    }
    
    // Optional: Scroll to top of content on mobile
    window.scrollTo({ top: 0, behavior: 'smooth' });
}


/* =========================================
   2. QUIZ PAGE LOGIC
   Handles switching quizzes and calculating scores
   ========================================= */

// Function to switch between Quizzes in sidebar
function showQuiz(quizId) {
    // 1. Hide all quiz content divs
    const allQuizzes = document.querySelectorAll('.quiz-content');
    allQuizzes.forEach(div => {
        div.classList.remove('active-content');
    });

    // 2. Remove active class from sidebar items
    const sidebarItems = document.querySelectorAll('.sidebar .topic-list li');
    sidebarItems.forEach(item => {
        item.classList.remove('active');
    });

    // 3. Show selected quiz
    const targetQuiz = document.getElementById(quizId);
    if(targetQuiz) {
        targetQuiz.classList.add('active-content');
    }

    // 4. Highlight clicked sidebar item
    if (event && event.currentTarget) {
        event.currentTarget.classList.add('active');
    }
}

// Function to Calculate Score for a specific Quiz Form
function calculateScore(formId, resultId) {
    const form = document.getElementById(formId);
    const resultBox = document.getElementById(resultId);
    
    // Gather form data
    const formData = new FormData(form);
    
    let score = 0;
    // We assume 3 questions per quiz based on the HTML structure
    let totalQuestions = 3; 

    // Check answers (Values must be 'correct' in HTML)
    if(formData.get('q1') === 'correct') score++;
    if(formData.get('q2') === 'correct') score++;
    if(formData.get('q3') === 'correct') score++;

    // Calculate Percentage
    let percentage = (score / totalQuestions) * 100;

    // Show Result Box
    resultBox.style.display = 'block';
    
    // Reset previous style classes
    resultBox.className = 'result-container'; 

    // Determine Success or Failure
    if (percentage >= 60) {
        resultBox.classList.add('result-success');
        resultBox.innerHTML = `
            <h3>🎉 Excellent Work!</h3>
            <p>You scored <strong>${score} / ${totalQuestions}</strong>.</p>
            <p>You have mastered this topic!</p>
        `;
    } else {
        resultBox.classList.add('result-fail');
        resultBox.innerHTML = `
            <h3>❌ Keep Practicing</h3>
            <p>You scored <strong>${score} / ${totalQuestions}</strong>.</p>
            <p>Review the lesson again and retry the quiz.</p>
        `;
    }

    // Smooth scroll to result to ensure user sees it
    resultBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}