Time limit?

[gdaroczy]

Hi,

we plan an experiment, which contains several power tests (e.g., Test1, Test2). Each test should have a time limit (e.g., Test1 =>1 minute, Test2=> 2 minutes) and contain more trials than is possible to solve in the given amount of time. So for every participant will solve different amount of trials. If the time stops for the Test1, the experiment should go on with Test2.

We would like to present all trials for Test1 on a single page as a survey-text.
For Test2 the trials should be presented on a single page (see the very simple example below).
How can we set these time-limits?

Thanks in advance,
Gabriella

var test_stimuli = [
  { stimulus: "stimuli1"},
  { stimulus: "stimuli2"},
  { stimulus: "stimuli3"},
  { stimulus: "stimuli4"},
  { stimulus: "stimuli4"}
];
	    
var test = {
  type: "html-button-response",
  stimulus: jsPsych.timelineVariable('stimulus'),
  choices: ['Yes','No']
}

var test_procedure = {
  timeline: [test],
  timeline_variables: test_stimuli
}

timeline.push(test_procedure);

[jodeleeuw]

Hi @gdaroczy ,

I think you'll need to modify the survey-text plugin to include a timeout. You can see how this is implemented in other plugins that have this feature. For example, here's a relevant chunk of the html-keyboard-response plugin.

jsPsych/plugins/jspsych-html-keyboard-response.js

Lines 140 to 144 in d621710

	if (trial.trial_duration !== null) {
	jsPsych.pluginAPI.setTimeout(function() {
	end_trial();
	}, trial.trial_duration);
	}

[becky-gilbert]

There's no end_trial function in the survey-text plugin - instead, the trial ends when the 'next' button is clicked. So using the modification that Josh mentions above, inside your setTimeout function, instead of calling end_trial() you can simulate a 'next' button click by getting the form element from the page and calling the requestSubmit function on the form:

display_element.querySelector('#jspsych-survey-text-form').requestSubmit();

[gdaroczy]

Hi Becky,

thanks for your help again. Somehow it still does not work. The closest one was the following simplified version (the test runs, but the time limit does not work). To be honest, I have no idea.

Task:

<title>Maths</title> <script src='jspsych-6.1.0/jspsych.js'></script> <script src="jspsych-6.1.0/plugins/jspsych-survey-time.js"></script> <script>

//////////START/////////

/* create timeline */
var timeline = [];

/* start the experiment */
var addition = {
type: 'survey-time',
questions: [
{ prompt: '22 + 19',
options: jsPsych.ALL_KEYS,
required: false,
name: 'AD1',
},
{ prompt: '45 + 28',
options: jsPsych.ALL_KEYS,
required: false,
name: 'AD2',
},
{ prompt: '2 + 1',
options: jsPsych.ALL_KEYS,
required: false,
name: 'AD3',
},
{ prompt: '4 + 8',
options: jsPsych.ALL_KEYS,
required: false,
name: 'AD4',
},
{ prompt: '12 + 23',
options: jsPsych.ALL_KEYS,
required: false,
name: 'AD5',
},
{ prompt: '15 + 28',
options: jsPsych.ALL_KEYS,
required: false,
name: 'AD6',
}
],
trial_duration: 1000,
randomize_question_order: false,
};
timeline.push(addition);

/* start the experiment */
jsPsych.init({
timeline: timeline
});
</script>

Plugin:
jsPsych.plugins["survey-time"] = (function() {

var plugin = {};

plugin.info = {
name: 'survey-time',
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.'
},
trial_duration: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Trial duration',
default: null,
description: 'How long to show trial before it ends.'
},
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.'
}
}
}

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-time-preamble" class="jspsych-survey-time-preamble">'+trial.preamble+'</div>';
}
// start form
html += '<form id="jspsych-survey-time-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);
}


//Declare a global timeout ID to be initialized below in animateDotMotion function and to be used in after_response function
var timeoutID;
//Declare global variable to be defined in startKeyboardListener function and to be used in end_trial function
var keyboardListener; 


// function to end trial when it is time
var end_trial = function() {

  // kill any remaining setTimeout handlers
  jsPsych.pluginAPI.clearAllTimeouts();

  // kill keyboard listeners
  if (typeof keyboardListener !== 'undefined') {
    jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
  }

  // gather the data to store for the trial
  var trial_data = {
    "rt": response.rt,
    "key_press": response.key
  };

  // clear the display
  display_element.innerHTML = '';

  // move on to the next trial
  jsPsych.finishTrial(trial_data);
};
  
//Function to record the first response by the subject
function after_response(info) {

	//If the parameter is set such that the response ends the trial, then kill the timeout and end the trial
	if (trial.response_ends_trial) {
		window.clearTimeout(timeoutID);
		end_trial();
	}

} //End of after_response


// start the response listener
if (trial.choices != jsPsych.NO_KEYS) {
  var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
    callback_function: after_response,
    valid_responses: trial.choices,
    rt_method: 'performance',
    persist: false,
    allow_held_key: false
  });
}

// end trial if trial_duration is set
if (trial.trial_duration !== null) {
  jsPsych.pluginAPI.setTimeout(function() {
    end_trial();
  }, trial.trial_duration);
}

// 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-time-'+question_index+'" class="jspsych-survey-time-question" style="margin: 2em 0em;">';
  html += '<p class="jspsych-survey-time">' + 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-time-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-time-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-time-next" class="jspsych-btn jspsych-survey-time" value="'+trial.button_label+'"></input>';

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-time-form').addEventListener('submit', function(e) {
  e.preventDefault();
  // measure response time
  var endTime = performance.now();
  var response_time = 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-time-'+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,
    "responses": JSON.stringify(question_data)
  };

  display_element.innerHTML = '';

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

var startTime = performance.now();

};

return plugin;
})();

[becky-gilbert]

Hi @gdaroczy, in your plugin file, you don't need the stuff about keyboard listeners because you're not waiting for a keyboard response. You also don't need the after_response or end_trial functions. So you can remove everything starting from //Declare a global timeout ID... until the end of the if statement that sets up a keyboard response listener (i.e. right before // end trial if trial_duration is set).

You want to keep the setTimeout function that sets up the timer to end the trial (starting with // end trial if trial_duration is set), but instead of calling the end_trial function, you want to submit the form element. This will do the same thing as a 'next' button click - it saves the responses and ends the trial. To submit the form, you first need to find the form on the page, and then call the requestSubmit function:

// end trial if trial_duration is set
if (trial.trial_duration !== null) {
  jsPsych.pluginAPI.setTimeout(function () {
    // when the time limit is up, automatically submit the form and end the trial
    // by simulating a next button click
    display_element.querySelector('#jspsych-survey-time-form').requestSubmit();
  }, trial.trial_duration);
}

This is what I was suggesting in my earlier comment. I tried it and it works for me. I hope this helps!

[gdaroczy]

Dear Becky,

fantastic, that works!

[mayaraza]

@becky-gilbert
Hello,

I tried to achieve the same thing but for some reason it is not working - not sure what I am missing. I copied the section of code you suggested into my survey-text plugin file at the same position as shown above. Then I set a trial_duration parameter when I use the plugin in my experiment script. But the screen does not time out when I run the experiment. Please can you help?

Thank you,
Maya

[becky-gilbert]

Hi @gdaroczy, I'm not 100% sure what you're trying to do - do you want to stop the trial sequence from continuing after a certain time limit? If so, then I think this might work (disclaimer: it might not be the best/easiest way!):

    var time_limit = 2500;
    var start_time;
    var end_test_timer;
    var trial_count = 0;

    var timeline = [];

    var test_stimuli = [
        { stimulus: "stimuli1" },
        { stimulus: "stimuli2" },
        { stimulus: "stimuli3" },
        { stimulus: "stimuli4" },
        { stimulus: "stimuli5" }
    ];

    var n_trials = test_stimuli.length;

    var test = {
        type: "html-button-response",
        stimulus: jsPsych.timelineVariable('stimulus'),
        choices: ['Yes', 'No'],
        on_load: function() {
            trial_count++;
            // we need to set up the timer to end the current timeline after a certain duration, but only on the first trial
            if (trial_count == 1) {
                start_time = performance.now();
                var end_test_timer = setTimeout(function() {
                    // this stuff is just for testing
                    var end_time = performance.now();
                    var elapsed_time = end_time - start_time;
                    console.log("elapsed time: ", elapsed_time);
                    // this function is all you need to end the current timeline
                    jsPsych.endCurrentTimeline();
                    // this function ends the current trial 
                    jsPsych.finishTrial({status: "ended early"});
                }, time_limit);
            }
        }, 
        on_finish: function(data) {
            // we also need to cancel the setTimeout timer if the person gets all the way through the timeline before 
            // time_limit is reached, otherwise endCurrentTimeline will fire during the next timeline - not good!!
            if (trial_count == n_trials) {
                clearTimeout(end_test_timer);
            }
        }
    }

    var test_procedure = {
        timeline: [test],
        timeline_variables: test_stimuli
    }

    timeline.push(test_procedure);
    timeline.push({
        type: 'html-keyboard-response',
        stimulus: "Time's up!",
        choices: jsPsych.ALL_KEYS
    });

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

Note that this will end the current trial early when the time limit is reached, and this is noted in the trial data with {status: "ended early"}. If you don't want to end the current trial, and instead just end the trial sequence after the trial in which the time limit has been reached, then you can remove this line from the trial's on_load function:

jsPsych.finishTrial({status: "ended early"});

Is that what you're trying to do?

[gdaroczy]

Hi,

that worked perfectly. Thanks a lot !!!!
& yes, for one test we were trying to do something like that.

[Stella-xyl]

Hi,

I intended to do a similar trial like this, but instead of only ending the first trial after a certain duration, I want to give 10 seconds limit for each trial/question within the timeline. How can I modify the code to realize this? Here's my code:

var time_limit = 10000;
var start_time2;
var end_test_timer;
var trial_count = 0;
var n_trials = questions.length;
var counter2 = 1;

var ListB_test_trial = {
    timeline_variables: [ 
        {data: questions[0], q: questions[0]}, 
        {data: questions[1], q: questions[1]},
    ],
    timeline: [ {
        timeline: [
            {type: 'survey-text',
            questions: function (){
                return [{prompt: '(Q' + counter2 + '/15) ' + jsPsych.timelineVariable('q', true), columns: 25, required: true}]
            },
            button_label: ['submit'],
            data: jsPsych.timelineVariable('data'), 
            preamble:  '<p style="font-size: 15px; line-height: 12px;">[Please answer using your own knowledge and best guess. Type your answer and press submit.]</p>',
            on_load: function() {
                trial_count++;
                // we need to set up the timer to end the current timeline after a certain duration, but only on the first trial
                if (trial_count > 0) {
                    start_time2 = performance.now();
                    var end_test_timer = setTimeout(function() {
                        // this stuff is just for testing
                        var end_time = performance.now();
                        var elapsed_time = end_time - start_time2;
                        console.log("elapsed time: ", elapsed_time);
                        // this function is all you need to end the current timeline
                        jsPsych.endCurrentTimeline();
                        // this function ends the current trial 
                        jsPsych.finishTrial({status: "ended early"});
                    }, time_limit);
                }
            }, 
            on_finish: function() {
                counter2++;
                // we also need to cancel the setTimeout timer if the person gets all the way through the timeline before 
                // time_limit is reached, otherwise endCurrentTimeline will fire during the next timeline - not good!!
                if (trial_count == n_trials) {
                    clearTimeout(end_test_timer);
                }
                    }
            }
        ], 
        randomize_order: true,
    }, get_ready ]
};
timeline.push(ListB_test_trial);

Right now, instead of 10s for each question, the total time limit for answering all of the questions is 10s.
Thank you!

[lilymeng2024]

Hi all,

Thank you very much for your answers! I was trying to add a trial duration parameter in the survey-multi-select plugin (v8). Here is the modified plugin, and it works perfectly. I added the modified plugin here if anyone needs to make the same modification to their plugin.

Here are the modifications I make:

1. add trial-duration parameter
2. At line 188, add the code to end the trial if the trial duration is set
3. At line 195-196, if the participant submits manually before the timeout, clear the timeout

Hopefully it helps! Thank!

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

var version = "2.1.0";

const info = {
name: "survey-multi-select",
version,
parameters: {
/**
* An array of objects, each object represents a question that appears on the screen. Each object contains a prompt,
* options, required, and horizontal parameter that will be applied to the question. See examples below for further
* clarification.prompt: Type string, default value is undefined. The string is prompt/question that will be
* associated with a group of options (radio buttons). All questions will get presented on the same page (trial).
* options: Type array, defualt value is undefined. An array of strings. The array contains a set of options to
* display for an individual question.required: Type boolean, default value is null. The boolean value indicates
* if a question is required('true') or not ('false'), using the HTML5 required attribute. If this parameter is
* undefined, the question will be optional. horizontal:Type boolean, default value is false. If true, then the
* question is centered and the options are displayed horizontally. name: Name of the question. Used for storing
* data. If left undefined then default names (Q0, Q1, ...) will be used for the questions.
/
questions: {
type: jspsych.ParameterType.COMPLEX,
array: true,
nested: {
/* Question prompt. /
prompt: {
type: jspsych.ParameterType.HTML_STRING,
default: void 0
},
/* Array of multiple select options for this question. /
options: {
type: jspsych.ParameterType.STRING,
array: true,
default: void 0
},
/* If true, then the question will be centered and options will be displayed horizontally. /
horizontal: {
type: jspsych.ParameterType.BOOL,
default: false
},
/* Whether or not a response to this question must be given in order to continue. /
required: {
type: jspsych.ParameterType.BOOL,
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,
default: ""
}
}
},
/*
* If true, the display order of questions is randomly determined at the start of the trial. In the data
* object, Q0 will still refer to the first question in the array, regardless of where it was presented
* visually.
/
randomize_question_order: {
type: jspsych.ParameterType.BOOL,
default: false
},
/* HTML formatted string to display at the top of the page above all the questions. /
preamble: {
type: jspsych.ParameterType.HTML_STRING,
default: null
},
/* Label of the button to submit responses. /
button_label: {
type: jspsych.ParameterType.STRING,
default: "Continue"
},
/modeified, not in original plugin. /
trial_duration:{
type:jspsych.ParameterType.INT,
pretty_name:'Trial duration',
default:null,
description:'How long to show trial before it ends'
},
/ 'You must choose at least one response for this question' | Message to display if required response is not given. /
required_message: {
type: jspsych.ParameterType.STRING,
default: "You must choose at least one response for this question"
},
/ This determines whether or not all of the input elements on the page should allow autocomplete.
* Setting this to true will enable autocomplete or auto-fill for the form. /
autocomplete: {
type: jspsych.ParameterType.BOOL,
default: false
}
},
data: {
/ An object containing the response for each question. The object will have a separate key (variable) for each question, with the first question in the trial being recorded in Q0, the second in Q1, and so on. The responses are recorded as integers, representing the position selected on the likert scale for that question. If the name parameter is defined for the question, then the response object will use the value of name as the key for each question. This will be encoded as a JSON string when data is saved using the .json() or .csv() functions. /
response: {
type: jspsych.ParameterType.OBJECT
},
/* The response time in milliseconds for the participant to make a response. The time is measured from when the questions first appear on the screen until the participant's response(s) are submitted. /
rt: {
type: jspsych.ParameterType.INT
},
/* An array with the order of questions. For example [2,0,1] would indicate that the first question was trial.questions[2] (the third item in the questions parameter), the second question was trial.questions[0], and the final question was trial.questions[1]. This will be encoded as a JSON string when data is saved using the .json() or .csv() functions. */
question_order: {
type: jspsych.ParameterType.INT,
array: true
}
},
// prettier-ignore
citations: {
"apa": "de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",
"bibtex": '@Article{Leeuw2023jsPsych, author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\" o}rn}, journal = {Journal of Open Source Software}, doi = {10.21105/joss.05351}, issn = {2475-9066}, number = {85}, year = {2023}, month = {may 11}, pages = {5351}, publisher = {Open Journals}, title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, url = {https://joss.theoj.org/papers/10.21105/joss.05351}, volume = {8}, } '
}
};
class SurveyMultiSelectPlugin {
constructor(jsPsych) {
this.jsPsych = jsPsych;
}
static {
this.info = info;
}
trial(display_element, trial) {
var plugin_id_name = "jspsych-survey-multi-select";
var plugin_id_selector = "#" + plugin_id_name;
const _join = (...args) => args.join("-");
var cssstr = ".jspsych-survey-multi-select-question { margin-top: 2em; margin-bottom: 2em; text-align: left; }.jspsych-survey-multi-select-text span.required {color: darkred;}.jspsych-survey-multi-select-horizontal .jspsych-survey-multi-select-text { text-align: center;}.jspsych-survey-multi-select-option { line-height: 2; }.jspsych-survey-multi-select-horizontal .jspsych-survey-multi-select-option { display: inline-block; margin-left: 1em; margin-right: 1em; vertical-align: top;}label.jspsych-survey-multi-select-text input[type='checkbox'] {margin-right: 1em;}";
display_element.innerHTML = '<style id="jspsych-survey-multi-select-css">' + cssstr + "</style>";
var trial_form_id = _join(plugin_id_name, "form");
display_element.innerHTML += '

';
var trial_form = display_element.querySelector("#" + trial_form_id);
if (!trial.autocomplete) {
trial_form.setAttribute("autocomplete", "off");
}
var preamble_id_name = _join(plugin_id_name, "preamble");
if (trial.preamble !== null) {
trial_form.innerHTML += '

' + trial.preamble + "

";
}
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);
}
for (var i = 0; i < trial.questions.length; i++) {
var question = trial.questions[question_order[i]];
var question_id = question_order[i];
var question_classes = [_join(plugin_id_name, "question")];
if (question.horizontal) {
question_classes.push(_join(plugin_id_name, "horizontal"));
}
trial_form.innerHTML += '<div id="' + _join(plugin_id_name, question_id) + '" data-name="' + question.name + '" class="' + question_classes.join(" ") + '">';
var question_selector = _join(plugin_id_selector, question_id);
display_element.querySelector(question_selector).innerHTML += '

' + question.prompt + "

";
for (var j = 0; j < question.options.length; j++) {
var option_id_name = _join(plugin_id_name, "option", question_id, j);
display_element.querySelector(question_selector).innerHTML += '<div id="' + option_id_name + '" class="' + _join(plugin_id_name, "option") + '">';
var form = document.getElementById(option_id_name);
var input_name = _join(plugin_id_name, "response", question_id);
var input_id = _join(plugin_id_name, "response", question_id, j);
var label = document.createElement("label");
label.setAttribute("class", plugin_id_name + "-text");
label.innerHTML = question.options[j];
label.setAttribute("for", input_id);
var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("name", input_name);
input.setAttribute("id", input_id);
input.setAttribute("value", question.options[j]);
form.appendChild(label);
label.insertBefore(input, label.firstChild);
}
}
trial_form.innerHTML += '

';
trial_form.innerHTML += '' + trial.button_label + "";
display_element.querySelector("#jspsych-survey-multi-select-next").addEventListener("click", () => {
for (var i2 = 0; i2 < trial.questions.length; i2++) {
if (trial.questions[i2].required) {
if (display_element.querySelector(
"#jspsych-survey-multi-select-" + i2 + " input:checked"
) == null) {
display_element.querySelector("#jspsych-survey-multi-select-" + i2 + " input").setCustomValidity(trial.required_message);
} else {
display_element.querySelector("#jspsych-survey-multi-select-" + i2 + " input").setCustomValidity("");
}
}
}
trial_form.reportValidity();
});
/end trial if trial duration is set/
let timeoutID;
if(trial.trial_duration !== null){
jsPsych.pluginAPI.setTimeout(() => {
trial_form.dispatchEvent(new Event('submit', {cancelable: true, bubbles: true}));
},trial.trial_duration);
}
trial_form.addEventListener("submit", (event) => {
if(timeoutID){ this.jsPsych.pluginAPI.clearAllTimeouts(); }
event.preventDefault();
var endTime = performance.now();
var response_time = Math.round(endTime - startTime);
var question_data = {};
for (var index = 0; index < trial.questions.length; index++) {
var match = display_element.querySelector("#jspsych-survey-multi-select-" + index);
var val = [];
var inputboxes = match.querySelectorAll("input[type=checkbox]:checked");
for (var j2 = 0; j2 < inputboxes.length; j2++) {
var currentChecked = inputboxes[j2];
val.push(currentChecked.value);
}
var id = "Q" + index;
var obje = {};
var name = id;
if (match.attributes["data-name"].value !== "") {
name = match.attributes["data-name"].value;
}
obje[name] = val;
Object.assign(question_data, obje);
if (val.length == 0) ;
}
var trial_data = {
rt: response_time,
response: question_data,
question_order
};
this.jsPsych.finishTrial(trial_data);
});
var startTime = performance.now();
}
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 = 1e3;
for (const q of trial.questions) {
let n_answers;
if (q.required) {
n_answers = this.jsPsych.randomization.randomInt(1, q.options.length);
} else {
n_answers = this.jsPsych.randomization.randomInt(0, q.options.length);
}
const name = q.name ? q.name : Q${trial.questions.indexOf(q)};
const selections = this.jsPsych.randomization.sampleWithoutReplacement(q.options, n_answers);
question_data[name] = selections;
rt += this.jsPsych.randomization.sampleExGaussian(1500, 400, 1 / 200, true);
}
const default_data = {
response: question_data,
rt,
question_order: trial.randomize_question_order ? this.jsPsych.randomization.shuffle([...Array(trial.questions.length).keys()]) : [...Array(trial.questions.length).keys()]
};
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);
for (let i = 0; i < answers.length; i++) {
for (const a of answers[i][1]) {
this.jsPsych.pluginAPI.clickTarget(
display_element.querySelector(
#jspsych-survey-multi-select-response-${i}-${trial.questions[i].options.indexOf(a)}
),
(data.rt - 1e3) / answers.length * (i + 1)
);
}
}
this.jsPsych.pluginAPI.clickTarget(
display_element.querySelector("#jspsych-survey-multi-select-next"),
data.rt
);
}
}

return SurveyMultiSelectPlugin;

})(jsPsychModule);