Player widget

The player widget is the general player for drills, stories, courses, tests, and combinations of drills.

Example:

Player widget

An easy way to open a player widget full screen in a browser window is to refer to a URL like the below example:

https://www.drillster.com/connector/player/hwgaTGd0BAMqfxsrABT4_Z

Substitute the code for the unique ID of the drill, course, story or test.

Assuming that the user is already authenticated with Drillster, this will open a player for the given playable ID. To have more control over authentication, and the ability to interact with the player in the browser, please see the section about “embedding” below.

It is possible to open a player widget for a combination of drills by comma-separating the individual drill codes:

https://www.drillster.com/connector/player/hwgaTGd0BAMqfxsrABT4_Z,0EYWvDj45143OZTYIiEAmw

Combinations are only supported for drills.

⚠️ Not for embedding

Note that this URL structure cannot be used to place a player on a page using an iframe. In order to embed a player on the page, please see below.

Embedding Advanced

It is also possible to place a player widget on your own web pages. Assuming that the widget loader is included in the page, a player may be embedded as follows:

<div class="drl-widget drl-player" drl-code="hwgaTGd0BAMqfxsrABT4_Z" id="player42"></div>

Attributes

The following attributes are supported for the player widget:

Attribute Description
drl-code Represents the unique ID of the drill, story, test or course. For a combination of drills and/or courses, use a comma separated list of codes as the value. Combinations of tests are not supported.
drl-activity For courses, indicates at which step the player should start. Takes the activity ID.

Note: the drl-activity attribute is optional and only applies to courses.
drl-token An optional OAuth token.

An OAuth token may be obtained by using a standard service account or by using the custom delegated login API.
drl-ticket An optional ticket string for use with anonymous tests.
drl-adaptive-test-start An optional starting level for use with adaptive tests. Only applies to adaptive tests.
drl-allow-full-screen Indicates whether the user is permitted to switch the player to full screen mode (including for embedded videos).

Accepted values are true and false. If no value is given, the behavior is to disallow the full screen mode.
id An optional identifier for the widget. The id is useful to determine which widget sent a client side event in case there are multiple widgets on the page. Please make sure to use a unique ID for each widget present on the page.
drl-auto-focus An optional boolean to indicate that the player's content window will receive focus upon starting. The default value is false.
drl-can-close An optional boolean which, if set to true, will cause a “×” close button to the upper right hand corner of the player widget. Also, a “Close” button will appear in the final screen of the learning object. Clicking these buttons will cause a PLAYER_CLOSE event to be emitted by the player. It does not automatically close the player; that is the responsibility of the component that opened the player in the first place. Please ensure this event is handled appropriately when making use of this option.
drl-preview Starts the player in preview mode. This functionality is only available to the author of a drill or story. The contents of the current draft version are shown, without any progress or proficiency. It is up to the user to establish that the caller does have this permission.

Valid values are overview to make the player start on the overview screen, or play to start with the next story page or drill question.
drl-preview-start Indicates the starting point, for the preview mode. Only applicable when the player is started in drl-preview mode. If not specified, the “next” page or question will be loaded.
drl-suppress-connect-apps An optional boolean which, if set to true, will suppress the ability to request an access code to access the Drillster mobile app.

Example: drl-suppress-connect-apps="true".

Player dimensions

The width and height of an embedded widget can be set by manipulating the style attributes of the containing element. For example, to embed a player widget with dimensions of 600×400 pixels, the following code may be used:

<div class="drl-widget drl-player" style="width: 600px; height: 400px;" drl-code="hwgaTGd0BAMqfxsrABT4_Z" id="player42"></div>

Localization

Currently the player widget supports the following languages:

  • 🇪🇸 Catalan
  • 🇩🇰 Danish
  • 🇺🇸 English (US)
  • 🇩🇪 German
  • 🇪🇸 Spanish
  • 🇫🇮 Finnish
  • 🇫🇷 French
  • 🇮🇹 Italian
  • 🇳🇴 Norwegian
  • 🇳🇱 Dutch
  • 🇧🇷 Portuguese (BR)
  • 🇷🇴 Romanian
  • 🇷🇸 Serbian
  • 🇸🇪 Swedish

A player widget's locale is determined as follows:

  1. content language – if the language set for the content of the learning object is set and supported by the player, this locale will be sued
  2. stored language preference – for authenticated users there may be a stored language preference
  3. declared language of the containing page – the page that embeds the player may have declared a language in the html tag using a lang attribute
  4. browser setting – there may be a preferred language set in the browser
  5. English – in all cases where the language preference cannot be determined, US English is used

If the requested language is not supported, the player will use English (US). Additional localizations may be added in the future. If you require a specific localization that is not yet supported, please get in touch with us.

Client side events

The player widget is able to emit the following client-side events.

Event Fired if Payload
INITIALIZED The player was correctly initialized and is ready to be used. Initialized object
INITIALIZATION_FAILED The player could not be initialized. Error object
STARTED The user started the drill, course, test or story by using the Start button. None
QUESTION_ANSWERED A drill or test question was answered. QuestionAnswered object
PROFICIENCY_CHANGED The user's proficiency has changed as a result of answering a drill question. ProficiencyChanged object
TEST_PROGRESSED There is a change in the progress of a test because a question was answered for the first time. Progressed object
TEST_COMPLETED The test was completed, either because the user submitted the test (navigable tests), reached the last question (non-navigable tests), or the time ran out on a test with a time limit. TestCompleted object
FULL_PROFICIENCY_ATTAINED 100% proficiency for the current drill or drills was attained by the user. FullProficiency object
ACTIVITY_COMPLETED Emitted at completion of each course activity. ActivityStatus object
OBJECTIVE_MET A pre-set learning objective was met. None
STORY_PROGRESSED There is a change in the progress of a story because a page was acknowledged for the first time. Progressed object
STORY_COMPLETED All pages in the story have been acknowledged. The progress is 100%. None
PLAYER_CLOSE The user has clicked the close button in the player. None
  • Copyright © 2006–2024 Drillster BV.