Inspiration
The public holds a lot of myths and gaps in knowledge about cybersecurity/data privacy, and we realized that it was hard to find accessible and engaging information about how to be safe in a world that increasingly relies on technology. We know that technology has a lot of potential, but that resources providing information about ethical tech are not as accessible, which we tried to address.
What it does
CyberSurfers aims to address issues pertaining to cybersecurity. It follows an interactive story format which teaches the user basic ways to protect themselves in cyberspace. It also shows that failure to properly set up security features such as passwords can cause them to lose resources. Cybersurfers also shows the importance of knowing what devices are yours on your network, informs about false URLs, warns against opening spam emails and choosing safe browsers.
How we built it
We started off with a goal, to educate about ethics on a cyber level and it’s importance, although we had yet to name our project, we thought of how it is connected in space and like a journey through space. Then planning and research began, using tools like miro and figma to help our ideas come to mind, research around cybersecurity and ethical game design. From there, we included the html, css, and js pages for the user to travel through the land of cyberspace.
Challenges we ran into
We wanted to use a google cloud forecast page to save the users data through their journey but we had no clue on how that would be feasible due to the fact that the journey itself isn’t long. Earlier today, we had a problem of getting the code in a GitHub repo. Also, the moving text on the first page was going the opposite direction at one point and was too fast at another. We were unable to set up the custom domain because time was against us since it could take up to 48 hours for the custom domain to come into effect.
Accomplishments that we're proud of
For a long time, the URL manipulation page didn’t work but I’m proud of eventually getting it to work by finding resources online and getting inspiration from my teammates’ code. Also, we all worked well together despite having different skill levels and not knowing each other beforehand, which we’re also proud of. We are also proud of the accessibility features we added based on previous research we did around the official “Game Design Accessibility Guidelines”
What we learned
We learned more about the steps required for web hosting, as well as how to implement different features for the site (such as a scrolling/animation feature on the start screen, and using input fields for password verification) using HTML and JavaScript. We also learned about ethical game design, and discovered so many accessibility developer tools like Adobe Color that helped us establish a color - blind friendly color palette, and understood the importance of adding accessibility features in order to give the user a better experience.
What's next for CyberSurfer
Maybe the next best thing for CyberSurfer is an app or implementation for some sort of cloud service that gives the user real world data proving the importance of cyber privacy. It would also be nice to see some more features, levels and challenges that the user can accomplish or a way to implement the blockchain into cyber ethics.
Built With
- canva
- css
- figma
- github
- html
- javascript
- replit

Log in or sign up for Devpost to join the conversation.