Wikiversity:MOOC Interface/Architecture

This page is part of the MOOC interface documentation. This page introduces you to the MOOC interface architecture. It lists the components that are involved in the rendering process of a MOOC item page and shows how the components work together.

MOOC Architecture

edit

The following graphic illustrates the single components and the MOOC item page rendering process. The sub sections will guide you through this process.

 

What you can see is that a MOOC consists of

  • one MOOC index
  • any number of lessons
    • with any number of units having resources on separate pages like:
      • a quiz
      • a script
  • the talk pages of all lessons and units with their resources

Our example MOOC is the first part of the Web Science MOOC.

Item page

edit

Central entry point of the rendering process of a MOOC item is its wiki page. In this example we render the unit "Ethernet header" in the lesson "Ethernet". The wiki page of this item is browsed by a user, that triggers this process. This page does not contain any content belonging to this unit: Its only purpose is to invoke the Lua module, that will retrieve all the necessary content. Please note that the item's wiki page is part of a collection of files that belong to the item.

Lua module

edit

The Lua module is a collection of script files. The only file that can be invoked from a wiki page is the main module. It reads the MOOC index and parses it to get the MOOC structure and the meta data to all items involved. This is the task of the index parser. The main module identifies the type handler matching to the item type (such as unit or lesson) and uses it to render the page: A type handler matches an item type to its model and its template script. The template script fills a regular wiki template with the data retrieved and the navigation built from the index. While the wiki templates hold the static HTML structure, the template scripts generate some part of the HTML structure.

Models

edit

Templates

edit

Templates

edit

The templates hold the static part of the HTML structure. They use several resources such as icons. They include hidden elements to transfer data to the JavaScript files, such as the MOOC index title.

At the moment there are three templates:

The page is now ready and can be sent to the client.

Client browser

edit

The rest happens at client side: CSS is needed to apply the layout that differs from the default Wikiversity layout.

Many features of the interface are injected to the DOM tree and/or activated via JavaScript now. The script extracts information from hidden HTML elements, such as the MOOC index title, and works with the MediaWiki API in order to retrieve the index and the resource pages and provide on-page edits. These on-page edits can target the MOOC index, the resource pages or the talk pages, since the JavaScript component aggregates the talk pages to display the on-page discussion. Every edit triggers a page reload to reduce the number of edits conflicts, since the MOOC index is a central page that is shared between all items of a MOOC.