jsPsych/docs/plugins/jspsych-survey-html-form.md

jspsych-survey-html-form plugin

The survey-html-form plugin displays a set of <inputs> from a HTML string. The type of input can be freely chosen, for a list of possible input types see the MDN page on inputs. The subject provides answers to the input fields.

Parameters

Parameters with a default value of undefined must be specified. Other parameters can be left unspecified if the default value is acceptable.

Parameter	Type	Default Value	Description
html	string	undefined	HTML formatted string containing all the input elements to display. Every element has to have its own distinctive name attribute. The <form> tag must not be included and is generated by the plugin. This string can contain other HTML elements besides the input fields.
preamble	string	empty string	HTML formatted string to display at the top of the page above all the questions.
button_label	string	'Continue'	The text that appears on the button to finish the trial.
dataAsArray	boolean	false	Retrieve the data as an array e.g. [{name: "INPUT_NAME", value: "INPUT_VALUE"}, ...] instead of an object e.g. {INPUT_NAME: INPUT_VALUE, ...}. This might be useful if you omit naming your inputs.

Data Generated

In addition to the default data collected by all plugins, this plugin collects the following data for each trial.

Name	Type	Value
responses	string	A JS object encoded in JSON format containing the response for each input. The encoded object will have a separate variable for the response to each input, with each variable being named after its corresponding input element. Each response is a string containing whatever the subject answered for this particular input.
rt	numeric	The response time in milliseconds for the subject to make a response.

Examples

Basic example

var form_trial = {
  type: 'survey-html-form',
  preamble: '<p> How are you feeling <b>right now?</b> </p>',
  html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>'
};