In Brief

The Open Mind e-learning project is an educational web platform, originally released in 2015, which complements their book-based publications. This has since been distributed to tens of thousands of school students, teachers and adult learners.

My Role

The project began as a proof of concept: developing interactive (but also static) HTML templates into an auto-build Node.js environment. This was then migrated into a bespoke Web Components application using Google Polymer, and with a QTI-based data source.

The Open Mind Digital project is an educational web-application and platform, which was originally released in 2015 and 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 project 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;

  • and 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 could then be reviewed by the various project stakeholders. For CSS development we followed the Block, Element, Modifier (BEM) methodology which – combined with Sass – resulted in a very lean, clean and component-led codebase.

The fundamental point of the product is interactivity and hypermedia. 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 cuepoints 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 younger (and less mature), 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, easily and quickly generating components from our prototype and continuing to use the automated build tools we already had in place.