CTAT in OLI Development - Tips and Tricks V2

31 Jul 2018

Reader beware, 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.

CTAT tutor as OLI embedded activity

Getting a CTAT tutor as an embedded activity in OLI is still a relatively new feature and is still a work in progress.

To make an embedded CTAT tutor, it helps to develop the CTAT/HTML tutor normally as there is no integrated method (yet). Once you are satisfied with your tutor create a new file that will be referred to as the HTML fragment file. It can only contain the content of your tutor interface file from <body> to </body> including the body tag. Do not include any javascript or css information in this file. Any custom javascript or css should be in external files.

Install in your OLI content package directory (eg) course_name/content/:

  1. Put oli.min.js in course_name/content/webcontent/js/. This file is not publicly available so contacting OLI will be required.
  2. Put CTAT.min.css in course_name/content/webcontent/css/.
  3. Put ctat.min.js in course_name/content/webcontent/js/.
  4. Put any custom JavaScript in course_name/content/.../webcontent/js/. You can put it the top level webcontent folder if it is shared by all of the tutors for the course or it can be placed in a module’s webcontent folder.
  5. Put any custom CSS in course_name/content/.../webcontent/css/.
  6. Put the HTML fragment file in course_name/content/.../webcontent/.
  7. Put the BRD file in course_name/content/.../webcontent/CTATBehaviorGraphs/.

Next, create an x-oli-embed-activity xml file and put it in course_name/content/.../x-oli-embed-activity-highstakes/ (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="my_nodes_embed" width="550" height="660" activity_type="CTAT">
    <title>Find the Nodes</title>
    <source>webcontent/js/oli.min.js</source>
    <assets>
      <asset name="brd">.../webcontent/CTATBehaviorGraphs/my_node.brd</asset>
      <asset name="style">webcontent/css/CTAT.min.css</asset>
      <asset name="style">.../webcontent/css/custom.css</asset>
      <asset name="javascript">webcontent/js/ctat.min.js</asset>
      <asset name="javascript">.../webcontent/js/custom.js</asset>
      <asset name="layout">.../webcontent/my_node_embed.html</asset>
    </assets>
</embed_activity>

Notes:

  1. Do not forget to replace any .../ with a module path based in course_name/content/
  2. If there is no custom.js or custom.css, remove the corresponding asset entries.
  3. In an OLI workbook_page, add a reference to the activity id (eg) <wb:inline idref="my_nodes_embed" purpose="learnbydoing"/> The “learnbydoing” purpose is required to get CTAT to inform OLI’s dashboard.