Learn Cell Biology interactively, visually, and enjoyably.
- Interactive SVG cell with realistic organelles and gradients
- Animal/Plant toggle - switch between cell types (cell wall, chloroplasts, central vacuole)
- Detailed organelle information - function, structure, fun facts, and memory cards
- Progress tracking - monitors which organelles you've explored
- 20 questions organized by categories: Organelles, Membrane, Transport, Cytoskeleton, Cell Types
- Scoring system with streak bonus points
- Topic filtering - practice only what you need to review
- Immediate feedback with educational explanations
- Final results with medals and badges
- Build your own cell by adding organelles one by one
- Realistic visuals - each organelle has its own shape, color, and details (mitochondrial cristae, ribosomes on RER, etc.)
- Hint system to guide users
- Celebration upon completion
- Comparative table of Prokaryotic vs. Eukaryotic cells
- SVG visualization of relative sizes
- 11 characteristics compared point by point
| Topic | Content |
|---|---|
| 🧠 Nucleus | Nuclear envelope, chromatin, nucleolus |
| ⚡ Mitochondria | Double membrane, cristae, mitochondrial DNA |
| 🏭 Ribosomes | Subunits, rRNA, protein synthesis |
| 🕸️ Rough ER | Attached ribosomes, protein synthesis |
| 🧈 Smooth ER | Lipids, detoxification, calcium storage |
| 📦 Golgi Apparatus | Cisternae, vesicles, packaging |
| 🛡️ Plasma Membrane | Fluid mosaic, phospholipids, proteins |
| 🦴 Cytoskeleton | Microfilaments, intermediate filaments, microtubules |
| 🚛 Cellular Transport | Passive, active transport, endo/exocytosis |
| 🌿 Chloroplast | Photosynthesis, thylakoids, chlorophyll |
| 🦠 Prokaryote vs. Eukaryote | Structural and functional differences |
# Clone the repository
git clone https://github.com/Bredalis/biolab-interactive.git
# Enter the directory
cd biolab-interactive
# Open in browser (macOS)
open index.html
# Or on Linux
xdg-open index.html
# Or on Windows
start index.html# With Python 3
cd biolab-interactive
python -m http.server 8000
# Visit http://localhost:8000# With Node.js
npx serve .
# With PHP
php -S localhost:8000- Push the repo to GitHub
- Go to Settings → Pages
- Select the
mainbranch and/ (root)folder - Your app will be at
https://Bredalis.github.io/biolab-interactive/
# Drag the folder to https://app.netlify.com/drop
# Or use Vercel CLI:
npx vercel --prodbiolab-interactive/
├── index.html # Main page (semantic HTML)
├── styles.css # Complete styles (modern CSS with variables)
├── app.js # Application logic (vanilla JS)
├── assets/ # Images and additional resources
├── README.md # This file
└── LICENSE # MIT License
- HTML5 — Semantic structure and interactive SVG
- CSS3 — CSS Variables, Grid, Flexbox, animations, responsive design
- JavaScript (ES6+) — Vanilla JS, no external dependencies
- SVG — Scalable vector graphics with gradients and animations
- Google Fonts — Nunito typeface for readability
- Flashcard study mode (Anki-style cards)
- Vesicular transport animations (RER → Golgi → membrane)
- "Day in the life of a cell" simulation
- Multilingual support (English, Portuguese)
- PWA (Progressive Web App) for mobile installation
- AR mode with WebXR for 3D cell visualization
Contributions are welcome! If you find a bug or have an idea:
- Fork the repository
- Create a branch (
git checkout -b feature/new-feature) - Commit your changes (
git commit -am 'Add new feature') - Push to the branch (
git push origin feature/new-feature) - Open a Pull Request
This project is licensed under the MIT License. You may use, modify, and distribute it freely for educational purposes.
MIT License
Copyright (c) 2026 biolab-interactive
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), 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.
Made with love for biology students around the world. 🌸
"The cell is the unit of life, and understanding it is understanding ourselves."
⭐ If you like this project, give it a star on GitHub!
Add these to your repository's "Topics" section:
biology, education, interactive, svg, javascript, cell-biology, organelles, quiz, learning, html5, css3, science, students, elearning, biology-education