{"_id":"5864d2e079ce642d00f0ff52","version":{"_id":"5864d2df79ce642d00f0fec7","project":"56439dfe9eebf70d00490d54","__v":4,"createdAt":"2016-12-29T09:09:51.074Z","releaseDate":"2016-12-29T09:09:51.074Z","categories":["5864d2df79ce642d00f0fec8","5864d2df79ce642d00f0fec9","5864d2df79ce642d00f0feca","5864d2df79ce642d00f0fecb","5864d2df79ce642d00f0fecc","5864d2df79ce642d00f0fecd","5864d2df79ce642d00f0fece","5864d2df79ce642d00f0fecf","5864d2df79ce642d00f0fed0","5864d2df79ce642d00f0fed1","5864d2df79ce642d00f0fed2","5864d2df79ce642d00f0fed3","5864d2df79ce642d00f0fed4","5864d2df79ce642d00f0fed5","5864d2df79ce642d00f0fed6","5864d2df79ce642d00f0fed7","5864d2df79ce642d00f0fed8","5864d2df79ce642d00f0fed9","5864d2df79ce642d00f0feda","5864d2df79ce642d00f0fedb","5864d2df79ce642d00f0fedc","5864d2df79ce642d00f0fedd","5864d2df79ce642d00f0fede","598aa64f4b6e990019b7a2d2","599bc76bc03fa2000f83db2a","599bcc3c3c5bf7000f3434fc"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2"},"user":"5706dce42138ed0e0060f8ab","category":{"_id":"5864d2df79ce642d00f0fedb","__v":0,"version":"5864d2df79ce642d00f0fec7","project":"56439dfe9eebf70d00490d54","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-06-23T22:11:59.399Z","from_sync":false,"order":21,"slug":"player-widget","title":"New Player Widget"},"__v":0,"parentDoc":null,"project":"56439dfe9eebf70d00490d54","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]