Flag Collector

Inspiration

The project was inspired by Capture the Flag (CTF) competitions and the idea of making a beginner-friendly challenge. We wanted to create something fun that helps people practice code inspection skills while interacting with a playful interface.

What it does

Flag Collector hides a secret flag split into three parts across different files:

• HTML → one part hidden in a comment.
  
• CSS → another part disguised in styling.
  
• JavaScript → a final piece embedded in the script.
  

Players must explore the source code to find each part and assemble the full flag.

How we built it

• HTML provides the structure and hides the first clue.
  
• CSS controls the look and embeds the second clue.
  
• JavaScript adds animations (like the ⭐ and 🐸) and contains the third clue.
  
• Extra pages (instructions.html and hint.html) were added to guide players without spoiling the challenge. ## Challenges we ran into
• Making the flag parts hidden but still discoverable for beginners.
  
• Ensuring animations were smooth across different browsers.
  ## Accomplishments that we're proud of
• Built a self-contained mini CTF challenge that teaches basic inspection skills.
  
• Designed a playful interface with subtle animations to keep the challenge engaging.
  
• Successfully split and hid the flag across HTML, CSS, and JS.
  ## What we learned
• How to creatively use comments, styles, and scripts for puzzle design.
  
• The importance of user experience when building learning-focused challenges.
  
• How small details (like placement of the frog and star) add personality to the project. ## What's next for Flag Collector
• Add more levels with harder challenges, such as obfuscated code or encoded text.
  
• Introduce automated flag validation so players know when they’ve solved it.
  
• Expand into a series of mini-CTFs for teaching web security basics.
  

Built With

• css
• html
• javascript