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!
Last modified 5mo ago