Disboard

Ditch being bored with Disboard! Allow students to work together on assignments by drawing their answers on a collaborative whiteboard from the convenience of their mobile devices.

Comment 1

Background

The 2020 worldwide pandemic has forced educational institutions to transition online; consequently, the quality of live collaboration and active student engagement has significantly decreased. Oftentimes, instructors start a main group call via an existing group call service to teach class topics. Then, they create randomized student groups and provide them with separate calls (commonly known as "breakout rooms") to discuss these topics. However, instructors also expect the groups to provide a medium to collaborate with each other. These mediums vary depending on preference, and the instructor has to accommodate for sharing permissions across mediums to view students' work. This becomes a hindrance to students, who are less likely to collaborate, and as a result, instructors are less likely to provide a live discussion activity in their online sessions.

Disboard aims to solve this issue by providing one central medium for instructors to ask questions directly to student groups. These student groups can collaborate on virtual whiteboards via freeform drawing on their touch-enabled devices to answer the questions live. Instructors can then conveniently view group submissions from the assignment page.

Features

Overview

  • Students: Collaborate with students on a shared whiteboard using a touch-enabled device.
    • Create/join discussion rooms on demand to work on a group assignment during class.
    • Use a stylus or your finger to draw free-form responses to a series of questions.
    • Express creativity using different colored pen options.
  • Instructors: Create assignments, share with students, and view their whiteboard responses.
    • Create unique assignments composed of text-based questions.
    • Deploy to students by provided an assignment ID.
    • View all responses in an instructor view that can be shared with others.

Workflow

Disboard follows a simple workflow for instructors and students to complete assignments during a live session:

  1. The instructor sets up an assignment in the web app's instructor view. They can enter a list of questions via the text boxes.
  2. The instructor assigns student groups separately and sends the assignment ID to the group leaders.
  3. The group leader creates a room using the assignment ID and invites their group members to their room via a room ID.
  4. The first question appears and the groups answer the question by drawing on their room's shared whiteboard.
  5. When they're done answering the question, a group member submits the work and the next question appears. This cycle continues until all the questions are answered.
  6. The instructor can view all the responses in the web app's instructor view, organized by question.

Technologies

We used the Node.js backend technology to power our web application on the Heroku platform. By using the Express and Socket.io frameworks, we manage basic routing for students and instructors; students collaborate on a shared whiteboard built from an HTML canvas integrated with Socket.io websockets, and instructors create assignments that get stored in a cloud database powered by MongoDB.

The frontend was first designed in the Figma interface design tool and then built with the Bootstrap CSS framework. Thanks to Bootstrap's flexibility, the user interface adjusts according to different screen sizes of the users' touch-enabled devices. We also added additional features including a paint palette for color switching, adopting skeuomorphism principles to help the user understand the drawing canvas interface.

To save the canvas image, we used a base-64 encoding to convert the canvas into a data URI and stored it in the database. When instructors retrieve their submissions, the data URI is rendered to display the original image that was in the canvas.

For students, we targeted touch-enabled devices for our web application. For the purposes of this hackathon we tested using iOS devices running Safari, although other browsers complying with recent web standards should work as well. The instructor should use a desktop web browser for their view.

Challenges

iOS Web App Default Behaviors

One challenge involved dealing with the default behavior on iOS when touching the screen. When a user touches the screen, the browser automatically tries to scroll or refresh the page. Additionally, double tapping the screen will zoom in by default, making it impossible to see the entire canvas. We solved this using a meta tag that disabled default behaviors for the benefit of the user experience.

MongoDB

Another challenge was learning how to integrate the database with our web application. We had little experience with MongoDB, a popular (and free) no-SQL database. On occasion, queries would unexpectedly return null or the wrong result. Given that some of us had more experience with relational databases (MySQL), it was difficult to get used to the syntax of MongoDB and the objects it returned from queries. However, thanks to the mySQL-to-MongoDB schema documentation, we were able to learn quickly and set up our database. This proved crucial as the free tier offered us financial flexibility for this project.

Git and Github

A challenge common across all hackathon teams is utilizing the git source control. There were numerous instances of merge conflicts requiring much collaboration to resolve. Luckily, our use of Visual Studio Code allowed us to compare changes and resolve conflicts with ease.

Remote Collaboration

Ironically, the biggest challenge was working on our project remotely. Since we were not able to meet in person, it was harder to do paired programming and collaboration. This was especially prevalent when dividing work between the front-end and back-end teams. Due to differing visions between both teams, we had a stalemate on how to combine the logic from the backend to the beauty of the front end. We resolved this by increasing communication between both teams and doing agile refactoring and prototyping.

Adapting to the virtual hackathon was not particularly different other than setting up an effective team communication method -- in this case, Discord. While we miss in-person hackathon quirks such as free Soylent and pizza, we were still able to enjoy working on a project together!

Accomplishments

This project accomplished many firsts among our group members, including but not limited to:

  • Building a Node.js web application that runs in browsers on touch-enabled devices
  • Connecting our web application to a cloud database and successfully storing and retrieving data
  • Successfully implementing a room system that allows users to join and leave asynchronously
  • Using interface design tools and frameworks to plan and create a user interface

Specifically, we learned how to:

  • Manipulate browser behaviors and event handling using code
  • Query from, insert into, and update values in a Mongo database
  • Manage web sockets to synchronize sessions and activity, namely in rooms and whiteboards
  • Design a user friendly web application on both desktop and mobile views

This is also the first Devpost hackathon submission for some members of our team!

What's next for Disboard

This concept prototype demonstrates the basic workflow that instructors and students will use to collaborate on live assignments. In the future, Disboard will support:

  • User authentication : Users will soon be able to create accounts to store their assignments and submissions under their name. This also paves the way for room chat (see below)
  • LaTeX support: Instructors will be able to create math questions using the popular LaTeX syntax, allowing students to answer math questions in free-form drawing
  • Chat : Students will be able to discuss their whiteboard collaboration via an in-room text chat
  • Miscellaneous : Multi-color support is on the horizon! Then we can all be Bob Ross

We are also looking to adapt this concept to in-person learning. Even when institutions transition back towards normal, in-person offerings, we still want to give instructors an interactive alternative to handing out physical worksheets, saving paper and increasing productivity.

Acknowledgements

We would like to thank the following for motivating us during the development of Disboard:

  • The Whiteboard demo by Socket.io that acted as a foundation for our web application.
  • HackIllinois' live workshops, namely Vicky Vo's Figma design workshop which helped with designing our user interface.
  • Discord, namely the press-F-for-respects channel for continuing to press F due to unforeseen circumstances.
  • Stack Overflow, for overflowing knowledge.
  • Icons8, for the palette icon used in our logo and for selecting the color palette (https://icons8.com/icon/13369/paint-palette%22%3E)
+ 1 more
Share this project:

Updates