- About the Project
- Live Demo
- Key Features
- Core Concepts Covered
- Tech Stack
- Project Structure
- Getting Started
- Usage Guide
- W3C & Accessibility Compliance
- Screenshots
- Roadmap
- Contributing
- License
- Contact
- Acknowledgments
"A deadlock is a situation where a set of processes are blocked because each process is holding a resource and waiting for another resource acquired by some other process."
— Operating Systems, Silberschatz, Galvin & Gagne
Understanding Deadlock is a fully interactive, browser-based educational web platform designed to demystify one of the most fundamental and challenging concepts in Operating Systems — Deadlock.
Whether you're a student encountering deadlocks for the first time, a developer debugging concurrent applications, or an educator teaching system-level programming, this platform provides:
- 🎨 Visual, step-by-step animations of deadlock formation and resolution
- 🧮 Interactive simulators for the Banker's Algorithm and Resource Allocation Graphs
- 📚 Structured learning modules from theory to hands-on practice
- 🧩 Gamified challenges to test and reinforce your understanding
- ♿ Fully accessible experience following W3C WCAG 2.1 standards
The goal is simple: make deadlock easy to understand for everyone — no matter their background.
🔗 Launch the Platform → (URL will be updated upon deployment)
A fully hosted version of this project is available at the link above. No installation required — just open in any modern browser and start learning!
Supported Browsers:
| Browser | Supported | Notes |
|---|---|---|
| Chrome 90+ | ✅ Fully Supported | Recommended |
| Firefox 88+ | ✅ Fully Supported | |
| Edge 90+ | ✅ Fully Supported | |
| Safari 14+ | ✅ Fully Supported | |
| Opera 76+ | ✅ Fully Supported | |
| IE 11 | ❌ Not Supported | Use a modern browser |
| Feature | Description |
|---|---|
| 🖥️ Interactive RAG Visualizer | Drag-and-drop Resource Allocation Graph builder with real-time cycle detection |
| 🏦 Banker's Algorithm Simulator | Step-by-step safe/unsafe state evaluation with animated transitions |
| 🍽️ Dining Philosophers Demo | Animated, configurable simulation of the classic concurrency problem |
| 📖 Structured Learning Path | Four progressive modules from beginner to advanced |
| 🧠 Quiz & Challenge Engine | Scenario-based questions with instant visual feedback |
| 🌙 Dark / Light Mode | Full theme toggle with system preference detection |
| 📱 Fully Responsive | Optimized layout for desktop, tablet, and mobile devices |
| ♿ WCAG 2.1 AA Compliant | Keyboard-navigable, screen-reader friendly, high contrast support |
| 🌍 Multilingual Ready | Structured for easy i18n expansion |
| 📊 Progress Tracking | LocalStorage-backed learning progress dashboard |
The platform is organized into four structured modules:
- Definition and real-world analogies
- System model: processes and resources
- The four necessary conditions:
- Mutual Exclusion
- Hold and Wait
- No Preemption
- Circular Wait
- Resource Allocation Graphs (RAG) and cycle detection
- Wait-for Graphs
- Detection algorithms for single and multiple resource instances
- Prevention — Structurally eliminating conditions
- Avoidance — Banker's Algorithm and safe state analysis
- Detection & Recovery — Process termination and resource preemption
- The Dining Philosophers Problem
- The Sleeping Barber Problem
- Real-world deadlocks in databases, operating systems, and distributed systems
This project is built using standard web technologies with no external framework dependencies, ensuring maximum portability and W3C standards compliance.
| Layer | Technology | Purpose |
|---|---|---|
| Structure | HTML5 (Semantic) | Markup, accessibility, SEO |
| Styling | CSS3 (Custom Properties) | Layout, animations, theming |
| Logic | Vanilla JavaScript (ES6+) | Simulation engine, interactivity |
| Graphs | Canvas API / SVG | RAG visualizations, animations |
| Storage | Web Storage API | Progress persistence |
| Fonts | Google Fonts (Inter / Outfit) | Typography |
| Icons | SVG Sprite Sheet | Scalable, accessible icons |
| Tooling | None required | Opens directly in browser |
✅ Zero external dependencies — no npm, no bundler, no CDN required.
Understanding deadlock/
│
├── 📄 index.html # Main entry point (Home / Landing Page)
├── 📄 Readme.md # Project documentation (this file)
│
├── 📂 pages/ # Application pages
│ ├── 📄 module-1-basics.html # Module 1: What is Deadlock?
│ ├── 📄 module-2-detection.html # Module 2: Detecting Deadlock
│ ├── 📄 module-3-handling.html # Module 3: Handling Deadlock
│ ├── 📄 module-4-problems.html # Module 4: Classic Problems
│ ├── 📄 simulator-rag.html # Resource Allocation Graph Simulator
│ ├── 📄 simulator-bankers.html # Banker's Algorithm Simulator
│ ├── 📄 dining-philosophers.html # Dining Philosophers Interactive Demo
│ └── 📄 quiz.html # Quiz & Challenge Engine
│
├── 📂 assets/ # Static assets
│ ├── 📂 images/ # Diagrams, screenshots, illustrations
│ ├── 📂 icons/ # SVG icon sprites
│ └── 📄 banner.png # Project banner image
│
├── 📂 css/ # Stylesheets
│ ├── 📄 main.css # Global styles & design tokens
│ ├── 📄 components.css # Reusable UI component styles
│ ├── 📄 simulator.css # Simulator-specific styles
│ └── 📄 themes.css # Dark/light mode variables
│
├── 📂 js/ # JavaScript modules
│ ├── 📄 app.js # Core application logic
│ ├── 📄 rag-engine.js # Resource Allocation Graph engine
│ ├── 📄 bankers-algorithm.js # Banker's Algorithm implementation
│ ├── 📄 dining-sim.js # Dining Philosophers simulation
│ ├── 📄 quiz-engine.js # Quiz/challenge system
│ └── 📄 theme.js # Theme management
│
└── 📂 docs/ # Extended documentation
├── 📄 ARCHITECTURE.md # Technical design decisions
├── 📄 CONTRIBUTING.md # Contribution guidelines
└── 📄 CHANGELOG.md # Version history
This project requires no installation or build tools. All you need is:
- ✅ A modern web browser (Chrome, Firefox, Edge, Safari — see supported browsers)
- ✅ A code editor for development (e.g., VS Code)
- ✅ (Optional) Live Server extension for VS Code
# 1. Clone the repository
git clone https://github.com/your-username/understanding-deadlock.git
# 2. Navigate into the project folder
cd understanding-deadlock
# 3. Open in VS Code
code .Then open index.html with the Live Server extension, or simply double-click the file to open it in your browser.
- Click Code → Download ZIP on the repository page
- Extract the ZIP archive to your desired location
- Open
index.htmlin your browser
No setup needed — visit the live demo link directly in your browser.
- Start at Module 1 — Begin with the basics to build your foundation
- Use the Simulators — Interact with the RAG and Banker's Algorithm tools as you progress
- Watch the animations — Each concept has step-by-step visual explanations
- Take the quizzes — Challenge yourself after each module to reinforce learning
- Track your progress — Your completed modules are saved automatically
- Use the simulators as classroom demonstration tools (projector-friendly full-screen mode available)
- Direct students to the structured module sequence for self-paced learning
- Use the quiz engine to generate practice scenarios
- The platform works entirely in-browser — no accounts or server setup required
- All simulation logic is in
js/— fully documented with JSDoc comments - Modify
css/themes.cssto customize the visual theme - Add new quiz questions in
js/quiz-engine.jsfollowing the documented format - Extend modules by creating new HTML pages in the
pages/directory
This project is built in strict accordance with W3C web standards and WCAG 2.1 Level AA accessibility guidelines.
- ✅ All pages are validated against the W3C Markup Validation Service
- ✅ Semantic HTML5 elements used throughout (
<header>,<main>,<nav>,<section>,<article>,<footer>) - ✅ Proper heading hierarchy (
h1→h2→h3) — no skipped levels - ✅ Valid
langattribute on<html>elements - ✅ Meaningful
alttext on all images; decorative images usealt=""
- ✅ Stylesheets validated with the W3C CSS Validation Service
- ✅ CSS Custom Properties used for design tokens (colors, spacing, typography)
- ✅
prefers-reduced-motionmedia query respected for all animations - ✅
prefers-color-schemeused for automatic dark/light theme detection
- ✅ Perceivable — Color contrast ratios ≥ 4.5:1 for text, ≥ 3:1 for UI components
- ✅ Operable — Full keyboard navigation support; visible focus indicators
- ✅ Understandable — Plain language; error messages and instructions are clear
- ✅ Robust — ARIA roles, labels, and live regions used for dynamic content
- ✅ Screen reader tested with NVDA and VoiceOver
- ✅ No content flashes more than 3 times per second (seizure safe)
| Tool | Purpose | Status |
|---|---|---|
| W3C Markup Validator | HTML5 validation | ✅ Pass |
| W3C CSS Validator | CSS3 validation | ✅ Pass |
| Lighthouse | Accessibility audit | ✅ 95+ Score |
| axe DevTools | Accessibility testing | ✅ 0 Violations |
| WAVE | Web accessibility evaluation | ✅ 0 Errors |
Screenshots will be added as the project UI is finalized.
| Page | Preview |
|---|---|
| 🏠 Home / Landing Page | (coming soon) |
| 📖 Module 1 — Basics | (coming soon) |
| 🔗 RAG Simulator | (coming soon) |
| 🏦 Banker's Algorithm | (coming soon) |
| 🍽️ Dining Philosophers | (coming soon) |
| 🧠 Quiz Engine | (coming soon) |
- Project scaffolding and README setup
- HTML5 semantic structure and CSS design system
- W3C/WCAG compliance baseline
- Module 1: What is Deadlock? (text + diagrams)
- Module 2: Detecting Deadlock (RAG visualizer)
- Module 3: Handling Deadlock (Banker's Algorithm simulator)
- Module 4: Classic Problems (Dining Philosophers simulation)
- Quiz & challenge engine
- Progress tracking dashboard
- Animated step-by-step tutorials
- Dark/light mode toggle
- Mobile responsiveness testing
- Full accessibility audit and remediation
- Performance optimization (Lighthouse 95+ score)
- Live deployment (GitHub Pages / Vercel / Netlify)
- Multilingual support (i18n)
💡 Have a feature suggestion? Open an issue to discuss it!
Contributions are what make the open-source community an amazing place to learn, inspire, and create. All contributions are warmly welcomed!
- Fork the repository
- Create a feature branch
git checkout -b feature/your-feature-name
- Commit your changes with a descriptive message
git commit -m "feat: add step-by-step Banker's Algorithm walkthrough" - Push to your branch
git push origin feature/your-feature-name
- Open a Pull Request and describe your changes clearly
- Follow the existing code style and file organization
- Ensure all HTML passes W3C Markup Validation
- Ensure all CSS passes W3C CSS Validation
- Test keyboard navigation and screen reader compatibility
- Update documentation as needed
- One feature/fix per pull request
| Type | Description |
|---|---|
| 🐛 Bug Fixes | Fix incorrect behavior or visual glitches |
| ✨ New Features | Add new simulators, quizzes, or learning modules |
| 📖 Documentation | Improve clarity of explanations and guides |
| 🌍 Translations | Add support for new languages |
| ♿ Accessibility | Improve WCAG compliance |
| 🎨 Design | Enhance visuals, animations, or UX |
Please read CONTRIBUTING.md for the full contribution guidelines.
Found an issue? Please help us improve by opening a bug report.
When reporting a bug, please include:
- Your browser name and version
- Steps to reproduce the issue
- Expected vs. actual behavior
- Screenshots (if applicable)
Distributed under the MIT License. See LICENSE for more information.
MIT License
Copyright (c) 2026 Understanding Deadlock Project Contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files, to deal in the Software
without restriction, including without limitation the rights to use, copy,
modify, merge, publish, distribute, sublicense, and/or sell copies of the
Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
Project Maintainer:
- 📧 Email: your.email@example.com
- 💼 LinkedIn: linkedin.com/in/yourprofile
- 🐙 GitHub: @your-username
Project Repository:
🔗 https://github.com/your-username/understanding-deadlock
If you have questions about the educational content, feature suggestions, or want to collaborate, don't hesitate to reach out!
This project was made possible thanks to the following incredible resources and communities:
- 📘 Operating System Concepts ("Dinosaur Book") — Silberschatz, Galvin & Gagne
- 📘 Modern Operating Systems — Andrew S. Tanenbaum
- 📘 The Art of Multiprocessor Programming — Herlihy & Shavit
- 🛡️ othneildrew/Best-README-Template — README structure inspiration
- 🏷️ Shields.io — Badge generation
- 🎨 Google Fonts — Typography (Inter, Outfit)
- ✅ W3C Markup Validator — HTML5 validation
- ✅ W3C CSS Validator — CSS3 validation
- ♿ WebAIM WAVE — Accessibility evaluation
- 🔦 Deque axe DevTools — Accessibility testing
- 📊 Google Lighthouse — Performance & accessibility audit
- The open-source and computer science education communities for making knowledge freely accessible
⭐ If this project helped you understand deadlocks, please give it a star! ⭐
Made with ❤️ for learners everywhere
