Test completion notification to 3rd party app front-end

When 3rd party apps embed the speaking test in a child iframe, they often need to know the test completion status so that users can be shown ancillary UX such as a Next or Continue button. One way to determine test completion status is to query the 3rd party app backend to check if user has completed the test. Alternatively, 3rd party app front-ends can also listen to a test completion status event, which is raised every time the speaking test is loaded in a child iframe.

To listen to the test completion status event, the 3rd party app can listen to events in the parent (iframe host) window using the below javascript event listener:

window.addEventListener('message', function(event) { 
    console.log("Message received in parent", event); }
    );

Now whenever the speaking test is complete, the speaking test child iframe raises an event to the parent window using the below javascript code:

window.parent.postMessage('speechaceActivityComplete', "*").

Based on the above listener implementation, this will trigger the following console message in the parent's browser console window:

MessageEvent { isTrusted: true, data: 'speechaceActivityComplete', origin: 'https://speak.speechace.co', lastEventId: '', source: global, … }

Now 3rd party apps can further enhance the listener to take custom action in their front-end.