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 supports 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 .
