Hocus Focus

The web is filled with time consuming distractions. With the help of Hocus Focus you'll be able to work without interruption, focus on goals, and keep track of your progress with just a few clicks.

Comment

Inspiration

The internet is a wonderful tool that provides a way to connect with other people, learn whatever you want to learn, and create many incredible things. However, it comes at a large cost which many are only beginning to realize. With distractions easily accessible at all times and platforms and applications literally designed to be addictive, there's no doubt that these distractions are becoming an increasing problem.

As students we understand how difficult it can be to avoid subconsciously going to Facebook to check up on friends are browse Netflix to find the next best series to Binge. We wanted to conquer the problem of internet distractions and make a Chrome Extension that not only helps counter these distractions from occurring but also promote healthy studying and planning skills. Our extension helps 'magically' cause distractions to disappear, helping the user truly control their internet habits during times of need.

What it does

While there are plenty of website blockers already publicly available, our extension is specifically tailored towards students for when they're studying or trying to accomplish a series of tasks. Our chrome extension contains multiple tools such as:

  • A Website Blacklisting System, which blocks URLs by preventing the tab to even be opened up. The system is synced across Chrome, ensuring that distracting websites are easily blocked at all times deemed necessary.
  • An Interactive To-Do List, which allows users to keep track of the tracks that both need to be done and have been finished. Similarly to the Website Blacklisting System, the system is also synced with Chrome, which means that the To-Do List will remain untouched and waiting for the user even if the browser is closed. The To-Do List even contains a system that rewards the user by playing joyful sounds when a task is completed.
  • A Performance Stopwatch: A stopwatch that initiates the website blocking and keeps track of the amount of time you've spent studying or doing tasks, tracking information used for future analyzation.

This extension is all neatly packed up and extremely easy to use making it simple for students to immediately get to work (rather than focusing on initializing all these tools). At a flip of a switch, Hocus Focus cleans the internet of distractions and allows it to only be a useful tool for students to work and learn.

How we built it

Because we wanted Hocus Focus to be available to as many students as possible, we decided to create a Chrome Extension, which can be used on practically any computer in an extremely short amount of time. Using a mixture of HTML and Javascript, we were able to build an extension from the ground up and create a pop-up menu for easy access and a settings page which allows for more control over the extension. We also utilized Javascript to keep code running in the background so that our user didn't have to worry about interacting with the extension while they were focused and working. We were then able to use CSS to make the extension beautiful and user friendly. By working with these different languages, we were able to make a useful tool that works with Chrome to create a good working environment without being distracting. The best part? It's extremely simple to install and simply requires a few steps to add it into Chrome Extensions. It will only take a few seconds to load up on hours upon hours of productive studying and work.

Challenges we ran into

While we had a very big goal in mind, there were a lot of baby steps that our whole team had to take. The biggest part was not knowing ANY of the languages; we all primarily coded in Java or Python. Learning how HTML, CSS, and Javascript interacted with each other had a huge learning curve and we spent a lot of time trying to learn the fundamentals of each language. However, these challenges in itself proved to be very valuable. We were able to learn about how to resolve and debug through experience, and we also solidified our fundamental CS concepts that we applied to these new languages. We were also able to implement many of the challenging features we had in mind, which makes us excited for the features we plan to implement in the future.

Accomplishments that we're proud of

What makes this extension so great was the integration of Google's "cloud" (for lack of a better description). Our code stores a lot of things within the user profile which ensures that users won't have to worry about the list of websites they want blocked or the the list of tasks they need done disappearing. This was an INCREDIBLY difficult process that we didn't realize would be so hard to integrate, but after hours of debugging and coding we were able to successfully code it, which will save users loads of time in the long run.

Along with that, we're extremely proud to have created a product that we feel looks presentable and actually useable in real life. We took a lot of problems that we personally had with internet distractions and working as well as other people's personal gripes and resolved them with a toolset that's represented simply with a chrome extension pop up. It's amazing knowing that we've created such amazing tools that can be accessible and usable to anyone who wants to use them.

What we learned

Besides the obvious part that we practically learned the basic fundamentals of these three languages, we also learned a lot about real world product production and how these chrome extensions worked. It was amazing to see what goes on in the background of these simple little buttons and it truly helped us understand what work we were taking for granted. We also learned a lot about project planning, especially since we spent a lot of time preparing an idea and setting milestones to ensure that we had a proper project by the end of the hackathon.

What's next for Hocus Focus

Hocus Focus doesn't just end with the SD Hackathon. While it is currently a package that users need to download and manually install, we're planning to add it to the Chrome Store to make it easily downloadable for all users, which means more and more people will be able to use the internet more productively. Along with that, there are lots of features that we've begun to implement but due to lack of time were unable to complete. We created code that would track the amount of time a user has studied for which we hope to visualize within our settings page in an analytics tabs. We also have goals of implementing more visualizations and analytics, such as when you tend to study, how long your study sessions tend to be, etc. Along with that we're hoping to add additional modes of focus. Currently our extension allows for you to manually start and stop the timer and the tools but we're hoping to incorporate a mode that doesn't allow you to pause the tools unless you've completed all the tasks you've written on your list. There is a variety of tasks that we're aiming to implement, and we're hoping that this extension can be added onto the store to increase ease of use even more. Hocus Focus isn't only a hackathon project, it's an idea that we feel can truly better students lives and help in their education, and we're extremely excited for its future.

Share this project:

Updates