mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-11 16:18:11 +00:00
check TOC; make necessary changes #617
This commit is contained in:
Josh de Leeuw
parent
5a56431f8d
commit
e714214fc4
@ -1,476 +0,0 @@
|
||||
# jspsych-form
|
||||
|
||||
This plugin creates a form from a JSON schema.
|
||||
|
||||
|
||||
## 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
|
||||
----------|------|---------------|------------
|
||||
schema|object|{}|A JSON schema that holds the values of settings for creating a form.
|
||||
|
||||
### *JSON* schema
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
form|[*Class* Form](#Form)|{}|Values of settings for the form layout.
|
||||
"any question string"|[*Classes* start from here](#Dropdown)|*undefined*|Take the key string as the question title, and the value as question settings.
|
||||
onSubmit|[*Class* Button](#Button)|{label: "Submit"}|Values of settings for the button in the form.
|
||||
|
||||
## Function
|
||||
|
||||
### createForm
|
||||
|
||||
INPUTS: display_element {string},
|
||||
schema {object}<br/>
|
||||
OUTPUTS: an array, [*Object* Form, [*Object* Tag], *Object* Button]<br/>
|
||||
SIDE EFFECT: Render the form.<br/>
|
||||
|
||||
schema.type | Effect
|
||||
------------|-------
|
||||
"short answer/text"|Instantiate a [InputText](#InputText) object.
|
||||
"long answer/textarea"|Instantiate a [Textarea](#Textarea) object.
|
||||
dropdown|Instantiate a [Dropdown](#Dropdown) object.
|
||||
"checkbox/switch/radio"|Instantiate a [ToggleGroup](#ToggleGroup) object according to its toggle type.
|
||||
range|Instantiate its according object ([see Class](#Class))
|
||||
date|Instantiate its according object ([see Class](#Class))
|
||||
datetime|Instantiate its according object ([see Class](#Class))
|
||||
datetime-local|Instantiate its according object ([see Class](#Class))
|
||||
email|Instantiate its according object ([see Class](#Class))
|
||||
file|Instantiate its according object ([see Class](#Class))
|
||||
month|Instantiate its according object ([see Class](#Class))
|
||||
password|Instantiate its according object ([see Class](#Class))
|
||||
search|Instantiate its according object ([see Class](#Class))
|
||||
telephone|Instantiate its according object ([see Class](#Class))
|
||||
time|Instantiate its according object ([see Class](#Class))
|
||||
url|Instantiate its according object ([see Class](#Class))
|
||||
week|Instantiate its according object ([see Class](#Class))
|
||||
|
||||
## Class <a name="Class"></a>
|
||||
|
||||
If the value is in **bold**, then it is final. <br/>
|
||||
If the value is *undefined*, then it must be specified.<br/>
|
||||
For MDL color attributes, [see MDL colors](http://blog.jonathanargentiero.com/material-design-lite-color-classes-list/).<br/>
|
||||
For MDL icons, [see MDL icons](https://material.google.com/style/icons.html).<br/>
|
||||
For html color attributes, [see html colors](http://htmlcolorcodes.com/).<br/>
|
||||
Mainly used:<br/>
|
||||
[Form](#Form),<br/>
|
||||
[Dropdown](#Dropdown)<br/>
|
||||
[InputText](#Text),<br/>
|
||||
[Textarea](#Textarea)<br/>
|
||||
[ToggleGroup](#ToggleGroup)
|
||||
|
||||
### Form <a name="Form"></a>
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*display_element*|string|*undefined*|Indicate where the form is displayed.
|
||||
*id*<a name="FormId"></a>|numeric|**Automactically Assigned**|The id of the form.
|
||||
*type*|string|**"form"**|The type of the form.
|
||||
item|object|{}|Values of settings for the form layout.
|
||||
item.layout_color|string|`white-300`|The background color of the layout.
|
||||
item.boxShadow|numeric|4|The darkness of shadow for the box. 0 - 17
|
||||
item.form_title|string|`"Untitled Form"`|The title of the form.
|
||||
item.form_title_size|string|`40px`|The font size of the title.
|
||||
item.form_title_color|string|`black-800`|The font color of the title.
|
||||
item.form_description|string|""|The description of the form.
|
||||
item.form_description_size|string|`14px`|The font size of the description of the form.
|
||||
item.form_description_color|string|`grey-600`|The font color of the description of the form.
|
||||
item.ribbon_color|string|`white-300`|The background color of the ribbon.
|
||||
item.ribbon_height|string|`40vh`|The height of the ribbon.
|
||||
item.ribbon_bg|string|""|The background picture of the ribbon.
|
||||
item.ribbon_bg_size|string|`background-size: contain cover;`|The background picture's size of the ribbon.
|
||||
item.content_bg_color|string|`white-300`|The background color of the content.
|
||||
item.content_text_color|string|`black-800`|The font color of the text in the content.
|
||||
|
||||
### Button
|
||||
*Inheritence:* [Tag](#Tag)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"button"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|**False**|Whether Displaying Question Title.
|
||||
item.onclick|function|undefined|Add customized submit actions. If it has output, the output will occupy the key "\#Customized Output\#" in trial_data. (Pre-defined actions are: 1. check if all required fields are filled 2. Compare inputs with expected answers if provided)
|
||||
item.label|string|`"Submit"`|The label for the button.
|
||||
item.buttonStyle|string|`"raise"`|[see MDL attribute](https://getmdl.io/components/index.html#buttons-section)
|
||||
item.color|boolean|`True`|[see MDL attribute](https://getmdl.io/components/index.html#buttons-section)
|
||||
item.primary|boolean|`False`|[see MDL attribute](https://getmdl.io/components/index.html#buttons-section)
|
||||
item.accent|boolean|`False`|[see MDL attribute](https://getmdl.io/components/index.html#buttons-section)
|
||||
item.ripple|boolean|`True`|[see MDL attribute](https://getmdl.io/components/index.html#buttons-section)
|
||||
item.icon|string|`""`|[see MDL attribute](https://getmdl.io/components/index.html#buttons-section)
|
||||
|
||||
### Dropdown <a name="Dropdown"></a>
|
||||
*Inheritence:* [Tag](#Tag)<br/>
|
||||
Drop down a list of option.
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"select"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
item.options|array|[]|An array of options.
|
||||
item.choose_prompt|string|`"CHOOSE"`|Prompt for choosing.
|
||||
item.dropRight|boolean|`True`|From which direction the list drops down.
|
||||
|
||||
### InputDate
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"date"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
|
||||
### InputDatetime
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"datetime"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
|
||||
### InputDatetimeLocal
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"datetime-local"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
|
||||
### InputEmail
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"email"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
|
||||
### InputMonth
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"month"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
|
||||
### InputNumber
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"number"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
item.label|string|`"Please enter a number..."`|General inner html content.
|
||||
|
||||
### InputEmail
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"email"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
|
||||
### InputPassword
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"password"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`False`|Whether Displaying Question Title.
|
||||
item.floating|boolean|`True`|[see MDL attribute](https://getmdl.io/components/index.html#textfields-section)
|
||||
item.label|string|`"Please your password..."`|General inner html content.
|
||||
|
||||
### InputSearch
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"email"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|**False**|Whether Displaying Question Title.
|
||||
item.icon|string|`"search"`|[see MDL attribute](https://getmdl.io/components/index.html#textfields-section)
|
||||
item.expandable|boolean|`True`|[see MDL attribute](https://getmdl.io/components/index.html#textfields-section)
|
||||
item.floating|boolean|`True`|[see MDL attribute](https://getmdl.io/components/index.html#textfields-section)
|
||||
|
||||
### InputTel
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"tel"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
item.label|string|`"Please your telephone number..."`|General inner html content.
|
||||
|
||||
### InputText <a name="Text"></a>
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"text"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
item.label|string|`"Please enter some texts..."`|General inner html content.
|
||||
item.pattern|string|`".*"`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
|
||||
### InputTime
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"time"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
|
||||
### InputUrl
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"url"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
item.label|string|`"Please enter the url..."`|General inner html content.
|
||||
|
||||
### InputWeek
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"week"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
|
||||
### Range
|
||||
*Inheritence:* [Tag](#Tag)<br/>
|
||||
Generate a slider.
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"range"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
item.value_prompt|string|`"value: "`|Prompt for the value.
|
||||
item.width|string|300px|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.max|numeric|100|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.min|numeric|0|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.step|numeric|1|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
|
||||
|
||||
### Textarea <a name="Textarea"></a>
|
||||
*Inheritence:* [InputTextField](#InputTextField)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"textarea"**|The type of the tag.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
item.placeholder|string|`"Text lines"`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.cols|numeric|30|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.rows|numeric|10|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.wrap|string|`""`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
|
||||
### ToggleGroup <a name="ToggleGroup"></a>
|
||||
*Inheritence:* [Tag](#Tag)<br/>
|
||||
*Dependency:* [Checkbox](#Checkbox), [Switch](#Switch), [Radio](#Radio)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.type|string|`"checkbox"`|The type of the [toggle_type](#Toggle).
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title.
|
||||
item.labels|array|[]|An array of labels for the options.
|
||||
item.images|array|[]|An array of images for the options.
|
||||
item.values|array|[]|An array of values for the options. If None, will take values from item.labels first and then item.images, i.e item.values.length = item.labels.length + item.images.length.
|
||||
item.correctAnswers|array|[]|An array of expected answers.
|
||||
|
||||
### UploadFile
|
||||
*Inheritence:* [Tag](#Tag)<br/>
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.type|string|`"file"`|The type of the [toggle_type](#Toggle).
|
||||
item.needQuestion|boolean|`False`|Whether Displaying Question Title.
|
||||
item.fileType|string|`"Upload a file from here"`|Prompt for uploading a file.
|
||||
item.icon|string|`"cloud_upload"`|[see MDL icons](https://material.google.com/style/icons.html)
|
||||
|
||||
## Base Class
|
||||
|
||||
### Tag <a name="Tag"></a>
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element
|
||||
item|object|{}|An object of values for setting
|
||||
item.type|string|**Automactically Assigned**|The type of the tag
|
||||
item.id|string|**Automactically Assigned**|The id of the tag
|
||||
item.needQuestion|boolean|`True`|Whether Displaying Question Title
|
||||
item.label|string||General Inner Html Content
|
||||
item.correct|custom|undefined| The Expected Answer
|
||||
item.question|string|"Untitled Question"|Question Title
|
||||
item.question_description|string|""|Question Description
|
||||
item.question_color|string|`black-800`|Color Of Question
|
||||
item.question_description_size|string|`14px`|Font Size Of Question Description
|
||||
item.question_description_color|string|`grey-600`|Color Of Question Description
|
||||
item.newline|boolean|`False`|Whether Inserting New Line When Rendering
|
||||
item.value|string|""|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.name|string|""|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.disabled|boolean|`False`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.maxlength|boolean|`False`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.readonly|boolean|`False`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.required|boolean|`False`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.autofocus|boolean|`False`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.size|string|""|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
|
||||
### InputTextField <a name="InputTextField"></a>
|
||||
*Inheritence:* [Tag](#Tag)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element
|
||||
item|object|{}|An object of values for setting
|
||||
item.expandable|boolean|`False`|[see MDL attribute](https://getmdl.io/components/index.html#textfields-section)
|
||||
item.floating|boolean|`False`|[see MDL attribute](https://getmdl.io/components/index.html#textfields-section)
|
||||
item.icon|string|`""`|[see MDL attribute](https://getmdl.io/components/index.html#textfields-section)
|
||||
item.errorInfo|string|`"Your input is not as required!"`|[see MDL attribute](https://getmdl.io/components/index.html#textfields-section)
|
||||
item.pattern|string|`".*"`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.accessKey|string|`""`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.defaultValue|string|`""`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.alt|string|`""`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.tabIndex|string|`""`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
|
||||
### Toggle <a name="Toggle"></a>
|
||||
*Inheritence:* [Tag](#Tag)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
item.needQuestion|boolean|`False`|Whether Displaying Question Title.
|
||||
item.toggle_type|string|`"checkbox"`|The toggle type.
|
||||
item.newline|boolean|`False`|Whether Inserting New Line When Rendering.
|
||||
item.ripple|boolean|`True`|[see MDL attribute](https://getmdl.io/components/index.html#toggles-section)
|
||||
item.value|string|item.label|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
item.checked|boolean|`False`|[see html attribute](http://www.w3schools.com/tags/ref_attributes.asp)
|
||||
|
||||
### Checkbox <a name="Checkbox"></a>
|
||||
*Inheritence:* [Toggle](#Toggle)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"checkbox"**|The type of the tag.
|
||||
item.toggle_type|string|**"checkbox"**|The type of the toggle.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.label|string|Automactically Assigned|The label of the option.
|
||||
|
||||
### Switch <a name="Switch"></a>
|
||||
*Inheritence:* [Toggle](#Toggle)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"checkbox"**|The type of the tag.
|
||||
item.toggle_type|string|**"switch"**|The type of the toggle.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.label|string|Automactically Assigned|The label of the option.
|
||||
|
||||
### Radio <a name="Radio"></a>
|
||||
*Inheritence:* [Toggle](#Toggle)
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
*parent_id*|numeric|[Form.id](#FormId)|The id of its parent element.
|
||||
item|object|{}|An object of values for setting.
|
||||
item.type|string|**"radio"**|The type of the tag.
|
||||
item.toggle_type|string|**"radio"**|The type of the toggle.
|
||||
item.id|string|**Automactically Assigned**|The id of the tag.
|
||||
item.label|string|Automactically Assigned|The label of the option.
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
```javascript
|
||||
|
||||
function clickToSubmit() {
|
||||
document.getElementById("custom_id_1").value += "Customize actions when submit buttons is pressed.";
|
||||
alert("This is a test. Check Question #7 to see the effect.");
|
||||
return {"Customized output": "Customize actions when submit buttons is pressed."};
|
||||
}
|
||||
|
||||
var schema = {
|
||||
form: {form_title: 'Test #1', ribbon_bg: "img/ribbon.jpg", layout_color: "grey-300", content_bg_color: "grey-100"},
|
||||
"Question #1": {type: "short answer", correct: "Answer #1", required: true},
|
||||
"Question #2": {type: "password"},
|
||||
"Question #3": {type: "checkbox", labels: ["option1", "option2"], correctAnswers: ["option1", "option2"]},
|
||||
"Question #4": {type: "radio", labels: ["option1", "option2"], correctAnswers: ["option1"]},
|
||||
"Question #5": {type: "range"},
|
||||
"Question #6": {type: "dropdown"},
|
||||
"Question #7": {type: "long answer", question_description: "Some random contents", id: "custom_id_1"},
|
||||
"Question #8<p>Some random contents</p>": {type: "long answer", question_description: ""},
|
||||
"Question #9": {type: "file"},
|
||||
onSubmit: {label: "Submit", onclick: clickToSubmit}
|
||||
}
|
||||
|
||||
var form_trial = {
|
||||
type: 'form',
|
||||
schema: schema
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [form_trial],
|
||||
on_finish: function(){ jsPsych.data.displayData(); }
|
||||
});
|
||||
|
||||
```
|
||||
@ -74,6 +74,7 @@ Plugin | Description
|
||||
[jspsych‑categorize‑animation](jspsych-categorize-animation) | The subject responds to an animation and can be given feedback about their response.
|
||||
[jspsych‑categorize‑html](jspsych-categorize-html) | The subject responds to an HTML-formatted stimulus using the keyboard and can be given feedback about the correctness of their response.
|
||||
[jspsych‑categorize‑image](jspsych-categorize-image) | The subject responds to an image using the keyboard and can be given feedback about the correctness of their response.
|
||||
[jspsych‑cloze](jspsych-cloze) | Plugin for displaying a cloze test and checking participants answers against a correct solution.
|
||||
[jspsych‑external‑html](jspsych-external-html) | Displays an external HTML page (such as a consent form) and lets the subject respond by clicking a button or pressing a key. Plugin can validate their response, which is useful for making sure that a subject has granted consent before starting the experiment.
|
||||
[jspsych‑free‑sort](jspsych-free-sort) | Displays a set of images on the screen in random locations. Subjects can click and drag the images to move them around the screen. Records all the moves made by the subject, so the sequence of moves can be recovered from the data.
|
||||
[jspsych‑fullscreen](jspsych-fullscreen) | Toggles the experiment in and out of fullscreen mode.
|
||||
@ -86,18 +87,21 @@ Plugin | Description
|
||||
[jspsych‑image‑keyboard‑response](jspsych-image-keyboard-response) | Display an image and allow the subject to respond by pressing a key.
|
||||
[jspsych‑image‑slider‑response](jspsych-image-slider-response) | Display an image and allow the subject to respond by moving a slider to indicate a value.
|
||||
[jspsych‑instructions](jspsych-instructions) | For displaying instructions to the subject. Allows the subject to navigate between pages of instructions using keys or buttons.
|
||||
[jspsych‑RDK](jspsych-RDK) | This plugin displays a Random Dot Kinematogram (RDK) and allows the subject to report the primary direction of motion by pressing a key on the keyboard.
|
||||
[jspsych‑rdk](jspsych-rdk) | This plugin displays a Random Dot Kinematogram (RDK) and allows the subject to report the primary direction of motion by pressing a key on the keyboard.
|
||||
[jspsych‑reconstruction](jspsych-reconstruction) | The subject interacts with a stimulus by modifying a parameter of the stimulus and observing the change in the stimulus in real-time.
|
||||
[jspsych‑resize](jspsych-resize) | Calibrate the display so that materials display with a known physical size.
|
||||
[jspsych‑same‑different‑html](jspsych-same-different-html) | A same-different judgment task. An HTML-formatted stimulus is shown, followed by a brief gap, and then another stimulus is shown. The subject indicates whether the stimuli are the same or different.
|
||||
[jspsych‑same‑different‑image](jspsych-same-different-image) | A same-different judgment task. An image is shown, followed by a brief gap, and then another stimulus is shown. The subject indicates whether the stimuli are the same or different.
|
||||
[jspsych‑serial‑reaction‑time](jspsych-serial-reaction-time) | A set of boxes are displayed on the screen and one of them changes color. The subject presses a key that corresponds to the different color box as fast as possible.
|
||||
[jspsych‑serial‑reaction‑time‑mouse](jspsych-serial-reaction-time-mouse) | A set of boxes are displayed on the screen and one of them changes color. The subjects clicks the box that changed color as fast as possible.
|
||||
[jspsych‑survey‑html‑form](jspsych-survey-html-form) | Renders a custom HTML form. Allows for mixing multiple kinds of form input.
|
||||
[jspsych‑survey‑likert](jspsych-survey-likert) | Displays likert-style questions.
|
||||
[jspsych‑survey‑multi‑choice](jspsych-survey-multi-choice) | Displays multiple choice questions with one answer allowed per question.
|
||||
[jspsych‑survey‑multi‑select](jspsych-survey-multi-select) | Displays multiple choice questions with multiple answes allowed per question.
|
||||
[jspsych‑survey‑text](jspsych-survey-text) | Shows a prompt with a text box. The subject writes a response and then submits by clicking a button.
|
||||
[jspsych‑video](jspsych-video) | Displays a video file and autoadvances to the next trial when the video is complete.
|
||||
[jspsych‑video‑button‑response](jspsych-video-button-response) | Displays a video file with many options for customizing playback. Subject responds to the video by pressing a button.
|
||||
[jspsych‑video‑keyboard‑response](jspsych-video-keyboard-response) | Displays a video file with many options for customizing playback. Subject responds to the video by pressing a key.
|
||||
[jspsych‑video‑slider‑response](jspsych-video-slider-response) | Displays a video file with many options for customizing playback. Subject responds to the video by moving a slider.
|
||||
[jspsych‑visual‑search‑circle](jspsych-visual-search-circle) | A customizable visual-search task modelled after [Wang, Cavanagh, & Green (1994)](http://dx.doi.org/10.3758/BF03206946). The subject indicates whether or not a target is present among a set of distractors. The stimuli are displayed in a circle, evenly-spaced, equidistant from a fixation point.
|
||||
[jspsych‑vsl‑animate‑occlusion](jspsych-vsl-animate-occlusion) | A visual statistical learning paradigm based on [Fiser & Aslin (2002)](http://dx.doi.org/10.1037//0278-7393.28.3.458). A sequence of stimuli are shown in an oscillatory motion. An occluding rectangle is in the center of the display, and the stimuli change when they are behind the rectangle.
|
||||
[jspsych‑vsl‑grid‑scene](jspsych-vsl-grid-scene) | A visual statistical learning paradigm based on [Fiser & Aslin (2001)](http://dx.doi.org/10.1111/1467-9280.00392). A scene made up of individual stimuli arranged in a grid is shown. This plugin can also generate the HTML code to render the stimuli for use in other plugins.
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="../jspsych.js"></script>
|
||||
<script src="../plugins/jspsych-RDK.js"></script>
|
||||
<script src="../plugins/jspsych-rdk.js"></script>
|
||||
<link rel="stylesheet" href="../css/jspsych.css"></link>
|
||||
</head>
|
||||
<body></body>
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
|
||||
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
|
||||
<script src="../jspsych.js"></script>
|
||||
<script src="../plugins/jspsych-form.js"></script>
|
||||
<script src="../plugins/jspsych-text.js"></script>
|
||||
<link rel="stylesheet" href="../css/jspsych.css"></script>
|
||||
|
||||
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>-->
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
|
||||
function clickToSubmit() {
|
||||
alert("This is a test. Check Question #7 to see the effect.");
|
||||
document.getElementById("custom_id_1").value += "Customize actions when submit buttons is pressed.";
|
||||
return {"Customized output": "Customize actions when submit buttons is pressed."};
|
||||
}
|
||||
|
||||
var schema = {
|
||||
form: {form_title: 'Test #1'}, // , ribbon_bg: "img/ribbon.jpg", layout_color: "grey-300", content_bg_color: "grey-100"},
|
||||
"Question #1": {type: "short answer", correct: "Answer #1", required: true},
|
||||
"Question #2": {type: "password"},
|
||||
"Question #3": {type: "checkbox", labels: ["option1", "option2"], correctAnswers: ["value1", "value2"], values:["value1", "value2"]},
|
||||
"Question #4": {type: "radio", labels: ["option1", "option2"], correctAnswers: ["option1"]},
|
||||
"Question #5": {type: "range"},
|
||||
"Question #6": {type: "dropdown"},
|
||||
"Question #7": {type: "long answer", question_description: "Some random contents", id: "custom_id_1"},
|
||||
"Question #8<p>Some random contents</p>": {type: "long answer", question_description: ""},
|
||||
onSubmit: {label: "Submit", onclick: clickToSubmit}
|
||||
}
|
||||
|
||||
var text_trial = {
|
||||
type: 'html-keyboard-response',
|
||||
stimulus: 'Press any key to view form.'
|
||||
}
|
||||
|
||||
var form_trial = {
|
||||
type: 'form',
|
||||
schema: schema
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [text_trial, form_trial],
|
||||
on_finish: function(){ jsPsych.data.displayData(); }
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -60,6 +60,7 @@ pages:
|
||||
- 'jspsych-categorize-animation': 'plugins/jspsych-categorize-animation.md'
|
||||
- 'jspsych-categorize-html': 'plugins/jspsych-categorize-html.md'
|
||||
- 'jspsych-categorize-image': 'plugins/jspsych-categorize-image.md'
|
||||
- 'jspsych-cloze' : 'plugins/jspsych-close.md'
|
||||
- 'jspsych-external-html': 'plugins/jspsych-external-html.md'
|
||||
- 'jspsych-free-sort': 'plugins/jspsych-free-sort.md'
|
||||
- 'jspsych-fullscreen': 'plugins/jspsych-fullscreen.md'
|
||||
@ -79,11 +80,14 @@ pages:
|
||||
- 'jspsych-same-different-image': 'plugins/jspsych-same-different-image.md'
|
||||
- 'jspsych-serial-reaction-time': 'plugins/jspsych-serial-reaction-time.md'
|
||||
- 'jspsych-serial-reaction-time-mouse': 'plugins/jspsych-serial-reaction-time-mouse.md'
|
||||
- 'jspsych-survey-html-form' : 'plugins/jspsych-survey-html-form.md'
|
||||
- 'jspsych-survey-likert': 'plugins/jspsych-survey-likert.md'
|
||||
- 'jspsych-survey-multi-choice': 'plugins/jspsych-survey-multi-choice.md'
|
||||
- 'jspsych-survey-multi-select': 'plugins/jspsych-survey-multi-select.md'
|
||||
- 'jspsych-survey-text': 'plugins/jspsych-survey-text.md'
|
||||
- 'jspsych-video': 'plugins/jspsych-video.md'
|
||||
- 'jspsych-video-button-response': 'plugins/jspsych-video-button-response.md'
|
||||
- 'jspsych-video-keyboard-response': 'plugins/jspsych-video-keyboard-response.md'
|
||||
- 'jspsych-video-slider-response': 'plugins/jspsych-slider-response.md'
|
||||
- 'jspsych-visual-search-circle': 'plugins/jspsych-visual-search-circle.md'
|
||||
- 'jspsych-vsl-animate-occlusion': 'plugins/jspsych-vsl-animate-occlusion.md'
|
||||
- 'jspsych-vsl-grid-scene': 'plugins/jspsych-vsl-grid-scene.md'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user