Event logger

Enter your Riddle ID

Riddle ID
Riddle
Event Log 
How it works
Riddle sends JavaScript Events to your website. You can listen to the events on your website and use them to track data or something else.
Here is the full example HTML page, or open the example page in your browser: Link
Complete code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Riddle Event Logger</title>
    <style>
      .riddle-event-logger {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
      }

      @media screen and (min-width: 768px) {
        .riddle-event-logger {
          grid-template-columns: 50% 50%;
        }
      }

      .riddle-event-logger pre {
        height: 450px;
        background: rgba(0, 0, 0, 0.1);
        overflow: auto;
        padding: 1rem;
      }

      .riddle-id-input {
        display: flex;
        gap: 1rem;
        align-items: center;
        margin-bottom: 1rem;
      }

      .riddle-id-input input {
        padding: 0.5rem;
        font-size: 1rem;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0.25rem;
        padding: 1rem;
      }

      .riddle-id-input button {
        padding: 0.5rem 1rem;
        font-size: 1rem;
        background: rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0.25rem;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="riddle-id-input">
      <strong>Riddle ID</strong>
      <input type="text" id="riddleIdInput" placeholder="Riddle ID" />
      <button onclick="loadRiddle()">Load Riddle</button>
    </div>

    <div class="riddle-event-logger">
      <div>
        <strong>Riddle</strong>

        <div
          class="riddle2-wrapper"
          data-rid-id="akDFh8ke"
          data-auto-scroll="false"
          data-is-fixed-height-enabled="false"
          data-bg="#fff"
          data-fg="#00205b"
          style="margin: 0 auto; max-width: 100%; width: 640px"
        >
          <script src="https://www.riddle.com/embed/build-embedjs/embedV2.js"></script>

          <iframe
            src="https://www.riddle.com/embed/a/akDFh8ke?lazyImages=false&staticHeight=false"
            allow="autoplay"
            referrerpolicy="strict-origin"
          ></iframe>
        </div>
      </div>

      <div>
        <strong>Event Log</strong>
        <pre id="preElement"></pre>
      </div>
    </div>

    <script>
      let dataLog = "";
      const preElement = document.getElementById("preElement");
      const riddleIdInput = document.getElementById("riddleIdInput");
      let riddleId = "akDFh8ke";

      function loadRiddle() {
        riddleId = riddleIdInput.value;

        const riddleEmbed = document.querySelector(".riddle2-wrapper");
        riddleEmbed.setAttribute("data-rid-id", riddleId);

        // Set iframe source.
        const iframe = riddleEmbed.querySelector("iframe");
        iframe.src = `https://www.riddle.com/embed/a/${riddleId}?lazyImages=false&staticHeight=false`;

        dataLog = "";
        preElement.textContent = dataLog;
      }

      function dataToString(data) {
        let returnString = "";

        for (const [key, value] of Object.entries(data)) {
          if (typeof value === "object") {
              returnString += `${key}: ${JSON.stringify(value)}\n`;
              continue;
          }

          returnString += `${key}: ${value}\n`;
        }

        returnString += "-----------------------------------------\n\n";

        return returnString;
      }

      function eventListener(event) {
        if (
          event.origin !== "https://www.riddle.com" ||
          !event.data.isRiddle2Event ||
          !event.data.category ||
          !event.data.category.startsWith("RiddleTrackEvent")
        ) {
          return;
        }

        dataLog += dataToString(event.data);
        preElement.textContent = dataLog;
        autoScrollPreToBottom();
      }

      function autoScrollPreToBottom() {
        setTimeout(() => {
          if (preElement) {
            preElement.scrollTop = preElement.scrollHeight;
          }
        }, 100);
      }

      window.addEventListener("message", eventListener);
    </script>
  </body>
</html>

Custom tracking
You have to enable custom tracking in your Riddle. Learn more about custom tracking here: Docs