{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"Integrating Gooru Application Widget","type":"basic","slug":"integrating-gooru-application-widget","excerpt":"Gooru application can be also embedded in a 3rd party application, any of the existing pages can be accessed directly.","body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Embedding the app\"\n}\n[/block]\n  * Include the script *application-widget.js* at your html page\n  * Include an HTML element to embed the application, the id *gooru-application-container* is required\n  * Add the application script to start up the app *aw = new ApplicationWidget('#gooru-application-container', options)* \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<body>\\n\\n  <div id=\\\"gooru-application-container\\\"></div>\\n\\n  <script src=\\\"../application-widget.js\\\"></script>\\n\\n  <script type=\\\"text/javascript\\\">\\n    (function () {\\n      var aw = new ApplicationWidget('#gooru-application-container', {\\n        \\\"appRootPath\\\": \\\"../\\\",\\n        \\\"transition\\\": [ 'player', 'b6170219-5841-46b8-9c6a-d684bc457538', { queryParams: { type: 'collection', role: 'student' }}]\\n      });\\n    })();\\n  </script>\\n</body>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n# Options\n\n###  appRootPath\nIndicates where the application-widget.js is hosted, another resources would be loaded from there\n\nDefault: \"\"\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"aw = new ApplicationWidget('#gooru-application-container', { \\\"appRootPath\\\": \\\"../\\\" };\",\n      \"language\": \"javascript\",\n      \"name\": \"appRootPath Example\"\n    }\n  ]\n}\n[/block]\n### transition \nIt 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\n\nDefault: sign in page\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"aw = new ApplicationWidget('#gooru-application-container', {\\n  \\\"appRootPath\\\": \\\"../\\\",\\n  \\\"transition\\\": [ 'player', collectionId, { queryParams: { type: type, role: 'student' }}]\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"transition Example\"\n    }\n  ]\n}\n[/block]\n### token (optional)\nIt contains an authorized Gooru token, the application will start a user session with it\n\nDefault: anonymous\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"aw = new ApplicationWidget('#gooru-application-container', {\\n        \\\"appRootPath\\\": \\\"../\\\",\\n        \\\"token\\\": MTQ3OTcwODQxMTE2Mzo3MjQwZDBiMS1lM2I0LTRmMDgtOTMwMC1mMGE2ZmJlMjljMWQ6YmE5NTZhOTctYWUxNS0xMWU1LWEzMDItZjhhOTYzMDY1OTc2\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"token Example\"\n    }\n  ]\n}\n[/block]\n### sourceId (optional)\nIt contains an sourceId identifying the customer, most of the time is used by LTI communication\n\nDefault: \"\"\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"aw = new ApplicationWidget('#gooru-application-container', {\\n    \\\"appRootPath\\\": \\\"../\\\",\\n    \\\"sourceId\\\": aebbfd-45454\\n} \",\n      \"language\": \"javascript\",\n      \"name\": \"sourceId Example\"\n    }\n  ]\n}\n[/block]\n### themeId (optional)\nGooru provides several UI themes, this property indicates which css rules should be loaded\n\nDefault: gooru\nPossible Values: gooru, london\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"aw = new ApplicationWidget('#gooru-application-container', {\\n        \\\"appRootPath\\\": \\\"../\\\",\\n        \\\"themeId\\\": london\\n} \",\n      \"language\": \"javascript\",\n      \"name\": \"themeId Example\"\n    }\n  ]\n}\n[/block]\n### features\nWhen 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.\n\nDefault: all features are enabled\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  features: {\\n    header: {\\n      enabled: true\\n    },\\n    collections: {\\n      player: {\\n        showReactionBar: true,\\n        showReportLink: true\\n      }\\n    }\\n  }\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"Possible Features\"\n    }\n  ]\n}\n[/block]\n    header.enabled - Useful to hide the application header\n    collections.player.showReactionBar - Useful to hide the reaction bar at the collection player\n    collections.player.showReportLink - Useful to hide the player summary report\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"aw = new ApplicationWidget('#gooru-application-container', {\\n    \\\"appRootPath\\\": \\\"../\\\",\\n    \\\"collections\\\": {\\n        \\\"player\\\": {\\n          \\\"showReactionBar\\\": false,\\n          \\\"showReportLink\\\": false\\n        }\\n    }\\n}  \",\n      \"language\": \"javascript\",\n      \"name\": \"Features Example\"\n    }\n  ]\n}\n[/block]\n### application properties \nWhen 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. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"aw = new ApplicationWidget('#gooru-application-container', {\\n        \\\"appRootPath\\\": \\\"../\\\",\\n        \\\"endpoint\\\" : {\\n          \\\"url\\\": \\\"http://nucleus-qa.gooru.org\\\",\\n          \\\"secureUrl\\\": \\\"https://nucleus-qa.gooru.org\\\"\\n        },\\n        \\\"realTime\\\": {\\n          \\\"webServiceUrl\\\": \\\"https://rt.nucleus-qa.gooru.org\\\",\\n          \\\"webSocketUrl\\\": \\\"https://rt.nucleus-qa.gooru.org\\\",\\n        },\\n    }\",\n      \"language\": \"javascript\",\n      \"name\": \"Application Properties Example\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  \\\"appRootPath\\\": \\\"/\\\", //default is root\\n  \\\"endpoint\\\" : {\\n    \\\"url\\\": \\\"http://nucleus-qa.gooru.org\\\",\\n    \\\"secureUrl\\\": \\\"https://nucleus-qa.gooru.org\\\"\\n  },\\n\\n  \\\"realTime\\\": {\\n    \\\"webServiceUrl\\\": \\\"http://goorurt.qa.gooruweb.edify.cr\\\",\\n    \\\"webServiceUri\\\": \\\"/nucleus/realtime\\\",\\n    \\\"webSocketUrl\\\": \\\"https://goorurt.qa.gooruweb.edify.cr\\\",\\n    \\\"webSocketUri\\\": \\\"/ws/realtime\\\"\\n  },\\n\\n  \\\"teams\\\": {\\n    \\\"url\\\": \\\"http://teams-qa.gooru.org\\\"\\n  },\\n\\n  \\\"player\\\": {\\n    \\\"resources\\\":{\\n      \\\"pdf\\\": {\\n        \\\"googleDriveEnable\\\": false,\\n        \\\"googleDriveUrl\\\":\\\"https://docs.google.com/gview?url=\\\"\\n      }\\n    }\\n  }\\n};\",\n      \"language\": \"javascript\",\n      \"name\": \"Possible application properties\"\n    }\n  ]\n}\n[/block]","updates":[],"order":1,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"58353f64501f060f001f53f1","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"New Player Widget","slug":"player-widget","order":19,"from_sync":false,"reference":false,"_id":"576c5eaf5738570e00ff070f","project":"56439dfe9eebf70d00490d54","createdAt":"2016-06-23T22:11:59.399Z","version":"56439dff9eebf70d00490d57","__v":0},"parentDoc":null,"__v":0,"createdAt":"2016-11-23T07:04:04.661Z","githubsync":"","project":"56439dfe9eebf70d00490d54","user":"5706dce42138ed0e0060f8ab","version":{"version":"1","version_clean":"1.0.0","codename":"","is_stable":false,"is_beta":true,"is_hidden":false,"is_deprecated":false,"categories":["56439dff9eebf70d00490d58","56439e17c92c470d002dec71","564ce88e802cd02100444274","564d07ff3657c43500bf1d33","564d0a312da1982d00b19b64","564d2aa92da1982d00b19b8c","564d30a8b88a37210082253e","564d362c2da1982d00b19ba0","569d664371e3650d00acf018","569d7eacec29360d00f667c9","569d8006ec29360d00f667cb","569d855e0306a10d00ce99b9","569d91d571e3650d00acf04c","569d91eeceb7510d00f2a6a3","569e8c262d320817003b806d","569e8f802d320817003b8072","56b038c914dfea0d0007cf05","5717b4f0681bb41900fc575a","5718e0a4cd483219007c2c9a","571924c8e967cb1700d078e9","571e2648edc4a92b00a4cc65","576a677a6f15260e001f899b","576c5eaf5738570e00ff070f","578d127ed9c55c2000d4f213","579f90927ebe9b0e00059c50","582c0af888708a0f00570a69"],"_id":"56439dff9eebf70d00490d57","createdAt":"2015-11-11T19:58:55.144Z","project":"56439dfe9eebf70d00490d54","releaseDate":"2015-11-11T19:58:55.144Z","__v":26}}

Documentation

Authentication

Assessment

Class/All Users

Class/Teacher

Collection

Copier

Course

Lesson

Media Upload

Profile

Questions

Resources

Static Lookup Values

Taxonomy

Unit

User Prefs

Users

New Search API

New Player Widget

One Roster

LTI Single Sign On

Access Catalog

Integrating Gooru Application Widget

Gooru application can be also embedded in a 3rd party application, any of the existing pages can be accessed directly.
[block:api-header] { "type": "basic", "title": "Embedding the app" } [/block] * 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)* [block:code] { "codes": [ { "code": "<body>\n\n <div id=\"gooru-application-container\"></div>\n\n <script src=\"../application-widget.js\"></script>\n\n <script type=\"text/javascript\">\n (function () {\n var aw = new ApplicationWidget('#gooru-application-container', {\n \"appRootPath\": \"../\",\n \"transition\": [ 'player', 'b6170219-5841-46b8-9c6a-d684bc457538', { queryParams: { type: 'collection', role: 'student' }}]\n });\n })();\n </script>\n</body>", "language": "html" } ] } [/block] # Options ### appRootPath Indicates where the application-widget.js is hosted, another resources would be loaded from there Default: "" [block:code] { "codes": [ { "code": "aw = new ApplicationWidget('#gooru-application-container', { \"appRootPath\": \"../\" };", "language": "javascript", "name": "appRootPath Example" } ] } [/block] ### 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 [block:code] { "codes": [ { "code": "aw = new ApplicationWidget('#gooru-application-container', {\n \"appRootPath\": \"../\",\n \"transition\": [ 'player', collectionId, { queryParams: { type: type, role: 'student' }}]\n}", "language": "javascript", "name": "transition Example" } ] } [/block] ### token (optional) It contains an authorized Gooru token, the application will start a user session with it Default: anonymous [block:code] { "codes": [ { "code": "aw = new ApplicationWidget('#gooru-application-container', {\n \"appRootPath\": \"../\",\n \"token\": MTQ3OTcwODQxMTE2Mzo3MjQwZDBiMS1lM2I0LTRmMDgtOTMwMC1mMGE2ZmJlMjljMWQ6YmE5NTZhOTctYWUxNS0xMWU1LWEzMDItZjhhOTYzMDY1OTc2\n}", "language": "javascript", "name": "token Example" } ] } [/block] ### sourceId (optional) It contains an sourceId identifying the customer, most of the time is used by LTI communication Default: "" [block:code] { "codes": [ { "code": "aw = new ApplicationWidget('#gooru-application-container', {\n \"appRootPath\": \"../\",\n \"sourceId\": aebbfd-45454\n} ", "language": "javascript", "name": "sourceId Example" } ] } [/block] ### themeId (optional) Gooru provides several UI themes, this property indicates which css rules should be loaded Default: gooru Possible Values: gooru, london [block:code] { "codes": [ { "code": "aw = new ApplicationWidget('#gooru-application-container', {\n \"appRootPath\": \"../\",\n \"themeId\": london\n} ", "language": "javascript", "name": "themeId Example" } ] } [/block] ### 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 [block:code] { "codes": [ { "code": "{\n features: {\n header: {\n enabled: true\n },\n collections: {\n player: {\n showReactionBar: true,\n showReportLink: true\n }\n }\n }\n}", "language": "javascript", "name": "Possible Features" } ] } [/block] 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 [block:code] { "codes": [ { "code": "aw = new ApplicationWidget('#gooru-application-container', {\n \"appRootPath\": \"../\",\n \"collections\": {\n \"player\": {\n \"showReactionBar\": false,\n \"showReportLink\": false\n }\n }\n} ", "language": "javascript", "name": "Features Example" } ] } [/block] ### 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. [block:code] { "codes": [ { "code": "aw = new ApplicationWidget('#gooru-application-container', {\n \"appRootPath\": \"../\",\n \"endpoint\" : {\n \"url\": \"http://nucleus-qa.gooru.org\",\n \"secureUrl\": \"https://nucleus-qa.gooru.org\"\n },\n \"realTime\": {\n \"webServiceUrl\": \"https://rt.nucleus-qa.gooru.org\",\n \"webSocketUrl\": \"https://rt.nucleus-qa.gooru.org\",\n },\n }", "language": "javascript", "name": "Application Properties Example" } ] } [/block] [block:code] { "codes": [ { "code": "{\n \"appRootPath\": \"/\", //default is root\n \"endpoint\" : {\n \"url\": \"http://nucleus-qa.gooru.org\",\n \"secureUrl\": \"https://nucleus-qa.gooru.org\"\n },\n\n \"realTime\": {\n \"webServiceUrl\": \"http://goorurt.qa.gooruweb.edify.cr\",\n \"webServiceUri\": \"/nucleus/realtime\",\n \"webSocketUrl\": \"https://goorurt.qa.gooruweb.edify.cr\",\n \"webSocketUri\": \"/ws/realtime\"\n },\n\n \"teams\": {\n \"url\": \"http://teams-qa.gooru.org\"\n },\n\n \"player\": {\n \"resources\":{\n \"pdf\": {\n \"googleDriveEnable\": false,\n \"googleDriveUrl\":\"https://docs.google.com/gview?url=\"\n }\n }\n }\n};", "language": "javascript", "name": "Possible application properties" } ] } [/block]