Website Link

Click here to check out our project!


With these unprecedented times, our team had the idea to lighten up everyone's day! Our website includes everything you might need during quarantine. We personally get bored staying at home, so we decided to create a website that is fun and informative for those doing the same. Features include a fun, interactive game with germs where you have to social distance to avoid human-like bots! Our Spark Bot provides interesting memes, activity ideas, and even helplines for a wide variety of resources. However, what makes us stand out as an isolation resource is our safety feature: the Iris Bot, which predicts if you need to be tested. During these times, even the slightest cough may indicate a dangerous infection. Therefore, we were inspired to create the Iris bot, which recommends potential tests to users based on their symptoms!

What it does

This website includes everything you need in just a few clicks: an entertaining game, human-like chat bots and informative resources regarding coronavirus! The website aesthetic was designed specifically to include calmer colours to create that atmosphere for those who may have mental health issues. Colours can be very triggering and we made sure to take that into consideration. The game is a great choice for anyone who wants to relieve stress while staying aware of social distancing procedures. One of our bots allows users who are feeling lonely to interact with a human-like companion, which provides them with home activity ideas, mental health support resources, and even some uplifting internet memes. We also have a bot that predicts if you need to get tested for covid-19 and we assure its accuracy as it follows Ontario's health guidelines. Overall, our website is a good way to just have fun playing games or even texting and also it is very informative!

How we built it

We used various platforms and languages to create our project. The static website was built entirely from scratch using HTML/CSS/JavaScript. The alignment of the objects were done using a framework called BootStrap. All the graphics were made using Canva or Google Drawings and then embedded into the website. The platform game was created with Unity, sampled and modified from Unity Learn's Platformer Microgame.

Challenges we ran into

Our team consists of four ambitious high school students who wanted to try something new. Most team members used different coding platforms and IDEs for the time, so we spent a fair amount of time figuring how things worked. We ran into several challenges, yet by working together, we were able to overcome them. Firstly, we had a few difficulties regarding the integration of our bots into our final website. We attempted to use APIs, other software, and various code examples, but to no avail. However, after almost 14 hours, we got it to work! The website developer was also not familiar with using things such as slideshows and therefore we were able to learn as we went. Finally, game development was new to all of the developers and we were successfully able to both create a game and embed it onto our website.

Accomplishments that we're proud of

We’re proud of embedding a game and two chatbots on our website, this in itself is something very unique and useful for the users. We also are proud of taking into consideration the whole user experience, from readability to current trends and aesthetic. One of our members was able to have her first hackathon experience at DefHacks 2020, and she is very proud to have completed it successfully and learned some new skills!

What we learned

All team members had lots of fun participating in this hackathon. We learned how to create and integrate bots that would respond to users in a similar way that a human would. Overall, we each learned new technical skills through experimenting and through the workshops, and had experienced the intense feeling of creating a website, bots, and game in less than 36 hours!

What's next for COVID-Support

The flexible website format allows for numerous expansion possibilities. One of our future ideas involves creating a simulation for case progression and resource availability, based on locations and case numbers that the user has provided. Another idea to maximize the impact of COVID-Support is a page involving a collection of remote volunteering opportunities that are available online. Alternatively, this could be added to Spark Bot's "Activity Suggestions" section. Using real world COVID-19 data, we plan to use different machine learning algorithms and Foursquare API to create interactive graphs so people can track active cases, total cases, recoveries and deaths specific to their location. Finally, in the future we may consider using the echoAR tool in order to add an augmented reality aspect to our website. Users may be able to scan a QR code or image with their phone, which will then open various infographic holograms that will further educate them on COVID-19 safety procedures.

Built With

Share this project: