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

Share this project:

Updates