JS API

Game Developer API

Search…

Introduction

Guidelines

Testing and Submission

JS API

showQuestion and answerResult should only be used by developers given permission to use the Question Overlay.

Legends of Learning Platform: JavaScript API
The LoL Game API is implemented as a sequence of asynchronous calls between an iFrame parent and child. Use the browser's built in window.postMessage to send outgoing messages, and window.addEventListener("message", message => {...}) to receive messages. Details on each method are linked below.
Direction
Category
Message Name
Added
LoL => Game
Lifecycle
ready
V2
Game => LoL
Lifecycle
start
V2
LoL => Game
Data Payload
language
V2
Game => LoL
Lifecycle
loadingProgress
V1
Game => LoL
Progress
progress
V2
Game => LoL
Speech
speakText
V2
Game => LoL
Lifecycle
complete
V1
Game => LoL
Questions
showQuestion
V4
LoL => Game
Questions
answerResult
V4
Game => LoL
State
saveState
V5
Game => LoL
State
loadState
V5
Sending Messages
1
function LoLApi (messageName, payloadObj) {
2
    parent.postMessage({
3
        message: messageName,
4
        payload: JSON.stringify(payloadObj)
5
    }, 
6
'*')};
Copied!
Receiving Messages
1
window.addEventListener("message", function (msg) {
2
    // Message name and JSONified payload
3
    const { messageName, payload } = msg.data;   
4
}
Copied!
Messages
gameIsReady
Sent by the game to indicate it is ready to receive data.
1
LoLApi('gameIsReady', { 
2
    aspectRatio: "16:9",
3
    resolution: "1024x576",
4
});
Copied!
start
Sent from the gameframe (following receipt of gameIsReady) to initialize gameplay (with optional lastGameProgress payload).
1
// payload received (JSON stringified)
2
{
3
  "languageCode": "en",
4
  "lastGameProgress": {
5
    score: 10,
6
    maxScore: 11,
7
    gameProvidedPayload: "{\"developerProvidedPayload\": true}"
8
  }
9
}
Copied!
language
1
// payload received (JSON stringified)
2
{
3
  "welcome": "Welcome!",
4
  "readyToPlay": "Are you ready to play?",
5
  "greatJob": "Great job!",
6
  "pressContinue": "Press the next button to continue.",
7
  "onePlusOne": "One + One = Two"
8
}
Copied!
loadingProgress
1
LoLApi('loadingProgress', { progress: 0.56 });
Copied!
progress
1
LoLApi('progress', { alternativeId: 1 });
Copied!
speakText
1
LoLApi('speakText', { key: 'welcome' });
Copied!
saveState
1
LoLApi('saveState', {data: {key: 'welcome'}});
Copied!
loadState
1
window.addEventListener("message", function (msg) {
2
    // Message name and JSONified payload
3
    const { messageName, payload } = msg.data;   
4
    if (messageName === 'loadState') {
5
        // Your STATE handler here
6
        break;
7
    }
8
});
9
​
10
parent.postMessage({
11
        message: 'loadState',
12
        payload: '*'
13
    }, 
14
'*');
Copied!
saveState with progress data
1
LoLApi('saveState', { currentProgress: 3, maximumProgress: 10, data: {key: 'welcome'}});
Copied!
loadState and restore progress data
1
window.addEventListener("message", function (msg) {
2
    const { messageName, payload } = msg.data;   
3
    if (messageName === 'loadState') {
4
        const previousState = JSON.parse(payload);
5
        const currentProgress = previousState && previousState.currentProgress
6
        const maximumProgress = previousState && previousState.maximumProgress
7
        LoLApi('progress', {currentProgress, maximumProgress});
8
        // do something with the data inside payload
9
        break;
10
    }
11
});
12
​
13
parent.postMessage({
14
        message: 'loadState',
15
        payload: '*'
16
    }, 
17
'*');
Copied!
complete
1
LoLApi('complete', {});
Copied!
Code Example: Receiving Messages
1
const EVENT = {
2
    RECEIVED: {
3
        PAUSE: 'pause',
4
        RESUME: 'resume',
5
        QUESTIONS: 'questions',
6
        LANGUAGE: 'language',
7
        START: 'start',
8
        INIT: 'init',
9
        STATE: 'loadState'
10
    }
11
};
12
​
13
window.addEventListener("message", function (msg) {
14
    console.log('[PARENT => UNITY]', msg)
15
​
16
    switch (msg.data.messageName) {
17
        case EVENT.RECEIVED.PAUSE:
18
            // Your PAUSE handler here
19
            break;
20
        case EVENT.RECEIVED.RESUME:
21
            // Your RESUME handler here
22
            break;
23
        case EVENT.RECEIVED.QUESTIONS:
24
            // Your QUESTIONS handler here
25
            break;
26
        case EVENT.RECEIVED.LANGUAGE:
27
            // Your LANGUAGE handler here
28
            break;
29
        case EVENT.RECEIVED.START:
30
            // Your START handler here
31
            break;
32
        case EVENT.RECEIVED.STATE:
33
            // Your STATE handler here
34
            break;
35
        case EVENT.RECEIVED.INIT:
36
            break;
37
        default:
38
               console.log('Unhandled message: ' + msg);
39
    }
40
});
Copied!
​