Integrating Gooru Application Widget

Gooru application can be also embedded in a 3rd party application, any of the existing pages can be accessed directly.

Embedding the app

  • Include the script application-widget.js at your html page
  • Include an HTML element to embed the application, the id gooru-application-container is required
  • Add the application script to start up the app aw = new ApplicationWidget('#gooru-application-container', options)
<body>

  <div id="gooru-application-container"></div>

  <script src="../application-widget.js"></script>

  <script type="text/javascript">
    (function () {
      var aw = new ApplicationWidget('#gooru-application-container', {
        "appRootPath": "../",
        "transition": [ 'player', 'b6170219-5841-46b8-9c6a-d684bc457538', { queryParams: { type: 'collection', role: 'student' }}]
      });
    })();
  </script>
</body>

Options

appRootPath

Indicates where the application-widget.js is hosted, another resources would be loaded from there

Default: ""

aw = new ApplicationWidget('#gooru-application-container', { "appRootPath": "../" };

transition

It is used to indicate the page to be presented to the user, it is an array having the route name, route params and query params

Default: sign in page

aw = new ApplicationWidget('#gooru-application-container', {
  "appRootPath": "../",
  "transition": [ 'player', collectionId, { queryParams: { type: type, role: 'student' }}]
}

token (optional)

It contains an authorized Gooru token, the application will start a user session with it

Default: anonymous

aw = new ApplicationWidget('#gooru-application-container', {
        "appRootPath": "../",
        "token": MTQ3OTcwODQxMTE2Mzo3MjQwZDBiMS1lM2I0LTRmMDgtOTMwMC1mMGE2ZmJlMjljMWQ6YmE5NTZhOTctYWUxNS0xMWU1LWEzMDItZjhhOTYzMDY1OTc2
}

sourceId (optional)

It contains an sourceId identifying the customer, most of the time is used by LTI communication

Default: ""

aw = new ApplicationWidget('#gooru-application-container', {
    "appRootPath": "../",
    "sourceId": aebbfd-45454
}

themeId (optional)

Gooru provides several UI themes, this property indicates which css rules should be loaded

Default: gooru
Possible Values: gooru, london

aw = new ApplicationWidget('#gooru-application-container', {
        "appRootPath": "../",
        "themeId": london
}

features

When setting up the widget it is possible to enable or disable functionality, the features property is a json object containing the features to be disabled.

Default: all features are enabled

{
  features: {
    header: {
      enabled: true
    },
    collections: {
      player: {
        showReactionBar: true,
        showReportLink: true
      }
    }
  }
}
header.enabled - Useful to hide the application header
collections.player.showReactionBar - Useful to hide the reaction bar at the collection player
collections.player.showReportLink - Useful to hide the player summary report
aw = new ApplicationWidget('#gooru-application-container', {
    "appRootPath": "../",
    "collections": {
        "player": {
          "showReactionBar": false,
          "showReportLink": false
        }
    }
}

application properties

When setting up the widget it is possible to set any other application property, any property you add needs to match the name expected by the application.

aw = new ApplicationWidget('#gooru-application-container', {
        "appRootPath": "../",
        "endpoint" : {
          "url": "http://nucleus-qa.gooru.org",
          "secureUrl": "https://nucleus-qa.gooru.org"
        },
        "realTime": {
          "webServiceUrl": "https://rt.nucleus-qa.gooru.org",
          "webSocketUrl": "https://rt.nucleus-qa.gooru.org",
        },
    }
{
  "appRootPath": "/", //default is root
  "endpoint" : {
    "url": "http://nucleus-qa.gooru.org",
    "secureUrl": "https://nucleus-qa.gooru.org"
  },

  "realTime": {
    "webServiceUrl": "http://goorurt.qa.gooruweb.edify.cr",
    "webServiceUri": "/nucleus/realtime",
    "webSocketUrl": "https://goorurt.qa.gooruweb.edify.cr",
    "webSocketUri": "/ws/realtime"
  },

  "teams": {
    "url": "http://teams-qa.gooru.org"
  },

  "player": {
    "resources":{
      "pdf": {
        "googleDriveEnable": false,
        "googleDriveUrl":"https://docs.google.com/gview?url="
      }
    }
  }
};