Tile widget

A tile widget is a small rectangular representation of a drill, suitable as placeholder for the actual player widget. Tiles are perfect to fill a page with multiple drills to allow a user to make a selection.


Tile widget


Assuming that the widget loader is included in the page, a tile may be embedded as follows:

<div class="drl-widget drl-tile" drl-code="hwgaTGd0BAMqfxsrABT4_Z" id="tile0"></div>

For optimal display, please ensure to use a block element and apply the following dimensions:

width: 240px;
height: 358px;


Attribute Description
drl-code Represents the unique ID of the drill, story, test or course.
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-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 test ticket. This is only applicable to so-called anonymous tests.

If a valid and matching test ticket is supplied with a test code, the score is displayed where available.


As tile widgets only contain user content, and no system generated text, there are no localization options.

Client side events

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

Event Fired if Payload
INITIALIZED The tile was correctly initialized. Initialized object
INITIALIZATION_FAILED The tile could not be initialized. Error object
CLICKED The tile was clicked. None

Launching the player

An obvious use of the tile widget is to allow the Player widget to be launched when the user clicks on it. As the tile widget is a generic component, this is not the out-of-the-box behavior. However, with a little bit of glue logic this is easily achieved.

If a tile is clicked, a CLICKED event is emitted, including a reference to the object that was clicked. By listening to this event, and acting upon it, the appropriate player may be opened. Additionally, the same glue logic should also listen to a player's PLAYER_CLOSE event, and close the player widget.

The below code provides a working example of such an integration. Note that special care was taken to allow scrolling to work correctly in Mobile Safari.

<!doctype html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tile/Player widget integration example</title>
        body {
            width: 100vw;
            height: 100vh;

        body {
            margin: 0;

        body.player-opened .drl-tile {
            display: none;

        .drl-widget.drl-tile {
            width: 240px;
            height: 358px;
            display: inline-block;

        .drl-widget.drl-player {
            position: fixed;
            top: -100%;
            left: 0;
            width: 100vw;
            height: 100%;
            transition: top .5s ease-in-out;
            overflow: auto;
            -webkit-overflow-scrolling: touch;

        .drl-player iframe {
            width: 100%;
            height: 100%;

        .drl-widget.drl-player.drl-visible {
            top: 0;

    <div class="drl-widget drl-tile" drl-code="LjYPFL1FWCiLdCTJnwIKrQ" id="tile0"></div>
    <div class="drl-widget drl-tile" drl-code="EyQpEm2QS1u0c42BnMxVJA" id="tile1"></div>

    <div class="drl-widget drl-player" id="player-widget" drl-allow-full-screen="true" drl-can-close="true" drl-auto-focus="true" autoload="false"></div>

    <script type="text/javascript">
        (function () {
            'use strict';

            document.addEventListener('DOMContentLoaded', function () {
                var player = document.querySelector('.drl-widget.drl-player');

                drillster.widgets('tile*').on('CLICKED', function (event) {
                    console.log('Tile ' + event.origin + ' was clicked.');
                    var playableId = document.querySelector('#' + event.origin).getAttribute('drl-code');
                    player.setAttribute('drl-code', playableId);

                drillster.widgets('player-widget').on('PLAYER_CLOSE', function (event) {
                    console.log('Player closed:', event);
                    player.innerHTML = '';
    <script src="https://www.drillster.com/widgets/loader.js" type="text/javascript"></script>



Last updated on