Store Modal Opening

Online experiments
1

Hello,

I’m working on my first experiment with JsPsych (version 7.2.3) and Pavlovia. A lot to take in :slight_smile:

Following question:
In an experimental trial, a participant is presented with this screen:

Screenshot 2022-07-17 at 12.04.52
Screenshot 2022-07-17 at 12.04.521022×520 40.3 KB

I use the html-survey-form plugin with following code:

 /* define experimental trial */
      var trial = {
        type: jsPsychSurveyHtmlForm,
        html: `
        <div style = 'background-color: #92a8d1; padding-top: 3%; padding-bottom: 10px; padding-left: 5%; padding-right: 5%; width: 1000px; height: 450px;'>
            <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 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><strong>Additional Information:</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>
                          <p>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(trial) {

        /*--------------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',
    }; 
    timeline.push(trial);

Now, I need to store whether the participant opened the modal. What is the best way to do this? Can I store it as a different type of input in the form or do I have to edit the plugin?
Any advice extremely appreciated!

Bonus:
The above is the MVP. In the long run, I would love to store whether the participant selected a checkbox before looking at the information on the modal, how long the modal was open for, and whether they adjusted their choice after viewing the modal content. Any advice on how to do that? No worries if not, so far I’m just trying to bring the above to work :slight_smile:

Thank you very much!

Best wishes,
//Emma