Website "Escape Room" Game

Since users must actively think without being given the right answer, an escape room or scavenger hunt style game could be used as a more engaging format for beginners to learn about basic web dev.

Comment

Inspiration

I tried out the Cyber Start game (Cyber Start America) this year, and some of the activities had you inspect the webpages to find information. I had fun with that and thought that I could recreate some of that.

What it does

Users go through a series of webpages that have little puzzles or challenges such as finding a hidden message in the webpage or decrypting codes.

How we built it

I made a list of puzzles that I wanted to implement, and then I used HTML, CSS, and JS on Replit to make the website.

Challenges we ran into

I don't have experience with making websites, so I had some trouble connecting the data between the HTML and JS files. In addition, one of my puzzle ideas was to have the user look for a key in the webpage's code (right-click website and Inspect). However, I ran out of time before I could properly implement it. There's some code for that activity, but it isn't currently being used in the app.

Accomplishments that we're proud of

I have never made and customized a website and its functionalities before, so this was a great beginner's project to web development.

What we learned

How to implement functionality in web pages using JavaScript. How to create multiple web pages for a site. How to redirect users to different web pages. Comparing user input with other string data in JavaScript.

What's next for Website Game

I attended a few workshops at Hack3 and learned about machine learning and APIs. Maybe in the future I could make "escape room" games that cover these topics.

Built With

Share this project:

Updates