Friday, April 26, 2013


Hi everyone!


This is Gbenga and Max, coming to you from Rice University in Houston. This semester we were tasked with building a media plugin on top of the OERPUB Connexions Importer. With the growth of online educational resources such as Khan Academy, Coursera, and Connexions, there’s been an explosion in available educational media. Authors are seeking new ways to deliver content that is educational and interactive which allows them to teach students in more natural and compelling ways.


To enable the scenarios above our goals were to:

  • Build a plugin for the Aloha editor which enables embedding of media elements from multiple sites through a simple interface
  • Provide media support for content from Youtube,  Vimeo, and SlideShare.
  • Embed media in a format compatible with Connexions to enable content sharing via remixable modules
  • Streamline the user experience for media insertion


We faced several technical challenges in providing a unified interface for a diverse array of content sources. Primarily we struggled with providing a unified search due to the differing levels of support provided by each source’s APIs. Currently, we provide the ability to search Youtube content but not Vimeo and SlideShare.  This limitation is in part due to the authentication requirements imposed by Vimeo and SlideShare for advanced API functionality. Supporting authentication would require server-side support and goes against the plug-and-play principle of editor plugins. Support for this feature may be added in the future if a convincing use case is found.


We were successful in providing a unified interface for inserting content from multiple sources based on a provided URL. A user can use the site’s own content discovery tools to find their desired content before simply copying the URL of that content into our media dialog. For a more comprehensive look at our media plugin, let’s go to the walkthrough below!


Media Plugin Walkthrough


Step 1. A typical user would begin by clicking on the video icon to bring up the media picker.
*



Step 2. After bringing up the media plugin dialog, the user has two choices: they can either enter a URL from one of the supported content sources to take advantage of our URL validation and parsing to embed video or slides, or perform a search of content sources and select from a list of matching results.

The screenshot below shows a URL from Youtube that has been copied and pasted into the URL textbox. Note that the text box glows GREEN or RED based on whether the importer recognizes the URL pattern and can parse video information from it.



The screenshot below shows the dialog when using the content search feature. In this case, we are displaying the results of a Youtube search for “khan academy physics.”



Step 3. Once a user is happy with their selection they can click ‘Insert’ to insert their content into their document, and have it immediately appear in the editor.
*



Step 4.  Once a user has completed editing their document, they can save their content to Connexions. Below is a preview of the Connexions module created from this walkthrough.


Future work

In the near future, we expect our plugin to be used to import, remix, and share physical science content from the Siyavula textbook. We also hope to convince resources like PhET and Minute Physics to adopt standardized APIs similar to Youtube's API.


Widespread adoption of a standard API will encourage broader access of their resources through the significant reduction in development cost. API adoption will also enable scenarios which are currently impractical(e.g. a universal search interface).

We have had a great time developing this feature and we expect that the media plugin's support will be expanded to include interactive demos such as the physics simulations from websites such as PhET and Minute Physics. We also expect to expand our unified search support to include Vimeo & SlideShare. Thanks for reading and feel free to check out our demo.