Find the source code used to catch the JS events and log them to a textbox HTML element below. Note: you need a textarea HTML element with the ID event-data for this code to work:
// Select the text box element on your page const textBox = document.querySelector('#event-data'); // Define a function to update the text box with the latest event data /*function updateEventData(eventData) { // Append the latest event data to the text box textBox.value += JSON.stringify(eventData, null, 2) + '\n\n'; textBox.scrollTop = textBox.scrollHeight; } */ function updateEventData(eventData) { const { isRiddle2Event, riddleId, blockId, category, action, name } = eventData; const output = `isRiddle2Event: ${isRiddle2Event}\n` + `riddleId: ${riddleId}\n` + `blockId: ${blockId}\n` + `category: ${category}\n` + `action: ${action}\n` + `name: ${name}\n\n`; textBox.value += output; textBox.scrollTop = textBox.scrollHeight; } window.addEventListener("message", (event) => { // Check that the message is from the iframe // Check that the message is a riddleEvent message if (event.data.type !== "riddleEvent") { return; } // Log the event data received from the iframe console.log("Riddle Event (from iframe): ", event.data.data); // Update the text box with the event data updateEventData(event.data.data); });