<!-- 
  *** Qualtrics Popup Template ***
  Instructions:
  1. Replace all instances of 'UNIQUE_ID' with a unique identifier for each question 
     (e.g., 'q1_popup'). This ID must be unique 
     across all popups used in the survey.
  2. Replace the placeholder text '[click here for context...]' with the appropriate link text.
  3. Replace the placeholder text 'Popup Title - Context' with the actual title for the popup.
  4. Replace the placeholder paragraph '<p>Placeholder context paragraph...</p>' with the actual 
     contextual information you want to display in the popup.
  5. Copy and paste this entire block (including the <script> tags) into the HTML view 
     of the Qualtrics question where you want the popup link to appear.
-->
<!-- Start of self-contained popup code for Qualtrics Question -->
<div id="UNIQUE_ID_wrapper" style="all: initial;"> <!-- Reset styles for the wrapper -->
  <hr style="border: none; border-top: 1px solid #000000; margin: 10px 0 8px 0; width: 100%; box-sizing: border-box;">
  <br>
  <p style="font-size: 16px; margin: 0; padding: 0; line-height: normal; font-weight: normal;"> <!-- Reset paragraph styles -->
    [<a href="javascript:void(0)" onclick="document.getElementById('UNIQUE_ID_modal').style.display='block'" style="font-size: 16px; color: blue; text-decoration: underline; background: none; border: none; padding: 0; margin: 0;">[click here for context...]</a>]
  </p>

  <div id="UNIQUE_ID_modal" style="display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4); font-family: sans-serif; /* Use sans-serif like popup3 */ box-sizing: border-box;"> <!-- Added box-sizing and font-family -->
    <div style="margin:10% auto; width:80%; max-width:800px; background:#fff; border-radius:5px; box-shadow:0 4px 8px rgba(0,0,0,0.2); border: 1px solid #ccc; box-sizing: border-box;"> <!-- Added border and box-sizing -->
      <div style="padding:15px; border-bottom:1px solid #e9ecef; display:flex; justify-content:space-between; align-items:center; box-sizing: border-box;"> <!-- Added box-sizing -->
        <h2 style="font-size:1.4rem; margin:0; font-weight:bold; line-height: 1.2;">Popup Title - Context</h2> <!-- Added line-height -->
        <button onclick="document.getElementById('UNIQUE_ID_modal').style.display='none'" style="font-size:1.5rem; font-weight:bold; cursor:pointer; background:none; border:none; padding: 0; line-height: 1; color: #000;">&times;</button> <!-- Added padding, line-height, color -->
      </div>
      <div style="padding:20px 30px; font-size:14px; line-height: 1.4; box-sizing: border-box; max-height: 60vh; overflow-y: auto;"> <!-- Added max-height and overflow-y -->
        <!-- === START Placeholder Content === -->
        <p style="text-indent:2em; font-size: inherit; line-height: inherit;">Placeholder context paragraph. Replace this text with the actual content you want to display inside the popup window. You can use standard HTML tags like &lt;strong&gt;, &lt;em&gt;, &lt;ul&gt;, &lt;li&gt;, etc., within this section.</p>
        <!-- === END Placeholder Content === -->
      </div>
      <div style="padding:15px; border-top:1px solid #e9ecef; text-align:right; box-sizing: border-box;"> <!-- Added box-sizing -->
        <button onclick="document.getElementById('UNIQUE_ID_modal').style.display='none'" style="color:black; background-color:#95CCCC; border:1px solid #95CCCC; padding:6px 12px; border-radius:4px; cursor:pointer; font-size: 14px; /* Use px */ line-height: normal;">Close</button> <!-- Changed font-size to px, added line-height -->
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
// Ensure this runs only once per unique ID and targets the correct modal
if (!window.UNIQUE_ID_listener_added) {
  // Use a closure to capture the current UNIQUE_ID
  (function(uniqueId) {
    window.addEventListener('click', function(e) {
      var modal = document.getElementById(uniqueId + '_modal');
      // Check if modal exists and the click was outside the modal content
      if (modal && e.target == modal) {
        modal.style.display = 'none';
      }
    });
    // Set a flag specific to this unique ID
    window[uniqueId + '_listener_added'] = true; 
  })('UNIQUE_ID'); // Immediately invoke the function with the current UNIQUE_ID
}
</script>
<!-- End of self-contained popup code -->