Interactive Dashboard Component - Copy this Html, Bootstrap Component to your project

Document.addEventListener('DOMContentLoaded', function() { const analysisLevelSelect = document.getElementById('analysis level'); const filtersDiv = document.getElementById('filters'); const goButton = document.getElementById('go button'); function updateFilters(level, parentSelection) { let options = []; if (level === 'subject') { options = ['Mathematics', 'Physics', 'Chemistry']; // Example data } else if (level === 'unit' && parentSelection) { options = { 'Mathematics': ['Algebra', 'Calculus', 'Geometry'], 'Physics': ['Mechanics', 'Electromagnetism'], 'Chemistry': ['Organic', 'Inorganic'] }[parentSelection] || []; } else if (level === 'chapter' && parentSelection) { options = { 'Algebra': ['Linear Equations', 'Quadratic Equations'], 'Calculus': ['Derivatives', 'Integrals'] }[parentSelection] || []; } else if (level === 'topic' && parentSelection) { options = { 'Linear Equations': ['Solving Equations', 'Graphing Lines'], 'Quadratic Equations': ['Factoring', 'Quadratic Formula'] }[parentSelection] || []; } if (options.length > 0) { const select = document.createElement('select'); select.id = `filter ${level}`; select.innerHTML = '<option value="">Select ' + level.charAt(0).toUpperCase() + level.slice(1) + '</option>'; options.forEach(option => { const opt = document.createElement('option'); opt.value = option; opt.textContent = option; select.appendChild(opt); }); select.addEventListener('change', () => { updateFilters(getNextLevel(level), select.value); }); filtersDiv.appendChild(select); } } function getNextLevel(currentLevel) { const levels = ['subject', 'unit', 'chapter', 'topic']; const index = levels.indexOf(currentLevel); return levels[index + 1] || null; } function displayResults() { // Placeholder for the results display function } analysisLevelSelect.addEventListener('change', () => { const selectedLevel = analysisLevelSelect.value; filtersDiv.innerHTML = ''; updateFilters(selectedLevel); displayResults(); }); goButton.addEventListener('click', () => { goButton.classList.add('animate'); setTimeout(() => { goButton.classList.remove('animate'); }, 4000); // Remove class after animation }); // Initial load updateFilters('subject'); });