Digital Security for Everyone
A community-focused educational platform designed to teach essential digital security practices to the general public — regardless of age or technical background. Built as a university extension project at Centro Universitário Cidade Verde, the platform gamifies learning through a structured 11-module curriculum, a randomized 20-question final quiz drawn from a 100-question bank (with physically shuffled answer options to prevent pattern memorization), a points and level progression system, and an 8-badge achievement unlocking flow. No frameworks, no npm, no server — the entire application runs from a single HTML file with zero external dependencies, making it universally hostable and functional offline after initial load.
Project metrics
4 key metricsFull learning modules covering passwords, phishing, Pix scams, deepfakes, social engineering, and more
Questions across 3 difficulty tiers — 7 easy + 8 medium + 5 hard per quiz attempt
Unlockable badges for milestones: first module, all modules, quiz pass, perfect score, and topic-specific completions
Entire application — HTML, CSS, JS, icons — in one self-contained file with no external libraries
Problem statement
Digital fraud is Brazil's fastest-growing crime vector, but cybersecurity education remains technical and inaccessible to ordinary citizens. The goal was to create a free, frictionless platform that anyone could access via a link — covering real, everyday scams — without requiring accounts, downloads, or technical knowledge.
Most cybersecurity content is written for IT professionals, using jargon that alienates the general public
Existing awareness campaigns are static — no engagement mechanics to ensure content retention
Older adults and low-tech users are the most frequent scam victims but the hardest audience to reach with complex tools
Standard LMS platforms require accounts, logins, and infrastructure — creating barriers for a free public-education initiative
Quiz systems that always present the same answer positions allow pattern memorization without actual knowledge retention
Constraints
- Zero external dependencies — no npm, no CDN, no backend, no database
- Single-file delivery — the complete platform in one self-contained HTML file
- No user accounts — progress persisted via localStorage without capturing any personal data
- Must function offline after first load — no requests to external APIs or fonts after initial paint
Approach & modules
A gamified single-file web application with an 11-module curriculum written in plain language, a randomized quiz engine that physically shuffles answer positions on every attempt, a point-and-level progression system, 8 achievement badges, and a CSS print-based certificate generator — all in vanilla HTML5/CSS3/ES6+ with zero dependencies.
Learning Module Engine
11 structured modules with real-world scam examples, alert boxes, quick-summary cards, and practical tips — rendered dynamically from a typed data array with back/next navigation and per-module completion tracking
Quiz Engine
100-question bank across 3 difficulty tiers; each attempt draws 7 easy + 8 medium + 5 hard questions, then physically shuffles both question order and answer options to prevent pattern-based memorization
Gamification System
Points awarded per module completion (50pts) and per correct quiz answer (10pts), progressing through 4 named levels; 8 achievement badges unlocked by behavioral milestones tracked against live state
Certificate Generator
CSS @media print rule formats the certificate card to A4 Landscape for PDF export via native browser print — no canvas, no library; generates a validation code and accepts only the user's name with no personal data stored
System design
Single-file architecture with no external dependencies. The application state machine is driven by a localStorage-backed object; all UI is rendered imperatively from typed JavaScript data arrays into the DOM.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
User reads through learning modules — scam examples, alert boxes, quick summaries and practical tips
Each module marked complete awards 50 points; level and badge state updated and persisted to localStorage
Final quiz unlocks automatically once all 11 modules are marked complete
20-question randomized assessment drawn from 100-question bank — options shuffled per attempt to block pattern memorization
Score computed against 70% pass threshold; per-question feedback with full explanation shown after each answer
On passing, user enters name — CSS @media print generates A4 Landscape certificate with unique validation code for PDF export
Project journey
Key milestones and phases throughout the project lifecycle.
Single-File Design
Defined the zero-dependency constraint, scoped the 11-module curriculum structure, and established the state machine model backed by localStorage
11-Module Curriculum
Authored all module content in plain language covering passwords, phishing, Pix scams, QR code fraud, deepfakes, social engineering, privacy, and incident response
100-Question Bank & Shuffle Logic
Built the 100-question bank across 3 difficulty tiers with per-question explanations; implemented physical shuffle of both question order and answer positions per attempt
Points, Levels & Badges
Implemented the point accumulation system (50pts/module + 10pts/correct answer), 4-tier level progression, and 8 achievement badges with behavioral condition tracking
CSS Print Certificate
Designed the certificate layout and implemented @media print rules to isolate and format the certificate card to A4 Landscape for native PDF export via browser print dialog
Single-File Design
Defined the zero-dependency constraint, scoped the 11-module curriculum structure, and established the state machine model backed by localStorage
11-Module Curriculum
Authored all module content in plain language covering passwords, phishing, Pix scams, QR code fraud, deepfakes, social engineering, privacy, and incident response
100-Question Bank & Shuffle Logic
Built the 100-question bank across 3 difficulty tiers with per-question explanations; implemented physical shuffle of both question order and answer positions per attempt
Points, Levels & Badges
Implemented the point accumulation system (50pts/module + 10pts/correct answer), 4-tier level progression, and 8 achievement badges with behavioral condition tracking
CSS Print Certificate
Designed the certificate layout and implemented @media print rules to isolate and format the certificate card to A4 Landscape for native PDF export via browser print dialog
Dive into the documentation
Detailed implementation guides, architecture decisions and technical specifications for this project.