Timeout Instead of Button Event to End survey-html-form Trial

[ggreeley]

Hello everyone!

I have a (hopefully easy to address) question related to one that has already been asked (#1146). There's a lot here, but most of it is included just to be thorough.

Basically, I need to accept a form response and advance after a given trial_duration instead of on a button event.

I've so far been using survey-html-response and like it a lot (especially used with textarea boxes to collect recall data). It works perfect if participants are free to advance whenever, but in the context of a timed free-recall experiment (recall as many words as possible for 5 min, the next trial will begin automatically), a timeout is needed.

I think the obvious solution is to modify the survey-html-response plugin in to allow for that. However, when trying to modify the plugin to:

a) remove the button by simply commenting it out:

// html += '<input type="submit" id="jspsych-survey-html-form-next" class="jspsych-btn jspsych-survey-html-form" value="'+trial.button_label+'"></input>';

and

b) include a timeout function at the end of the plugin.trial portion, like so:

if (trial.trial_duration !== null) {
        jsPsych.pluginAPI.setTimeout(function() {
          display_element.querySelector('#jspsych-survey-text-form-timed-NEW').requestSubmit();
        }, trial.trial_duration);
      }

it is still not working. That is, everything (the textarea box, instructions, etc.) is shown in the window, but nothing advances. Note that the #jspsych-survey-text-form-timed-NEW above is simply the name of my modified plugin. To see the plugin in it's entirety (really just lightly edited from the original survey-html-form) it can be found here: https://github.com/ggreeley/base_memory_exp/blob/main/plugin_edits/jspsych-survey-html-form-timed-NEW.js

Because I'm assuming this is an issue within plugin.trial, here is what I currently have, with my only addition commented toward the bottom:

plugin.trial = function(display_element, trial) {
  
      var html = '';
      // show preamble text
      if(trial.preamble !== null){
        html += '<div id="jspsych-survey-html-form-preamble" class="jspsych-survey-html-form-preamble">'+trial.preamble+'</div>';
      }
      // start form
      if ( trial.autocomplete ) {
        html += '<form id="jspsych-survey-html-form">'
      } else {
        html += '<form id="jspsych-survey-html-form" autocomplete="off">'
      }
  
      // add form HTML / input elements
      html += trial.html;
  
      // add submit button
      // comment out button, although I tried keeping it in case it was needed for listening event below
     //  html += '<input type="submit" id="jspsych-survey-html-form-next" class="jspsych-btn jspsych-survey-html-form" value="'+trial.button_label+'"></input>';
  
      html += '</form>';
      display_element.innerHTML = html;
  
      if ( trial.autofocus !== '' ) {
        var focus_elements = display_element.querySelectorAll('#'+trial.autofocus);
        if ( focus_elements.length === 0 ) {
            console.warn('No element found with id: '+trial.autofocus);
        } else if ( focus_elements.length > 1 ) {
            console.warn('The id "'+trial.autofocus+'" is not unique so autofocus will not work.');
        } else {
            focus_elements[0].focus();
        }
      }
  
      display_element.querySelector('#jspsych-survey-html-form-timed-NEW').addEventListener('submit', function(event) {
        // don't submit form
        event.preventDefault();
  
        // measure response time
        var endTime = performance.now();
        var response_time = endTime - startTime;
  
        var question_data = serializeArray(this);
  
        if (!trial.dataAsArray) {
          question_data = objectifyForm(question_data);
        }
  
        // save data
        var trialdata = {
          "rt": response_time,
          "responses": JSON.stringify(question_data)
        };
  
        display_element.innerHTML = '';
  
        // next trial
        jsPsych.finishTrial(trialdata);
      });
  
      var startTime = performance.now();
      
      // added by Garrett - this *should* simulate button event
     // adapted from #1146 
      if (trial.trial_duration !== null) {
        jsPsych.pluginAPI.setTimeout(function() {
          display_element.querySelector('#jspsych-survey-text-form-timed-NEW').requestSubmit();
        }, trial.trial_duration);
      }
    };

Again, this is mostly unchanged from the original survey-html-form except for the code above and the addition of a trial_duration parameter (not included here).

I've tried leaving the button in (wouldn't actually work in an experiment, but thought some button object might need to exist), and it still won't auto-advance. I've also previously tried using a bare-bones plugin for this with a function adapted from html-keyboard-response (attempt can be found here: https://github.com/ggreeley/base_memory_exp/blob/main/plugin_edits/jspsych-survey-html-form-timed.js - line 93-116) but that didn't work either.

Thank you for your time! Any advice would be appreciated!

Best,
Garrett

[ggreeley]

Update: I found a reasonable work-around. Instead of removing the button option and auto-advancing, I'm able to simply delay the activation of the button. This has the effect of keeping participants on a page for at least a given duration. Within the base survey-html-form, I simply added a new parameter,

button_duration: {
            type: jsPsych.plugins.parameterType.INT,
            pretty_name: 'Button activation delay',
            default: null,
            description: 'Delays button activation to ensure trial length. Button still needs pressing.'
        }

a chunk to classify button html,

if (trial.button_duration !== null) {
        html += '<input type="submit" id="jspsych-survey-html-delay-button-next" class="jspsych-btn jspsych-survey-html-delay-button" name="submit" value="'+trial.button_label+'" disabled></input>'
      } else {
        html += '<input type="submit" id="jspsych-survey-html-delay-button-next" class="jspsych-btn jspsych-survey-html-delay-button" name="submit" value="'+trial.button_label+'"></input>';
      }

and a timeout after the button_duration, if given.

if (trial.button_duration !== null){
      jsPsych.pluginAPI.setTimeout(function(){
          display_element.querySelector('#jspsych-survey-html-delay-button-next').disabled = null;
        }, trial.button_duration);
      }

Everything else is still identical to the base survey-html-form plugin. I'm still working out (trying to spot what I'm doing wrong) in setting up auto-advance, but this accomplishes a similar goal and could be useful in other contexts.

Best,
Garrett

[becky-gilbert]

Hi @ggreeley! Sorry for the delayed response. Thought I'd reply anyway in case your disabled/enabled button solution isn't exactly what you're looking for.

I'm guessing you realized that the first solution (removing the submit button) didn't work because you're trying to end the trial by simulating a next/submit button click (with requestSubmit), so that button needs to exist on the page. (Of course you could also end the trial by calling end_trial instead of requestSubmit on the next/submit button, but using a submit button on the form element is ideal because it does the response validation for you, e.g. checking that any required questions have been responded to, and stopping the submission with a 'please respond' message if not.)

Instead of disabling/enabling the next button, another option is to hide it with style="visibility:hidden;":

html += '<input type="submit" id="jspsych-survey-html-form-next" class="jspsych-btn jspsych-survey-html-form" value="'+trial.button_label+'" style="visibility:hidden;"></input>';

This means that the button will exist on the page but won't be visible/clickable. Then you can still end the trial when the trial duration is reached by calling requestSubmit on the hidden button:

if (trial.trial_duration !== null) {
  jsPsych.pluginAPI.setTimeout(function() {
    display_element.querySelector('#jspsych-survey-html-form-next').requestSubmit();
  }, trial.trial_duration);
}

I hope this helps!

[ggreeley]

Thanks so much @becky-gilbert! That worked perfect. It'll be nice to have both options for time restriction!

Best,
Garrett

[nrschoen]

I am trying to add a trial_duration, as you suggested @becky-gilbert:

if (trial.trial_duration !== null) {
  jsPsych.pluginAPI.setTimeout(function() {
    display_element.querySelector('#jspsych-survey-html-form-next').requestSubmit();
  }, trial.trial_duration);
}

However I am getting the following error:

TypeError: display_element.querySelector('#jspsych-survey-html-form-next').requestSubmit is not a function. (In 'display_element.querySelector('#jspsych-survey-html-form-next').requestSubmit()', 'display_element.querySelector('#jspsych-survey-html-form-next').requestSubmit' is undefined)

What am I missing?

[steventmartinez]

Hi! I ran into a similar error with the ".requestSubmit()" function and unfortunately I was not able to figure out what my error was, but I think I found a way around it. Rather than calling requestSubmit(), I simply changed the style from hidden back to visible once the trial duration is met.

Attaching the change below in case this may help others:

          if (trial.trial_duration !== null) {
            jsPsych.pluginAPI.setTimeout(function() {
              display_element.querySelector('#jspsych-survey-text-next').style.visibility = 'visible'; // this is what I used instead of requestSubmit().
            }, trial.trial_duration);
          }

Also attaching the full modifications to the survey-text-plugin below in case the clarity is helpful. Any changes I made are denoted by "////".

Thanks again @ggreeley and @becky-gilbert for the super helpful points in this discussion! Much appreciated!

var jsPsychSurveyText = (function (jspsych) {
  'use strict';

  const info = {
      name: "survey-text",
      parameters: {
          questions: {
              type: jspsych.ParameterType.COMPLEX,
              array: true,
              pretty_name: "Questions",
              default: undefined,
              nested: {
                  /** Question prompt. */
                  prompt: {
                      type: jspsych.ParameterType.HTML_STRING,
                      pretty_name: "Prompt",
                      default: undefined,
                  },
                  /** Placeholder text in the response text box. */
                  placeholder: {
                      type: jspsych.ParameterType.STRING,
                      pretty_name: "Placeholder",
                      default: "",
                  },
                  /** The number of rows for the response text box. */
                  rows: {
                      type: jspsych.ParameterType.INT,
                      pretty_name: "Rows",
                      default: 1,
                  },
                  /** The number of columns for the response text box. */
                  columns: {
                      type: jspsych.ParameterType.INT,
                      pretty_name: "Columns",
                      default: 40,
                  },
                  /** Whether or not a response to this question must be given in order to continue. */
                  required: {
                      type: jspsych.ParameterType.BOOL,
                      pretty_name: "Required",
                      default: false,
                  },
                  /** Name of the question in the trial data. If no name is given, the questions are named Q0, Q1, etc. */
                  name: {
                      type: jspsych.ParameterType.STRING,
                      pretty_name: "Question Name",
                      default: "",
                  },
              },
          },
          /** If true, the order of the questions in the 'questions' array will be randomized. */
          randomize_question_order: {
              type: jspsych.ParameterType.BOOL,
              pretty_name: "Randomize Question Order",
              default: false,
          },
          /** HTML-formatted string to display at top of the page above all of the questions. */
          preamble: {
              type: jspsych.ParameterType.HTML_STRING,
              pretty_name: "Preamble",
              default: null,
          },
          /** Label of the button to submit responses. */
          button_label: {
              type: jspsych.ParameterType.STRING,
              pretty_name: "Button label",
              default: "Continue",
          },
          /** Setting this to true will enable browser auto-complete or auto-fill for the form. */
          autocomplete: {
              type: jspsych.ParameterType.BOOL,
              pretty_name: "Allow autocomplete",
              default: false,
          },
          trial_duration: {
            type: jspsych.ParameterType.INT,
            pretty_name: 'Trial duration',
            default: null,
            description: 'Delays button activation to ensure trial length. Button still needs pressing.'
            },            //////// this is the parameter I added as mentioned in this post.
        }
  };
  /**
   * **survey-text**
   *
   * jsPsych plugin for free text response survey questions
   *
   * @author Josh de Leeuw
   * @see {@link https://www.jspsych.org/plugins/jspsych-survey-text/ survey-text plugin documentation on jspsych.org}
   */
  class SurveyTextPlugin {
      constructor(jsPsych) {
          this.jsPsych = jsPsych;
      }
      trial(display_element, trial) {
          for (var i = 0; i < trial.questions.length; i++) {
              if (typeof trial.questions[i].rows == "undefined") {
                  trial.questions[i].rows = 1;
              }
          }
          for (var i = 0; i < trial.questions.length; i++) {
              if (typeof trial.questions[i].columns == "undefined") {
                  trial.questions[i].columns = 40;
              }
          }
          for (var i = 0; i < trial.questions.length; i++) {
              if (typeof trial.questions[i].value == "undefined") {
                  trial.questions[i].value = "";
              }
          }
          var html = "";
          // show preamble text
          if (trial.preamble !== null) {
              html +=
                  '<div id="jspsych-survey-text-preamble" class="jspsych-survey-text-preamble">' +
                      trial.preamble +
                      "</div>";
          }
          // start form
          if (trial.autocomplete) {
              html += '<form id="jspsych-survey-text-form">';
          }
          else {
              html += '<form id="jspsych-survey-text-form" autocomplete="off">';
          }
          // generate question order
          var question_order = [];
          for (var i = 0; i < trial.questions.length; i++) {
              question_order.push(i);
          }
          if (trial.randomize_question_order) {
              question_order = this.jsPsych.randomization.shuffle(question_order);
          }
          // add questions
          for (var i = 0; i < trial.questions.length; i++) {
              var question = trial.questions[question_order[i]];
              var question_index = question_order[i];
              html +=
                  '<div id="jspsych-survey-text-' +
                      question_index +
                      '" class="jspsych-survey-text-question" style="margin: 2em 0em;">';
              html += '<p class="jspsych-survey-text">' + question.prompt + "</p>";
              var autofocus = i == 0 ? "autofocus" : "";
              var req = question.required ? "required" : "";
              if (question.rows == 1) {
                  html +=
                      '<input type="text" id="input-' +
                          question_index +
                          '"  name="#jspsych-survey-text-response-' +
                          question_index +
                          '" data-name="' +
                          question.name +
                          '" size="' +
                          question.columns +
                          '" ' +
                          autofocus +
                          " " +
                          req +
                          ' placeholder="' +
                          question.placeholder +
                          '"></input>';
              }
              else {
                  html +=
                      '<textarea id="input-' +
                          question_index +
                          '" name="#jspsych-survey-text-response-' +
                          question_index +
                          '" data-name="' +
                          question.name +
                          '" cols="' +
                          question.columns +
                          '" rows="' +
                          question.rows +
                          '" ' +
                          autofocus +
                          " " +
                          req +
                          ' placeholder="' +
                          question.placeholder +
                          '"></textarea>';
              }
              html += "</div>";
          }
          // add submit button
          html +=
          '<input type="submit" id="jspsych-survey-text-next" class="jspsych-btn jspsych-survey-text" value="'+trial.button_label+'" style="visibility:hidden;"></input>';             //// also added this as mentioned in the post.
          html += "</form>";
          display_element.innerHTML = html;
          // backup in case autofocus doesn't work
          display_element.querySelector("#input-" + question_order[0]).focus();
          display_element.querySelector("#jspsych-survey-text-form").addEventListener("submit", (e) => {
              e.preventDefault();
              // measure response time
              var endTime = performance.now();
              var response_time = Math.round(endTime - startTime);
              // create object to hold responses
              var question_data = {};
              for (var index = 0; index < trial.questions.length; index++) {
                  var id = "Q" + index;
                  var q_element = document
                      .querySelector("#jspsych-survey-text-" + index)
                      .querySelector("textarea, input");
                  var val = q_element.value;
                  var name = q_element.attributes["data-name"].value;
                  if (name == "") {
                      name = id;
                  }
                  var obje = {};
                  obje[name] = val;
                  Object.assign(question_data, obje);
              }
              // save data
              var trialdata = {
                  rt: response_time,
                  response: question_data,
              };
              display_element.innerHTML = "";
              // next trial
              this.jsPsych.finishTrial(trialdata);
          });
          var startTime = performance.now()
          //adapted by SM
          if (trial.trial_duration !== null) {
            jsPsych.pluginAPI.setTimeout(function() {
              display_element.querySelector('#jspsych-survey-text-next').style.visibility = 'visible'; ///// this is what I used instead of requestSubmit().
            }, trial.trial_duration);
          }
      };
      simulate(trial, simulation_mode, simulation_options, load_callback) {
          if (simulation_mode == "data-only") {
              load_callback();
              this.simulate_data_only(trial, simulation_options);
          }
          if (simulation_mode == "visual") {
              this.simulate_visual(trial, simulation_options, load_callback);
          }
      }
      create_simulation_data(trial, simulation_options) {
          const question_data = {};
          let rt = 1000;
          for (const q of trial.questions) {
              const name = q.name ? q.name : `Q${trial.questions.indexOf(q)}`;
              const ans_words = q.rows == 1
                  ? this.jsPsych.randomization.sampleExponential(0.25)
                  : this.jsPsych.randomization.randomInt(1, 10) * q.rows;
              question_data[name] = this.jsPsych.randomization.randomWords({
                  exactly: ans_words,
                  join: " ",
              });
              rt += this.jsPsych.randomization.sampleExGaussian(2000, 400, 0.004, true);
          }
          const default_data = {
              response: question_data,
              rt: rt,
          };
          const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
          this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
          return data;
      }
      simulate_data_only(trial, simulation_options) {
          const data = this.create_simulation_data(trial, simulation_options);
          this.jsPsych.finishTrial(data);
      }
      simulate_visual(trial, simulation_options, load_callback) {
          const data = this.create_simulation_data(trial, simulation_options);
          const display_element = this.jsPsych.getDisplayElement();
          this.trial(display_element, trial);
          load_callback();
          const answers = Object.entries(data.response).map((x) => {
              return x[1];
          });
          for (let i = 0; i < answers.length; i++) {
              this.jsPsych.pluginAPI.fillTextInput(display_element.querySelector(`#input-${i}`), answers[i], ((data.rt - 1000) / answers.length) * (i + 1));
          }
          this.jsPsych.pluginAPI.clickTarget(display_element.querySelector("#jspsych-survey-text-next"), data.rt);
      }
  }
  SurveyTextPlugin.info = info;

  return SurveyTextPlugin;

})(jsPsychModule);