[p2pu-dev] ConneXions Course Successful Embedded Within P2PU

[Dan Diebolt]

This email summarizes work I did to get an *arbitrary* *ConneXions* (cnx.org)
module*/*course *successfully* embedded within the P2PU platform.

First, here is a screenshot of getting an arbitrary ConneXions course
embedded with a jsFiddle:

*Screenshot of ConneXions Course Embedded in jsFiddle*
http://i.imgur.com/X6RT3.jpg

If you are non-technical you may want to jump to the end of this message
and load the last URL as the remainder of the email is a quite technical.

Here is the jsFiddle in "show" mode:

http://jsfiddle.net/dandiebolt/Pcnrz/show/

and again in "embedded" and "editable" modes:

http://jsfiddle.net/dandiebolt/Pcnrz/embedded/
http://jsfiddle.net/dandiebolt/Pcnrz/

After you select one of the 10 displayed CNX modules, the module will be
retrieved via an AJAX call proxied through YQL and the module will be
rendered to the page and the XML body payload will be displayed in a
textarea at the bottom. This is no simple trick! The main obstacle being
tackled is obtaining a data representation of the CNX module
*client-side*despite the
*same origin policy*. This cross domain access to the CNX module was
accomplished by proxying a query through the *YQL *(Yahoo Query
Language/Yahoo Pipes) service requesting the "body" of a CNX module. Here
is a sample "body" request of a CNX module:

*Representative "body" request of a CNX module*
http://cnx.org/content/m0050/latest/body

To get around the "same origin policy" YQL was configured to return the
so-called *JSONP-X* response described here:

*JSONP-X: JSON envelope with XML content*
http://developer.yahoo.com/yql/guide/yql-jsonp-x.html

Generally you cannot make cross domain requests for content and proceed to
modify and manipulate the response client-side. JSONP is a clever exception
to the "same origin policy" by returning JavaScript injected into the page
through a standard <script> element. However, because the conversion of XML
to JSON does not preserve ordering of elements the XML response is wrapped
in a thin JSONP wrapper by setting the two YQL parameters:

*  &format=xml*
*  &callback=mycallback*

This technique is called JSONP-X by the YQL developers. Once the jsFiddle
was configured to display an arbitrary CNX module, the jsFiddle what
embedded into the P2PU platform using this embed code:

*[embed:http://jsfiddle.net/dandiebolt/Pcnrz/show/]*

This embed code results in the P2PU platform rendering an <iframe> into the
page using the embed.ly service. However, the embedded <iframe> always has
a height of 300px so for demo purposes you can use either the following
BookMarklet or Chrome User Script to fix the height to 6000px

*BookMarklet*
javascript:$("iframe").attr("height","6000px");void(0);

*ConneXionsIFrameResizer.user.js*
https://gist.github.com/1325902

*Install Link for ConneXionsIFrameResizer.user.js*
https://gist.github.com/1325902#file_conne_xions_i_frame_resizer.user.js

Here is a screenshot of the embedded ConneXions course embedded in the P2PU
platofrm with a resized <iframe>

http://imgur.com/lIS29

You can see it here live using the Chrome browser (and maybe some others):

http://p2pu.org/en/groups/lernanatron/content/connexions-course-iii/

If you do not apply the bookmarklet or Chrome User Script the embedded CNX
module will be displayed in the default 300px <iframe> and you will have to
scroll up and down.

The MML equations may or may not render correctly within the P2PU embed
because I don't think I am initializing the MathJax library properly within
the the jsfiddle. Since this wasn't the problem I was trying to solve and I
am short time I passed on debugging this issue for now.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.p2pu.org/pipermail/p2pu-dev/attachments/20111030/6a46c016/attachment.html>