Survey Html Form - adding modal (and other JavaScript functions)

[EmmarleneK]

Hello,

I'm new to JsPsych and grateful for any help!
I'm working on an experiment in which a participant has to answer to a question choosing between two options ('Yes' and 'No' radio buttons looking like checkmarks) and submit their answer ('Submit' button). Additionally, I created a button to open a modal that contains further, helpful information for the participant to decide on their answer (see picture). So far so good.
Problem: My modal does not open! I added an on.load function that should trigger the modal if the button is pressed, but it doesn't work. What is my mistake?

This is my code so far for this trial:

/* define experimental trial */
var trial = {
  type: jsPsychSurveyHtmlForm,
  preamble: "
    <div style = 'background-color: #92a8d1; padding-top: 50px; padding-left: 5%; padding-right: 5%; width: 1000px;'>
      <div class='parent' style='position: relative;'>
        <div class='card' style='display: inline-block; width: 65%; text-align: left;'>
          <h4><b>Timeline</b></h4>
          <p>Display time left</p>
        </div>
        <div class='child' style='display: inline-block; width: 2%;'>
        </div>
        <div class='card' style='display: inline-block; width: 25%; text-align: left;'>
          <h4><b>Your Score</b></h4>
          <p>Display score</p>
        </div>
      </div>
    </div>
    ",
  html: "
  <div style = 'background-color: #92a8d1; padding-top: 3%; padding-bottom: 50px; padding-left: 5%; padding-right: 5%; width: 1000px;, height: 500px;'>
      <div class='card' style='width: 95%; display: inline-block; vertical-align: top;'>
        <h2 style='font-size: 25px;'>Does this image show x?</h2>
          <p style = 'text-align: center; font-size: 15px; line-height: 18px;'>Please decide whether the image contains x by selecting one checkbox below.</p>
          <p style = 'text-align: center; font-size: 15px; line-height: 18px;'>You can use the additional info to the right.</p>
        <div class='parent'>
          <div class='child' style='display: inline-block; margin-left: 20%;'>
            <p style = 'height: 100px; width: 45%;'>Where Image would go </p></div>
          <div class='child' style='display: inline-block; width: 10%;'></div>
          <div class='child' style='display: inline-block; text-align: left; width: 45%;'>
            <p class='small'><strong>Supporting Info:</strong></p>
            <button type='button' class='btn' id='ModPred' style='margin-top: 5px;'>View Info</button>
                <div id='PopUpModal' class='modal'>
                  <div class='modal-content'>
                    <span class='close'>&times;</span>
                    <p>Info: xxx</p>
                  </div>
                </div>
          </div>
          <div class='parent'>
            <h3>Decision:</h3>
            <label class='container'>Yes
              <input type='radio'  id='Yes' name='radio' value='YES'>
              <span class='checkmark'></span>
            </label>
            <div class='child' style='display: inline-block; width: 10%;'></div>
            <label class='container'>No
              <input type='radio'  id='No' name='radio' value='NO'>
              <span class='checkmark'></span>
            </label>
          </div>
        </div>
      </div>
    </div>
  ",
  on_load: function() {
  /*--------------Modal JS */

    // Get the modal
    var modal = document.getElementById('PopUpModal');
    
    // Get the button that opens the modal
    var btn = document.getElementById('ModPred');
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName('close')[0];
    
    // When the user clicks on the button, open the modal
    btn.onclick = function() {
      modal.style.display = 'block';
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = 'none';
    }
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = 'none';
      }
    }
    
  },
  button_label: 'SUBMIT',
  button_html: "<button style='margin-top: 50px; position: relative;' class='btn'>%choice%</button>",
  css_classes: ['trial']
}; 
timeline.push(trial);

It would be fantastic if someone could give me a hint :)
Thank you very much!

[EmmarleneK]

I also tried it in the initJSPsych bit now, but it also doesn't work:

/* initialize jsPsych */
var jsPsych = initJsPsych({

display_element: 'jspsych-target', 

on_finish: function() {
    jsPsych.data.displayData();
},

on_load: function() {
/*--------------Modal JS */

    // Get the modal
    var modal = document.getElementById("PopUpModal");
    
    // Get the button that opens the modal
    var btn = document.getElementById("ModPred");
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks on the button, open the modal
    btn.onclick = function() {
        modal.style.display = "block";
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
        modal.style.display = "none";
        }
    }
},

});

[EmmarleneK]

Haha, I found the answer! I had to add 'trial' in the on_load function :)

on_load: function(trial) {

Sorry for disturbing :)