Interactive web-based platform for learning Data Structures & Algorithms with visual animations, quizzes, and progress tracking.
- Unique Student IDs - Each learner gets a unique identifier
- Interactive Animations - Visual bubble sort with step-by-step execution
- Quiz System - Topic-specific multiple choice questions
- Progress Tracking - Real-time statistics and scoring
- Modern UI - Glassmorphism design with smooth animations
- Mobile Responsive - Works on all devices
- Save the HTML code as
index.html - Open in any modern web browser
- Register with name, email, and experience level
- Start learning!
- 🔄 Sorting Algorithms (Bubble sort with animation)
- 🔍 Searching Algorithms
- 📊 Arrays & Lists
- 🔗 Linked Lists
- 📚 Stacks & Queues
- 🌳 Trees & Graphs
- Enter name, email, experience level
- Get unique Student ID (format: DSA + alphanumeric)
- Access dashboard with progress stats
- Dashboard → Click topic card
- Animation → Generate array → Start sorting
- Quiz → Answer questions → Get feedback
- Navigation → Home/Back buttons, breadcrumbs
- Generate New Array - Creates random data
- Start Sorting - Begins animation
- Reset - Stops and resets
- Next Question - Quiz navigation
// Main Variables
let currentUser = null; // User data
let currentTopic = null; // Current learning module
let sortingArray = []; // Array for animations
let userStats = {}; // Progress tracking
// Key Functions
startLearning() // User registration
openTopic(topic) // Load learning module
startSorting() // Begin animation
loadQuiz(topic) // Load quiz questions- Add topic card in HTML
- Update openTopic() function
- Add questions to questionsDB
- Create animation function (optional)
/* Update colors in CSS variables */
:root {
--primary-gradient: your-gradient;
--glass-bg: rgba(255, 255, 255, 0.1);
}
/* Modify animations */
.array-element {
transition: all 0.5s ease;
}- Element States: Normal (blue), Comparing (orange), Sorted (green)
- Progress Bar: Real-time completion tracking
- Swap Counter: Shows number of operations
- Speed Control: Timed delays for visibility
- Question Types: Multiple choice with 4 options
- Feedback: Immediate visual (green/red) responses
- Scoring: 10 points per correct answer
- Statistics: Accuracy percentage tracking
- Topics Completed: Number of modules finished
- Questions Answered: Total quiz attempts
- Accuracy Rate: Success percentage
- Learning Time: Minutes spent on platform
- Chrome 70+, Firefox 65+, Safari 12+, Edge 79+
- Mobile: iOS Safari 12+, Chrome Mobile 70+
- Pure HTML/CSS/JS (no dependencies)
- 60fps animations with CSS transforms
- Responsive design with CSS Grid/Flexbox
- Touch gestures for mobile
- In-memory session storage (expandable to localStorage/database)
- User data persists during session
- Progress saved on logout
- Glassmorphism: Frosted glass effects with backdrop blur
- Gradient Backgrounds: Animated 4-color shifting gradients
- Smooth Animations: Cubic-bezier timing functions
- Toast Notifications: Success/error/info messages
- Particle Effects: Floating background animations
Animation not starting?
- Check if another animation is running
- Try generating a new array first
Quiz not loading?
- Ensure topic is properly selected
- Refresh page if needed
Mobile issues?
- Use swipe gestures for navigation
- Tap elements may need double-tap
- More sorting algorithms (merge, quick, heap sort)
- Additional DSA topics with animations
- User accounts with cloud storage
- Leaderboards and achievements
- Code editor integration
- Video tutorials
For issues or suggestions, the platform includes:
- Toast notifications for user guidance
- Breadcrumb navigation for orientation
- Reset buttons for recovery
- Responsive error handling
Platform Requirements: Modern web browser, no additional software needed. File Size: Single HTML file (~50KB) Performance: Optimized for 60fps animations on all devices.