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