💡 Inspiration
Every day, over 95% of teenagers go online, navigating a digital minefield filled with spear-phishing emails, manipulated AI voice clones, fake QR codes (quishing), and OTP intercept scams. Traditional cybersecurity education in schools often fails: it relies on dry, theoretical slide decks or corporate compliance checklists that bore students. Furthermore, 45-minute classroom periods leave teachers with no time to diagnose individual knowledge gaps or deal with forgotten passwords.
We asked ourselves: What if learning cybersecurity felt like training in a tactical cyber defense laboratory?
We built CyberShield (CyberSimulator) to transform cybersecurity education for students aged 11–18 (Grades 6–12). By pairing Azure AI Foundry (GPT-5) with an immersive, gamified cyber-aesthetic terminal, students face dynamic, hyper-realistic teenage dilemma scenarios where every choice teaches consequences in a safe sandbox.
🛡️ What It Does
CyberShield is an end-to-end interactive cyber safety curriculum and simulation platform adhering to NIST SP 800-181 standards:
8 Tactical Cyber Threat Vectors:
- 🎣 Phishing Frenzy: Deceptive emails, fake gaming tournament links, and spoofed school alerts.
- 🔐 The OTP Trap: Urgent fraud calls, social engineering, and verification theft.
- 🌐 Replica Realms: Typosquatting, deceptive lookalike URLs, and fake storefronts.
- 🛡️ Digital Shadows: Toxic gaming chats, cyberbullying mitigation, and bystander defense.
- 👁️ Open Secrets: Geotagging leaks, public Wi-Fi risks, and social media oversharing.
- 📱 The Malicious Matrix: Quishing vectors and tampered QR code stickers.
- 🤖 Synthetic Deception: Deepfake blackmail, voice clones, and AI hallucinations.
- 🔑 Citadel Secrets: Passphrase construction, credential stuffing, and MFA hygiene.
Dynamic Azure AI Foundry Question Engine (
CyberQuizAgentrunninggpt-5):- Dynamically generates authentic, age-appropriate scenarios on the fly with strict JSON schema validation.
- Delivers empathetic, personalized AI mentorship explaining the real-world mechanics behind why an attack succeeded or failed.
- Features a zero-downtime offline curated question fallback bank.
Gated Certificate of Cyber Mastery:
- Generates a digitally authenticated vector PDF certificate with unique cryptographic serials, issued only upon verified 100% curriculum completion.
Faculty Educator Telemetry & Classroom Inspector:
- Live class proficiency analytics powered by Chart.js.
- Automatic Weakest Topic Alarms alerting teachers to the vulnerabilities students struggle with most.
- Granular Attempt Inspector drilling down into exact student responses and AI reviews.
- 1-Click CSV gradebook export for school administration.
Role-Gated Security Architecture:
- Students authenticate with email, class, and roll number.
- Teachers register through a strict, mandatory School Authorization Gate preventing student privilege escalation.
📐 Mathematical Formulation & Scoring Logic
CyberShield employs deterministic mathematical models to evaluate student mastery, class standing, and threat vulnerability.
1. Topic Proficiency & Scoring
A student $s$ completing a quiz in topic $t$ with $N_q$ scenario questions is scored via indicator function $\mathbb{I}$: $$\text{Score}(s, t) = \sum_{i=1}^{N_q} \mathbb{I}\Big(\text{answer}_i = \text{correct}_i\Big)$$
$$\text{Accuracy}(s, t) = \left( \frac{\text{Score}(s, t)}{N_q} \right) \times 100\%$$
2. Topic Mastery Threshold
Mastery over a threat vector requires at least a two-thirds majority score ($\ge 66.7\%$): $$\text{Mastery}(s, t) = \begin{cases} 1 & \text{if } \text{Score}(s, t) \ge \left\lceil \frac{2}{3} \cdot N_q \right\rceil \ 0 & \text{otherwise} \end{cases}$$
3. Certificate of Cyber Mastery Gate
The official vector certificate $\mathcal{C}$ is locked until all $M = 8$ threat vectors achieve verified mastery: $$\mathcal{C}{\text{status}}(s) = \prod{j=1}^{M} \text{Mastery}(s, t_j) = \begin{cases} \text{UNLOCKED} & \text{if } \sum_{j=1}^{M} \text{Mastery}(s, t_j) = 8 \ \text{LOCKED} & \text{if } \sum_{j=1}^{M} \text{Mastery}(s, t_j) < 8 \end{cases}$$
4. Class Threat Vulnerability Index
For educators, the class vulnerability index $\mathcal{V}c(t)$ for threat vector $t$ across class roster $S_c$ highlights curricular blind spots: $$\mathcal{V}_c(t) = 1 - \frac{1}{|S_c|} \sum{s \in S_c} \frac{\text{Score}(s, t)}{N_q}$$
🧠 How We Built It
We engineered CyberShield with a Dual-Architecture Strategy sharing a unified cloud data layer:
- Cloud Persistence Layer: Hosted on Supabase Cloud PostgreSQL 17 via AWS Seoul, utilizing the PgBouncer/Supavisor transaction pooler (Port 6543) for stateless multi-client connections.
- External AI Engine: Connected to Azure AI Foundry via the OpenAI Protocol, invoking a deployed
CyberQuizAgent(gpt-5) configured with deterministic temperature bounds and strict JSON output schemas. - Dual Frontends:
- Streamlit Cloud Edition (
streamlit_app.py): Real-time, serverless interactive frontend deployed globally on Streamlit Community Cloud with bidirectional URL state synchronization (?page=&topic=&cadet_id=). - Django Monolith (
config/): Enterprise-grade Django 5+ backend with WhiteNoise static compression, custom context processors, Gunicorn, and Azure App Service readiness.
- Streamlit Cloud Edition (
- Design System (Nexus Studio Cyber Aesthetic): Custom dark-mode UI with an Obsidian canvas (
#04040a), glowing Signal Electric Lime accents (#e8ff47), Clash Display & Cabinet Grotesk typography, and fluid CSS media queries. - Vector Certificate Engine: Built with ReportLab, dynamically stamping recipient metadata, distinction ribbons, instructor seals, and serial identifiers directly onto vector PDF canvases.
🧗 Challenges We Ran Into
Deterministic LLM Output in Classroom Contexts:
- Problem: Generative AI models occasionally output Markdown formatting around JSON blocks (
json ...) or generate scenarios too advanced for 11-year-olds. - Solution: We built a multi-stage parser in
AIServicethat scrubs Markdown fences, validates payloads against a strict Pydantic/dataclass schema, and enforces age-appropriate content filters (ages 11–18). If latency spikes, a curated fallback question bank engages automatically.
- Problem: Generative AI models occasionally output Markdown formatting around JSON blocks (
Session Persistence on Serverless Reloads:
- Problem: Streamlit reboots its Python worker on browser refresh, causing user sessions to drop or resurrecting stale sessions after logout.
- Solution: We implemented a bidirectional cookie/
localStoragesync bridge. When a user logs out, a persistent cryptographic sentinel (cybershield_logged_out=1) is written across both browser storage and HTTP headers, preventing session resurrection even on hard refreshes.
Database Concurrency across Serverless Nodes:
- Problem: Standard PostgreSQL connection limits (max 15–20) were rapidly exhausted by serverless instances.
- Solution: Migrated the database connection string to Supabase's transaction pooler on port 6543, supporting thousands of concurrent student queries.
Universal Responsive Design:
- Problem: Multi-column Streamlit layouts (
st.columns(4)) squeezed cards into 80px slivers on mobile devices. - Solution: Injected targeted
@media (max-width: 768px)CSS rules fordiv[data-testid="stHorizontalBlock"], transforming the layout into a fluid, two-tier mobile navbar and auto-stacking 100% width touch targets.
- Problem: Multi-column Streamlit layouts (
🏆 Accomplishments That We're Proud Of
- 33 / 33 Passing Automated Tests: Comprehensive test suite covering authentication, database constraints, AI service fallbacks, and score calculations.
- Instant Classroom Accessibility: Runs seamlessly across any device—from school Chromebooks and iPads to iPhones and desktop browsers.
- Zero Student Cheating Vectors: Scenario answer choices are randomized per session, and questions are dynamically generated by GPT-5.
- Zero PII Exposure: Password hashing with PBKDF2/SHA256, HTTPS enforcement, and scoped faculty tokens.
📚 What We Learned
- How to effectively deploy and orchestrate Azure AI Foundry agents with OpenAI protocol endpoints.
- Techniques for synchronizing state between Python serverless frameworks and browser storage APIs (
localStorage, RFC 6265 cookies). - The nuances of educational UX: gamification mechanics (badges, ranks, signal accents) drive significantly higher teenage engagement than standard quiz forms.
🔮 What's Next for CyberShield
- Multimodal Phishing Simulators: Expanding the Azure AI pipeline to generate synthetic email headers, deceptive image attachments, and audio voice-clone snippets for interactive forensic analysis.
- Live Multiplayer "Defend the School" Battles: Real-time WebSocket classroom competitions where classes defend a shared school network from simulated AI cyber attacks.
- Canvas / Google Classroom LTI Integration: Allowing teachers to sync quiz grades and attempt analytics directly into school learning management systems.
Built With
- azure-ai-foundry
- chartjs
- css3
- cybersecurity
- django
- edtech
- education
- gpt-5
- gunicorn
- html5
- javascript
- llm
- multimodal-ai
- openai-api
- pgbouncer
- postgresql
- python
- reportlab
- responsive-design
- rest-api
- streamlit
- supabase
- tailwind-css
- vector-pdf
Log in or sign up for Devpost to join the conversation.