CAPTCHA Your Attention

Inspiration

We were inspired by the idea that current methods of verification, which are required on most websites where private accounts are necessary, are boring and tedious. We believed that turning a CAPTCHA into a fun, brief game would be a more interesting, unconventional method of differentiating humans and AI/bots.

What it does

Our project runs a game in the browser made in primarily JavaScript, and it is used to test whether the user of the website is a bot or a human. We only made one game as a demo, but, as a finished product, CAPTCHA Your Attention would randomly select a game for users to play, and no two instances of a game will be the same. This game randomly drops apples and red-colored bombs, and the user is supposed to catch the apples in a basket while avoiding the bombs. The two items look similar enough that we believe an AI would not have time to recognize the difference between the objects, or move around the screen differently than a human would.

How we built it

We first created, in HTML, a generic template of a login screen, as well as a separate screen for the CAPTCHA game itself and a result screen that displays when the user passes the CAPTCHA test. We used JavaScript and CSS to style the screens and link them together so they would interact how we hoped they would. We then used PixiJS to help us develop and design the game entirely in JavaScript and display it on the screen for the user. We used royalty-free assets for both the apple and basket images, and Eli designed the bomb graphic himself.

Challenges we ran into

Our most significant challenge was a lack of experience throughout the team. None of our team members had ever participated in a hackathon or anything like it, and we were unprepared for the grind we were going to put in during the weekend. In addition, most of the team was unfamiliar with JavaScript or HTML. We were also unprepared to come up with ideas or concepts for our project until late during the first or second day of the weekend. With our evident lack of ability to use the resources we planned on using for our project, we had to learn much of JavaScript from scratch, so most of our time was spent doing that rather than actually developing our project. One problem we had not considered until late in the project, but will have to deal with after we complete it, is that JavaScript is disabled by some browsers or users, and we will have to figure out how to avoid this issue.

Accomplishments that we're proud of

We are proud of ourselves for our hard work learning how to use HTML, JavaScript, and CSS to create a website and link the pages and pieces together in such a way as to create an interesting, working project, and also for learning how to effectively use resources, including some online resources like PixiJS and GitHub Copilot. Considering how unexperienced our group with projects like this, we are proud of our whole group for working together to complete this project and do something that none of us had done of us had done before.

What we learned

We learned quite a few things during this weekend of work. We learned that none of us are prepared for the grind of events like these, and we learned how it feels to compete in a hackathon. But we also learned a lot about JavaScript and how to create and design a full-fledged website and get it posted to the internet. Overall, it was a good learning experience for all three of us in the group, and although we feel we could have done better, we all enjoyed the weekend.

What's next for CAPTCHA Your Attention

Should we continue working with this project in the future, we will have to figure out how to avoid the issue of JavaScript being disabled in some browsers, and we will definitely have to polish our game to ensure that it will properly detect the differences between AI and humans. We also hope to create some other games that will do the same, possibly even more effectively than our first game would.

Built With

• css
• cybersecurity
• html
• javascript