A web-based tool for high school students learning the fundamentals of evolution.
EvolutionHQ is an interactive educational web application that helps students explore genetics and evolution. It allows users to perform monohybrid and dihybrid crosses, generating offspring combinations with genotypic and phenotypic ratios, while providing smooth frontend animations. Beyond genetics, users can create a matrix table from inputted or uploaded CSV data to analyze species relationships, automatically generate a phylogenetic tree highlighting species of interest, and explore evolution through an educational page with checkpoint questions to reinforce learning.
The project combines a modern frontend (HTML, CSS, JavaScript) with a Python Flask backend to calculate Punnett square outcomes dynamically. This makes the learning experience interactive and immediately responsive.
-
Monohybrid Cross Calculator
- Input two single-gene genotypes and get all possible offspring.
- See both genotypic and phenotypic ratios.
-
Dihybrid Cross Calculator
- Input two two-gene genotypes for a more complex cross.
- Displays offspring in a Punnett square format with ratios.
-
Matrix Table
- Input or upload data from a CSV file (download one of the sample CSV datasets in
sample_datasets/to try it out!). - Generates insights about most closely related species.
- Input or upload data from a CSV file (download one of the sample CSV datasets in
-
Phylogenetic Tree Generator
- Created automatically based on information from the matrix table.
- Highlights species of interest and can be downloaded.
-
Evolution Educational Page
- Provides clear and concise information about evolution.
- Includes checkpoint questions to ensure students' comprehension.
-
Interactive Frontend
- Smooth animations for showing offspring cells.
- Toggle between monohybrid and dihybrid cross sections.
-
Production-ready API
- Flask backend hosted on Fly.io for dynamic calculations.
- Frontend hosted on Vercel for fast, static delivery.
| Layer | Technology |
|---|---|
| Frontend | HTML, CSS, JavaScript |
| Backend | Python, Flask |
| Hosting | Vercel (frontend), Fly.io (backend) |
| CORS Management | flask-cors |