• Layered openMind Education 3D development diagram - layer 1 Layered openMind Education 3D development diagram - layer 2 Layered openMind Education 3D development diagram - layer 3 Layered openMind Education 3D development diagram - layer 4 Layered openMind Education 3D development diagram - layer 5 Layered openMind Education 3D development diagram - layer 6 Layered openMind Education 3D development diagram - layer 7 Layered openMind Education 3D development diagram - layer 8
  • Portfolio development screenshot
  • High-resolution screenshot of the openMind Education website
  • Portfolio development screenshot
  • Portfolio development screenshot
  • Project screenshot
  • Screenshot from the openMind Education development project

openMind Education

HTML5, Sass, BEM, JavaScript, XSLT, QTI, & Polymer

The openMind digital project is an educational web-application and platform which was released in 2015 and has since been distributed to tens of thousands of school students, teachers, and adult learners.

Featuring sophisticated, media-lead 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 suplied 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) front-end templates from wireframes and PSD designs. These templates were constructed as a stand-alone Node.js application using build tools and automation (including Sass for CSS). This generated interactive, prototype templates 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-lead codebase.

The fundamental point of the product is it's interactivity and media. Developing this as part of an optimised web application involved writing custom vanilla-JavaScript (specifically without the dependency of jQuery) for a number of features including drag and drop, and video and audio players with cuepoints and subtitles; all the while ensuring 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 thus: less mature), Polymer was more stable than Angular at the time and offered a more cutting-edge and future-proof opportunity to work with 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.

The final product provides schools with an new and bespoke way of teaching their students, and has been very positively received worldwide.

Top