This is a site I created for the Abuse and Neglect program at the Partnership for People with Disabilities of a short webinar series. The workflow allows the user to choose one of three video sessions to watch and learn about how to communicate with children with disabilities in general, why children with disabilities are more frequently abused than children without disabilities, and how to recognize and report the abuse.
The webinar needed to have the user be able to select one of the three sessions, go to an area to see an overview of the session content, the featured presenters, and view the video, take a quiz to test their knowledge, and upon passing the quiz receive a completion certificate for that session. An evaluation is also provided to five feedback on the sessions and thoughts for improvement.
Prototyping
After completing some quick sketches to work out some ideas, I created a prototype in Bootstrap to present the basic workflow of the site. I like working in Bootstrap since I can quickly get my ideas out in code and makes changes to the workflow as the users start testing the interaction. I can also test the interaction on different devices in case the site needs to be used in a mobile format.
Prototype to demonstration the basic workflow of the website.
Adding the Interaction And the Color
I had to research a few options, but I was able to use VideoJS for each of the session videos, SlickQuiz to create the self-grading quizzes for each session (which repeated the test if the user didn’t get a passing score), and a combination of Photoshop, Google Forms, Sheets, Docs, and the Google Drive add-on autoCrat to create the completion certificate that is emailed once the evaluation is completed on the website. I copied the code from the live version of the Google Form and pasted it into my code, restyling the inputs to match the rest of the site. Since I didn’t edit any of the controls on the form, the information still gets sent to a Google Sheet to tally the registered users and their feedback.
