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 top of the text box
} */
function updateEventData(eventData) {
const { isRiddle2Event, riddleId, blockId, blockTitle, blockDescription, blockType, blockTypeGroup, action, answer, category, name, resultScore, resultScorePercentage, resultTotalScore } = eventData;
const output = `isRiddle2Event: ${isRiddle2Event}\n` +
`riddleId: ${riddleId}\n` +
`blockId: ${blockId}\n` +
`blockTitle: ${blockTitle}\n` +
`blockDescription: ${blockDescription}\n` +
`blockType: ${blockType}\n` +
`blockTypeGroup: ${blockTypeGroup}\n` +
`action: ${action}\n` +
`answer: ${answer}\n` +
`category: ${category}\n` +
`name: ${name}\n` +
`resultScore: ${resultScore}\n` +
`resultScorePercentage: ${resultScorePercentage}\n` +
`resultTotalScore: ${resultTotalScore}\n\n` +
`-----------------------------------------\n\n`;
// Prepend output to the start of textBox.value
textBox.value = output + textBox.value;
}
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);
});