HackTrace – Hacker Pattern Simulation Game

HackTrace

🔍 What Inspired Me

The idea for HackTrace was sparked during a cybersecurity awareness session where I noticed how many people, even in tech, were unaware of how real-world hacking tactics like phishing, SQL injection, and social engineering actually work. I thought:

“What if there were a fun, interactive way to learn how hackers think — and how to defend against them?”

And so, HackTrace was born: a gamified simulation tool that educates users through real-life cyber attack scenarios.

🧠 What I Learned

Building this project taught me a lot about:

🛡️ Cybersecurity fundamentals — such as ethical hacking, social engineering red flags, and secure decision-making.
💻 Frontend development — particularly crafting UI in pure HTML, CSS, and JavaScript.
🧩 Game logic design — like looping questions, scoring mechanics, and progressive levels.
📱 Responsive design — ensuring it works beautifully on both desktop and mobile devices.

Mathematically, the scoring system is simple but effective:

[ \text{score}{n+1} = \text{score}_n + \text{option.points} ] [ \text{level}{n+1} = \text{level}_n + 1 ]

🔨 How I Built It

Frontend: HTML, CSS (with custom styles), and JavaScript
Logic: A dynamic array of questions simulates various cybersecurity scenarios.
Looping Questions: The app uses modulo logic to cycle through the questions infinitely: js const question = questions[currentIndex % questions.length];
Mobile Friendly: CSS media queries adjust the layout for screens under 768px.

🧗 Challenges I Faced

Infinite Questions with Variety
Making the game endlessly playable required a looping mechanism while keeping it engaging. I used modular arithmetic to cycle through the questions.
UI/UX Design Without Frameworks
Building a professional-looking UI without libraries like Bootstrap or Tailwind required meticulous CSS tweaking — including padding, flex layouts, hover animations, and dark mode aesthetics.
Scoring System Balance
Finding the right point values to reward/penalize the user fairly took a few tries to avoid users gaining too much score too quickly.
Mobile Responsiveness
Adapting the layout for smaller screens while maintaining usability was a challenge — solved with custom media queries.

🧠 What’s Next?

🧠 Add more advanced cybersecurity levels (e.g., MITM attacks, password cracking, etc.)
🌍 Turn it into a Progressive Web App (PWA)
🧪 Include backend support to track scores or add multiplayer battles
🛡️ Link to real-world security tools and tips after each question