OpenLearning Activity Blocks

Standard CSS

Include using:

<link rel="stylesheet" type="text/css" href="https://www.openlearning.io/openlearning.css">

or just:

<link rel="stylesheet" type="text/css" href="/openlearning.css"> - if hosted on openlearning.io

API Script

Include using:

<script src="https://www.openlearning.io/openlearning.js">

or just:

<script src="/openlearning.js"> - if hosted on openlearning.io

API

OpenLearning API is accessible via:

window.OpenLearning

or as a shortcut:

window.OL

OL will be used in the examples below.

Ready:

The OL object can be used to bind a function that is executed when the OpenLearning API is loaded and ready. Using the OpenLearning API before it's ready will throw exceptions.

OL(function() {
    // executes when OpenLearning API is ready
});

Once the OpenLearning API is ready, the following can be used.

Readable Properties:

// N.B. not yet implemented with valid data
OL.theme = {
    'colors': {
        'default': '#888888',
        'dark': '#444444',
        'light': '#cccccc',
        'inverse': '#ffffff',
        'link': '#000000'
    }
};

// the domain under which the app is running
// (normally www.openlearning.com)
OL.targetDomain;

Resize:

The app should resize to the full length of the content automatically on every DOM mutation event (whenever the DOM is changed), if the browser doesn't support mutation events then it is recalculated every 100ms. This behaviour can be overridden by the resize method.

// resize the app container to <height> pixels
// if height is not provided, the app's height is calculated and given
OL.resize(height);

// option lock argument can be given, to prevent the app from auto-sizing.
// if this is set to true, the app is locked at the given size
// if this is set to false, the app can automatically resize itself
OL.resize(height, true);

Refresh:

Refresh an element in the parent frame:

// refresh a parent element (e.g. progress bar)
OL.refresh('progress');

// without any argument, it defaults to 'self',
// i.e. refresh the current app frame
OL.refresh();

Attach File to the Page:

 

Create a file attachment on the page from base64 data-uri.

(data-uris may contain whitespace)

N.B. This creates a file attachment under the current page, as part of page editing functionality. Another method will be available in the future to create file attachments for user submissions. Both these methods will be extended to allow an option that opens a file upload chooser. 

 

OL.attachFile(filename, dataURI, callback);

// e.g.
OL.attachFile(
    "reddot.png",
    "data": "image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
    function(result) {
        alert(result.success);
    }
)

Notify:

Pop up a standard notification in the host container

OL.notify(title, message, status);
// where status is:
//   'default' (also given when no status is passed in)
//   'warning'
//   'error'
//   'success'

Setup:

Read-only properties:

// retrieve setup data
OL.setup.data;

// time the latest setup data was loaded
OL.setup.timeLoaded;

Methods:

// update setup data:

// Merge:
//   - 'updates' is an object, where new data in the provided string fields are
//     3-way-merged with current data.
//   - any field with the key 'html' is HTML filtered
//   - other fields are replaced if they have not changed since the last time
//     data was loaded (otherwise a conflict is reported)
OL.setup.merge(updates, callback);
// e.g.
OL.setup.merge({'field': 'new value'}, function(result) {
    if (result.error) {
        console.log(result.conflict);
    }
});

// Replace:
// Override setup data with that provided in newData
// Ignores conflicts
OL.setup.replace(newData, callback);

// Update:
// Update individual sections of data atomically
// updates is an object with a structure matching the fields to update
// supported operations:
//   - 'set': replace the value with the one provided
//   - 'inc': increment the value by the amount in the value provided
//   - 'push': append the value provided to an existing list
//   - 'addtoset': add the value provided to an existing list, unless it's already there
OL.setup.update(updates, operation, callback);

User:

Read-only properties:

// User's app data
OL.user.data = {};

// Time the latest app data for this user was loaded
OL.user.timeLoaded;

// User's profile data
OL.user.profile = {
    'id': 'profileName',
    'name': 'Full Name',
    'url': 'profile_page_url/',
    'avatar': 'profile_pic.png'
};

// User's selected group for collaborative activities
// null, unless the page is enabled for collaboration
OL.user.group = {
    'members': [{
        'id': 'profile name',
        'name': 'Full Name',
        'url': 'profile_page_url/'
        'avatar': 'profile_pic.png'
    }, ... ],
    'id': 'groupID',
    'url': 'link to group info'
};

Methods:

// Same as above setup data merge, but for user's data
OL.user.merge(updates, callback);

// Same as above setup data replace, but for user's data
OL.user.replace(newData, callback);

// Same as above setup data update, but for user's data
OL.user.update(updates, operation, callback);

// Log that the user has interacted with this app
OL.user.logInteraction();
// n denotes the number of interactions to add to the log
//  (defaults to 1)
OL.user.logInteraction(n);

Callbacks:

// example result object passed to callbacks:

{
    'success': false,
    'error': 'Access Denied',
    'conflict': {},
    ...
}

Helpers

// more robust console.log
OL.log(object, ...);

Events:

// Listen for an event from the host container, or another block
var listener = function(data) {
    alert(data);
};

OL.on(eventName, listener);

// Remove event listener
OL.off(eventName, listener);

OpenLearning-sent Events:

  • resize - OpenLearning has resized the container
Reply Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
Like Follow
  • 3 mths agoLast active
  • 27Views
  • 1 Following