Hi! I’m a 17 year old student in Nova Scotia, Canada. The past few weeks have been pretty hectic, with school being cancelled and most of my teachers being ‘technologically illiterate’, we have been struggling to continue working on our schoolwork.
I’m in the IB program, so just because my school is closed doesn’t mean that I get to stop studying (as much as I wish it were so 😉).
My teachers really needed the ability to live stream with us, but couldn’t find a website that ‘did it all’.
I decided that I would spend my March break working on a website that allows them to create a class, post assignments, upload documents and live stream to their students.
// DOCUMENT EDITOR
First thing was I needed a way for students and teachers to create documents and upload them to their class assignments.
For that, I used the open source rich text editor QuillJS, and modified it using JS AJAX to save automatically everything that is written. When a user creates a document, the sever creates two files, one .php file that has the document unique token (generated on creation) and .txt file that contains the raw HTML of the doc file. The .php file loads the .txt file on awake, and writes to the text file on the input change.
Documents can also be shared, uploaded and deleted.
// CLASS SYSTEM
When a teacher creates a class, they are given a unique 6 character alphanumeric code. This code is what students can use to join their class.
Teachers can choose between two types of class posts: announcements, which are text based, and assignments, which has a due date and title.
// LIVE STREAMING
Now that teachers can create a class, assign work and upload/edit documents, they need to communicate with students.
I was able to contact Zoom and get the basic plan’s restrictions removed for all accounts under my school district’s domain. This allows my teachers to create a free Zoom account that supports large groups of students.
I then integrated Zoom through a url with parameters taken from the user (such as the user’s name) and place that into an iframe in the classroom. I use AJAX here to check for changes in the database of streams. If it sees a stream is active for the specific class, it will automatically log the student in (just as a viewer). The user doesn’t even know it’s zoom, however the teacher does.
// INSTANT MESSAGING
Using AJAX and PHP, I created a very simple way for teachers to get in contact with students. When you hover over a student’s name, a div will appear with the students name and profile photo, as well as a ‘message’ button. Clicking the button will allow you to message the student one on one.
Also, there is a live chat underneath the stream for every classroom. This chat allows the class to communicate with each other and their teachers while the stream is active.
// CONCLUSION
Welp, that’s about it. It was a really fun learning experience, and it definitely kept me busy during these troubling times.
Feel free to leave any questions or comments below 😃.
(Website is live here: www.ihomeroom.ca, if you want to check it out)
Top comments (0)