Safe at School

Inspiration

We were inspired to create this program after reflecting on how different our university experience will be as a result of COVID-19. Understanding the importance of face-to-face interaction for young children, we decided to create a tool that helps preserve the possibility of in-person education.

What it does

Safe at School teaches elementary students about public health guidelines through a choose-your-own-adventure style game. Safe at School begins with a fun, personalized greeting and accessibility features such as a voiceover for each page. Players are placed in typical school day scenarios and are asked to make safe decisions. Each decision relates to a Centre for Disease Control (CDC) guideline, outlining the importance of social distancing, hand washing and sanitizing, and limiting the items one touches.

How we built it

Under the hood, Safe at School was built with HTML and JavaScript, and CSS was used for the styling of the website. The website’s graphics were made with Adobe Photoshop using several royalty-free images. Safe at School also incorporates the SpeechSynthesis interface, a part of WebSpeech API.

Challenges we ran into

A sample challenge that we ran into was getting the checkbox table in the first question to function properly in different cases, and getting the back buttons and alerts on each page to display nicely with the background.

Accomplishments that we're proud of

We’re super proud of the many bugs that we fixed! At times, it felt like we were squashing one bug after another with alerts not showing up, mistakes in logic operators, and styling issues. However, after getting some rest and regrouping, we managed to work through all the bugs in our program. We’re especially proud of Question 1 in our game, the table checklist activity, as we ran multiple test cases to ensure that all alerts were functioning as they should.

What we learned

Through this project, we learned to never underestimate the complexity of checkboxes and to NEVER assume “des” is short for “description”. We also learned how to apply Bootstrap to manage the alerts on our game.

What's next for Safe at School

A feature that we’d like to implement in the future is support for more browser as the voiceover feature is currently available through the Google Chrome browser.

Built With

Submitted to

Ignition Hacks 2020
- Winner Division Delta: Best Presentation

Created by

I worked on the website's front-end and designed all the backgrounds using Photoshop, as well as site-styling with CSS. I additionally coded part of the back-end with HTML. It was so fun to see everyone's work come together to create such a cute game!

Bonnie Peng
Computer Science student at the University of Waterloo
I helped design the website using HTML and JavaScript. I also provided the voice for our site's voiceover. This was my first time working with web development so I learned a lot from the experience!

Tabitha Wong
UW/WLU CS BBA '25
I worked on the CSS of the project, some of the HTML, drafted most of the video script, and edited the demo video. This was my first time working with web development and I definitely learned lots over the course of this project!

Private user
I worked on the HTML and JavaScript portion of the project, and implemented the AI components. I really enjoyed working with the team and building such an amazing project!

Private user