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="
}
}
}
};