Saving Riddle events to local storage

Saving Riddle events to local storage is mostly the same code as you can read in the Event logger example

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 save them to local storage. Here is the full example HTML page:

Or open the example page in your Browser: Link

Save to local storage

function writeToLocalStorage(data) {
    // Save data in an array in local storage.
    let riddleEvents = JSON.parse(localStorage.getItem("riddleEvents")) || [];

    riddleEvents.push(data);

    localStorage.setItem("riddleEvents", JSON.stringify(riddleEvents));
}

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 Local Storage</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;
        resetLocalStorage();
      }

      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 writeToLocalStorage(data) {
        // Save data in an array in local storage.
        let riddleEvents =
          JSON.parse(localStorage.getItem("riddleEvents")) || [];

        riddleEvents.push(data);

        localStorage.setItem("riddleEvents", JSON.stringify(riddleEvents));
      }

      function resetLocalStorage() {
        localStorage.removeItem("riddleEvents");
      }

      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();
        writeToLocalStorage(event.data);
      }

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

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

Js EventsEvent logger

Js EventsUse Riddle as entrypoint