Integrating Gooru Player Widget

To get started, add the following code to the end of the `head` section of the page where you want to embed the Gooru Player Widget: [block:code] { "codes": [ { "code": "\n<script src=\"https://playerwidget.gooru.org/player-widget.js\"></script>", "language": "html" } ] } [/block] Then, you must include a container element where player widget will load: [block:code] { "codes": [ { "code": "<div id=\"gooru-player\"\n data-role=\"gooru-player\"\n data-collection-id=\"7548b798-7fac-4352-91a8-991a50ba4f35\"\n data-show-reactions=\"false\"\n data-show-questions=\"false\"\n data-show-report=\"false\">\n</div>", "language": "html" } ] } [/block] This are the configuration options available as html attributes: [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Values", "h-2": "Description", "0-0": "data-role", "0-1": "\"gooru-player\"", "0-2": "Required. \nUsed to identify the container \nand embed the player into it.", "1-0": "data-collection-id", "1-1": "Any collection or assessment ID", "1-2": "Optional. \nThis is the ID of the\ncollection or assessment to play.", "2-0": "data-resource-id", "2-1": "Any valid resource ID.", "2-2": "Optional. \nPlayer will load this resource. \nLeave blank and the Player \nwill load the first resource of collection.\nIf data-collection-id is not set, the widget will show the resource player.", "4-0": "data-show-reactions", "4-1": "\"true\" or \"false\". Default: \"false\"", "4-2": "Optional. \nShow/Hide the reactions bar.", "5-0": "data-show-questions", "5-1": "\"true\" or \"false\". Default: \"true\"", "5-2": "Optional. \nUse \"false\" to hide \nresources of type \"Question\".", "6-0": "data-show-report", "6-1": "\"true\" or \"false\". Default: \"true\"", "6-2": "Optional. \nUse \"false\" to hide Usage Report.", "9-0": "data-gooru-token", "9-1": "Any valid Gooru user authentication token.", "9-2": "Optional. \nUsed to authenticate user and track events. \nLeave blank or don't include attribute \nto use anonymous mode.", "7-0": "data-show-collection-name", "7-1": "\"true\" or \"false\". Default: \"true\"", "7-2": "Optional.\nUse \"false\" to hide Collection name.", "8-0": "data-show-resource-header", "8-1": "\"true\" or \"false\". Default: \"true\"", "8-2": "Optional.\nUse \"false\" to hide Header of resource or question player.", "3-0": "data-question-id", "3-1": "Any question ID.", "3-2": "Optional.\nUse this attribute to play a single question. \ndata-collection-id and \ndata-resource-id must \nnot be set.", "10-0": "data-base-path", "10-1": "The base path where the player-widget.js file is located", "10-2": "Optional\nDefault: \"./\"" }, "cols": 3, "rows": 11 } [/block] [block:api-header] { "type": "basic", "title": "Sample Website" } [/block] Add the following page to any web server a try the Gooru Player Widget [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n \n <meta name=\"description\" content=\"\">\n <meta name=\"author\" content=\"\">\n <link rel=\"icon\" href=\"favicon.ico\">\n\n <title>Gooru Player Test Site</title>\n\n \n\n \n \n \n \n <script src=\"https://playerwidget.gooru.org/player-widget.js\"></script>\n </head>\n <body>\n <div id=\"gooru-player\"\n data-role=\"gooru-player\"\n data-collection-id=\"7548b798-7fac-4352-91a8-991a50ba4f35\"\n data-resource-id=\"\"\n data-show-reactions=\"false\"\n data-show-questions=\"false\"\n data-show-report=\"false\"\n data-gooru-token=\"\">\n </div>\n </body>\n</html>", "language": "html" } ] } [/block] Check out an actual example here: [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html) [block:embed] { "html": false, "url": "http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html", "title": "Gooru Player Test Site", "favicon": null, "iframe": true, "height": "600px" } [/block] You can use the following pages as a staring point to integrate Gooru Player Widget to your site: [block:callout] { "type": "info", "title": "Tip", "body": "You can use any of the supported configuration options (e.g. `data-collection-id`) as URL param in this websites." } [/block] * **Collection Player on a page with bootstrap:** [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/sample.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/sample.html) * **Resource Player on page with bootstrap:** [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/sample-resource.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/sample-resource.html) * **Full screen Collection Player:** [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html) * **Full screen Resource Player:** [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen-resource.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen-resource.html)

Gooru

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

Search API

Suggest API

Crosswalk API

New Player Widget

One Roster

Single Sign-On

LTI Single Sign On

Access Catalog

External Collections

User Api's

Gooru External Contents CRUD API

CA API's

Student Reports

Auto Complete API

Aggregation API

Teacher Reports

Learning Maps API

New Class Performance APIs for NILE

Offline Reports

DCA Class Summary Reports

Integrating Gooru Player Widget