WARNING

These instructions are no longer completely valid but this page is being kept for historical reference and for some of its other notes.

Be forewarned reader, this post is likely to contain lots of jargon and is targeted for advanced developers of CTAT tutors and OLI content authors (eg) people who are happier messing around with the source code of these artifacts (both HTML5/Javascript and XML). I will try to provide helpful links where I can, but this is meant to be helpful notes instead of instructional.

I have been working on getting some interesting CTAT tutors and deploying them primarily in OLI as part of what I do these days. To these ends, here are some tricks and tips I have been using to make deployment easier for myself.

Using npm to get libraries

npm is one way to deal with getting libraries that your javascript code depends on and keeping it up to date. Unfortunately, neither CTAT nor OLI publish their libraries using npm as of the writing of this post, however this does not mean that npm cannot still be used to help get them, if you have access to the respective code repositories.

If you have a local copy of the CTAT svn repository, doing a npm install --save /path/to/CTAT/source/ will place the necessary files in node_modules/ctat which then can be loaded into your scripts and html files.

If you have access to the Simon-Initiative GitHub organization, then getting the necessary library to run a CTAT tutor as an inline activity can be added using npm install --save git+ssh://git@github.com/Simon-Initiative/simon-oli-javascript.git

As it is a common and useful dependency, installing jquery is highly recommended: npm install --save jquery

Using bower to get libraries

I know there is a big debate as to whether bower is necessary as npm is better at handling dependencies, but I have also found bower useful in this situation for two main reasons. The first is that bower can handle files that are not part of a package.

Case in point, if you do not have access to the CTAT source code but would like to keep local copies of up-to-date versions of the libraries, bower can be used. Once bower is installed, you can use the following commands to get the CTAT library and css from the CTAT cdn: bower install https://cdn.ctat.cs.cmu.edu/releases/latest/CTAT.min.css --save and bower install https://cdn.ctat.css.cmu.edu/releases/latest/ctat.min.js --save after that, running bower update when there is a new release will keep you up to date. Note that this will install the CTAT files as bower_components/CTAT/index.css and bower_components/ctat/index.js respectively.

The second reason is grunt-bower-concat which is a grunt module that can take the various modules in bower_components and build a single js and a single css file that can be included in the CTAT tutor, making it much easier to build the bundle for installation in OLI. It is also possible to do this using grunt and npm, but it requires more coding and maintenance.

CTAT tutor as OLI embedded activity

Getting a CTAT tutor as an embedded activity in OLI is still a relatively new feature and might not be fully featured at the moment. In other words, it appears to work but has not been fully evaluated and I am not sure that logging is fully integrated. I do know that problem state save and restore is not working.

To make an embedded CTAT tutor, it helps to develop the tutor normally at first in order to test it and for creation of the brd file. Once you are satisfied with your tutor create a new html file that only contains the content of your tutor interface file between the body tags. Do not include any javascript or css information in this file. Any javascript or css should be in external files that will be included later.

Next, create an x-oli-embed-activity xml file (eg)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE embed_activity PUBLIC "-//Carnegie Mellon University//DTD Embed 1.1//EN" "http://oli.cmu.edu/dtd/oli-embed-activity_1.0.dtd">
<embed_activity id="nodes_ancestors_z2_embed" width="550" height="660">
    <title>Find the Ancestors</title>
    <source>webcontent/js/oli.min.js</source>
    <assets>
      <asset name="brd">webcontent/CTATBehaviorGraphs/Ancestors_z2.brd</asset>
      <asset name="style">webcontent/css/_bower.css</asset>
      <asset name="style">webcontent/css/Tutor.css</asset>
      <asset name="javascript">webcontent/js/_bower.js</asset>
      <asset name="javascript">webcontent/css/Tutor.js</asset>
      <asset name="javascript">webcontent/js/build.js</asset>
      <asset name="layout">webcontent/CTATGraphNode_embed.html</asset>
    </assets>
</embed_activity>

Notes:

webcontent/js/oli.min.js is required and is the library I got from git+ssh://git@github.com/Simon-Initiative/simon-oli-javascript.git contact OLI to get the latest version of this file.
the _bower.* files are the results of the grunt-bower-concat step above and includes things like jquery and CTAT.
The Tutor.* files contain any code or css that is particular to that tutor. These files would contain any custom code that was in or loaded into the original html tutor file.
The “layout” asset is the file for the interface that only includes the content between the body tags from the original tutor html file.
The “brd” asset is the brd file for the tutor.

The “webcontent/js/build.js” file is another required file and should only contain:

function build() {
     initTutor({
         question_file: APIActivity.getDownloadableResource(
             APIActivity.findResourceByExtension(".brd"))
     });
 }

which is the code necessary to launch the tutor in the embedded environment.

CTAT in OLI Development - Tips and Tricks

WARNING

Using npm to get libraries

Using bower to get libraries

CTAT tutor as OLI embedded activity