Inspiration

Teachers give handouts during class, and for many teachers, it's a good way to assess their students' skill levels. Many teachers use handouts and ask students to finish them in class because they can get one-on-one support from the teacher. In primary school (not so much in high school), the teacher would walk around the classroom while the students are busy working on their worksheets, and a primary teacher could easily see if a student is struggling with a question based on their work, and they could then help the student directly by pointing them in the right direction. Since COVID-19, classes have shifted online. While there are a lot of advantages to online learning, we believe that it's lacking this one-to-one attention that many students need. We created HandoutLive to help solve this problem.

What it does

HandoutLive is a web app. The two main users of HandoutLive are teachers and students. Teachers create a room on their computer. Teachers can send the room code (shown at the top left of their screen) to their students so that they can join. Teachers and students are able to draw on the room's whiteboard using their mouse. To make drawing/writing easier, teachers and students are able to connect their mobile device simply by going to the same web app on their phone and entering their unique secret code (shown at the top left of their screen). We have a mobile-friendly version where the teacher can pan the canvas and toggle between panning and editing.

Teachers can upload images of worksheets, and the students can complete them by writing/drawing either on their computer or their phone. The teacher can see every student's worksheet update in realtime as each student solves the problems there. If they spot that the student is struggling or has made a mistake, the teacher can let them know and catch these mistakes before the student makes them on a real test.

We also have a messaging feature, where the students and teachers can ask questions. The teacher also has access to a "teacher canvas," a canvas that all students can see but can't write to. This is where, for example, the teacher would take up the worksheets.

As well, our platform also brings more accountability to the students. Many students, including myself, find it sometimes hard to concentrate and become involved with the online lesson, so our app would allow the students to work, knowing that the teacher could be checking up on them at any time. This also prevents the students from not doing the worksheet from laziness, and would ensure that they follow along with the lesson like they would in school.

How we built it

We created the web app using Vue.js and Vuetify. We extensively used the capabilities of HTML5 Canvas and also the Material Design UI component library for Vue.js. We used Node.js for our backend server and Socket.io for the communication between the client and the server. Socket.io allowed us to update the client-side Vue app in real-time with low delay. We then hosted the web app on heroku.

Challenges we ran into

For all of us, it was the first time we worked with Vue.js. Additionally, there were some features we planned but ran out of time to implement. We had many other issues, especially with Socket.io networking, we managed to solve all of them in the end.

Accomplishments that we're proud of

We are proud that we were able to create such an advanced and really useful application over the weekend. We have gotten the application completely functional.

What we learned

We learned how to create a Material Design compliant client UI using Vue.js, Vuetify and connect them to a server backend using Socket.io.

What's next for HandoutLive

In the future, we could further take advantage of the digital format, perhaps by providing convenient and useful features like an undo/redo button and an option to add text. We could also add a colour picker so that teachers and students can write/draw in multiple colours on the virtual whiteboard.