Under the Hood: Sharing Real-time Collaborative Documents

Four middle school students are each at their own computers, busy working on a mathematics problem. Thanks to an innovative collaborative platform developed in collaboration with Michigan State University, they’re able to work together with digital inscriptions. They can observe and borrow from each other’s solutions, sharing digital artifacts freely by reusing content from their teammates, the curriculum, and their teacher. As they iteratively refine ideas and contribute back to the group solution, they build mathematical understanding.

The trick to this collaborative platform was to design shared content in ways that are supportive but not invasive. We chose to make groupmates’ work copyable but not editable in place, meaning that students and their teacher needed to be able to see updates in documents in real time. To connect users we store their files in Firebase, a real-time, NoSQL cloud database, which allows users in a class to access the same content.

We designed a single document format for curriculum and user work. The format saves the content—graphs, text, tables, photos, and drawings—as well as the sequence of actions that produced it. Sequenced storage of edits allows individual objects (e.g., points and lines on a graph, rows in a table) to be inserted and rebuilt in alternate content, following a set of creation instructions (Figure 1).

[
  {
    action: "create",
    target: "table",
    props: {
      name: "My Table",
      columns: [
        { id: ${col1Id}, name: "x" },
        { id: ${col1Id}, name: "y" }
      ]
    }
  },
  {
    action: "create",
    target: "rows",
    ids: [${row1Id}, ${row2Id}, ${row3Id}],
    props: {
      rows: [
        { [${col1Id}]: 1, [${col2Id}]: 1 },
        { [${col1Id}]: 2, [${col2Id}]: 2 },
        { [${col1Id}]: 3, [${col2Id}]: 2 }
      ]
    }
  },
  {
    action: "update",
    target: "rows",
    ids: [${row3Id}],
    props: [
      { [${col2Id}]: 3 }
    ]
  }
]

This design makes it possible to excise and insert small pieces of content into other documents, and to recreate document changes in many simultaneous views. As objects are added and actions are performed in one document, all other views of that document perform the same transformation actions. This strategy allows us to update the real-time progressive display in the four-pane student view (Figure 2), as well as the teacher dashboard, which monitors the entire class in real time. And it makes it possible to offer features like undo. This style of document serialization also aids in research: actions are logged with their sequence and source, so we can trace the path of assets or the journey of students through their group scaffolding.

But sequential, action-based document serialization creates architectural challenges. In some cases, there is not enough information when playing history backwards to recreate content in its previous state. For example, if a student deletes a point in a shape, application rules delete the shape that contained it. If the student then reverses that deletion, the point comes back, but not the shape. Other side effects arise due to potential interrelationships between tiles (e.g., a table can be used to populate points on a graph). We currently resolve this issue by redrawing history from the beginning each time, rather than popping actions on and off the end of the history, though the impact is a longer re-rendering as more actions are added.

We are testing the UI and using log files to understand the learning experience for students. The goal is to build a robust collaborative environment to help students enhance their learning—about math and about collaboration in the 21st century.

Leslie Bondaryk (lbondaryk@concord.org) is Director of Technology.

This material is based upon work supported by the National Science Foundation under grant DRL-1620874. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation.