Rich Content Page Builder

Image: Using the page builder

As part of the journey of building for the Certificate III in Individual Support we realised our team needed to build a large suite of inter-activities for text heavy content.

Six months ago, RMIT was rolling out Instructure Canvas university wide, the implementation was in it’s infancy, and very little customisation was available that would give content the appeal to keep students engaged.

Despite being an online learning system, Canvas permits the embedding of limited front end technologies. These are the things that make online content sing. Simple click and reveal events were permitted but not others. The Canvas WYSIWYG editor will strip most css and javascript and only permit text, images and tables.

From a learning design perspective, this is difficult. Especially for the subject matter on ethics, law, regulations and procedures in aged care and disability services. Some of this content is quite dry, but important to deliver as part of accreditation requirements. Making it engaging was our mandate.

We decided to build our interactive content and embed directly into Canvas using iframes. We built a system to make iframes work cleanly in Canvas (you can read about it here), and went to work building a page builder that would permit interactive tables, accordions, flip cards, quizzes, etc and H5P content.

A showcase of these technologies in action can be seen below.

We’d spoken to other groups within RMIT and looked across how other teams were working to achieve the same rich experiences, many were embedding H5P, or using Canvas’ own ungraded quizzes. Some H5P tools failed a lot of online accessibility requirements,  RMIT needs to meet to ensure  courses meet requirements set by federal legislation and the institutions own guidelines..

As our team is essentially a build team, and we hand over content to course coordinators with no support it was really important that teachers would be able to edit content to ensure it remained up to date. Dropping code directly into Canvas would not permit this. Its essential for built resources without support to be sustainable.

Our page builder is built on WordPress, an open source CMS that powers about 27% of the internet. Its an easy to use, develop for, and supported by RMIT on RMIT servers. The backend is a form which guides the user through fields to help them build their interactive content.

A content example in action can be seen embedded below. This is from a safety module, part of the Certificate III in Individual support.

The page builder outputs responsive content, which if you’re on desktop can be illustrating by resizing the browser window or by rotating your tablet. We’ve found this important as the amount of visual real estate available in Canvas is limited, students may be undertaking their online program on any number of devices. You can see how the rich content element sits in canvas on desktops and tablets below.

Apart from simple click and reveal interactivities, the page builder is able to create complex branching scenarios like the following, a live example from a page in a course to show the student to defuse an emotional situation.

We built the graphics in house with assistance with RMIT’s DSC Learning and Teaching Team.

The page builder also permits the embed of any kind of HTML content, which has enabled us to store games and other interactivities built by 3rd party providers such as The Learning Hook. And because the content is served outside of Canvas, it can be delivered to other LMS’s like Moodle, Blackboard or Rise.

When considering building outside the Canvas then embedding inside it, it’s important for students to have a consistent user experience, so all our UX borrows from the Canvas layout and picks some directly from RMIT’s Brand and style guidelines. To complete this user experience we brought the H5P style into line and dropped some of it’s ‘child’s tooth’ interface.

To further ensure we’re providing support past project handover, we’re creating ‘How-To’ videos for program coordinators and teachers with screencasts to assist with building rich content for emebedding in Canvas

The page builder allowed us to create over 400 interactive elements for the Certificate III not possible natively in Instructure Canvas that our course coordinators would be able to edit and update.  The WordPress framework allows us to bulk edit and improve all of these and reuse them in future projects.

This tool has been warmly received by other teams within RMIT and we’re hoping we can build it further or directly into Canvas for a native solution.

RMIT staff with Stash access can request access the page builder source code here.