index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Governance Study</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 1000px;
      margin: 30px auto;
      padding: 0 20px;
      line-height: 1.5;
    }

    .notice {
      background: #eef6ff;
      border: 1px solid #b9d8f5;
      padding: 16px 18px;
      margin-bottom: 20px;
      border-radius: 8px;
    }

    .notice strong {
      font-size: 1.05em;
    }

    .notice p {
      margin: 10px 0;
    }
  </style>
</head>

<body>

  <div class="notice">
    <strong>Instructions</strong>

    <p>
      Please spend up to <strong>5 minutes</strong> taking part. Vote Agree,
      Disagree, or Pass on as many statements as you wish. You can also add
      your own statements (one idea per statement).
    </p>

    <p>
      It might take some time for the window below to load. If it does not appear,
      please <strong>reload or refresh this page</strong>.
    </p>

    <p>
      When you have finished, <strong>close this tab and return to the original
      survey tab</strong>, then click <strong>Next</strong> to complete the study.
    </p>

    <p>
      Please do not include your name or anything that could identify you or
      someone else in a statement you submit.
    </p>
  </div>

  <div id="polis-container"></div>

  <script>
    window.addEventListener("load", function () {
      const params = new URLSearchParams(window.location.search);
      const participantId = params.get("xid");
      const container = document.getElementById("polis-container");

      if (!participantId) {
        container.innerHTML =
          "<p>Participant ID is missing. Please return to the survey.</p>";
        return;
      }

      container.innerHTML =
        "<div class='polis' " +
        "data-conversation_id='2ccw7sbbtk' " +
        "data-xid='" + participantId + "'></div>";

      const script = document.createElement("script");
      script.src = "https://pol.is/embed.js";
      script.async = true;
      container.appendChild(script);
    });
  </script>

</body>
</html>