Problem
“Share, Learn, and Challenge Yourself” is the strong message HashtagSTI wants to bring to their target audience. HashtagSTI (or #STI) is an online educational interactive system that allows teachers to use it as a tool for their students in a classroom setting.
The #STI team was asking to create a web application that allows 3 different user groups – administrators, teachers, and students – for the ability to log into the system and access to different content on the website (as described below). The main purpose of the web app is to educate students with 12 episodes of short videos about safe sex and sexual health in an interactive and innovative manner.
For Admins: Administrators will be able to log into the back-end to manage courses and look at quiz reports for all courses. They also have the ability to control user accounts and user group capabilities.
For Teachers: The front-end will serve as a control panel that allows them to grant access of the pre-video quiz to their students, control when students should watch the video, and control when students should finish answering the quizzes.
For Students: The front-end will be the main interface they interact with during the class. They will be given a mobile device (iPhone or iPad) each as the main tool for classroom interactions, which include answering questions and watching videos.
Solution
Hashtag STI – Episode List
At the initial stage of the project, I had been involved closely with the project manager (a friend of mine) and the #STI team to understand the scope of the project and what features and technical requirements they are looking for. There were discussions back and forth between us and we came to a conclusion for the best solution for the web app.
We decided that WordPress will be the main CMS for them, due to its ease-of-use and user-friendly UI on the WordPress Dashboard. The Dashboard also allows administrators to look at reports of quiz results and a list of users in different user groups (Teachers & Students) easily with just a few clicks.
Hashtag STI – Take the Quiz
One of the main features for the web app is to have different contents for different user groups, and this was achieved by using different conditional tags (if/else statements) in the same PHP template file. WordPress actually has its own function that comes in handy in cases like this.
For the main look-and-feel of the website, the basic programming languages (HTML, CSS, JQuery) are being used. Bootstrap framework’s helper classes are also being used throughout the website to create the responsive layout and aesthetics in a fast and efficient manner.
For the tracking of all quizzes in different episodes and different classes managed by teachers, I made use of the available WordPress plugin Gravity Form. It is a powerful plugin that allows you to customize different forms with its own set of results. I also customized certain areas with some algorithms in PHP so the forms can show the results in a pie chart after the video of the episode finished playing.
Result
This project is now soft-launched and currently being worked on by the #STI Team to complete the content. It is in the process of submitting to apply for the Canada Media Fund to gain more public awareness about the issue. Client was happy with the result and is working hard to receive the funding and push the website to launch.