Event Logger

Displaying the event data:

Add code to the Riddle Event handler

Go to the publish screen of your Riddle and find the Tracking section. Turn on custom tracking an add the code below to replace the default custom tracking script there.

			(riddleEvent) => {
  // Create a message object with the event data
  const message = {
    type: "riddleEvent",
    data: riddleEvent
  };
  
  // Send the message to the parent page
  window.parent.postMessage(message, "*");
};
			
			 

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