E-Learning Specification, Viewer, Editor

About

The Technische Universität Dresden offers language courses, and they had contracted my then-place of employment, IBP Dresden , with developing and maintaining an online e-learning tool. I was the project lead and main designer/programmer, so I wrote nearly all of its code, which I figure is a good enough reason to include it in my portfolio.

The goal of the project was to create a website where students could log on and study languages in pre-defined study units ; The material should consist of reading and listening comprehensions with a variety of different tasks for the student to solve, like multiple-choice questions and clozes. As this was supposed to be a language learning tool, it was important that the user interface supported multiple languages. Furthermore, the payload of each study unit should be able to contain image, video, and audio files. For the teachers, the tool should offer a WYSIWYG-style editor to create and maintain the study units, with a particular focus on an intuitive, yet flexible interface.

The project consisted of 3 parts:

  • To develop a data structure that could hold the information required by the viewer and the editor . I quickly chose XML as host language and then developed an XML schema for it, both to make sure the XML produced by the editor doesn't deviate from the specification, and to give future implementers of the viewer or editor something to validate against.
  • To develop a viewer for the aforementioned XML . In order to reduce traffic and increase responsiveness, I implemented it with very few server requests, in JavaScript. The main render routine is an XSL transformation, with an optional server round-trip for those browsers that lack support for native XSLT. Traffic only occurs, aside from the static resources, for the data file of each study unit (also its media files), and to log submitted answers for teacher review.
  • To develop an editor that spits out data files for the viewer. This was, again, implemented almost entirely client-side in JavaScript, with server requests only done when needed to save or load the current unit. As there were a lot of user commands and data to handle, I implemented a Model-View-Controller sectioning to keep the code mostly tidy. To work around JavaScript's class inheritance wonkiness (this was before Object.create ), I deployed a custom-made implementation of Traits .

Technical Details

Specification
The spec , written as XML Schema , describes the current state of development. Internally, it uses an XSLT to converts the schema into a neat documentation , and a schema parser (written in PHP) to create an example XML which contains 1 copy of just about every element possible and arranged so as to be a valid document according to the spec.
Viewer
The viewer is written in JavaScript and uses XSLT , with XPath to access the interactive elements of the GUI. To do drag'n'drop it uses the HTML5 Drag and Drop API. In order to support mobile, the Touch Events API was used, as well as Media Queries .
Editor
The editor uses the same code base as the viewer. Editing is done via the HTML5 attribute contenteditable , and its related functions. The data file is manipulated via the usual DOM magic.

Screenshots

E-Learning viewer
The Viewer. To the left is the course navigation, on the right is a study unit, with 3 pages, currently showing a drag-and-drop task.
E-Learning viewer
The same task, in the Editor. ...In the end, out of the 2 requirements, only "flexible" was achieved.
E-Learning viewer
The XML source of the same task. Spec-compliant!
E-Learning specification header
If you've ever seen a W3C recommendation , this hopefully looks very familiar.
E-Learning specification element
Just one of many elements defined in the LODB namespace.