Add a new button to go back in the survey-text plugin

[ler93]

Hi everyone! I hope you're doing well.
I'm conducting an experiment in which I'm trying to measure whether participants remember any of the situations presented on the previous pages of the experiment. For this reason, I want to generate a new button in the survey-text plugin so that participants have the option to choose which previous page of the experiment they want to go back to, if they spontaneously remember any situation. Is it possible to do this?
Thank you in advance for your help!
Regards.

[ler93]

*I'm updating information about the previous message.
I managed to create a new button in the survey-text plugin, but the issue is that now the experiment resets when clicking on any of the buttons. I'm copying the code below to see if anyone can detect the problem:

jsPsych.plugins['survey-text-buttons'] = (function() {

  var plugin = {};

  plugin.info = {
    name: 'survey-text-buttons',
    description: '',
    parameters: {
      questions: {
        type: jsPsych.plugins.parameterType.COMPLEX,
        array: true,
        pretty_name: 'Questions',
        default: undefined,
        nested: {
          prompt: {
            type: jsPsych.plugins.parameterType.STRING,
            pretty_name: 'Prompt',
            default: undefined,
            description: 'Prompt for the subject to response'
          },
          placeholder: {
            type: jsPsych.plugins.parameterType.STRING,
            pretty_name: 'Value',
            default: "",
            description: 'Placeholder text in the textfield.'
          },
          rows: {
            type: jsPsych.plugins.parameterType.INT,
            pretty_name: 'Rows',
            default: 1,
            description: 'The number of rows for the response text box.'
          },
          columns: {
            type: jsPsych.plugins.parameterType.INT,
            pretty_name: 'Columns',
            default: 40,
            description: 'The number of columns for the response text box.'
          },
          required: {
            type: jsPsych.plugins.parameterType.BOOL,
            pretty_name: 'Required',
            default: false,
            description: 'Require a response'
          },
          name: {
            type: jsPsych.plugins.parameterType.STRING,
            pretty_name: 'Question Name',
            default: '',
            description: 'Controls the name of data values associated with this question'
          }
        }
      },
      preamble: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'Preamble',
        default: null,
        description: 'HTML formatted string to display at the top of the page above all the questions.'
      },
      button_label: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'Button label',
        default:  'Continue',
        description: 'The text that appears on the button to finish the trial.'
      },
      new_button_label: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'New Button Label',
        default: 'New Button',
        description: 'The text that appears on the new button to perform a new action.'
      }
    }
  }

  plugin.trial = function(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
    html += '<form id="jspsych-survey-text-form">'

    // 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 = 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+'"></input>';

    // add new button
    html += '<input type="button" id="jspsych-survey-text-new-button" class="jspsych-btn jspsych-survey-text">'+trial.new_button_label+'</button>';

    html += '</form>'
    display_element.innerHTML = html;

    // handle click on new button
    display_element.querySelector('#jspsych-survey-text-new-button').addEventListener('click', function() {
      // perform new action
      window.history.back();
    });

      // next trial
      jsPsych.finishTrial(trialdata);
    };

  return plugin;
})();

[nikbpetrov]

It's not a bad idea to have multiple pages on survey-text, but that's not a particular thing jspsych is optimised for - the instructions plugin is the exception.

The way I would approach this problem is either:

1. copy the design of the instructions plugin and modify the survey text accordingly. There might be serious problems with this as managing multiple pages/responses might start to get tricky, but definitely doable
2. play with timelines. Put all of your text to display in an instructions trial, which can handle multiple pages out of the box, and then add the instructions timeline and the single-page survey text trial in a looping timeline that repeats and only ends looping once "next" is clicked on the survey-text trial... Here you can also add other conditional nested timelines for even more control. Gets tricky managing this if you want to have a super-duper sophisticated user experience but is better handled by jspsych, I think.

[jodeleeuw]

The survey plugin has built in support for forward/backward buttons. I don't think that's quite what you are looking for, but in case it is helpful I thought I'd mention it.