Tile widget – Drillster

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.

Examples:

Embedding

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;

Attributes

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.

Localization

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">

<head>
    <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>
    <style>
        html,
        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;
        }
    </style>
</head>

<body>
    <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').load();
                    document.querySelector('body').classList.add('player-opened');
                    player.classList.add('drl-visible');
                });

                drillster.widgets('player-widget').on('PLAYER_CLOSE', function (event) {
                    console.log('Player closed:', event);
                    document.querySelector('body').classList.remove('player-opened');
                    player.classList.remove('drl-visible');
                    player.innerHTML = '';
                    player.removeAttribute('data-loaded');
                });
            });
        })();
    </script>
    <script src="https://www.drillster.com/widgets/loader.js" type="text/javascript"></script>
</body>

</html>