Event Logger

Displaying the event data:

Source Code

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);
});