Harvard Business School (HBS) uses WordPress to manage its courses across a Multisite network. Reaktiv worked with HBS to build tools that connect students and instructors so that they can organize students into groups, submit assignments, and view and grade submissions directly inside of the WordPress admin.
Over time, we found that one of the largest gaps in the admin was providing an overview of student assignment submissions for the faculty. Instructors often find themselves reviewing dozens of submitted papers, as well as ensuring that each student has commented a set number of times on other submissions to promote discussions around topics and papers.
Though we initially relied on more out of the box functionality inside of WordPress, we eventually hit the limitations of default views. Instructors could view a list of submissions, for instance, and the students that submitted it, but were unable to deep dive into comments. In another case, instructors found it difficult to see which students had not submitted their assignment yet, a useful tool for following up. Instructors also wanted to be able to export their data in a specific format, either as a PDF or CSV, including specific data from students and submissions.
Each instructor has their own way of grading and looking over papers, and providing enough flexibility to accommodate each use case meant developing robust export tools. To help faculty get a better understanding of what students had done, Reaktiv designed and developed a full student dashboard baked into the WordPress admin with the Harvard Business School team.
A Custom Student Dashboard
In order to satisfy all of the requirements, Reaktiv set out to build a student dashboard loaded into a separate page in the WordPress admin. This required three different parts: a React powered dashboard front-end, a custom API, and dedicated export tooling.
The front-end of the dashboard leverages React to provide a fluid view of students. React allowed us to build something that could load data dynamically and provide quick ways to sort and organize data. The interface feels familiar inside of the WordPress admin, yet offers more advanced tools.
Instructors can sort students and their submissions, view students who have not submitted their assignments or comments yet, and see additional data about comments and overdue assignments. Advanced filters let instructors divide their students by group, sort the data into different categories, or search for individual students directly.
This front-end connects to a custom API that is used to query the database and, importantly, store and cache data in a way that can easily be retrieved. Default WordPress query functions are not well suited when data needs to be pulled from multiple tables and combined in a meaningful way. In our case, this meant merging data from the users, comments, and posts table to give an overview of each submission. Whenever possible, we leveraged built-in WordPress functions, combining that with more bespoke SQL for advanced queries. Using React on the front-end meant we can pass JSON data back and forth, keeping our data model simple and the amount of data formatting required in the API to a minimum.
Our advanced export tool allows data to be downloaded as either a CSV or PDF. A list of presets allows instructors to export some of the more common requests, and an advanced view lets them specify exactly which data to export, such as student names, the full content of submissions, and the full content of comments. The CSV export relies on open source CSV formatting libraries, while the PDF export leverages a special HTML template to completely render the page in an optimized format.
Versatile Results
The dashboard has been a success for instructors, acting as a versatile tool during the submission and grading process. It has also become a baseline for iteration, as we are able to continue to build on the functionality that already exists. Instructors have used the tool in a number of different ways, and we have had the chance to remove a lot of code that was previously used to try to modify WordPress functionality.