💡 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:

  1. 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.
  2. Dynamic Azure AI Foundry Question Engine (CyberQuizAgent running gpt-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.
  3. Gated Certificate of Cyber Mastery:

    • Generates a digitally authenticated vector PDF certificate with unique cryptographic serials, issued only upon verified 100% curriculum completion.
  4. 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.
  5. 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:
    1. 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=).
    2. Django Monolith (config/): Enterprise-grade Django 5+ backend with WhiteNoise static compression, custom context processors, Gunicorn, and Azure App Service readiness.
  • 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

  1. 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 AIService that 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.
  2. 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/localStorage sync 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.
  3. 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.
  4. 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 for div[data-testid="stHorizontalBlock"], transforming the layout into a fluid, two-tier mobile navbar and auto-stacking 100% width touch targets.

🏆 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
Share this project:

Updates

Submission history