A web-based quiz application for learning EPA SWMM5 (Storm Water Management Model) through technical multiple-choice questions, instant feedback, detailed explanations, interactive engineering diagrams, and simulation-based quiz scenarios. [page:46]
Repository: SWMMEnablement/SWMM5QuizMaster
Replit app: replit.com/@robertdickinson/SWMM5QuizMaster
SWMM5 Quizzer is an educational full-stack web application built to help users study and reinforce SWMM5 concepts across hydraulics, hydrology, water quality, controls, LID systems, storage, infiltration, network behavior, and related topics. The app combines structured quiz content with engineering explanations, topic-specific SVG diagrams, and scenario-based simulation questions so it functions as both a quiz engine and a study tool. [page:46][page:47]
The quiz content is static and bundled directly in the frontend codebase, while the backend exists mainly to record quiz attempts. This means the core learning experience works without a database and can even be migrated to a static-site-only deployment if desired. [page:46]
- 250 technical multiple-choice questions across more than 12 SWMM5 topic categories. [page:46]
- 25 random questions per quiz session drawn from the full question pool. [page:46]
- Immediate feedback with real-time scoring and answer validation. [page:46]
- Educational explanations for every answer, including why wrong answers are close but incorrect. [page:46][page:47]
- 16 SVG diagram types with authentic SWMM5 equations and technical parameters. [page:46][page:47]
- Simulation Quiz mode with 3 pre-built hydraulic/hydrologic scenarios. [page:46][page:47]
- Quick Challenge widget on the home page for a fast single-question learning interaction. [page:46][page:47]
- Enhanced category cards with sample questions and “peek at answer” sections. [page:46][page:47]
- Practice vs Timed quiz mode selection in the main quiz flow. [page:46][page:47]
The primary question bank lives in client/src/data/questions.ts, which the handover identifies as a 2,782-line TypeScript data file containing 250 multiple-choice questions. Each question includes an id, question text, four answer options, the correct answer, an explanation, and a category label. [page:46]
The documented categories include:
- hydraulics
- water-quality
- network-components
- advanced-analysis
- climate-hydrology
- lid-systems
- controls-rules
- infiltration
- storage-systems
- network-connectivity
- temporal-analysis
- regulatory-compliance [page:46]
The replit.md history also notes expanded coverage in advanced hydraulics, LID, controls, storage systems, network topology, temporal analysis, research applications, and specialized topics, making the question bank broad enough to serve as a serious study resource rather than a casual quiz. [page:47]
A major part of the app’s educational value comes from its diagram system. The handover describes client/src/data/diagrams.ts as an 855-line file that maps technical diagram definitions to question topics and supports 16 SVG diagram types. [page:46]
These diagram types include:
- Manning equation
- Saint-Venant equations
- Green-Ampt infiltration
- Horton infiltration
- kinematic wave
- dynamic wave
- RDII
- orifice flow
- pump curves
- weir flow
- conduit flow
- storage units
- subcatchment flow
- evapotranspiration
- LID systems
- general concept diagrams [page:46]
The application uses these diagrams through components such as DiagramModal and SvgDiagram, allowing users to open a “Details & Diagram” view from explanations and see equations, parameter relationships, animations, and technical context tied to the question topic. [page:46][page:47]
One of the most distinctive features is the Simulation Quiz mode at /simulation-quiz. The handover describes this as a separate learning mode built around 3 pre-built scenarios, each with network topology diagrams, color-coded status, simulation results, and five scenario-specific questions derived from the modeled outcomes. [page:46][page:47]
The three scenarios are:
- Riverside Residential — focused on flooding. [page:46]
- Oak Creek Commercial — focused on LID behavior. [page:46]
- Downtown Combined Sewer — focused on CSO-related behavior. [page:46]
Each scenario includes nodes, conduits, subcatchments, results data, and dynamic educational explanations that connect answers back to the hydraulic outputs being displayed. This makes the app useful not just for memorization, but for interpreting SWMM-like results. [page:46][page:47]
The application uses Wouter for client-side routing and defines the following main routes: [page:46]
| Path | Component | Purpose |
|---|---|---|
/ |
Home |
Landing page with Quick Challenge, category cards, and resources. [page:46] |
/quiz |
QuizModes |
Main quiz mode selector for Practice vs Timed. [page:46] |
/quiz/:category |
QuizModes |
Category-specific quiz flow. [page:46] |
/simulation-quiz |
SimulationQuiz |
Scenario-based quiz mode. [page:46] |
/docs |
Documentation |
Documentation and source/implementation notes. [page:46] |
The Express backend exposes a small API focused on quiz attempts: [page:46]
| Method | Path | Purpose |
|---|---|---|
POST |
/api/quiz/submit |
Submit a quiz attempt with score, elapsed time, and questions. [page:46] |
GET |
/api/quiz/attempts |
Retrieve quiz attempts, optionally filtered by userId. [page:46] |
The application uses a modern TypeScript full-stack architecture: [page:46][page:47]
| Layer | Technology |
|---|---|
| Frontend | React 18 + TypeScript [page:46] |
| Styling | Tailwind CSS 3 + shadcn/ui + Radix UI primitives [page:46][page:47] |
| Routing | Wouter [page:46] |
| Server state | TanStack Query v5 [page:46] |
| Backend | Express.js + TypeScript [page:46] |
| Database layer | PostgreSQL + Drizzle ORM + Neon driver [page:46][page:47] |
| Active storage mode | In-memory MemStorage for core quiz behavior [page:46] |
| Build | Vite for frontend + esbuild for backend [page:46] |
| Runtime | Node.js + tsx in development [page:46] |
GitHub reports the repository is 99.0% TypeScript, which matches the structure of a mostly TypeScript codebase with small supporting assets. [page:45]
The handover provides the following main structure for the repository: [page:46]
SWMM5QuizMaster/
├── attached_assets/ # Supporting docs and enhancement notes
├── client/
│ ├── src/
│ │ ├── App.tsx # Route definitions
│ │ ├── main.tsx # Frontend entry point
│ │ ├── components/
│ │ │ ├── AllQuestionsView.tsx
│ │ │ ├── QuizContainer.tsx
│ │ │ ├── QuestionCard.tsx
│ │ │ ├── DiagramModal.tsx
│ │ │ ├── SvgDiagram.tsx
│ │ │ ├── ProgressBar.tsx
│ │ │ ├── QuizStats.tsx
│ │ │ ├── ResultsScreen.tsx
│ │ │ └── ui/
│ │ ├── data/
│ │ │ ├── questions.ts # 250 questions
│ │ │ ├── diagrams.ts # Diagram definitions
│ │ │ ├── enhanced-diagrams.ts
│ │ │ ├── simulations.ts # 3 simulation scenarios
│ │ │ └── questions_backup.ts
│ │ ├── pages/
│ │ │ ├── Home.tsx
│ │ │ ├── Quiz.tsx
│ │ │ ├── QuizModes.tsx
│ │ │ ├── QuizModeSelector.tsx
│ │ │ ├── SimulationQuiz.tsx
│ │ │ ├── Documentation.tsx
│ │ │ └── not-found.tsx
│ │ ├── hooks/
│ │ ├── lib/
│ │ └── types/
│ └── public/
├── icm-infoworks-quiz/ # Related/legacy content folder visible in repo root
├── server/
│ ├── index.ts
│ ├── routes.ts
│ ├── storage.ts
│ └── vite.ts
├── shared/
│ └── schema.ts
├── HANDOVER.md
├── replit.md
├── linkedin_article.md
├── package.json
├── vite.config.ts
└── tailwind.config.ts
The largest content files are the question bank, diagram definitions, and simulation scenarios, which means the app’s educational value is embedded directly in source-controlled TypeScript data files rather than external CMS content. [page:46]
Although the repository includes Drizzle ORM schema definitions and PostgreSQL configuration, the handover is explicit that the app uses in-memory storage by default and does not require a database for core quiz functionality. The database layer exists primarily for optional persistence of quiz attempts. [page:46]
The documented schema includes:
usersquizAttempts[page:46][page:47]
If a DATABASE_URL is provided and the storage implementation is switched from MemStorage to a database-backed version in server/storage.ts, the app can persist attempt history beyond server restarts. [page:46]
- Node.js 20+ [page:46]
- npm [page:46]
npm install
npm run devThis runs the application in development mode with hot reload. [page:46]
npm run build
npm startThe frontend builds to dist/public/, the backend bundles to dist/index.js, and the server runs on port 5000 by default unless overridden by the PORT environment variable. [page:46]
The documented environment variables are: [page:46]
| Variable | Required | Purpose |
|---|---|---|
PORT |
No | Server port, default 5000. [page:46] |
NODE_ENV |
No | development or production. [page:46] |
DATABASE_URL |
No | PostgreSQL connection string for optional persistence. [page:46] |
The handover highlights several key design decisions that define the app’s behavior: [page:46]
- All quiz content is static and stored in TypeScript data files, so no CMS or DB is required for questions, diagrams, or simulation scenarios. [page:46]
- In-memory storage keeps deployment simple but means attempt history resets on restart unless a DB-backed storage layer is adopted. [page:46]
- Single-port architecture allows Express to serve both the API and the built frontend from the same port. [page:46]
- No authentication is required for quiz usage, even though user/auth schema scaffolding exists. [page:46]
- shadcn/ui components are copied into the repo and can be customized locally. [page:46]
These choices keep the app lightweight and portable while still leaving room for future persistence and user features. [page:46]
The replit.md change log highlights several notable milestones: [page:47]
- The question bank expanded from 125 to 250 technical questions. [page:47]
- The app now has 100% diagram coverage across all questions with 16 total diagram types. [page:47]
- A Quick Challenge widget replaced the former documentation section on the home page. [page:47]
- Category cards gained sample questions and “Peek at answer” panels. [page:47]
- Wrong-answer explanations were upgraded into short educational micro-lessons. [page:47]
- The Simulation Quiz mode was added with 3 scenarios and dynamic result-based questions. [page:47]
- The app moved from a single-page structure to a multi-page routed application with home, quiz, docs, and simulation sections. [page:47]
The handover explicitly notes that the quiz can be deployed as a static site if needed, because scoring and quiz logic are client-side. To do that, you can build with Vite, deploy the frontend output, and remove or neutralize the API submission calls in AllQuestionsView.tsx. [page:46]
For full migration to another platform, the handover recommends removing Replit-specific Vite plugins such as @replit/vite-plugin-runtime-error-modal and @replit/vite-plugin-cartographer from both vite.config.ts and package.json. [page:46]
This project is useful for:
- SWMM users studying for interviews or exams.
- Engineers who want to deepen practical understanding of EPA SWMM5.
- Trainers building structured self-study resources for drainage and stormwater teams.
- Students learning SWMM concepts with visual and scenario-based reinforcement. [page:46][page:47]
Because it includes explanations, diagrams, and simulation-based interpretation, it is well suited for both self-study and structured instruction. [page:46][page:47]
The main internal documentation lives in:
HANDOVER.md— detailed implementation guide, routes, architecture, content files, deployment, and migration notes. [page:46]replit.md— architectural overview, change history, stack summary, and component-level notes. [page:47]
The GitHub repo currently shows the Add a README prompt, so adding this file would make the repository immediately more understandable to visitors and collaborators. [page:45]
The handover lists the project contact as Robert.Dickinson@gmail.com. [page:46][page:47]
Add the appropriate license here if the repository is intended for public reuse.