{"_id":"58353f64501f060f001f53f1","category":{"_id":"576c5eaf5738570e00ff070f","project":"56439dfe9eebf70d00490d54","version":"56439dff9eebf70d00490d57","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-06-23T22:11:59.399Z","from_sync":false,"order":19,"slug":"player-widget","title":"New Player Widget"},"parentDoc":null,"__v":0,"project":"56439dfe9eebf70d00490d54","user":"5706dce42138ed0e0060f8ab","version":{"_id":"56439dff9eebf70d00490d57","project":"56439dfe9eebf70d00490d54","__v":26,"createdAt":"2015-11-11T19:58:55.144Z","releaseDate":"2015-11-11T19:58:55.144Z","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"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":false,"codename":"","version_clean":"1.0.0","version":"1"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-11-23T07:04:04.661Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"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]","excerpt":"Gooru application can be also embedded in a 3rd party application, any of the existing pages can be accessed directly.","slug":"integrating-gooru-application-widget","type":"basic","title":"Integrating Gooru Application Widget"}

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]