CyberSafe IQ is a modern interactive web platform that tests your cyber safety knowledge through real-world scenarios.
You are placed in situations like a suspicious OTP request, a phishing email, a fake friend request — and you have 30 seconds to respond. The platform evaluates your awareness, decision making, and response quality — and gives you a detailed safety score with performance breakdown at the end.
Designed for everyday users who want to understand, identify, and respond to common online threats confidently.
- 🎯 10 Scenario-Based Questions — 5 MCQ + 5 Written responses covering real online threats
- ⏱️ 30 Second Live Timer — Animated glowing countdown bar per question
- 🔒 Auto-Lock System — Answers lock automatically on timeout, just like real decisions
- 📊 Detailed Result Dashboard — Animated score rings showing Awareness, Response Quality and Overall score
- 🏆 Performance Levels — Excellent, Good, Average and Needs Improvement
- 📱 Fully Responsive — Perfectly works on Mobile, Tablet and Desktop
- 🎨 Cyber-Themed UI — Dark navy background with cyan gradients and glassmorphism cards
- ✨ Smooth Animations — Framer Motion powered page and question transitions throughout
| No | Topic | Type |
|---|---|---|
| 01 | OTP and Banking Scams | MCQ |
| 02 | Fake Reward Popups | MCQ |
| 03 | Requests from Online Strangers | MCQ |
| 04 | Phishing Emails and Fake Domains | MCQ |
| 05 | Privacy Violations | MCQ |
| 06 | Suspicious Friend Requests | Written |
| 07 | Public Wi-Fi Safety | Written |
| 08 | Online Grooming Awareness | Written |
| 09 | Password Reuse Risks | Written |
| 10 | App Permission Awareness | Written |
Final Score = ( Awareness x 60% ) + ( Response Quality x 40% )
| Score Range | Performance Level |
|---|---|
| 85 – 100 | 🟢 Excellent |
| 65 – 84 | 🔵 Good |
| 45 – 64 | 🟡 Average |
| 0 – 44 | 🔴 Needs Improvement |
| Technology | Purpose |
|---|---|
| React 18 | Frontend Framework |
| Vite | Build Tool and Dev Server |
| Framer Motion | Animations and Page Transitions |
| Lucide React | Icon Library |
| CSS-in-JS | Component Level Inline Styling |
| Vercel | Deployment and Hosting |
git clone https://github.com/pitanimounika/CyberSafe-IQ.git
cd CyberSafe-IQ
npm install
npm run devOpen http://localhost:5173 in your browser.
🔗 https://cybersafe-iq.vercel.app
If this helped you, drop a ⭐ on the repo — it means a lot!
Built with ❤️ for cyber safety awareness