How Imperial College London built their Digital Learning Hub with WooCommerce and Sensei

Written by Dan Johnson on October 20, 2014 Blog, Customer Stories.

In this post, David Page (Senior Application Developer at Psycle Interactive) tells us a bit about their latest project; using Sensei to build a digital learning hub for Imperial College London, one of the world’s top universities.

Note: This project features quite a bit of custom development so, while it’s not something a beginner could set up without help from an experienced developer, it gives you an idea of the kind of result which can be achieved with Sensei and a bit of technical knowledge.

Project Background

Imperial College London has, for the last 2 years, had a digital Hub which complements their various Business School programmes, such as Strategic Marketing.

This Hub has always been built within WordPress with a lot of custom code to handle their programmes and courses. The latest version of this was required to deliver more course material online and to have quizzes and other activities.

After looking at a number of other solutions (including moving away from WordPress completely) and other LMS plugins, we decided to pick Sensei due to it’s built-in quiz engine and development schedule of new features.

The whole Hub is set up so it can only be accessed by logged in users, and currently handles over 1600 students, their lecturers and other teaching staff (roughly 250 individuals).

Core plugins we use

Sensei: To provide the courses and lessons
Sensei Modules: To groups lessons into “sessions”
BuddyPress: To manage the numerous groups across the site
bbPress: To enable every group to have a forum, and additional forums
Posts 2 Posts: To crosslink together users to courses, courses to posts, courses to forums, courses to programmes etc
Custom Metadata Manager: To handle the extra fields that we add to courses, posts, and programmes
WooSidebars: To display different sets of widgets across the site

Posts 2 Posts

This is the main plugin that allows all the cross linking of content, which we require. Users are connected to Programmes (explained below) and Courses. Courses can be within multiple Programmes. Each Programme and Course has a connection to a Forum. We even have Posts connected to Programmes and Courses to help provide a customised news feed for each Programme and Course.

 

hub-homepage1

Users are restricted to viewing content that is connected to their Programme(s) and Courses, and this is ensured using P2P on every page load.

BuddyPress & bbPress

Every Programme and Course has an associated BuddyPress Group which is auto created, and every Group has a bbPress Forum which is also auto created. Students use these to discuss all aspects of their Course.

hub-course_forum1

 

BadgeOS

We use the BadgeOS plugin, as well as the corresponding plugins BadgeOS Community Add-On and Sensei BadgeOS. These pretty much handle themselves, putting the various Course related and BuddyPress related achievements into everyones BuddyPress Activity feed and separately on their personal Achievements page which is an additional tab within their BuddyPress profile. The tie in with Sensei is just being able to create steps to badges around Sensei actions, such as enrolling on a specific course, completing a lesson, or passing a quiz with a specific mark etc.

hub-personal_activity1

 

WP-CLI

The command line interface for WordPress has been used for any intense processing, as it allows us to more effectively manage repeating jobs via a full cron, and allows bypassing the normal limits on memory and script duration when PHP is within Apache.

One of these is automatic importing of students. A CSV file is provided which lists all the students and their connection to the Programmes and Courses on the site. We then create the users if required, use P2P to attach them to Programmes and Courses, assign them to BuddyPress groups that correspond to their Programme and Courses, and auto start them on the Courses.

The Design

The design was created in house to be flexible, scaling from desktop down to mobile keeping the same information visible for students. The theme itself is very lightweight with all possible code residing in a corresponding plugin to the theme, allowing us to swap to a new design at a later date if required, but we do have some overrides with regard to BuddyPress templates, bbPress templates and Sensei templates.

A logged in user will generally only be attached via P2P to one Programme, so the entire frontend is set to show the content from only that Programme. This includes only showing those Courses that are attached to the Programme (further restricted by what Courses the student is attached to). There are Programme level menus, and once a Course is selected Course level menus switch in.

From a design point of view Sensei pages display quite differently from the default. For example we have a top menu bar which shows all the Modules for the currently selected Course, with each Module menu item having a sub menu of each Lesson that is available. The menu bar also incorporates the lesson ‘Complete’ button (which switches to ‘Reset’ when needed) and next/prev Lesson buttons, so those buttons are removed from the main content area.

hub-lesson1

 

Customising Sensei

We made a few changes to Sensei itself, many of which we have submitted back to WooThemes as patches to be included in Sensei in future (very much appreciated – Woo).

For example, we modified the Multiple Choice question type to allow multiple correct answers, and enabled Gap Fill questions to be graded automatically using a simple string comparison.

An example of a multiple choice question with more than one right answer.
An example of a multiple choice question with more than one right answer.

Programmes

We also added a new custom content type – Programmes – to provide a container for Courses, wherein Courses can exist within multiple Programmes. Effectively Programmes are to Degrees as Courses are to Degree Modules. This then allows us to have less duplication and share more content between sets of students. For example our Course “Accounting Primer” is valid for students within both the “Strategic Marketing” and “Finance and Accounting” Programmes. Students can easily be on the same Course even though they are on separate Programmes. However a student will generally only be attached to 1 Programme, though not necessarily all Courses within it, whereas tutors and lecturers are frequently attached to multiple Programmes, but then a smaller sub set of Courses from those.

Programmes then have their own information pages that they display, and own set of news posts. Plus the Sensei pages ‘Course Archive Page’ and ‘My Courses’ are filtered to restrict the Courses shown to those that are attached to the currently selected Programme.

We would have liked to see more ability to modify Sensei functionality via actions and filters, as we did have to fork the core Sensei code in some cases, but other than that we believe Sensei is a great product that will grow nicely along with our Hub website.

cta-banner-10-product-page-v2_2x

Tags:

5 Responses

  1. Craig Grella
    October 23, 2014 at 7:27 pm #

    Holy S#!T, seems they made some crazy customizations, but the site looks fantastic. It would be great to see some more detail on some of the customizations they made. The styling elements are great too. really like the course interface they created. It gave me a few ideas.
    Thanks.

  2. jorge
    October 25, 2014 at 3:39 am #

    Thank you, great case study, kudos
    The top menu bar sounds (and looks) GREAT, Sensei Dev Team must consider something like this

    “For example we have a top menu bar which shows all the Modules for the currently selected Course, with each Module menu item having a sub menu of each Lesson that is available.”

  3. Articulate Storyline development
    November 1, 2014 at 8:50 am #

    This blog provides the best information about the eLearning programmes. Most of the e-learning websites now have videos on all the subjects to enable the students to learn quickly and easily.

  4. priyanka singh
    November 10, 2014 at 6:56 am #

    very nice post

  5. Purnima
    November 10, 2014 at 7:12 am #

    Thanks for wriing such a great post