STRATOS is an interactive web-based simulator designed to help learners understand the core differences between Virtualization and Cloud Computing. Built with HTML, CSS, and JavaScript, it provides hands-on experience with virtual machine creation, cloud service scaling, and real-world technology decision-making.
| Module | Focus | Description |
|---|---|---|
| 01 — Compare | Concepts | Side-by-side comparison of Virtualization vs. Cloud Computing with interactive feature highlighting |
| 02 — VM Builder | Virtualization | Build virtual machines on a physical server, allocate resources, and see utilization in real-time |
| 03 — Cloud Scaler | Cloud Computing | Spin up cloud services, adjust quantities, and watch monthly costs update dynamically |
| 04 — Decision Advisor | Applied Learning | Get technology recommendations for 6 real-world business scenarios |
| 05 — Quiz | Assessment | 8-question quiz with instant feedback and detailed explanations |
| Feature | Virtualization | Cloud Computing |
|---|---|---|
| Definition | Divides a single physical server into multiple isolated virtual machines (VMs) | A service delivering computing resources (servers, storage, networking, software) over the internet |
| Hardware Dependency | Highly dependent on physical hardware — requires on-premises servers | Minimal hardware dependency — cloud provider manages physical infrastructure |
| Scope | Primarily focused on server or client virtualization | Broad — storage, processing, networking, AI, databases, and application services |
| Purpose | Maximize use of computing resources by dividing a single server into multiple VMs | Provide scalable computing resources on demand via pay-per-use pricing |
| Access | Accessed through local networks or directly on the host — no internet required | Accessed through the internet from anywhere — enables mobility and remote usage |
| Control | More control and customization over the virtualized environment | Less infrastructure control — service provider manages underlying hardware |
| Use Cases | Server consolidation, running multiple OS environments, testing and development | Web hosting, extensive data analysis, cloud-based apps, global scalability |
- Category filter buttons — Definition, Hardware, Scope, Purpose, Access, Control, Use Cases
- Highlight feature rows across both columns simultaneously
- Visual indicators — Azure for Virtualization, Cyan for Cloud Computing
- "VS" orb animation with floating effect
- Key insight card — "Virtualization is the foundation of cloud computing"
| Resource | Capacity | Description |
|---|---|---|
| CPU Cores | 32 | Physical cores available for allocation |
| RAM | 128 GB | Memory for virtual machines |
| Storage | 10 TB | Disk space for VM storage |
| VM Type | Icon | CPU | RAM | Disk | Color |
|---|---|---|---|---|---|
| Web Server | 🌐 | 4 cores | 8 GB | 0.5 TB | #1565c0 |
| Database | 🗄️ | 8 cores | 32 GB | 2 TB | #6a1b9a |
| Dev/Test | 🧪 | 2 cores | 4 GB | 0.25 TB | #2e7d32 |
| Analytics | 📊 | 16 cores | 64 GB | 3 TB | #e65100 |
| Mail Server | 📧 | 2 cores | 8 GB | 1 TB | #00838f |
| Backup | 💾 | 1 core | 2 GB | 4 TB | #4527a0 |
- Add VM — Creates a new VM with random type (checks available resources)
- Start Selected — Changes VM state to running (green indicator)
- Stop Selected — Changes VM state to stopped (gray indicator)
- Delete VM — Removes selected VM and frees resources
- Resource bars — Real-time CPU, RAM, and disk utilization
- Visual warnings — Bar turns red when resources exceed 85%
- Server Consolidation — Run multiple workloads on one physical machine
- Isolation — Each VM runs independently; one crash doesn't affect others
- Snapshots & Recovery — Save VM states and roll back on failure
- OS Flexibility — Run Windows, Linux, and macOS on the same hardware
| Service | Icon | Type | Unit | Cost/Unit | Description |
|---|---|---|---|---|---|
| Compute Instances | ⚡ | IaaS | instance | $50/mo | Virtual servers in the cloud |
| Managed Database | 🗄️ | PaaS | instance | $120/mo | Fully managed SQL/NoSQL databases |
| Object Storage | 📦 | IaaS | TB | $25/mo | Scalable file and data storage |
| Content Delivery | 🌍 | SaaS | TB bandwidth | $15/mo | Global content distribution network |
| AI/ML Processing | 🤖 | PaaS | GPU hour | $200/mo | Machine learning model training |
| Serverless Functions | ⚡ | PaaS | M requests | $5/mo | Event-driven code execution |
- Quantity controls — Increase/decrease instances with +/- buttons
- Real-time cost calculation — Monthly estimate updates instantly
- Cost breakdown — Itemized list showing each service contribution
- Scale badges:
- 🟢 No services active — Green
- 🔵 Small Scale — Startup — Blue (<$500/mo)
- 🟡 Mid Scale — SMB — Amber ($500-2,000/mo)
- 🔴 Enterprise Scale — Red (>$2,000/mo)
- Scalability — Instantly add or remove resources as demand changes
- No upfront CapEx — Pay only for what you use, when you use it
- Global reach — Deploy in multiple regions with a few clicks
- Managed infrastructure — Provider handles hardware maintenance
- High availability — Built-in redundancy across data centers
| Type | Direction | Description |
|---|---|---|
| Horizontal | ↔ | Add more instances of the same service (more web servers) |
| Vertical | ↕ | Increase power of existing instances (larger database) |
| Scenario | Icon | Description | Recommendation |
|---|---|---|---|
| Startup Web App | 🚀 | Launch web app quickly with minimal upfront investment | ☁️ Cloud Computing |
| Financial Institution | 🏦 | Run regulated workloads with strict data sovereignty | 🖥️ Virtualization |
| ML Training Pipeline | 🤖 | Burst computing power for model training | ☁️ Cloud Computing |
| Hospital Records | 🏥 | HIPAA-compliant patient data within network | 🖥️ Virtualization |
| E-commerce Platform | 🛒 | Massive traffic spikes during seasonal sales | ☁️ Cloud Computing |
| Development & Testing | 🧪 | Isolated environments for different OS configs | 🖥️ Virtualization |
- Scenario cards — Click to select and see recommendation
- Detailed analysis for each case:
- Recommendation badge — CLOUD or ON-PREM
- Reasoning — Why this technology fits the scenario
- Advantages — 3 benefits specific to this case
- Tradeoffs — 3 considerations to evaluate
- Color-coded — Azure for Virtualization, Cyan for Cloud Computing
☁️ Cloud Computing Recommended — High Confidence Match
REASONING: Cloud computing is ideal for startups — zero upfront
hardware costs, instant scaling, and pay-per-use pricing means you
only spend when you grow.
ADVANTAGES FOR THIS CASE:
• No capital expenditure
• Deploy globally in minutes
• Auto-scale during traffic spikes
TRADEOFFS TO CONSIDER:
• Monthly recurring costs
• Limited infrastructure control
• Vendor dependency
| # | Topic |
|---|---|
| 01 | Primary purpose of virtualization |
| 02 | Technology requiring internet access |
| 03 | Best fit for zero upfront costs and global scaling |
| 04 | Virtualization's relationship to cloud computing |
| 05 | Cloud characteristic not provided by virtualization |
| 06 | HIPAA compliance technology choice |
| 07 | Definition of "pay-per-use" |
| 08 | Better use case for cloud vs virtualization |
- Progress dots — Visual indicator of answered questions
- Letter-based selection (A/B/C/D)
- Immediate feedback with detailed explanations
- Color-coded results (✅ correct / ❌ incorrect)
- Final score with percentage and personalized message
- Retake option to reinforce learning
Q1: What is the primary purpose of virtualization?
[A] To deliver software over the internet
[B] To maximize use of computing resources by dividing a single server into VMs ✓
[C] To provide pay-per-use cloud services
[D] To replace all physical hardware with virtual hardware
- Light blue sky background (
#f0f6ff) with gradient - Floating cloud particles with drift animation
- Azure primary (
#1565c0) for virtualization - Cyan accents (
#0097a7) for cloud computing - White glass-morphism cards with backdrop blur
- Soft shadows and rounded corners (12-14px radius)
- DM Serif Display — Headers, titles, key numbers
- IBM Plex Mono — Monospace for stats, labels, technical data
- DM Sans — Body text for readability
- Resource bars with gradient fills and color warnings
- VM cards with state indicators (running/stopped)
- Cost breakdown with itemized lines
- Scenario cards with emoji icons
- Progress dots for quiz tracking
- Floating icon animations
| Element | Color | Hex | Usage |
|---|---|---|---|
| Virtualization | Azure | #1565c0 |
VM Builder, Compare col 1 |
| Cloud Computing | Cyan | #0097a7 |
Cloud Scaler, Compare col 2 |
| Running VM | Green | #2e7d32 |
Active VM state |
| Warning | Orange | #f57c00 |
Resource warning (>85%) |
| Critical | Red | #c62828 |
Over-allocation alert |
| Small Scale | Green | #4caf50 |
Startup tier |
| Mid Scale | Amber | #f57c00 |
SMB tier |
| Enterprise | Red | #c62828 |
Enterprise tier |
┌─────────────────────────────────────┐
│ STRATOS Cloud Simulator │
├─────────────────────────────────────┤
│ │
│ ┌─────────────────────────────┐ │
│ │ Module 1: Compare │ │
│ │ • 7 feature categories │ │
│ │ • Side-by-side columns │ │
│ │ • Highlight system │ │
│ │ • Key insight card │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Module 2: VM Builder │ │
│ │ • 6 VM types │ │
│ │ • Resource allocation │ │
│ │ • State management │ │
│ │ • Real-time bars │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Module 3: Cloud Scaler │ │
│ │ • 6 services │ │
│ │ • Quantity controls │ │
│ │ • Cost calculation │ │
│ │ • Scale badges │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Module 4: Advisor │ │
│ │ • 6 scenarios │ │
│ │ • Recommendation engine │ │
│ │ • Pros & cons lists │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ Module 5: Quiz │ │
│ │ • 8 questions │ │
│ │ • Progress tracking │ │
│ │ • Detailed explanations │ │
│ │ • Score display │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
// Module 1: Compare
hilite(feat, btn) // Highlight feature rows by category
// Module 2: VM Builder
addVM() // Add random VM type (checks resources)
renderVMs() // Render VM grid with state indicators
updResources() // Update resource bars and counters
startVM() // Start selected VM
stopVM() // Stop selected VM
deleteVM() // Delete selected VM
showVMDetail(vm) // Show VM configuration
// Module 3: Cloud Scaler
renderSvcs() // Render cloud services grid
adjQty(id, delta) // Adjust service quantity
updCost() // Update total cost and breakdown
// Module 4: Decision Advisor
showRec(s) // Show recommendation for scenario
renderScenarios() // Render scenario cards
// Module 5: Quiz
renderQ() // Render current question
ansQ(i) // Check answer and show feedback
showScore() // Display final score
restartQuiz() // Reset quiz| Module | Items | Interactions | Learning Outcomes |
|---|---|---|---|
| 01 — Compare | 7 feature categories | Category filter buttons, row highlighting | Understand key differences between virtualization and cloud |
| 02 — VM Builder | 6 VM types, 4 VM controls | Add/start/stop/delete VMs, resource monitoring | Experience resource allocation and virtualization benefits |
| 03 — Cloud Scaler | 6 services, quantity controls | Adjust quantities, cost tracking | Understand pay-per-use pricing and cloud economics |
| 04 — Advisor | 6 scenarios | Scenario selection, recommendation display | Apply concepts to real-world business decisions |
| 05 — Quiz | 8 questions × 4 options = 32 choices | Answer selection, submission, feedback | Test and reinforce comprehensive knowledge |
| Time | Scene | Action |
|---|---|---|
| 0:00 | Header | Show cloud particles and floating logo |
| 0:05 | Module 1 | Click "Definition" filter → Features highlight across both columns |
| 0:10 | Module 2 | Add 2 VMs → Resource bars update to show allocation |
| 0:15 | Module 2 | Select a VM → Show configuration details |
| 0:20 | Module 2 | Start VM → Status changes to running (green) |
| 0:25 | Module 3 | Increase Compute Instances to 3 → Cost updates to $150 |
| 0:30 | Module 3 | Add Database → Cost updates to $270 |
| 0:35 | Module 3 | Scale badge changes to "Mid Scale — SMB" |
| 0:40 | Module 4 | Click "Startup Web App" → Shows Cloud recommendation |
| 0:45 | Module 4 | Scroll through advantages and tradeoffs |
| 0:50 | Module 5 | Answer 2 quiz questions → Progress dots update |
| 0:55 | Module 5 | Submit → Show feedback with explanation |
| 1:00 | Close | Return to comparison module |
- Load Time: < 2 seconds (zero external dependencies)
- Memory Usage: < 35 MB
- CPU Usage: Minimal (event-driven)
- Network: Zero requests after initial load
STRATOS is a completely safe educational platform:
- ✅ No actual cloud resources consumed
- ✅ All simulations run in browser memory
- ✅ No data collection or tracking
- ✅ No external dependencies
- ✅ Pure HTML/CSS/JavaScript
- ✅ Educational purposes only — learn cloud concepts safely
MIT License — see LICENSE file for details.
- IBM IT Fundamentals Curriculum — Cloud and virtualization concepts
- NIST Cloud Computing Definition — Essential characteristics framework
- AWS/Azure/GCP — Real-world cloud pricing inspiration
- VMware — Virtualization technology reference
- GitHub Issues: Create an issue
- Website: https://willie-conway.github.io/STRATOS/
- Add more VM types (6+ additional configurations)
- Include hybrid cloud scenarios
- Add containerization comparison (Docker/Kubernetes)
- Simulate auto-scaling rules
- Include cost optimization recommendations
- Add region selection for cloud services
- Multi-cloud comparison
- Export cost estimates as PDF
- Real-world case studies
- Interactive architecture diagrams
☁️ STRATOS — Master Cloud and Virtualization Through Simulation ☁️
Last updated: March 2025