Projects

Macmillan Education

A sophisticated, interactive, multilingual, international, educational platform built with QTI and Google Polymer.

Screenshot of the Macmillan Education website; part of John Kavanagh's development portfolio.

In Brief

The Open Mind e‑learning project is an educational web platform which was initially released eleven years ago as a valuable complement to their book‑based publications. Since its inception, this initiative has reached a vast audience, benefiting hundreds of thousands of school students, teachers, and adult learners alike. This fosters learning opportunities that extend beyond traditional print materials and help reach a more diverse and extensive user base.

My Role

I joined the project during its very early inception as a proof of concept. I led the development of interactive HTML templates into an optimised Node.js environment, later migrating this to a bespoke Web Components application using Google Polymer and a QTI‑based data source.

  1. Polymer
  2. HTML5 & Sass
  3. XSLT
  4. QTI
  5. Node.js
Photograph of various Macmillan Education Open Mind print books.

In Detail

The Open Mind Digital project is an educational web application and platform initially released in 2015. It has since been distributed to hundreds of thousands of school students, teachers, and adult learners to support their book‑based learning.

Featuring sophisticated, media‑led interactivity, the development of this product fell into two abstract, client‑side layers:

  • a custom JavaScript application framework (built with Google's Polymer) which ingests data in the form of QTIs supplied from an external LMS;
  • the front end, which displays this data as accessible, interactive web component templates. Interactivity includes drag/drop functionality, videos and audio, questions and answers, and timed quizzes.

At the start of this assignment, my primary responsibility involved developing interactive (but also static) templates from wireframes and PSD design. These templates were constructed as a standalone Node.js application with automated build tools (including Sass for CSS). This generated an interactive prototype which various project stakeholders could then review. We followed the Block, Element, Modifier (BEM) methodology for CSS development, which, combined with Sass, resulted in a very lean, clean and component‑led codebase.

The fundamental point of the product is hypermedia and interactivity. Developing this as part of an optimised web application involved writing vanilla JavaScript for a number of custom features, including drag and drop and media players with cue points and subtitles – all the while ensuring cross‑browser compatibility back to IE8.

On the application side of the project, we researched AngularJS as a potential framework before settling on Polymer. Despite being a less mature framework, Polymer was more stable than Angular at the time and offered a more cutting‑edge and future‑proof opportunity to work within Web Components. It was also possible to combine Polymer with our pre‑existing template codebase. This meant that we could easily and quickly generate components from our prototype and continue to use the automated build tools we already had in place.

Screenshot of the Macmillan Education Open Mind web platform: free-text sentence completion.Screenshot of the Macmillan Education Open Mind web platform: video conversation thread and drag/drop interaction.
Screenshot of the Macmillan Education Open Mind web platform: select the word that has been played in the audio, highlighting the incorrect answer state.Screenshot of the Macmillan Education Open Mind web platform: select which word has been played in the audio.
Screenshot of the Macmillan Education Open Mind web platform: conversation thread with an embedded video.Screenshot of the Macmillan Education Open Mind web platform: video with multiple choice questions.
All projects Get in touch

Your project
Here.

I’ve partnered with dozens of leading clients to bring hundreds of distinctive, high-performance builds to life. Yours could be featured here too. If you’re looking for an experienced freelance or contract developer, get in touch.

Get in touch