showQuestion and answerResult should only be used by developers permitted 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

function LoLApi (messageName, payloadObj) {
    parent.postMessage({
        message: messageName,
        payload: JSON.stringify(payloadObj)
    }, 
'*')};

Receiving Messages

window.addEventListener("message", function (msg) {
    // Message name and JSONified payload
    const { messageName, payload } = msg.data;   
}

Messages

gameIsReady

Sent by the game to indicate it is ready to receive data.

LoLApi('gameIsReady', { 
    aspectRatio: "16:9",
    resolution: "1024x576",
});

start

Sent from the gameframe (following receipt of gameIsReady) to initialize gameplay (with optional lastGameProgress payload).

// payload received (JSON stringified)
{
  "languageCode": "en",
  "lastGameProgress": {
    score: 10,
    maxScore: 11,
    gameProvidedPayload: "{\\"developerProvidedPayload\\": true}"
  }
}

language

// payload received (JSON stringified)
{
  "welcome": "Welcome!",
  "readyToPlay": "Are you ready to play?",
  "greatJob": "Great job!",
  "pressContinue": "Press the next button to continue.",
  "onePlusOne": "One + One = Two"
}

loading progress

LoLApi('loadingProgress', { progress: 0.56 });

progress